@mui/system 5.6.4 → 5.8.1

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.4
+/** @license MUI v5.8.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -51,7 +51,9 @@ var _exportNames = {
   useThemeWithoutDefault: true,
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
-  unstable_createGetCssVar: true
+  unstable_createGetCssVar: true,
+  createContainer: true,
+  Container: true
 };
 Object.defineProperty(exports, "Box", {
   enumerable: true,
@@ -59,6 +61,12 @@ Object.defineProperty(exports, "Box", {
     return _Box.default;
   }
 });
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function () {
+    return _Container.default;
+  }
+});
 Object.defineProperty(exports, "GlobalStyles", {
   enumerable: true,
   get: function () {
@@ -107,6 +115,12 @@ Object.defineProperty(exports, "createBreakpoints", {
     return _createBreakpoints.default;
   }
 });
+Object.defineProperty(exports, "createContainer", {
+  enumerable: true,
+  get: function () {
+    return _createContainer.default;
+  }
+});
 Object.defineProperty(exports, "createSpacing", {
   enumerable: true,
   get: function () {
@@ -484,6 +498,22 @@ var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCss
 
 var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
 
+var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
+
+var _Container = _interopRequireWildcard(require("./Container"));
+
+Object.keys(_Container).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Container[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Container[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/index.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/legacy/Container/Container.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import createContainer from './createContainer';
+/**
+ *
+ * Demos:
+ *
+ * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
+ * - [Container (MUI System)](https://mui.com/system/react-container/)
+ *
+ * API:
+ *
+ * - [Container API](https://mui.com/system/api/container/)
+ */
+
+var Container = createContainer();
+process.env.NODE_ENV !== "production" ? Container.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: PropTypes.bool,
+
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default Container;

package/legacy/Container/ContainerProps.js

@@ -0,0 +1 @@
+export {};

package/legacy/Container/containerClasses.js

@@ -0,0 +1,6 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getContainerUtilityClass(slot) {
+  return generateUtilityClass('MuiContainer', slot);
+}
+var containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+export default containerClasses;

package/legacy/Container/createContainer.js

