@mui/system 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/createTheme/createTheme.js

@@ -5,24 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
 var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
 var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
 var _applyStyles = _interopRequireDefault(require("./applyStyles"));
-const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-      breakpoints: breakpointsInput = {},
-      palette: paletteInput = {},
-      spacing: spacingInput,
-      shape: shapeInput = {}
-    } = options,
-    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
   const spacing = (0, _createSpacing.default)(spacingInput);
   let muiTheme = (0, _deepmerge.default)({
@@ -30,15 +28,23 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: (0, _extends2.default)({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: (0, _extends2.default)({}, _shape.default, shapeInput)
+    shape: {
+      ..._shape.default,
+      ...shapeInput
+    }
   }, other);
+  muiTheme = (0, _cssContainerQueries.default)(muiTheme);
   muiTheme.applyStyles = _applyStyles.default;
   muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ..._defaultSxConfig.default,
+    ...(other == null ? void 0 : other.unstable_sxConfig)
+  };
   muiTheme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({
       sx: props,

package/node/cssContainerQueries/cssContainerQueries.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = cssContainerQueries;
+exports.getContainerQuery = getContainerQuery;
+exports.isCqShorthand = isCqShorthand;
+exports.sortContainerQueries = sortContainerQueries;
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+/**
+ * For using in `sx` prop to sort the breakpoint from low to high.
+ * Note: this function does not work and will not support multiple units.
+ *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
+ *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ */
+function sortContainerQueries(theme, css) {
+  if (!theme.containerQueries) {
+    return css;
+  }
+  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
+    var _a$match, _b$match;
+    const regex = /min-width:\s*([0-9.]+)/;
+    return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
+  });
+  if (!sorted.length) {
+    return css;
+  }
+  return sorted.reduce((acc, key) => {
+    const value = css[key];
+    delete acc[key];
+    acc[key] = value;
+    return acc;
+  }, {
+    ...css
+  });
+}
+function isCqShorthand(breakpointKeys, value) {
+  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+}
+function getContainerQuery(theme, shorthand) {
+  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  if (!matches) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(21, `(${shorthand})`));
+    }
+    return null;
+  }
+  const [, containerQuery, containerName] = matches;
+  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  return theme.containerQueries(containerName).up(value);
+}
+function cssContainerQueries(themeInput) {
+  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
+  function attachCq(node, name) {
+    node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
+    node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
+    node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
+    node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
+    node.not = (...args) => {
+      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
+      if (result.includes('not all and')) {
+        // `@container` does not work with `not all and`, so need to invert the logic
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+      }
+      return result;
+    };
+  }
+  const node = {};
+  const containerQueries = name => {
+    attachCq(node, name);
+    return node;
+  };
+  attachCq(containerQueries);
+  return {
+    ...themeInput,
+    containerQueries
+  };
+}

