@mui/system 6.0.0-alpha.1 → 6.0.0-alpha.11

package/node/createStyled/createStyled.js

@@ -7,20 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = createStyled;
 exports.shouldForwardProp = shouldForwardProp;
 exports.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
 var _deepmerge = require("@mui/utils/deepmerge");
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
-const _excluded = ["ownerState"],
-  _excluded2 = ["variants"],
-  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
-/* eslint-disable no-underscore-dangle */
 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; }
+/* eslint-disable no-underscore-dangle */
+
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -58,31 +54,35 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
-  let {
-      ownerState
-    } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
-    ownerState
-  }, props)) : callableStyle;
+function processStyleArg(callableStyle, {
+  ownerState,
+  ...props
+}) {
+  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle({
+    ownerState,
+    ...props
+  }) : callableStyle;
   if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
-      ownerState
-    }, props)));
+    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, {
+      ownerState,
+      ...props
+    }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2);
+      variants = [],
+      ...otherStyles
+    } = resolvedStylesArg;
     let result = otherStyles;
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props((0, _extends2.default)({
-          ownerState
-        }, props, ownerState));
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -94,9 +94,7 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
-          ownerState
-        }, props, ownerState)) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;
@@ -111,27 +109,29 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
-      theme: resolveTheme((0, _extends2.default)({}, props, {
+    return (0, _styleFunctionSx.default)({
+      ...props,
+      theme: resolveTheme({
+        ...props,
         defaultTheme,
         themeId
-      }))
-    }));
+      })
+    });
   };
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
     (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
     const {
-        name: componentName,
-        slot: componentSlot,
-        skipVariantsResolver: inputSkipVariantsResolver,
-        skipSx: inputSkipSx,
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
-      } = inputOptions,
-      options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      skipSx: inputSkipSx,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
+      ...options
+    } = inputOptions;
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -160,22 +160,24 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({
+    const defaultStyledResolver = (0, _styledEngine.default)(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
+      label,
+      ...options
+    });
     const transformStyleArg = stylesArg => {
       // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+        return props => processStyleArg(stylesArg, {
+          ...props,
           theme: resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
           })
-        }));
+        });
       }
       return stylesArg;
     };
@@ -184,10 +186,11 @@ function createStyled(input = {}) {
       const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme((0, _extends2.default)({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
             return null;
           }
@@ -195,9 +198,10 @@ function createStyled(input = {}) {
           const resolvedStyleOverrides = {};
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, {
+              ...props,
               theme
-            }));
+            });
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -205,16 +209,18 @@ function createStyled(input = {}) {
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
           var _theme$components;
-          const theme = resolveTheme((0, _extends2.default)({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
           return processStyleArg({
             variants: themeVariants
-          }, (0, _extends2.default)({}, props, {
+          }, {
+            ...props,
             theme
-          }));
+          });
         });
       }
       if (!skipSx) {

package/node/createTheme/applyStyles.js

@@ -8,7 +8,7 @@ exports.default = applyStyles;
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/node/createTheme/createBreakpoints.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.breakpointKeys = void 0;
 exports.default = createBreakpoints;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -20,32 +16,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return (0, _extends2.default)({}, acc, {
+    return {
+      ...acc,
       [obj.key]: obj.val
-    });
+    };
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   const {
-      // The breakpoint **start** at this value.
-      // For instance with the first breakpoint xs: [xs, sm).
-      values = {
-        xs: 0,
-        // phone
-        sm: 600,
-        // tablet
-        md: 900,
-        // small laptop
-        lg: 1200,
-        // desktop
-        xl: 1536 // large screen
-      },
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536 // large screen
+    },
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -77,7 +74,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return (0, _extends2.default)({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -85,6 +82,7 @@ function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
 }

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 === '@' || 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 || 0 : +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>').replace('and', 'or');
+      }
+      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,13 @@ 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();
     }
@@ -154,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];
           }
@@ -310,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/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"));