function useStyleConfig(componentKey, props, placeholderSelectors, internalStyles) {
  const theme = useTheme()

  // Get the component style object from the theme
  const componentStyles = get(theme, `components.${componentKey}`) || {}

  // Merges the theme styles with the modifiers/props (appearance, size, etc)
  const mergedStyles = useMergedStyles(theme, props, componentStyles, internalStyles)

  // Resolve theme token strings found throughout the style object
  const styles = useMemo(() => resolveThemeTokens(theme, mergedStyles), [theme, mergedStyles])

  // Finally, split up the styles based which ones Box supports and the rest construct an inline style object
  return useBoxProps(styles, placeholderSelectors)
}
Takes a styleConfig object and outputs `boxProps` that can be spread on a Box component
@param {string} componentKey the name of the component in the theme
@param {StyleModifiers} props props that modify the resulting visual style (e.g. `size` or `appearance`)
@param {PseudoSelectors} placeholderSelectors mapping for the component between states and actual pseudo selectors
@param {import('ui-box').BoxCssProps<CssProps>} [internalStyles] additional styles that are specified internally, separate from the visual styles
@returns {{ selectors: import('ui-box').EnhancerProps['selectors'], style: import('react').CSSProperties } & import('ui-box').EnhancerProps}