@mui/system 5.10.16 → 5.11.0

package/legacy/cssGrid.js

@@ -3,6 +3,9 @@ import compose from './compose';
 import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
 import responsivePropType from './responsivePropType';
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var gap = function gap(props) {
   if (props.gap !== undefined && props.gap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
@@ -19,6 +22,9 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: responsivePropType
 } : {};
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var columnGap = function columnGap(props) {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
@@ -35,6 +41,9 @@ columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: responsivePropType
 } : {};
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var rowGap = function rowGap(props) {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');

package/legacy/cssVars/createCssVarsProvider.js

@@ -8,6 +8,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
+import { useTheme as muiUseTheme } from '@mui/private-theming';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -68,8 +69,15 @@ export default function createCssVarsProvider(options) {
       _ref$colorSchemeSelec = _ref.colorSchemeSelector,
       colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
       _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
-      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
+      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera,
+      _ref$disableNestedCon = _ref.disableNestedContext,
+      disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
+      _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
+      disableStyleSheetGeneration = _ref$disableStyleShee === void 0 ? false : _ref$disableStyleShee;
     var hasMounted = React.useRef(false);
+    var upperTheme = muiUseTheme();
+    var ctx = React.useContext(ColorSchemeContext);
+    var nested = !!ctx && !disableNestedContext;
     var _themeProp$colorSchem = themeProp.colorSchemes,
       colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
       _themeProp$components = themeProp.components,
@@ -90,13 +98,19 @@ export default function createCssVarsProvider(options) {
         defaultMode: defaultMode,
         storageWindow: storageWindow
       }),
-      mode = _useCurrentColorSchem.mode,
+      stateMode = _useCurrentColorSchem.mode,
       setMode = _useCurrentColorSchem.setMode,
       systemMode = _useCurrentColorSchem.systemMode,
       lightColorScheme = _useCurrentColorSchem.lightColorScheme,
       darkColorScheme = _useCurrentColorSchem.darkColorScheme,
-      colorScheme = _useCurrentColorSchem.colorScheme,
+      stateColorScheme = _useCurrentColorSchem.colorScheme,
       setColorScheme = _useCurrentColorSchem.setColorScheme;
+    var mode = stateMode;
+    var colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
     var calculatedMode = function () {
       if (!mode) {
         // This scope occurs on the server
@@ -238,19 +252,31 @@ export default function createCssVarsProvider(options) {
         allColorSchemes: allColorSchemes
       };
     }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/_jsx(GlobalStyles, {
-        styles: _defineProperty({}, colorSchemeSelector, rootCss)
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    var shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    var element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(GlobalStyles, {
+          styles: _defineProperty({}, colorSchemeSelector, rootCss)
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
@@ -281,6 +307,16 @@ export default function createCssVarsProvider(options) {
      * The initial mode used.
      */
     defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.16
+/** @license MUI v5.11.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,8 +26,7 @@ export * from './spacing';
 export { default as style, getPath, getStyleValue } from './style';
 export { default as typography } from './typography';
 export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
-export { default as experimental_sx } from './sx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/legacy/palette.js

@@ -1,6 +1,6 @@
 import style from './style';
 import compose from './compose';
-function transform(value, userValue) {
+export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
@@ -9,18 +9,18 @@ function transform(value, userValue) {
 export var color = style({
   prop: 'color',
   themeKey: 'palette',
-  transform: transform
+  transform: paletteTransform
 });
 export var bgcolor = style({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
-  transform: transform
+  transform: paletteTransform
 });
 export var backgroundColor = style({
   prop: 'backgroundColor',
   themeKey: 'palette',
-  transform: transform
+  transform: paletteTransform
 });
 var palette = compose(color, bgcolor, backgroundColor);
 export default palette;

package/legacy/sizing.js

@@ -1,12 +1,12 @@
 import style from './style';
 import compose from './compose';
 import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
-function transform(value) {
+export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? "".concat(value * 100, "%") : value;
 }
 export var width = style({
   prop: 'width',
-  transform: transform
+  transform: sizingTransform
 });
 export var maxWidth = function maxWidth(props) {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
@@ -14,7 +14,7 @@ export var maxWidth = function maxWidth(props) {
       var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
       var breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || breakpointsValues[propValue];
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -24,29 +24,29 @@ export var maxWidth = function maxWidth(props) {
 maxWidth.filterProps = ['maxWidth'];
 export var minWidth = style({
   prop: 'minWidth',
-  transform: transform
+  transform: sizingTransform
 });
 export var height = style({
   prop: 'height',
-  transform: transform
+  transform: sizingTransform
 });
 export var maxHeight = style({
   prop: 'maxHeight',
-  transform: transform
+  transform: sizingTransform
 });
 export var minHeight = style({
   prop: 'minHeight',
-  transform: transform
+  transform: sizingTransform
 });
 export var sizeWidth = style({
   prop: 'size',
   cssProperty: 'width',
-  transform: transform
+  transform: sizingTransform
 });
 export var sizeHeight = style({
   prop: 'size',
   cssProperty: 'height',
-  transform: transform
+  transform: sizingTransform
 });
 export var boxSizing = style({
   prop: 'boxSizing'

package/legacy/spacing.js

@@ -45,8 +45,8 @@ var getCssProperties = memoize(function (prop) {
     return property + dir;
   }) : [property + direction];
 });
-var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+export var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+export var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;

package/legacy/style.js

@@ -35,7 +35,7 @@ export function getStyleValue(themeMapping, transform, propValueFinal) {
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
   return value;
 }
@@ -44,7 +44,8 @@ function style(options) {
     _options$cssProperty = options.cssProperty,
     cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
     themeKey = options.themeKey,
-    transform = options.transform;
+    transform = options.transform; // false positive
+  // eslint-disable-next-line react/function-component-definition
   var fn = function fn(props) {
     if (props[prop] == null) {
       return null;

package/legacy/styleFunctionSx/defaultSxConfig.js

@@ -0,0 +1,286 @@
+import { padding, margin } from '../spacing';
+import { borderRadius, borderTransform } from '../borders';
+import { gap, rowGap, columnGap } from '../cssGrid';
+import { paletteTransform } from '../palette';
+import { maxWidth, sizingTransform } from '../sizing';
+var defaultSxConfig = {
+  // borders
+  border: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderTop: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderRight: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderBottom: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderLeft: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderColor: {
+    themeKey: 'palette'
+  },
+  borderTopColor: {
+    themeKey: 'palette'
+  },
+  borderRightColor: {
+    themeKey: 'palette'
+  },
+  borderBottomColor: {
+    themeKey: 'palette'
+  },
+  borderLeftColor: {
+    themeKey: 'palette'
+  },
+  borderRadius: {
+    themeKey: 'shape.borderRadius',
+    style: borderRadius
+  },
+  // palette
+  color: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  bgcolor: {
+    themeKey: 'palette',
+    cssProperty: 'backgroundColor',
+    transform: paletteTransform
+  },
+  backgroundColor: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  // spacing
+  p: {
+    style: padding
+  },
+  pt: {
+    style: padding
+  },
+  pr: {
+    style: padding
+  },
+  pb: {
+    style: padding
+  },
+  pl: {
+    style: padding
+  },
+  px: {
+    style: padding
+  },
+  py: {
+    style: padding
+  },
+  padding: {
+    style: padding
+  },
+  paddingTop: {
+    style: padding
+  },
+  paddingRight: {
+    style: padding
+  },
+  paddingBottom: {
+    style: padding
+  },
+  paddingLeft: {
+    style: padding
+  },
+  paddingX: {
+    style: padding
+  },
+  paddingY: {
+    style: padding
+  },
+  paddingInline: {
+    style: padding
+  },
+  paddingInlineStart: {
+    style: padding
+  },
+  paddingInlineEnd: {
+    style: padding
+  },
+  paddingBlock: {
+    style: padding
+  },
+  paddingBlockStart: {
+    style: padding
+  },
+  paddingBlockEnd: {
+    style: padding
+  },
+  m: {
+    style: margin
+  },
+  mt: {
+    style: margin
+  },
+  mr: {
+    style: margin
+  },
+  mb: {
+    style: margin
+  },
+  ml: {
+    style: margin
+  },
+  mx: {
+    style: margin
+  },
+  my: {
+    style: margin
+  },
+  margin: {
+    style: margin
+  },
+  marginTop: {
+    style: margin
+  },
+  marginRight: {
+    style: margin
+  },
+  marginBottom: {
+    style: margin
+  },
+  marginLeft: {
+    style: margin
+  },
+  marginX: {
+    style: margin
+  },
+  marginY: {
+    style: margin
+  },
+  marginInline: {
+    style: margin
+  },
+  marginInlineStart: {
+    style: margin
+  },
+  marginInlineEnd: {
+    style: margin
+  },
+  marginBlock: {
+    style: margin
+  },
+  marginBlockStart: {
+    style: margin
+  },
+  marginBlockEnd: {
+    style: margin
+  },
+  // display
+  displayPrint: {
+    cssProperty: false,
+    transform: function transform(value) {
+      return {
+        '@media print': {
+          display: value
+        }
+      };
+    }
+  },
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {
+    style: gap
+  },
+  rowGap: {
+    style: rowGap
+  },
+  columnGap: {
+    style: columnGap
+  },
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {
+    themeKey: 'zIndex'
+  },
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {
+    themeKey: 'shadows'
+  },
+  // sizing
+  width: {
+    transform: sizingTransform
+  },
+  maxWidth: {
+    style: maxWidth
+  },
+  minWidth: {
+    transform: sizingTransform
+  },
+  height: {
+    transform: sizingTransform
+  },
+  maxHeight: {
+    transform: sizingTransform
+  },
+  minHeight: {
+    transform: sizingTransform
+  },
+  boxSizing: {},
+  // typography
+  fontFamily: {
+    themeKey: 'typography'
+  },
+  fontSize: {
+    themeKey: 'typography'
+  },
+  fontStyle: {
+    themeKey: 'typography'
+  },
+  fontWeight: {
+    themeKey: 'typography'
+  },
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {
+    cssProperty: false,
+    themeKey: 'typography'
+  }
+};
+export default defaultSxConfig;

package/legacy/styleFunctionSx/extendSxProp.js

@@ -2,14 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { isPlainObject } from '@mui/utils';
-import { propToStyleFunction } from '../getThemeValue';
+import defaultSxConfig from './defaultSxConfig';
 var splitProps = function splitProps(props) {
+  var _props$theme$unstable, _props$theme;
   var result = {
     systemProps: {},
     otherProps: {}
   };
+  var config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
   Object.keys(props).forEach(function (prop) {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
     } else {
       result.otherProps[prop] = props[prop];

package/legacy/styleFunctionSx/index.js

@@ -1,3 +1,4 @@
 export { default } from './styleFunctionSx';
 export { unstable_createStyleFunctionSx } from './styleFunctionSx';
-export { default as extendSxProp } from './extendSxProp';
+export { default as extendSxProp } from './extendSxProp';
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -1,8 +1,10 @@
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import merge from '../merge';
-import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
+import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys() {
   for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
     objects[_key] = arguments[_key];
@@ -21,28 +23,50 @@ function callIfFn(maybeFn, arg) {
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function unstable_createStyleFunctionSx() {
-  var styleFunctionMapping = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultStyleFunctionMapping;
-  var propToStyleFunction = Object.keys(styleFunctionMapping).reduce(function (acc, styleFnName) {
-    styleFunctionMapping[styleFnName].filterProps.forEach(function (propName) {
-      acc[propName] = styleFunctionMapping[styleFnName];
-    });
-    return acc;
-  }, {});
-  function getThemeValue(prop, value, theme) {
-    var _inputProps;
-    var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
-    var styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
+  function getThemeValue(prop, val, theme, config) {
+    var _props;
+    var props = (_props = {}, _defineProperty(_props, prop, val), _defineProperty(_props, "theme", theme), _props);
+    var options = config[prop];
+    if (!options) {
+      return _defineProperty({}, prop, val);
+    }
+    var _options$cssProperty = options.cssProperty,
+      cssProperty = _options$cssProperty === void 0 ? prop : _options$cssProperty,
+      themeKey = options.themeKey,
+      transform = options.transform,
+      style = options.style;
+    if (val == null) {
+      return null;
+    }
+    var themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    var styleFromPropValue = function styleFromPropValue(propValueFinal) {
+      var value = getValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return _defineProperty({}, cssProperty, value);
+    };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
-    var _ref2 = props || {},
-      sx = _ref2.sx,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? {} : _ref2$theme;
+    var _theme$unstable_sxCon;
+    var _ref3 = props || {},
+      sx = _ref3.sx,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
 
+    var config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
@@ -66,8 +90,8 @@ export function unstable_createStyleFunctionSx() {
         var value = callIfFn(sxObject[styleKey], theme);
         if (value !== null && value !== undefined) {
           if (_typeof(value) === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
               var breakpointsValues = handleBreakpoints({
                 theme: theme
@@ -84,7 +108,7 @@ export function unstable_createStyleFunctionSx() {
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });