@mui/system 5.15.13 → 6.0.0-alpha.0

package/legacy/colorManipulator/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './colorManipulator';

package/legacy/{compose.js → compose/compose.js}

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import merge from './merge';
+import merge from '../merge';
 function compose() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];

package/legacy/compose/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './compose';

package/legacy/{createBox.js → createBox/createBox.js}

@@ -5,8 +5,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
-import useTheme from './useTheme';
+import styleFunctionSx, { extendSxProp } from '../styleFunctionSx';
+import useTheme from '../useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/legacy/createBox/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './createBox';

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

@@ -8,8 +8,8 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from './createTheme';
-import styleFunctionSx from './styleFunctionSx';
+import createTheme from '../createTheme';
+import styleFunctionSx from '../styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }

package/legacy/createStyled/index.js

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

package/legacy/{cssGrid.js → 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/legacy/cssGrid/index.js

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

package/legacy/cssVars/createCssVarsProvider.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -6,14 +5,12 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var 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) {
   var themeId = options.themeId,
@@ -30,8 +27,7 @@ export default function createCssVarsProvider(options) {
     designSystemColorScheme = options.defaultColorScheme,
     _options$disableTrans = options.disableTransitionOnChange,
     designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-    resolveTheme = options.resolveTheme,
-    excludeVariablesFromRoot = options.excludeVariablesFromRoot;
+    resolveTheme = options.resolveTheme;
   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: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
   }
@@ -46,53 +42,47 @@ export default function createCssVarsProvider(options) {
     }
     return value;
   };