@@ -0,0 +1,148 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_capitalize as capitalize, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import useThemePropsSystem from '../useThemeProps';
+import systemStyled from '../styled';
+import createTheme from '../createTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+var defaultTheme = createTheme();
+var defaultCreateStyledComponent = systemStyled('div', {
+  name: 'MuiContainer',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    var ownerState = props.ownerState;
+    return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+  }
+});
+
+var useThemePropsDefault = function useThemePropsDefault(inProps) {
+  return useThemePropsSystem({
+    props: inProps,
+    name: 'MuiContainer',
+    defaultTheme: defaultTheme
+  });
+};
+
+var useUtilityClasses = function useUtilityClasses(ownerState, componentName) {
+  var getContainerUtilityClass = function getContainerUtilityClass(slot) {
+    return generateUtilityClass(componentName, slot);
+  };
+
+  var classes = ownerState.classes,
+      fixed = ownerState.fixed,
+      disableGutters = ownerState.disableGutters,
+      maxWidth = ownerState.maxWidth;
+  var slots = {
+    root: ['root', maxWidth && "maxWidth".concat(capitalize(String(maxWidth))), fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return composeClasses(slots, getContainerUtilityClass, classes);
+};
+
+export default function createContainer() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$createStyled = options.createStyledComponent,
+      createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
+      _options$useThemeProp = options.useThemeProps,
+      useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
+      _options$componentNam = options.componentName,
+      componentName = _options$componentNam === void 0 ? 'MuiContainer' : _options$componentNam;
+  var ContainerRoot = createStyledComponent(function (_ref) {
+    var theme = _ref.theme,
+        ownerState = _ref.ownerState;
+    return _extends({
+      width: '100%',
+      marginLeft: 'auto',
+      boxSizing: 'border-box',
+      marginRight: 'auto',
+      display: 'block'
+    }, !ownerState.disableGutters && _defineProperty({
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2)
+    }, theme.breakpoints.up('sm'), {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
+    }));
+  }, function (_ref3) {
+    var theme = _ref3.theme,
+        ownerState = _ref3.ownerState;
+    return ownerState.fixed && Object.keys(theme.breakpoints.values).reduce(function (acc, breakpointValueKey) {
+      var breakpoint = breakpointValueKey;
+      var value = theme.breakpoints.values[breakpoint];
+
+      if (value !== 0) {
+        // @ts-ignore
+        acc[theme.breakpoints.up(breakpoint)] = {
+          maxWidth: "".concat(value).concat(theme.breakpoints.unit)
+        };
+      }
+
+      return acc;
+    }, {});
+  }, function (_ref4) {
+    var theme = _ref4.theme,
+        ownerState = _ref4.ownerState;
+    return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+    }), ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
+    ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
+    }));
+  });
+  var Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
+    var props = useThemeProps(inProps);
+
+    var className = props.className,
+        _props$component = props.component,
+        component = _props$component === void 0 ? 'div' : _props$component,
+        _props$disableGutters = props.disableGutters,
+        disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
+        _props$fixed = props.fixed,
+        fixed = _props$fixed === void 0 ? false : _props$fixed,
+        _props$maxWidth = props.maxWidth,
+        maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
+        classesProp = props.classes,
+        other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
+
+    var ownerState = _extends({}, props, {
+      component: component,
+      disableGutters: disableGutters,
+      fixed: fixed,
+      maxWidth: maxWidth
+    }); // @ts-ignore module augmentation fails if custom breakpoints are used
+
+
+    var classes = useUtilityClasses(ownerState, componentName);
+    return (
+      /*#__PURE__*/
+      // @ts-ignore theme is injected by the styled util
+      _jsx(ContainerRoot, _extends({
+        as: component // @ts-ignore module augmentation fails if custom breakpoints are used
+        ,
+        ownerState: ownerState,
+        className: clsx(classes.root, className),
+        ref: ref
+      }, other))
+    );
+  });
+  process.env.NODE_ENV !== "production" ? Container.propTypes
+  /* remove-proptypes */
+  = {
+    children: PropTypes.node,
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+    disableGutters: PropTypes.bool,
+    fixed: PropTypes.bool,
+    maxWidth: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } : void 0;
+  return Container;
+}

package/legacy/Container/index.js

@@ -0,0 +1,3 @@
+export { default } from './Container';
+export { default as containerClasses } from './containerClasses';
+export * from './containerClasses';

package/legacy/cssVars/createCssVarsProvider.js

@@ -1,3 +1,4 @@
+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";
@@ -9,7 +10,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -54,6 +55,8 @@ export default function createCssVarsProvider(options) {
         prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         _ref$modeStorageKey = _ref.modeStorageKey,
         modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+        _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
+        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
         _ref$attribute = _ref.attribute,
         attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
         _ref$defaultMode = _ref.defaultMode,
@@ -63,7 +66,15 @@ export default function createCssVarsProvider(options) {
         _ref$disableTransitio = _ref.disableTransitionOnChange,
         disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
         _ref$enableColorSchem = _ref.enableColorScheme,
-        enableColorScheme = _ref$enableColorSchem === void 0 ? designSystemEnableColorScheme : _ref$enableColorSchem;
+        enableColorScheme = _ref$enableColorSchem === void 0 ? designSystemEnableColorScheme : _ref$enableColorSchem,
+        _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;
     var hasMounted = React.useRef(false);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
@@ -81,7 +92,9 @@ export default function createCssVarsProvider(options) {
       defaultLightColorScheme: defaultLightColorScheme,
       defaultDarkColorScheme: defaultDarkColorScheme,
       modeStorageKey: modeStorageKey,
-      defaultMode: defaultMode
+      colorSchemeStorageKey: colorSchemeStorageKey,
+      defaultMode: defaultMode,
+      storageWindow: storageWindow
     }),
         mode = _useCurrentColorSchem.mode,
         setMode = _useCurrentColorSchem.setMode,
@@ -123,7 +136,8 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       getCssVar: createGetCssVar(prefix)
     });
-    var styleSheet = {};
+    var defaultColorSchemeStyleSheet = {};
+    var otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
@@ -163,56 +177,56 @@ export default function createCssVarsProvider(options) {
       }();
 
       if (key === resolvedDefaultColorScheme) {
-        styleSheet[':root'] = css;
+        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
       } else {
-        styleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = css;
+        otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
       }
     });
     React.useEffect(function () {
-      if (colorScheme) {
+      if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
-        document.documentElement.setAttribute(attribute, colorScheme);
+        colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute]);
+    }, [colorScheme, attribute, colorSchemeNode]);
     useEnhancedEffect(function () {
-      if (!mode || !enableColorScheme) {
+      if (!mode || !enableColorScheme || !colorSchemeNode) {
         return undefined;
       }
 
-      var priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+      var priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
 
       if (mode === 'system') {
-        document.documentElement.style.setProperty('color-scheme', systemMode);
+        colorSchemeNode.style.setProperty('color-scheme', systemMode);
       } else {
-        document.documentElement.style.setProperty('color-scheme', mode);
+        colorSchemeNode.style.setProperty('color-scheme', mode);
       }
 
       return function () {
-        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode, enableColorScheme]);
+    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(function () {
       var timer;
 
-      if (disableTransitionOnChange && hasMounted.current) {
+      if (disableTransitionOnChange && hasMounted.current && documentNode) {
         // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-        var css = document.createElement('style');
-        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
-        document.head.appendChild(css); // Force browser repaint
+        var css = documentNode.createElement('style');
+        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+        documentNode.head.appendChild(css); // Force browser repaint
 
         (function () {
-          return window.getComputedStyle(document.body);
+          return window.getComputedStyle(documentNode.body);
         })();
 
         timer = setTimeout(function () {
-          document.head.removeChild(css);
+          documentNode.head.removeChild(css);
         }, 1);
       }
 
       return function () {
         clearTimeout(timer);
       };
-    }, [colorScheme, disableTransitionOnChange]);
+    }, [colorScheme, disableTransitionOnChange, documentNode]);
     React.useEffect(function () {
       hasMounted.current = true;
       return function () {
@@ -230,11 +244,11 @@ export default function createCssVarsProvider(options) {
         allColorSchemes: allColorSchemes
       },
       children: [/*#__PURE__*/_jsx(GlobalStyles, {
-        styles: {
-          ':root': rootCss
-        }
+        styles: _defineProperty({}, colorSchemeSelector, rootCss)
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: defaultColorSchemeStyleSheet
       }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: styleSheet
+        styles: otherColorSchemesStyleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -253,6 +267,21 @@ export default function createCssVarsProvider(options) {
      */
     children: PropTypes.node,
 
+    /**
+     * The node used to attach the color-scheme attribute
+     */
+    colorSchemeNode: PropTypes.any,
+
+    /**
+     * The CSS selector for attaching the generated custom properties
+     */
+    colorSchemeSelector: PropTypes.string,
+
+    /**
+     * localStorage key used to store `colorScheme`
+     */
+    colorSchemeStorageKey: PropTypes.string,
+
     /**
      * The initial color scheme used.
      */
@@ -268,6 +297,11 @@ export default function createCssVarsProvider(options) {
      */
     disableTransitionOnChange: PropTypes.bool,
 
+    /**
+     * The document to attach the attribute to
+     */
+    documentNode: PropTypes.any,
+
     /**
      * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
      */
@@ -283,6 +317,12 @@ export default function createCssVarsProvider(options) {
      */
     prefix: PropTypes.string,
 
+    /**
+     * The window that attaches the 'storage' event listener
+     * @default window
+     */
+    storageWindow: PropTypes.any,
+
     /**
      * The calculated theme object that will be passed through context.
      */

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,8 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
-      enableSystem = _ref.enableSystem,
+      _ref$enableSystem = _ref.enableSystem,
+      enableSystem = _ref$enableSystem === void 0 ? false : _ref$enableSystem,
       _ref$defaultLightColo = _ref.defaultLightColorScheme,
       defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
       _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
@@ -15,12 +16,14 @@ export default function getInitColorSchemeScript(options) {
       _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
       colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
       _ref$attribute = _ref.attribute,
-      attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute;
+      attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+      _ref$colorSchemeNode = _ref.colorSchemeNode,
+      colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
 
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n        }\n        if (colorScheme) {\n          document.documentElement.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n        }\n        if (colorScheme) {\n          ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

package/legacy/cssVars/useCurrentColorScheme.js

@@ -66,7 +66,9 @@ export default function useCurrentColorScheme(options) {
       _options$modeStorageK = options.modeStorageKey,
       modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
       _options$colorSchemeS = options.colorSchemeStorageKey,
-      colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS;
+      colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
+      _options$storageWindo = options.storageWindow,
+      storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
   var joinedColorSchemes = supportedColorSchemes.join(',');
 
   var _React$useState = React.useState(function () {
@@ -86,6 +88,10 @@ export default function useCurrentColorScheme(options) {
     setState(function (currentState) {
       var newMode = !mode ? defaultMode : mode;
 
+      if (mode === currentState.mode) {
+        return currentState;
+      }
+
       if (typeof localStorage !== 'undefined') {
         localStorage.setItem(modeStorageKey, newMode);
       }
@@ -98,7 +104,7 @@ export default function useCurrentColorScheme(options) {
   }, [modeStorageKey, defaultMode]);
   var setColorScheme = React.useCallback(function (value) {
     if (!value || typeof value === 'string') {
-      if (value && !supportedColorSchemes.includes(value)) {
+      if (value && !joinedColorSchemes.includes(value)) {
         console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
       } else {
         setState(function (currentState) {
@@ -125,7 +131,7 @@ export default function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
       console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
     } else {
       setState(function (currentState) {
@@ -150,7 +156,7 @@ export default function useCurrentColorScheme(options) {
         localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), value.dark);
       }
     }
-  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   var handleMediaQuery = React.useCallback(function (e) {
     if (state.mode === 'system') {
       setState(function (currentState) {
@@ -218,11 +224,16 @@ export default function useCurrentColorScheme(options) {
       }
     };
 
-    window.addEventListener('storage', handleStorage);
-    return function () {
-      return window.removeEventListener('storage', handleStorage);
-    };
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+    if (storageWindow) {
+      // For syncing color-scheme changes between iframes
+      storageWindow.addEventListener('storage', handleStorage);
+      return function () {
+        return storageWindow.removeEventListener('storage', handleStorage);
+      };
+    }
+
+    return undefined;
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
   return _extends({}, state, {
     colorScheme: colorScheme,
     setMode: setMode,

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.4
+/** @license MUI v5.8.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -44,4 +44,7 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as createContainer } from './Container/createContainer';
+export { default as Container } from './Container';
+export * from './Container';

package/legacy/spacing.js

@@ -52,7 +52,7 @@ var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
 
-  var themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
+  var themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return function (abs) {

package/legacy/style.js

@@ -3,12 +3,14 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
+  var checkVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
   if (!path || typeof path !== 'string') {
     return null;
   } // Check if CSS variables are used
 
 
-  if (obj && obj.vars) {
+  if (obj && obj.vars && checkVars) {
     var val = "vars.".concat(path).split('.').reduce(function (acc, item) {
       return acc && acc[item] ? acc[item] : null;
     }, obj);