@mui/system 5.15.13 → 6.0.0-alpha.0

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,28 +49,30 @@ 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({
-    children,
-    theme: themeProp = defaultTheme,
-    modeStorageKey = defaultModeStorageKey,
-    colorSchemeStorageKey = defaultColorSchemeStorageKey,
-    attribute = defaultAttribute,
-    defaultMode = designSystemMode,
-    defaultColorScheme = designSystemColorScheme,
-    disableTransitionOnChange = designSystemTransitionOnChange,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    documentNode = typeof document === 'undefined' ? undefined : document,
-    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root',
-    disableNestedContext = false,
-    disableStyleSheetGeneration = false
-  }) {
+  function CssVarsProvider(props) {
+    var _restThemeProp$genera, _theme$generateStyleS;
+    const {
+      children,
+      theme: themeProp = defaultTheme,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
+      defaultMode = designSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root',
+      disableNestedContext = false,
+      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];
@@ -71,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;
@@ -91,7 +96,7 @@ export default function createCssVarsProvider(options) {
       darkColorScheme,
       colorScheme: stateColorScheme,
       setColorScheme
-    } = useCurrentColorScheme({
+    } = (0, _useCurrentColorScheme.default)({
       supportedColorSchemes: allColorSchemes,
       defaultLightColorScheme,
       defaultDarkColorScheme,
@@ -128,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];
           }
@@ -168,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.
@@ -228,31 +212,25 @@ export default function createCssVarsProvider(options) {
       };
     }, []);
     const contextValue = React.useMemo(() => ({
-      mode,
-      systemMode,
-      setMode,
-      lightColorScheme,
-      darkColorScheme,
+      allColorSchemes,
       colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
       setColorScheme,
-      allColorSchemes
+      setMode,
+      systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
     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
@@ -261,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
     });
@@ -270,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;

package/{esm → node}/cssVars/createGetCssVar.js

@@ -1,8 +1,14 @@
+"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).
  */
-export default function createGetCssVar(prefix = '') {
+function createGetCssVar(prefix = '') {
   function appendVar(...vars) {
     if (!vars.length) {
       return '';

package/{esm → node}/cssVars/cssVarsParser.js

@@ -1,3 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assignNestedKeys = void 0;
+exports.default = cssVarsParser;
+exports.walkObjectDeep = void 0;
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -15,7 +23,7 @@
  * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
-export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
@@ -44,7 +52,8 @@ export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+exports.assignNestedKeys = assignNestedKeys;
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
@@ -60,6 +69,7 @@ export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   }
   recurse(obj);
 };
+exports.walkObjectDeep = walkObjectDeep;
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
@@ -98,7 +108,7 @@ const getCssValue = (keys, value) => {
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
  */
-export default function cssVarsParser(theme, options) {
+function cssVarsParser(theme, options) {
   const {
     prefix,
     shouldSkipGeneratingVar

package/node/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
+exports.default = getInitColorSchemeScript;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
+function getInitColorSchemeScript(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme = 'light',
+    defaultDarkColorScheme = 'dark',
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE,
+    colorSchemeNode = 'document.documentElement'
+  } = options || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: `(function() {
+try {
+  var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
+  var colorScheme = '';
+  if (mode === 'system') {
+    // handle system mode
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+    } else {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+    }
+  }
+  if (mode === 'light') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+  }
+  if (mode === 'dark') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  }
+  if (colorScheme) {
+    ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
+  }
+} catch(e){}})();`
+    }
+  }, "mui-color-scheme-init");
+}

package/node/cssVars/index.js

@@ -0,0 +1,35 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createCssVarsTheme", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsTheme.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsProvider.default;
+  }
+});
+Object.defineProperty(exports, "getInitColorSchemeScript", {
+  enumerable: true,
+  get: function () {
+    return _getInitColorSchemeScript.default;
+  }
+});
+Object.defineProperty(exports, "prepareCssVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareCssVars.default;
+  }
+});
+var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
+var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
+var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));