package/node/cssContainerQueries/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.default;
+  }
+});
+Object.defineProperty(exports, "getContainerQuery", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.getContainerQuery;
+  }
+});
+Object.defineProperty(exports, "isCqShorthand", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.isCqShorthand;
+  }
+});
+Object.defineProperty(exports, "sortContainerQueries", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.sortContainerQueries;
+  }
+});
+var _cssContainerQueries = _interopRequireWildcard(require("./cssContainerQueries"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/cssVars/createCssVarsProvider.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DISABLE_CSS_TRANSITION = void 0;
 exports.default = createCssVarsProvider;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,7 +15,6 @@ var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const DISABLE_CSS_TRANSITION = exports.DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -76,13 +73,12 @@ function createCssVarsProvider(options) {
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
-    const _ref = scopedTheme || themeProp,
-      {
-        colorSchemes = {},
-        components = {},
-        cssVarPrefix
-      } = _ref,
-      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    const {
+      colorSchemes = {},
+      components = {},
+      cssVarPrefix,
+      ...restThemeProp
+    } = scopedTheme || themeProp;
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -137,12 +133,16 @@ function createCssVarsProvider(options) {
     const themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
 
     // 3. Start composing the theme object
-    const theme = (0, _extends2.default)({}, restThemeProp, {
+    const theme = {
+      ...restThemeProp,
       components,
       colorSchemes,
       cssVarPrefix,
       vars: themeVars
-    });
+    };
+    if (typeof theme.generateSpacing === 'function') {
+      theme.spacing = theme.generateSpacing();
+    }
 
     // 4. Resolve the color scheme and merge it to the theme
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -151,7 +151,10 @@ function createCssVarsProvider(options) {
         Object.keys(scheme).forEach(schemeKey => {
           if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = {
+              ...theme[schemeKey],
+              ...scheme[schemeKey]
+            };
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -307,14 +310,15 @@ function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
+  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey
-  }, params));
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
   return {
     CssVarsProvider,
     useColorScheme,

package/node/cssVars/createCssVarsTheme.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
 function createCssVarsTheme(theme) {
   const output = theme;
-  const result = (0, _prepareCssVars.default)(output, (0, _extends2.default)({}, theme, {
+  const result = (0, _prepareCssVars.default)(output, {
+    ...theme,
     prefix: theme.cssVarPrefix
-  }));
+  });
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;

package/node/cssVars/cssVarsParser.js

@@ -121,11 +121,12 @@ function cssVarsParser(theme, options) {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        const resolvedValue = getCssValue(keys, value);
         Object.assign(css, {
-          [cssVar]: getCssValue(keys, value)
+          [cssVar]: resolvedValue
         });
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
-        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${value})`, arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${resolvedValue})`, arrayKeys);
       }
     }
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths

package/node/cssVars/index.js

@@ -29,7 +29,14 @@ Object.defineProperty(exports, "prepareCssVars", {
     return _prepareCssVars.default;
   }
 });
+Object.defineProperty(exports, "prepareTypographyVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareTypographyVars.default;
+  }
+});
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
 var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
 var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));

package/node/cssVars/prepareCssVars.js

@@ -5,24 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-const _excluded = ["getSelector"],
-  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
-function prepareCssVars(theme, _ref = {}) {
-  let {
-      getSelector
-    } = _ref,
-    parserConfig = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+function prepareCssVars(theme, {
+  getSelector,
+  ...parserConfig
+} = {}) {
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {},
-      defaultColorScheme = 'light'
-    } = theme,
-    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded2);
+    colorSchemes = {},
+    components,
+    defaultColorScheme = 'light',
+    ...otherTheme
+  } = theme;
   const {
     vars: rootVars,
     css: rootCss,
@@ -31,9 +26,9 @@ function prepareCssVars(theme, _ref = {}) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: defaultScheme
-    } = colorSchemes,
-    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, [defaultColorScheme].map(_toPropertyKey2.default));
+    [defaultColorScheme]: defaultScheme,
+    ...otherColorSchemes
+  } = colorSchemes;
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
@@ -60,7 +55,9 @@ function prepareCssVars(theme, _ref = {}) {
     };
   }
   const generateThemeVars = () => {
-    let vars = (0, _extends2.default)({}, rootVars);
+    let vars = {
+      ...rootVars
+    };
     Object.entries(colorSchemesMap).forEach(([, {
       vars: schemeVars
     }]) => {
@@ -74,26 +71,34 @@ function prepareCssVars(theme, _ref = {}) {
     function insertStyleSheet(selector, css) {
       if (Object.keys(css).length) {
         stylesheets.push(typeof selector === 'string' ? {
-          [selector]: (0, _extends2.default)({}, css)
+          [selector]: {
+            ...css
+          }
         } : selector);
       }
     }
-    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, (0, _extends2.default)({}, rootCss))) || ':root', rootCss);
+    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, {
+      ...rootCss
+    })) || ':root', rootCss);
     const {
-        [colorScheme]: defaultSchemeVal
-      } = colorSchemesMap,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(colorSchemesMap, [colorScheme].map(_toPropertyKey2.default));
+      [colorScheme]: defaultSchemeVal,
+      ...rest
+    } = colorSchemesMap;
     if (defaultSchemeVal) {
       // default color scheme has to come before other color schemes
       const {
         css
       } = defaultSchemeVal;
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, (0, _extends2.default)({}, css))) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, {
+        ...css
+      })) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
     }
     Object.entries(rest).forEach(([key, {
       css
     }]) => {
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, (0, _extends2.default)({}, css))) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, {
+        ...css
+      })) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
     });
     return stylesheets;
   };

package/node/cssVars/prepareTypographyVars.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = prepareTypographyVars;
+function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
+}

