@mui/system 5.15.14 → 6.0.0-alpha.0

package/node/createBox/index.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createBox.default;
+  }
+});
+var _createBox = _interopRequireDefault(require("./createBox"));

package/{createStyled.js → node/createStyled/createStyled.js}

@@ -13,14 +13,14 @@ 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"));
+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 && Object.prototype.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; }
+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; }
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }

package/node/createStyled/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createStyled.default;
+  }
+});
+var _createStyled = _interopRequireWildcard(require("./createStyled"));
+Object.keys(_createStyled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _createStyled[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createStyled[key];
+    }
+  });
+});
+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/{esm → node}/createTheme/applyStyles.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = applyStyles;
 /**
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
@@ -56,7 +62,7 @@
  *   })
  *```
  */
-export default function applyStyles(key, styles) {
+function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
   if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {

package/{esm → node}/createTheme/createBreakpoints.js

@@ -1,9 +1,17 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
+"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.
-export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -12,14 +20,14 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return (0, _extends2.default)({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
-export default function createBreakpoints(breakpoints) {
+function createBreakpoints(breakpoints) {
   const {
       // The breakpoint **start** at this value.
       // For instance with the first breakpoint xs: [xs, sm).
@@ -37,7 +45,7 @@ export default function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -69,7 +77,7 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends({
+  return (0, _extends2.default)({
     keys,
     values: sortedValues,
     up,

package/{esm → node}/createTheme/createSpacing.js

@@ -1,9 +1,14 @@
-import { createUnarySpacing } from '../spacing';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createSpacing;
+var _spacing = require("../spacing");
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
 
-export default function createSpacing(spacingInput = 8) {
+function createSpacing(spacingInput = 8) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
@@ -12,7 +17,7 @@ export default function createSpacing(spacingInput = 8) {
   // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
   // Smaller components, such as icons, can align to a 4dp grid.
   // https://m2.material.io/design/layout/understanding-layout.html
-  const transform = createUnarySpacing({
+  const transform = (0, _spacing.createUnarySpacing)({
     spacing: spacingInput
   });
   const spacing = (...argsInput) => {

package/node/createTheme/createTheme.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _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);
+  const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
+  const spacing = (0, _createSpacing.default)(spacingInput);
+  let muiTheme = (0, _deepmerge.default)({
+    breakpoints,
+    direction: 'ltr',
+    components: {},
+    // Inject component definitions.
+    palette: (0, _extends2.default)({
+      mode: 'light'
+    }, paletteInput),
+    spacing,
+    shape: (0, _extends2.default)({}, _shape.default, shapeInput)
+  }, other);
+  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_sx = function sx(props) {
+    return (0, _styleFunctionSx.default)({
+      sx: props,
+      theme: this
+    });
+  };
+  return muiTheme;
+}
+var _default = exports.default = createTheme;

package/node/createTheme/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createTheme.default;
+  }
+});
+Object.defineProperty(exports, "private_createBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _createBreakpoints.default;
+  }
+});
+Object.defineProperty(exports, "unstable_applyStyles", {
+  enumerable: true,
+  get: function () {
+    return _applyStyles.default;
+  }
+});
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _applyStyles = _interopRequireDefault(require("./applyStyles"));

package/node/createTheme/shape.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const shape = {
+  borderRadius: 4
+};
+var _default = exports.default = shape;

package/{cssGrid.js → node/cssGrid/cssGrid.js}

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rowGap = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridTemplateAreas = exports.gridRow = exports.gridColumn = exports.gridAutoRows = exports.gridAutoFlow = exports.gridAutoColumns = exports.gridArea = exports.gap = exports.default = exports.columnGap = void 0;
-var _style = _interopRequireDefault(require("./style"));
-var _compose = _interopRequireDefault(require("./compose"));
-var _spacing = require("./spacing");
-var _breakpoints = require("./breakpoints");
-var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
+var _spacing = require("../spacing");
+var _breakpoints = require("../breakpoints");
+var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
 // false positive
 // eslint-disable-next-line react/function-component-definition
 const gap = props => {

package/node/cssGrid/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _cssGrid.default;
+  }
+});
+var _cssGrid = _interopRequireWildcard(require("./cssGrid"));
+Object.keys(_cssGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _cssGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cssGrid[key];
+    }
+  });
+});
+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/{esm → node}/cssVars/createCssVarsProvider.js

@@ -1,19 +1,27 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import deepmerge from '@mui/utils/deepmerge';
-import { GlobalStyles } from '@mui/styled-engine';
-import { useTheme as muiUseTheme } from '@mui/private-theming';
-import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
-import useCurrentColorScheme from './useCurrentColorScheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
-export default function createCssVarsProvider(options) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+var _styledEngine = require("@mui/styled-engine");
+var _privateTheming = require("@mui/private-theming");
+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}';
+function createCssVarsProvider(options) {
   const {
     themeId,
     /**
@@ -23,14 +31,13 @@ export default function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
-    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    resolveTheme,
-    excludeVariablesFromRoot
+    resolveTheme
   } = options;
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -42,11 +49,12 @@ export default function createCssVarsProvider(options) {
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
     if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _formatMuiErrorMessage2.default)(19));
     }
     return value;
   };
   function CssVarsProvider(props) {
+    var _restThemeProp$genera, _theme$generateStyleS;
     const {
       children,
       theme: themeProp = defaultTheme,
@@ -64,7 +72,7 @@ export default function createCssVarsProvider(options) {
       disableStyleSheetGeneration = false
     } = props;
     const hasMounted = React.useRef(false);
-    const upperTheme = muiUseTheme();
+    const upperTheme = (0, _privateTheming.useTheme)();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
@@ -72,13 +80,9 @@ export default function createCssVarsProvider(options) {
       {
         colorSchemes = {},
         components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
         cssVarPrefix
       } = _ref,
-      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
+      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -92,7 +96,7 @@ export default function createCssVarsProvider(options) {
       darkColorScheme,
       colorScheme: stateColorScheme,
       setColorScheme
-    } = useCurrentColorScheme({
+    } = (0, _useCurrentColorScheme.default)({
       supportedColorSchemes: allColorSchemes,
       defaultLightColorScheme,
       defaultDarkColorScheme,
@@ -129,38 +133,25 @@ export default function createCssVarsProvider(options) {
       return colorScheme;
     })();
 
-    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    const {
-      css: rootCss,
-      vars: rootVars
-    } = generateCssVars();
+    // 2. get the `vars` object that refers to the CSS custom properties
+    const themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
 
     // 3. Start composing the theme object
-    const theme = _extends({}, restThemeProp, {
+    const theme = (0, _extends2.default)({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
+      vars: themeVars
     });
 
-    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    //    The default color scheme stylesheet is constructed to have the least CSS specificity.
-    //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
-    const defaultColorSchemeStyleSheet = {};
-    const otherColorSchemesStyleSheet = {};
+    // 4. Resolve the color scheme and merge it to the theme
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      const {
-        css,
-        vars
-      } = generateCssVars(key);
-      theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(schemeKey => {
           if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -169,30 +160,22 @@ export default function createCssVarsProvider(options) {
           theme.palette.colorScheme = key;
         }
       }
-      const resolvedDefaultColorScheme = (() => {
-        if (typeof defaultColorScheme === 'string') {
-          return defaultColorScheme;
-        }
-        if (defaultMode === 'dark') {
-          return defaultColorScheme.dark;
-        }
-        return defaultColorScheme.light;
-      })();
-      if (key === resolvedDefaultColorScheme) {
-        if (excludeVariablesFromRoot) {
-          const excludedVariables = {};
-          excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {
-            excludedVariables[cssVar] = css[cssVar];
-            delete css[cssVar];
-          });
-          defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
-        }
-        defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
-      } else {
-        otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
-      }
     });
-    theme.vars = deepmerge(theme.vars, rootVars);
+    const resolvedDefaultColorScheme = (() => {
+      if (typeof defaultColorScheme === 'string') {
+        return defaultColorScheme;
+      }
+      if (defaultMode === 'dark') {
+        return defaultColorScheme.dark;
+      }
+      return defaultColorScheme.light;
+    })();
+    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
+    themeProp.colorSchemeSelector = colorSchemeSelector;
+    themeProp.attribute = attribute;
+    if (!theme.getColorSchemeSelector) {
+      theme.getColorSchemeSelector = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
+    }
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -242,18 +225,12 @@ export default function createCssVarsProvider(options) {
     if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
     }
-    const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
-      }), /*#__PURE__*/_jsx(ThemeProvider, {
+    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: styles
+        }, index))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -262,7 +239,7 @@ export default function createCssVarsProvider(options) {
     if (nested) {
       return element;
     }
-    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
       value: contextValue,
       children: element
     });
@@ -271,66 +248,66 @@ export default function createCssVarsProvider(options) {
     /**
      * The body attribute name to attach colorScheme.
      */
-    attribute: PropTypes.string,
+    attribute: _propTypes.default.string,
     /**
      * The component tree.
      */
-    children: PropTypes.node,
+    children: _propTypes.default.node,
     /**
      * The node used to attach the color-scheme attribute
      */
-    colorSchemeNode: PropTypes.any,
+    colorSchemeNode: _propTypes.default.any,
     /**
      * The CSS selector for attaching the generated custom properties
      */
-    colorSchemeSelector: PropTypes.string,
+    colorSchemeSelector: _propTypes.default.string,
     /**
      * localStorage key used to store `colorScheme`
      */
-    colorSchemeStorageKey: PropTypes.string,
+    colorSchemeStorageKey: _propTypes.default.string,
     /**
      * The initial color scheme used.
      */
-    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
     /**
      * The initial mode used.
      */
-    defaultMode: PropTypes.string,
+    defaultMode: _propTypes.default.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
-    disableNestedContext: PropTypes.bool,
+    disableNestedContext: _propTypes.default.bool,
     /**
      * If `true`, the style sheet won't be generated.
      *
      * This is useful for controlling nested CssVarsProvider behavior.
      */
-    disableStyleSheetGeneration: PropTypes.bool,
+    disableStyleSheetGeneration: _propTypes.default.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes.
      */
-    disableTransitionOnChange: PropTypes.bool,
+    disableTransitionOnChange: _propTypes.default.bool,
     /**
      * The document to attach the attribute to.
      */
-    documentNode: PropTypes.any,
+    documentNode: _propTypes.default.any,
     /**
      * The key in the local storage used to store current color scheme.
      */
-    modeStorageKey: PropTypes.string,
+    modeStorageKey: _propTypes.default.string,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window
      */
-    storageWindow: PropTypes.any,
+    storageWindow: _propTypes.default.any,
     /**
      * The calculated theme object that will be passed through context.
      */
-    theme: PropTypes.object
+    theme: _propTypes.default.object
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/node/cssVars/createCssVarsTheme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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, {
+    prefix: theme.cssVarPrefix
+  }));
+  output.vars = result.vars;
+  output.generateThemeVars = result.generateThemeVars;
+  output.generateStyleSheets = result.generateStyleSheets;
+  return output;
+}
+var _default = exports.default = createCssVarsTheme;