-  function CssVarsProvider(_ref) {
-    var children = _ref.children,
-      _ref$theme = _ref.theme,
-      themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
-      _ref$modeStorageKey = _ref.modeStorageKey,
-      modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
-      _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-      colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
-      _ref$attribute = _ref.attribute,
-      attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
-      _ref$defaultMode = _ref.defaultMode,
-      defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
-      _ref$defaultColorSche = _ref.defaultColorScheme,
-      defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
-      _ref$disableTransitio = _ref.disableTransitionOnChange,
-      disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
-      _ref$storageWindow = _ref.storageWindow,
-      storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
-      _ref$documentNode = _ref.documentNode,
-      documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
-      _ref$colorSchemeNode = _ref.colorSchemeNode,
-      colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
-      _ref$colorSchemeSelec = _ref.colorSchemeSelector,
-      colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
-      _ref$disableNestedCon = _ref.disableNestedContext,
-      disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
-      _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
-      disableStyleSheetGeneration = _ref$disableStyleShee === void 0 ? false : _ref$disableStyleShee;
+  function CssVarsProvider(props) {
+    var _restThemeProp$genera, _theme$generateStyleS;
+    var children = props.children,
+      _props$theme = props.theme,
+      themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
+      _props$modeStorageKey = props.modeStorageKey,
+      modeStorageKey = _props$modeStorageKey === void 0 ? defaultModeStorageKey : _props$modeStorageKey,
+      _props$colorSchemeSto = props.colorSchemeStorageKey,
+      colorSchemeStorageKey = _props$colorSchemeSto === void 0 ? defaultColorSchemeStorageKey : _props$colorSchemeSto,
+      _props$attribute = props.attribute,
+      attribute = _props$attribute === void 0 ? defaultAttribute : _props$attribute,
+      _props$defaultMode = props.defaultMode,
+      defaultMode = _props$defaultMode === void 0 ? designSystemMode : _props$defaultMode,
+      _props$defaultColorSc = props.defaultColorScheme,
+      defaultColorScheme = _props$defaultColorSc === void 0 ? designSystemColorScheme : _props$defaultColorSc,
+      _props$disableTransit = props.disableTransitionOnChange,
+      disableTransitionOnChange = _props$disableTransit === void 0 ? designSystemTransitionOnChange : _props$disableTransit,
+      _props$storageWindow = props.storageWindow,
+      storageWindow = _props$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _props$storageWindow,
+      _props$documentNode = props.documentNode,
+      documentNode = _props$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _props$documentNode,
+      _props$colorSchemeNod = props.colorSchemeNode,
+      colorSchemeNode = _props$colorSchemeNod === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _props$colorSchemeNod,
+      _props$colorSchemeSel = props.colorSchemeSelector,
+      colorSchemeSelector = _props$colorSchemeSel === void 0 ? ':root' : _props$colorSchemeSel,
+      _props$disableNestedC = props.disableNestedContext,
+      disableNestedContext = _props$disableNestedC === void 0 ? false : _props$disableNestedC,
+      _props$disableStyleSh = props.disableStyleSheetGeneration,
+      disableStyleSheetGeneration = _props$disableStyleSh === void 0 ? false : _props$disableStyleSh;
     var hasMounted = React.useRef(false);
     var upperTheme = muiUseTheme();
     var ctx = React.useContext(ColorSchemeContext);
     var nested = !!ctx && !disableNestedContext;
     var scopedTheme = themeProp[themeId];
-    var _ref2 = scopedTheme || themeProp,
-      _ref2$colorSchemes = _ref2.colorSchemes,
-      colorSchemes = _ref2$colorSchemes === void 0 ? {} : _ref2$colorSchemes,
-      _ref2$components = _ref2.components,
-      components = _ref2$components === void 0 ? {} : _ref2$components,
-      _ref2$generateCssVars = _ref2.generateCssVars,
-      generateCssVars = _ref2$generateCssVars === void 0 ? function () {
-        return {
-          vars: {},
-          css: {}
-        };
-      } : _ref2$generateCssVars,
-      cssVarPrefix = _ref2.cssVarPrefix,
-      restThemeProp = _objectWithoutProperties(_ref2, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+    var _ref = scopedTheme || themeProp,
+      _ref$colorSchemes = _ref.colorSchemes,
+      colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? {} : _ref$components,
+      cssVarPrefix = _ref.cssVarPrefix,
+      restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "cssVarPrefix"]);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -142,33 +132,22 @@ 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)
-    var _generateCssVars = generateCssVars(),
-      rootCss = _generateCssVars.css,
-      rootVars = _generateCssVars.vars; // 3. Start composing the theme object
+    // 2. get the `vars` object that refers to the CSS custom properties
+    var themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
+
+    // 3. Start composing the theme object
     var theme = _extends({}, restThemeProp, {
       components: components,
       colorSchemes: colorSchemes,
       cssVarPrefix: cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
-        return "[".concat(attribute, "=\"").concat(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.
-    var defaultColorSchemeStyleSheet = {};
-    var otherColorSchemesStyleSheet = {};
-    Object.entries(colorSchemes).forEach(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        scheme = _ref4[1];
-      var _generateCssVars2 = generateCssVars(key),
-        css = _generateCssVars2.css,
-        vars = _generateCssVars2.vars;
-      theme.vars = deepmerge(theme.vars, vars);
+    // 4. Resolve the color scheme and merge it to the theme
+    Object.entries(colorSchemes).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        scheme = _ref3[1];
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(function (schemeKey) {
@@ -183,30 +162,24 @@ export default function createCssVarsProvider(options) {
           theme.palette.colorScheme = key;
         }
       }
-      var resolvedDefaultColorScheme = function () {
-        if (typeof defaultColorScheme === 'string') {
-          return defaultColorScheme;
-        }
-        if (defaultMode === 'dark') {
-          return defaultColorScheme.dark;
-        }
-        return defaultColorScheme.light;
-      }();
-      if (key === resolvedDefaultColorScheme) {
-        if (excludeVariablesFromRoot) {
-          var excludedVariables = {};
-          excludeVariablesFromRoot(cssVarPrefix).forEach(function (cssVar) {
-            excludedVariables[cssVar] = css[cssVar];
-            delete css[cssVar];
-          });
-          defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
-        }
-        defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
-      } else {
-        otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
-      }
     });
-    theme.vars = deepmerge(theme.vars, rootVars);
+    var resolvedDefaultColorScheme = function () {
+      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 = function (targetColorScheme) {
+        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
+      };
+    }
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -246,14 +219,14 @@ export default function createCssVarsProvider(options) {
     }, []);
     var contextValue = React.useMemo(function () {
       return {
-        mode: mode,
-        systemMode: systemMode,
-        setMode: setMode,
-        lightColorScheme: lightColorScheme,
-        darkColorScheme: darkColorScheme,
+        allColorSchemes: allColorSchemes,
         colorScheme: colorScheme,
+        darkColorScheme: darkColorScheme,
+        lightColorScheme: lightColorScheme,
+        mode: mode,
         setColorScheme: setColorScheme,
-        allColorSchemes: allColorSchemes
+        setMode: setMode,
+        systemMode: systemMode
       };
     }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     var shouldGenerateStyleSheet = true;
@@ -261,14 +234,12 @@ export default function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     var element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {
-          styles: _defineProperty({}, colorSchemeSelector, rootCss)
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
+        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map(function (styles, index) {
+          return /*#__PURE__*/_jsx(GlobalStyles, {
+            styles: styles
+          }, index);
+        })
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,

package/legacy/cssVars/createCssVarsTheme.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
-  var cssVarPrefix = theme.cssVarPrefix,
-    shouldSkipGeneratingVar = theme.shouldSkipGeneratingVar,
-    otherTheme = _objectWithoutProperties(theme, ["cssVarPrefix", "shouldSkipGeneratingVar"]);
-  return _extends({}, theme, prepareCssVars(otherTheme, {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar
+  var output = theme;
+  var result = prepareCssVars(output, _extends({}, theme, {
+    prefix: theme.cssVarPrefix
   }));
+  output.vars = result.vars;
+  output.generateThemeVars = result.generateThemeVars;
+  output.generateStyleSheets = result.generateStyleSheets;
+  return output;
 }
 export default createCssVarsTheme;

package/legacy/cssVars/prepareCssVars.js

@@ -1,10 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme, parserConfig) {
+function prepareCssVars(theme) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var getSelector = _ref.getSelector,
+    parserConfig = _objectWithoutProperties(_ref, ["getSelector"]);
   // @ts-ignore - ignore components do not exist
   var _theme$colorSchemes = theme.colorSchemes,
     colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
@@ -18,12 +22,12 @@ function prepareCssVars(theme, parserConfig) {
     rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
   var themeVars = rootVarsWithDefaults;
   var colorSchemesMap = {};
-  var light = colorSchemes[defaultColorScheme],
+  var defaultScheme = colorSchemes[defaultColorScheme],
     otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
-  Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      scheme = _ref2[1];
+  Object.entries(otherColorSchemes || {}).forEach(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      scheme = _ref3[1];
     var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
       vars = _cssVarsParser2.vars,
       css = _cssVarsParser2.css,
@@ -34,9 +38,9 @@ function prepareCssVars(theme, parserConfig) {
       vars: vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
-    var _cssVarsParser3 = cssVarsParser(light, parserConfig),
+    var _cssVarsParser3 = cssVarsParser(defaultScheme, parserConfig),
       _css = _cssVarsParser3.css,
       vars = _cssVarsParser3.vars,
       varsWithDefaults = _cssVarsParser3.varsWithDefaults;
@@ -46,27 +50,43 @@ function prepareCssVars(theme, parserConfig) {
       vars: vars
     };
   }
-  var generateCssVars = function generateCssVars(colorScheme) {
-    var _parserConfig$getSele2;
-    if (!colorScheme) {
-      var _parserConfig$getSele;
-      var _css2 = _extends({}, rootCss);
-      return {
-        css: _css2,
-        vars: rootVars,
-        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, _css2)) || ':root'
-      };
+  var generateThemeVars = function generateThemeVars() {
+    var vars = _extends({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        schemeVars = _ref5[1].vars;
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  var generateStyleSheets = function generateStyleSheets() {
+    var stylesheets = [];
+    var colorScheme = theme.defaultColorScheme || 'light';
+    function insertStyleSheet(selector, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof selector === 'string' ? _defineProperty({}, selector, _extends({}, css)) : selector);
+      }
     }
-    var css = _extends({}, colorSchemesMap[colorScheme].css);
-    return {
-      css: css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
-    };
+    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, _extends({}, rootCss))) || ':root', rootCss);
+    var defaultSchemeVal = colorSchemesMap[colorScheme],
+      rest = _objectWithoutProperties(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      var _css2 = defaultSchemeVal.css;
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, _extends({}, _css2))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(colorScheme, "\"]"), _css2);
+    }
+    Object.entries(rest).forEach(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        css = _ref8[1].css;
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, _extends({}, css))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(key, "\"]"), css);
+    });
+    return stylesheets;
   };
   return {
     vars: themeVars,
-    generateCssVars: generateCssVars
+    generateThemeVars: generateThemeVars,
+    generateStyleSheets: generateStyleSheets
   };
 }
 export default prepareCssVars;