package/node/cssVars/useCurrentColorScheme.js

@@ -1,14 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useCurrentColorScheme;
 exports.getColorScheme = getColorScheme;
 exports.getSystemMode = getSystemMode;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -94,10 +92,11 @@ function useCurrentColorScheme(options) {
       } catch (e) {
         // Unsupported
       }
-      return (0, _extends2.default)({}, currentState, {
+      return {
+        ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      });
+      };
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
@@ -109,17 +108,20 @@ function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return (0, _extends2.default)({}, currentState, {
+        return {
+          ...currentState,
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
-        });
+        };
       });
     } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = (0, _extends2.default)({}, currentState);
+          const newState = {
+            ...currentState
+          };
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -138,7 +140,9 @@ function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = (0, _extends2.default)({}, currentState);
+        const newState = {
+          ...currentState
+        };
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -178,9 +182,10 @@ function useCurrentColorScheme(options) {
         if (currentState.systemMode === systemMode) {
           return currentState;
         }
-        return (0, _extends2.default)({}, currentState, {
+        return {
+          ...currentState,
           systemMode
-        });
+        };
       });
     }
   }, [state.mode]);
@@ -232,9 +237,10 @@ function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return (0, _extends2.default)({}, state, {
+  return {
+    ...state,
     colorScheme,
     setMode,
     setColorScheme
-  });
+  };
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.0
+ * @mui/system v6.0.0-alpha.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -22,6 +22,7 @@ var _exportNames = {
   handleBreakpoints: true,
   mergeBreakpointsInOrder: true,
   unstable_resolveBreakpointValues: true,
+  cssContainerQueries: true,
   compose: true,
   display: true,
   flexbox: true,
@@ -174,6 +175,12 @@ Object.defineProperty(exports, "css", {
     return _styledEngine.css;
   }
 });
+Object.defineProperty(exports, "cssContainerQueries", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.default;
+  }
+});
 Object.defineProperty(exports, "display", {
   enumerable: true,
   get: function () {
@@ -395,6 +402,7 @@ Object.keys(_borders).forEach(function (key) {
   });
 });
 var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
+var _cssContainerQueries = _interopRequireDefault(require("./cssContainerQueries"));
 var _compose = _interopRequireDefault(require("./compose"));
 var _display = _interopRequireDefault(require("./display"));
 var _flexbox = _interopRequireWildcard(require("./flexbox"));

package/node/propsToClassKey/propsToClassKey.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = propsToClassKey;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
-const _excluded = ["variant"];
 function isEmpty(string) {
   return string.length === 0;
 }
@@ -19,9 +17,9 @@ function isEmpty(string) {
  */
 function propsToClassKey(props) {
   const {
-      variant
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {

package/node/spacing/spacing.js

@@ -59,25 +59,29 @@ const paddingKeys = exports.paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'p
 const spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
-  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, false)) != null ? _getPath : defaultValue;
-  if (typeof themeSpacing === 'number') {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, true)) != null ? _getPath : defaultValue;
+  if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+    return val => {
+      if (typeof val === 'string') {
+        return val;
       }
       if (process.env.NODE_ENV !== 'production') {
-        if (typeof abs !== 'number') {
-          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
+        if (typeof val !== 'number') {
+          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${val}.`);
         }
       }
-      return themeSpacing * abs;
+      if (typeof themeSpacing === 'string') {
+        return `calc(${val} * ${themeSpacing})`;
+      }
+      return themeSpacing * val;
     };
   }
   if (Array.isArray(themeSpacing)) {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+    return val => {
+      if (typeof val === 'string') {
+        return val;
       }
+      const abs = Math.abs(val);
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
           console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
@@ -85,7 +89,14 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
           console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
         }
       }
-      return themeSpacing[abs];
+      const transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
+      }
+      if (typeof transformed === 'number') {
+        return -transformed;
+      }
+      return `-${transformed}`;
     };
   }
   if (typeof themeSpacing === 'function') {
@@ -103,15 +114,7 @@ function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-  const abs = Math.abs(propValue);
-  const transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-  return `-${transformed}`;
+  return transformer(propValue);
 }
 function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {

package/node/styleFunctionSx/defaultSxConfig.js

@@ -273,6 +273,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },