@mui/system 5.6.3 → 5.8.0

package/modern/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/)
+ */
+
+const 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/modern/Container/ContainerProps.js

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

package/modern/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);
+}
+const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+export default containerClasses;

package/modern/Container/createContainer.js

@@ -0,0 +1,151 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+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";
+const defaultTheme = createTheme();
+const defaultCreateStyledComponent = systemStyled('div', {
+  name: 'MuiContainer',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+  }
+});
+
+const useThemePropsDefault = inProps => useThemePropsSystem({
+  props: inProps,
+  name: 'MuiContainer',
+  defaultTheme
+});
+
+const useUtilityClasses = (ownerState, componentName) => {
+  const getContainerUtilityClass = slot => {
+    return generateUtilityClass(componentName, slot);
+  };
+
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return composeClasses(slots, getContainerUtilityClass, classes);
+};
+
+export default function createContainer(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiContainer'
+  } = options;
+  const ContainerRoot = createStyledComponent(({
+    theme,
+    ownerState
+  }) => _extends({
+    width: '100%',
+    marginLeft: 'auto',
+    boxSizing: 'border-box',
+    marginRight: 'auto',
+    display: 'block'
+  }, !ownerState.disableGutters && {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    // @ts-ignore module augmentation fails if custom breakpoints are used
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
+    }
+  }), ({
+    theme,
+    ownerState
+  }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
+    const breakpoint = breakpointValueKey;
+    const value = theme.breakpoints.values[breakpoint];
+
+    if (value !== 0) {
+      // @ts-ignore
+      acc[theme.breakpoints.up(breakpoint)] = {
+        maxWidth: `${value}${theme.breakpoints.unit}`
+      };
+    }
+
+    return acc;
+  }, {}), ({
+    theme,
+    ownerState
+  }) => _extends({}, ownerState.maxWidth === 'xs' && {
+    // @ts-ignore module augmentation fails if custom breakpoints are used
+    [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' && {
+    // @ts-ignore module augmentation fails if custom breakpoints are used
+    [theme.breakpoints.up(ownerState.maxWidth)]: {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
+    }
+  }));
+  const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
+    const props = useThemeProps(inProps);
+
+    const {
+      className,
+      component = 'div',
+      disableGutters = false,
+      fixed = false,
+      maxWidth = 'lg'
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded);
+
+    const ownerState = _extends({}, props, {
+      component,
+      disableGutters,
+      fixed,
+      maxWidth
+    }); // @ts-ignore module augmentation fails if custom breakpoints are used
+
+
+    const 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/modern/Container/index.js

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

package/modern/createStyled.js

@@ -140,7 +140,9 @@ export default function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                theme
+              })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }

package/modern/cssVars/createCssVarsProvider.js

