@mui/system 5.15.15 → 6.0.0-alpha.1

package/createTheme/createSpacing.d.ts

@@ -1,4 +1,4 @@
-export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export type SpacingOptions = number | string | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
 export type SpacingArgument = number | string;
 export interface Spacing {
     (): string;
@@ -7,4 +7,4 @@ export interface Spacing {
     (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
     (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
 }
-export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+export default function createSpacing(spacingInput?: SpacingOptions, transform?: Spacing | (() => undefined) | ((abs: string | number) => number)): Spacing;

package/createTheme/createSpacing.js

@@ -1,25 +1,19 @@
-"use strict";
+import { createUnarySpacing } from '../spacing';
 
-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.
 
-function createSpacing(spacingInput = 8) {
+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
+transform = createUnarySpacing({
+  spacing: spacingInput
+})) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
   }
-
-  // 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 = (0, _spacing.createUnarySpacing)({
-    spacing: spacingInput
-  });
   const spacing = (...argsInput) => {
     if (process.env.NODE_ENV !== 'production') {
       if (!(argsInput.length <= 4)) {

package/createTheme/createTheme.js

@@ -1,20 +1,13 @@
-"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"));
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["breakpoints", "palette", "spacing", "shape"];
+import deepmerge from '@mui/utils/deepmerge';
+import createBreakpoints from './createBreakpoints';
+import shape from './shape';
+import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
+import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
+import applyStyles from './applyStyles';
 function createTheme(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -22,29 +15,29 @@ function createTheme(options = {}, ...args) {
       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)({
+    other = _objectWithoutPropertiesLoose(options, _excluded);
+  const breakpoints = createBreakpoints(breakpointsInput);
+  const spacing = createSpacing(spacingInput);
+  let muiTheme = deepmerge({
     breakpoints,
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: (0, _extends2.default)({
+    palette: _extends({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: (0, _extends2.default)({}, _shape.default, shapeInput)
+    shape: _extends({}, shape, 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.applyStyles = applyStyles;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
-    return (0, _styleFunctionSx.default)({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
   };
   return muiTheme;
 }
-var _default = exports.default = createTheme;
+export default createTheme;

package/createTheme/index.js

@@ -1,27 +1,3 @@
-"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"));
+export { default } from './createTheme';
+export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as unstable_applyStyles } from './applyStyles';

package/createTheme/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/createTheme/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/createTheme/index.js",
   "types": "./index.d.ts"
 }

package/createTheme/shape.js

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

package/cssGrid/cssGrid.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, grid } from '../Box';
+
+export type CssGridProps = PropsFor<typeof grid>;

package/{esm → cssGrid}/cssGrid.js

@@ -1,8 +1,8 @@
-import style from './style';
-import compose from './compose';
-import { createUnaryUnit, getValue } from './spacing';
-import { handleBreakpoints } from './breakpoints';
-import responsivePropType from './responsivePropType';
+import style from '../style';
+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

package/cssGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './cssGrid';
+export * from './cssGrid';

package/cssGrid/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './cssGrid';
+export * from './cssGrid';

package/cssGrid/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/cssGrid/index.js",
+  "types": "./index.d.ts"
+}

package/cssVars/createCssVarsProvider.d.ts

@@ -142,14 +142,6 @@ export default function createCssVarsProvider<
      * variants from those tokens.
      */
     resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
-    /**
-     * @internal
-     * A function that returns a list of variables that will be excluded from the `colorSchemeSelector` (:root by default)
-     *
-     * Some variables are intended to be used in a specific color scheme only. They should be excluded when the default mode is set to the color scheme.
-     * This is introduced to fix https://github.com/mui/material-ui/issues/34084
-     */
-    excludeVariablesFromRoot?: (cssVarPrefix: string) => string[];
   },
 ): CreateCssVarsProviderResult<ColorScheme, Identifier>;
 

package/cssVars/createCssVarsProvider.js

@@ -1,28 +1,17 @@
-"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 _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-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", "generateCssVars", "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 && 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; }
-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) {
+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", "cssVarPrefix"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+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, 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) {
   const {
     themeId,
     /**
@@ -32,16 +21,15 @@ function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
-    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = 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]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -51,7 +39,7 @@ 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 />` : (0, _formatMuiErrorMessage2.default)(19));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
     }
     return value;
   };
@@ -73,7 +61,7 @@ function createCssVarsProvider(options) {
       disableStyleSheetGeneration = false
     } = props;
     const hasMounted = React.useRef(false);
-    const upperTheme = (0, _privateTheming.useTheme)();
+    const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
@@ -81,13 +69,9 @@ function createCssVarsProvider(options) {
       {
         colorSchemes = {},
         components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
         cssVarPrefix
       } = _ref,
-      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -101,7 +85,7 @@ function createCssVarsProvider(options) {
       darkColorScheme,
       colorScheme: stateColorScheme,
       setColorScheme
-    } = (0, _useCurrentColorScheme.default)({
+    } = useCurrentColorScheme({
       supportedColorSchemes: allColorSchemes,
       defaultLightColorScheme,
       defaultDarkColorScheme,
@@ -138,38 +122,28 @@ 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.generateThemeVars?.() || restThemeProp.vars;
 
     // 3. Start composing the theme object
-    const theme = (0, _extends2.default)({}, restThemeProp, {
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
+      vars: themeVars
     });
+    if (typeof theme.generateSpacing === 'function') {
+      theme.spacing = theme.generateSpacing();
+    }
 
-    // 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 = (0, _deepmerge.default)(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] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -178,30 +152,22 @@ 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 = (0, _deepmerge.default)(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.
@@ -248,21 +214,15 @@ function createCssVarsProvider(options) {
       systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
     }
-    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+    const element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
+        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: styles
+        }, index))
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -271,7 +231,7 @@ function createCssVarsProvider(options) {
     if (nested) {
       return element;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
       value: contextValue,
       children: element
     });
@@ -280,66 +240,66 @@ function createCssVarsProvider(options) {
     /**
      * The body attribute name to attach colorScheme.
      */
-    attribute: _propTypes.default.string,
+    attribute: PropTypes.string,
     /**
      * The component tree.
      */
-    children: _propTypes.default.node,
+    children: PropTypes.node,
     /**
      * The node used to attach the color-scheme attribute
      */
-    colorSchemeNode: _propTypes.default.any,
+    colorSchemeNode: PropTypes.any,
     /**
      * The CSS selector for attaching the generated custom properties
      */
-    colorSchemeSelector: _propTypes.default.string,
+    colorSchemeSelector: PropTypes.string,
     /**
      * localStorage key used to store `colorScheme`
      */
-    colorSchemeStorageKey: _propTypes.default.string,
+    colorSchemeStorageKey: PropTypes.string,
     /**
      * The initial color scheme used.
      */
-    defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     /**
      * The initial mode used.
      */
-    defaultMode: _propTypes.default.string,
+    defaultMode: PropTypes.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
-    disableNestedContext: _propTypes.default.bool,
+    disableNestedContext: PropTypes.bool,
     /**
      * If `true`, the style sheet won't be generated.
      *
      * This is useful for controlling nested CssVarsProvider behavior.
      */
-    disableStyleSheetGeneration: _propTypes.default.bool,
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes.
      */
-    disableTransitionOnChange: _propTypes.default.bool,
+    disableTransitionOnChange: PropTypes.bool,
     /**
      * The document to attach the attribute to.
      */
-    documentNode: _propTypes.default.any,
+    documentNode: PropTypes.any,
     /**
      * The key in the local storage used to store current color scheme.
      */
-    modeStorageKey: _propTypes.default.string,
+    modeStorageKey: PropTypes.string,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window
      */
-    storageWindow: _propTypes.default.any,
+    storageWindow: PropTypes.any,
     /**
      * The calculated theme object that will be passed through context.
      */
-    theme: _propTypes.default.object
+    theme: PropTypes.object
   } : 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 => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/cssVars/createCssVarsTheme.d.ts

@@ -5,12 +5,7 @@ interface Theme extends DefaultCssVarsTheme {
 }
 declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
     vars: ThemeVars;
-    generateCssVars: (colorScheme?: string | undefined) => {
-        css: {
-            [x: string]: string | number;
-        };
-        vars: ThemeVars;
-        selector: any;
-    };
+    generateThemeVars: () => ThemeVars;
+    generateStyleSheets: () => Record<string, any>[];
 };
 export default createCssVarsTheme;

package/cssVars/createCssVarsTheme.js

@@ -1,23 +1,13 @@
-"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 _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
-const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
-  const {
-      cssVarPrefix,
-      shouldSkipGeneratingVar
-    } = theme,
-    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
-  return (0, _extends2.default)({}, theme, (0, _prepareCssVars.default)(otherTheme, {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar
+  const output = theme;
+  const result = prepareCssVars(output, _extends({}, theme, {
+    prefix: theme.cssVarPrefix
   }));
+  output.vars = result.vars;
+  output.generateThemeVars = result.generateThemeVars;
+  output.generateStyleSheets = result.generateStyleSheets;
+  return output;
 }
-var _default = exports.default = createCssVarsTheme;
+export default createCssVarsTheme;

package/cssVars/createGetCssVar.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createGetCssVar;
 /**
  * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
  * and they does not need to remember the prefix (defined once).
  */
-function createGetCssVar(prefix = '') {
+export default function createGetCssVar(prefix = '') {
   function appendVar(...vars) {
     if (!vars.length) {
       return '';