package/legacy/cssVars/useCurrentColorScheme.js

@@ -83,7 +83,7 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      var newMode = !mode ? defaultMode : mode;
+      var newMode = mode != null ? mode : defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -164,11 +164,17 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  var handleMediaQuery = React.useCallback(function (e) {
+  var handleMediaQuery = React.useCallback(function (event) {
     if (state.mode === 'system') {
       setState(function (currentState) {
+        var systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
         return _extends({}, currentState, {
-          systemMode: e != null && e.matches ? 'dark' : 'light'
+          systemMode: systemMode
         });
       });
     }
@@ -189,36 +195,36 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return function () {
-      return media.removeListener(handler);
+      media.removeListener(handler);
     };
   }, []);
 
   // Handle when localStorage has changed
   React.useEffect(function () {
-    var handleStorage = function handleStorage(event) {
-      var value = event.newValue;
-      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-        // If the key is deleted, value will be null then reset color scheme to the default one.
-        if (event.key.endsWith('light')) {
-          setColorScheme({
-            light: value
-          });
+    if (storageWindow) {
+      var handleStorage = function handleStorage(event) {
+        var value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
         }
-        if (event.key.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
       return function () {
-        return storageWindow.removeEventListener('storage', handleStorage);
+        storageWindow.removeEventListener('storage', handleStorage);
       };
     }
     return undefined;

package/legacy/{display.js → display/display.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export var displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/legacy/display/index.js

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

package/legacy/{flexbox.js → flexbox/flexbox.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export var flexBasis = style({
   prop: 'flexBasis'
 });

package/legacy/flexbox/index.js

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

package/legacy/{getThemeValue.js → getThemeValue/getThemeValue.js}

@@ -1,14 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './cssGrid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
+import borders from '../borders';
+import display from '../display';
+import flexbox from '../flexbox';
+import grid from '../cssGrid';
+import positions from '../positions';
+import palette from '../palette';
+import shadows from '../shadows';
+import sizing from '../sizing';
+import spacing from '../spacing';
+import typography from '../typography';
 var filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/legacy/getThemeValue/index.js

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

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.13
+ * @mui/system v6.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/memoize/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './memoize';

package/legacy/merge/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './merge';

package/legacy/palette/index.js

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