@@ -1,18 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"],
-      _excluded3 = ["components"];
+const _excluded = ["colorSchemes", "components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
+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";
@@ -20,7 +16,7 @@ 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) {
   const {
-    theme: baseTheme = {},
+    theme: defaultTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -29,10 +25,8 @@ export default function createCssVarsProvider(options) {
     shouldSkipGeneratingVar,
     resolveTheme
   } = options;
-  const systemSpacing = createSpacing(baseTheme.spacing);
-  const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
 
-  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[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\`.`);
   }
 
@@ -50,34 +44,28 @@ export default function createCssVarsProvider(options) {
 
   function CssVarsProvider({
     children,
-    theme: themeProp = {},
+    theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
-    enableColorScheme = designSystemEnableColorScheme
+    enableColorScheme = designSystemEnableColorScheme,
+    storageWindow = typeof window === 'undefined' ? undefined : window,
+    documentNode = typeof document === 'undefined' ? undefined : document,
+    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+    colorSchemeSelector = ':root'
   }) {
-    const {
-      colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    const hasMounted = React.useRef(false);
 
     const {
-      colorSchemes: colorSchemesProp = {}
-    } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
-
-    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
-
-    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-        {
+      colorSchemes = {},
       components = {}
-    } = _deepmerge,
-        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+    } = themeProp,
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
 
-    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -94,7 +82,9 @@ export default function createCssVarsProvider(options) {
       defaultLightColorScheme,
       defaultDarkColorScheme,
       modeStorageKey,
-      defaultMode
+      colorSchemeStorageKey,
+      defaultMode,
+      storageWindow
     });
 
     const resolvedColorScheme = (() => {
@@ -111,22 +101,21 @@ export default function createCssVarsProvider(options) {
       return colorScheme;
     })();
 
+    let theme = restThemeProp;
     const {
       css: rootCss,
       vars: rootVars,
       parsedTheme
-    } = cssVarsParser(mergedTheme, {
+    } = cssVarsParser(theme, {
       prefix,
       basePrefix: designSystemPrefix,
       shouldSkipGeneratingVar
     });
-    mergedTheme = _extends({}, parsedTheme, {
+    theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       prefix,
       vars: rootVars,
-      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
@@ -140,10 +129,16 @@ export default function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+      theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        theme = _extends({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
 
       const resolvedDefaultColorScheme = (() => {
@@ -159,54 +154,54 @@ export default function createCssVarsProvider(options) {
       })();
 
       if (key === resolvedDefaultColorScheme) {
-        styleSheet[':root'] = css;
+        styleSheet[colorSchemeSelector] = css;
       } else {
-        styleSheet[`[${attribute}="${key}"]`] = css;
+        styleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
     React.useEffect(() => {
-      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(() => {
-      if (!mode || !enableColorScheme) {
+      if (!mode || !enableColorScheme || !colorSchemeNode) {
         return undefined;
       }
 
-      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+      const 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 () => {
-        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode, enableColorScheme]);
+    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(() => {
       let timer;
 
-      if (disableTransitionOnChange && hasMounted.current) {
+      if (disableTransitionOnChange && hasMounted.current && documentNode) {
         // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-        const css = document.createElement('style');
-        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
-        document.head.appendChild(css); // Force browser repaint
+        const css = documentNode.createElement('style');
+        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+        documentNode.head.appendChild(css); // Force browser repaint
 
-        (() => window.getComputedStyle(document.body))();
+        (() => window.getComputedStyle(documentNode.body))();
 
         timer = setTimeout(() => {
-          document.head.removeChild(css);
+          documentNode.head.removeChild(css);
         }, 1);
       }
 
       return () => {
         clearTimeout(timer);
       };
-    }, [colorScheme, disableTransitionOnChange]);
+    }, [colorScheme, disableTransitionOnChange, documentNode]);
     React.useEffect(() => {
       hasMounted.current = true;
       return () => {
@@ -225,12 +220,12 @@ export default function createCssVarsProvider(options) {
       },
       children: [/*#__PURE__*/_jsx(GlobalStyles, {
         styles: {
-          ':root': rootCss
+          [colorSchemeSelector]: rootCss
         }
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
@@ -247,6 +242,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.
      */
@@ -262,6 +272,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
      */
@@ -277,6 +292,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/modern/cssVars/cssVarsParser.js

@@ -15,16 +15,18 @@
  * 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) => {
+export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
-      if (temp && typeof temp === 'object') {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === 'object') {
         temp[k] = value;
       }
     } else if (temp && typeof temp === 'object') {
       if (!temp[k]) {
-        temp[k] = {};
+        temp[k] = arrayKeys.includes(k) ? [] : {};
       }
 
       temp = temp[k];
@@ -44,14 +46,14 @@ export const assignNestedKeys = (obj, keys, value) => {
  */
 
 export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-  function recurse(object, parentKeys = []) {
+  function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
         if (value !== undefined && value !== null) {
           if (typeof value === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [...parentKeys, key]);
+            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
           } else {
-            callback([...parentKeys, key], value, object);
+            callback([...parentKeys, key], value, arrayKeys);
           }
         }
       }
@@ -118,7 +120,7 @@ export default function cssVarsParser(theme, options) {
   const css = {};
   const vars = {};
   const parsedTheme = {};
-  walkObjectDeep(theme, (keys, value) => {
+  walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         // for CSS variable, apply prefix or remove basePrefix from the variable
@@ -136,11 +138,11 @@ export default function cssVarsParser(theme, options) {
         Object.assign(css, {
           [cssVar]: getCssValue(keys, value)
         });
-        assignNestedKeys(vars, keys, `var(${cssVar})`);
+        assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
 
-    assignNestedKeys(parsedTheme, keys, value);
+    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
   return {

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,12 +5,13 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    enableSystem,
+    enableSystem = false,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE
+    attribute = DEFAULT_ATTRIBUTE,
+    colorSchemeNode = 'document.documentElement'
   } = options || {};
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
@@ -34,7 +35,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.documentElement.setAttribute('${attribute}', colorScheme);
+          ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }