@mui/system 5.10.7 → 5.10.9

package/CHANGELOG.md

@@ -1,5 +1,122 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.9
+
+<!-- generated comparing v5.10.8..master -->
+
+_Oct 10, 2022_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [Joy] Button loading functionality has been added by @kushagra010 (#34658)
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.9`
+
+- &#8203;<!-- 16 -->[Grid v2][system] Handle direction object prop for responsive design (#34574) @vanyaxk
+- &#8203;<!-- 03 -->[Slider] Fix unnecessary accessibility attribute in root element (#34610) @vanyaxk
+
+### `@mui/system@5.10.9`
+
+#### BREAKING CHANGE
+
+- &#8203;<!-- 17 -->[system] Fix color-scheme implementation (#34639) @siriwatknp
+
+  The `enableColorScheme` prop has been removed from `CssVarsProvider` and `getInitColorScheme` (both Material UI and Joy UI).
+
+  Migration:
+
+  - **Material UI**: you can enable the CSS color scheme via `<CssBaseline enableColorScheme />`.
+  - **Joy UI**: it is enabled automatically if you use `<CssBaseline />`, [see the docs](https://mui.com/joy-ui/react-css-baseline/).
+
+#### Changes
+
+- &#8203;<!-- 02 -->[system] Fix typo in createCssVarsProvider (#34661) @HexM7
+
+### `@mui/base@5.0.0-alpha.101`
+
+- &#8203;<!-- 01 -->[TrapFocus] Restore the previously exported type from @mui/material (#34601) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.49`
+
+- &#8203;<!-- 04 -->[Joy] Add button loading functionality (#34658) @kushagra010
+
+### Docs
+
+- &#8203;<!-- 18 -->[docs] Revert #34541 (#34700) @michaldudak
+- &#8203;<!-- 15 -->[blog] Blog post for MUI X v6 alpha zero (#34424) @joserodolfofreitas
+- &#8203;<!-- 09 -->[docs] Improve Joy UI tutorial demo (#34653) @oliviertassinari
+- &#8203;<!-- 08 -->[docs] Explain how SelectUnstyled renders a hidden input (#34638) @michaldudak
+- &#8203;<!-- 07 -->[docs] Fix Taiwan description (#34611) @oliviertassinari
+- &#8203;<!-- 06 -->[docs] Fix codesandbox export with dayjs (#34619) @oliviertassinari
+- &#8203;<!-- 05 -->[docs] Explain the purpose of renderGroup prop (#34066) @michaldudak
+
+### Core
+
+- &#8203;<!-- 14 -->[core] Make useForkRef variadic (#27939) @michaldudak
+- &#8203;<!-- 13 -->[core] Speedup of yarn install in the CI (#34632) @oliviertassinari
+- &#8203;<!-- 12 -->[core] Fix markdown loader on Windows (#34623) @michaldudak
+- &#8203;<!-- 11 -->[core] Update changelog for version v5.10.8 (#34593) @mnajdova
+- &#8203;<!-- 10 -->[core] Update root package.json version (#34592) @mnajdova
+
+All contributors of this release in alphabetical order: @HexM7, @joserodolfofreitas, @kushagra010, @michaldudak, @mnajdova, @oliviertassinari, @vanyaxk
+
+## 5.10.8
+
+<!-- generated comparing v5.10.7..master -->
+
+_Oct 3, 2022_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [SnackbarUnstyled](https://mui.com/base/react-snackbar/) component & headless hook are added to MUI Base (#33227) @ZeeshanTamboli
+- 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958)
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.8`
+
+- &#8203;<!-- 28 -->[Autocomplete] Skip filtering when list of options is loading (#33278) @ndebeiss
+- &#8203;<!-- 13 -->[Fab] Add `disabled` class to FAB button (#34245) @meenarama
+- &#8203;<!-- 09 -->[l10n] Add Arabic Saudi Arabia (ar-SA) locale (#33340) @rolule
+- &#8203;<!-- 08 -->[l10n] zhTW refinement (#33391) @Aporim2051
+- &#8203;<!-- 07 -->[Popover] Add `ownerState` on the paper slot (#34445) @kabernardes
+- &#8203;<!-- 05 -->[Slider] Fixed incorrect marks displayed due to duplicate keys in range (#33526) @kskd1804
+- &#8203;<!-- 03 -->[TextField] Fix typo in FormControlLabel declaration file (#34535) @hghmn
+
+### `@mui/base@5.0.0-alpha.100`
+
+- &#8203;<!-- 04 -->[SnackbarUnstyled] Create component and `useSnackbar` hook (#33227) @ZeeshanTamboli
+
+### `@mui/joy@5.0.0-alpha.48`
+
+- &#8203;<!-- 12 -->[Joy] Fix `variantPlain` classname missing in few components (#34534) @hbjORbj
+- &#8203;<!-- 11 -->[Joy] Fix input decorator color and list padding (#34586) @siriwatknp
+- &#8203;<!-- 10 -->[Joy] Miscellaneous fixes (#34492) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 27 -->[blog] Fix 404 link in base introduction @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix CI build (#34589) @mnajdova
+- &#8203;<!-- 20 -->[docs] Temporary remove date picker from home page (#34541) @siriwatknp
+- &#8203;<!-- 19 -->[docs] Revise and expand Joy UI "Tutorial" doc (#34569) @samuelsycamore
+- &#8203;<!-- 18 -->[docs] Fix SEO issues (#34537) @oliviertassinari
+- &#8203;<!-- 17 -->[docs] Add CSS variables documentation for Material UI (#33958) @siriwatknp
+- &#8203;<!-- 16 -->[docs] Capitalize Material Design on the Breakpoints page (#34481) @Dustin-Digitar
+- &#8203;<!-- 15 -->[docs] Able to load doc components inside markdown files (#34243) @flaviendelangle
+- &#8203;<!-- 14 -->[docs] Use mouse pointer on esc button in the search modal (#34485) @minkyngkm
+- &#8203;<!-- 02 -->[website] Fix typo in pricing FAQ @oliviertassinari
+- &#8203;<!-- 01 -->[website] Move the React Engineer role from open to next (#34494) @mnajdova
+
+### Core
+
+- &#8203;<!-- 26 -->[core] Update root package.json version (#34592) @mnajdova
+- &#8203;<!-- 25 -->[core] Remove useless comment in fixtures (#34581) @Garz4
+- &#8203;<!-- 24 -->[core] Fix link to CODE_OF_CONDUCT.md (#34543) @peippo
+- &#8203;<!-- 23 -->[core] Remove outdated docsearch.js dependency (#34421) @oliviertassinari
+- &#8203;<!-- 22 -->[core] Add `newFeature` to the typing of MuiPage (#34511) @flaviendelangle
+
+All contributors of this release in alphabetical order: @Aporim2051, @Dustin-Digitar, @flaviendelangle, @Garz4, @hbjORbj, @hghmn, @kabernardes, @kskd1804, @meenarama, @minkyngkm, @mnajdova, @ndebeiss, @oliviertassinari, @peippo, @rolule, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.10.7
 
 <!-- generated comparing v5.10.6..master -->

package/Unstable_Grid/createGrid.js

@@ -74,7 +74,7 @@ function createGrid(options = {}) {
       gridSize
     } = ownerState;
     const slots = {
-      root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing, theme.breakpoints.keys[0]) : [])]
+      root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing, theme.breakpoints.keys[0]) : [])]
     };
     return (0, _utils.unstable_composeClasses)(slots, slot => (0, _utils.unstable_generateUtilityClass)(componentName, slot), {});
   };

package/Unstable_Grid/gridGenerator.d.ts

@@ -1,6 +1,7 @@
 import { Breakpoints } from '../createTheme/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
-import { GridOwnerState } from './GridProps';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { GridDirection, GridOwnerState } from './GridProps';
 interface Props {
     theme: {
         breakpoints: Breakpoints;
@@ -23,4 +24,5 @@ export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props)
 export declare const generateGridStyles: ({ ownerState }: Props) => {};
 export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
 export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
+export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
 export {};

package/Unstable_Grid/gridGenerator.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = void 0;
+exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -272,4 +272,18 @@ const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
   return [];
 };
 
-exports.generateSpacingClassNames = generateSpacingClassNames;
+exports.generateSpacingClassNames = generateSpacingClassNames;
+
+const generateDirectionClasses = direction => {
+  if (direction === undefined) {
+    return [];
+  }
+
+  if (typeof direction === 'object') {
+    return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
+  }
+
+  return [`direction-xs-${String(direction)}`];
+};
+
+exports.generateDirectionClasses = generateDirectionClasses;

package/cssVars/createCssVarsProvider.d.ts

@@ -39,11 +39,6 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
-  /**
-   * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-   * @default true
-   */
-  enableColorScheme?: boolean;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.

package/cssVars/createCssVarsProvider.js

@@ -45,10 +45,9 @@ function createCssVarsProvider(options) {
     attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: desisgnSystemMode = 'light',
+    defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    enableColorScheme: designSystemEnableColorScheme = true,
     shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
@@ -76,10 +75,9 @@ function createCssVarsProvider(options) {
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
-    defaultMode = desisgnSystemMode,
+    defaultMode = designSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
-    enableColorScheme = designSystemEnableColorScheme,
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -95,7 +93,8 @@ function createCssVarsProvider(options) {
           restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+
     const {
       mode,
       setMode,
@@ -114,36 +113,53 @@ function createCssVarsProvider(options) {
       storageWindow
     });
 
-    const resolvedColorScheme = (() => {
+    const calculatedMode = (() => {
+      if (!mode) {
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
+        }
+
+        return defaultMode;
+      }
+
+      return mode;
+    })();
+
+    const calculatedColorScheme = (() => {
       if (!colorScheme) {
         // This scope occurs on the server
-        if (defaultMode === 'dark') {
+        if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'auto'
+        } // use light color scheme, if default mode is 'light' | 'system'
 
 
         return defaultLightColorScheme;
       }
 
       return colorScheme;
-    })();
+    })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+
 
-    let theme = restThemeProp;
     const {
       css: rootCss,
       vars: rootVars,
       parsedTheme
-    } = (0, _cssVarsParser.default)(theme, {
+    } = (0, _cssVarsParser.default)(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    });
-    theme = (0, _extends2.default)({}, parsedTheme, {
+    }); // 3. Start composing the theme object
+
+    let theme = (0, _extends2.default)({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    });
+    }); // 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 = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -157,13 +173,12 @@ function createCssVarsProvider(options) {
       });
       theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
 
-      if (key === resolvedColorScheme) {
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
         theme = (0, _extends2.default)({}, theme, parsedScheme);
 
         if (theme.palette) {
-          // assign runtime mode & colorScheme
-          theme.palette.mode = mode;
-          theme.palette.colorScheme = resolvedColorScheme;
+          theme.palette.colorScheme = key;
         }
       }
 
@@ -193,35 +208,21 @@ function createCssVarsProvider(options) {
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
-    });
+    }); // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+
     React.useEffect(() => {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
-    (0, _utils.unstable_useEnhancedEffect)(() => {
-      if (!mode || !enableColorScheme || !colorSchemeNode) {
-        return undefined;
-      }
+    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
 
-      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') {
-        colorSchemeNode.style.setProperty('color-scheme', systemMode);
-      } else {
-        colorSchemeNode.style.setProperty('color-scheme', mode);
-      }
-
-      return () => {
-        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
-      };
-    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(() => {
       let timer;
 
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
         const css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
         documentNode.head.appendChild(css); // Force browser repaint
@@ -246,6 +247,7 @@ function createCssVarsProvider(options) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
       value: {
         mode,
+        systemMode,
         setMode,
         lightColorScheme,
         darkColorScheme,
@@ -314,11 +316,6 @@ function createCssVarsProvider(options) {
      */
     documentNode: _propTypes.default.any,
 
-    /**
-     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-     */
-    enableColorScheme: _propTypes.default.bool,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
@@ -340,12 +337,16 @@ function createCssVarsProvider(options) {
      */
     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 => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    modeStorageKey: defaultModeStorageKey,
-    enableColorScheme: designSystemEnableColorScheme
+    defaultMode: designSystemMode,
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    modeStorageKey: defaultModeStorageKey
   }, params));
 
   return {

package/cssVars/getInitColorSchemeScript.d.ts

@@ -3,11 +3,6 @@ export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
 export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
 export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
 export interface GetInitColorSchemeScriptOptions {
-    /**
-     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-     * @default true
-     */
-    enableColorScheme?: boolean;
     /**
      * The mode to be used for the first visit
      * @default 'light'

package/cssVars/getInitColorSchemeScript.js

@@ -23,7 +23,6 @@ exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
 
 function getInitColorSchemeScript(options) {
   const {
-    enableColorScheme = true,
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -59,9 +58,6 @@ function getInitColorSchemeScript(options) {
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
-        if (${enableColorScheme} && !!cssColorScheme) {
-          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
-        }
       } catch (e) {} })();`
     }
   });

package/esm/Unstable_Grid/createGrid.js

@@ -10,7 +10,7 @@ import useThemePropsSystem from '../useThemeProps';
 import useTheme from '../useTheme';
 import { extendSxProp } from '../styleFunctionSx';
 import createTheme from '../createTheme';
-import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames } from './gridGenerator';
+import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from './gridGenerator';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme(); // widening Theme to any so that the consumer can own the theme structure.
 
@@ -47,7 +47,7 @@ export default function createGrid(options = {}) {
       gridSize
     } = ownerState;
     const slots = {
-      root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+      root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
     };
     return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
   };

package/esm/Unstable_Grid/gridGenerator.js

@@ -233,4 +233,15 @@ export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') =>
   }
 
   return [];
+};
+export const generateDirectionClasses = direction => {
+  if (direction === undefined) {
+    return [];
+  }
+
+  if (typeof direction === 'object') {
+    return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
+  }
+
+  return [`direction-xs-${String(direction)}`];
 };

package/esm/cssVars/createCssVarsProvider.js

@@ -4,7 +4,7 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
@@ -19,10 +19,9 @@ export default function createCssVarsProvider(options) {
     attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: desisgnSystemMode = 'light',
+    defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    enableColorScheme: designSystemEnableColorScheme = true,
     shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
@@ -50,10 +49,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
-    defaultMode = desisgnSystemMode,
+    defaultMode = designSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
-    enableColorScheme = designSystemEnableColorScheme,
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -71,7 +69,8 @@ export default function createCssVarsProvider(options) {
 
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+
     const {
       mode,
       setMode,
@@ -90,36 +89,54 @@ export default function createCssVarsProvider(options) {
       storageWindow
     });
 
-    const resolvedColorScheme = (() => {
+    const calculatedMode = (() => {
+      if (!mode) {
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
+        }
+
+        return defaultMode;
+      }
+
+      return mode;
+    })();
+
+    const calculatedColorScheme = (() => {
       if (!colorScheme) {
         // This scope occurs on the server
-        if (defaultMode === 'dark') {
+        if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'auto'
+        } // use light color scheme, if default mode is 'light' | 'system'
 
 
         return defaultLightColorScheme;
       }
 
       return colorScheme;
-    })();
+    })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+
 
-    let theme = restThemeProp;
     const {
       css: rootCss,
       vars: rootVars,
       parsedTheme
-    } = cssVarsParser(theme, {
+    } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    });
-    theme = _extends({}, parsedTheme, {
+    }); // 3. Start composing the theme object
+
+    let theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    });
+    }); // 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 = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -133,13 +150,12 @@ export default function createCssVarsProvider(options) {
       });
       theme.vars = deepmerge(theme.vars, vars);
 
-      if (key === resolvedColorScheme) {
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
         theme = _extends({}, theme, parsedScheme);
 
         if (theme.palette) {
-          // assign runtime mode & colorScheme
-          theme.palette.mode = mode;
-          theme.palette.colorScheme = resolvedColorScheme;
+          theme.palette.colorScheme = key;
         }
       }
 
@@ -169,35 +185,21 @@ export default function createCssVarsProvider(options) {
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
-    });
+    }); // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+
     React.useEffect(() => {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
-    useEnhancedEffect(() => {
-      if (!mode || !enableColorScheme || !colorSchemeNode) {
-        return undefined;
-      }
-
-      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') {
-        colorSchemeNode.style.setProperty('color-scheme', systemMode);
-      } else {
-        colorSchemeNode.style.setProperty('color-scheme', mode);
-      }
+    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
 
-      return () => {
-        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
-      };
-    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(() => {
       let timer;
 
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
         const css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
         documentNode.head.appendChild(css); // Force browser repaint
@@ -222,6 +224,7 @@ export default function createCssVarsProvider(options) {
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode,
+        systemMode,
         setMode,
         lightColorScheme,
         darkColorScheme,
@@ -290,11 +293,6 @@ export default function createCssVarsProvider(options) {
      */
     documentNode: PropTypes.any,
 
-    /**
-     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-     */
-    enableColorScheme: PropTypes.bool,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
@@ -316,12 +314,16 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
 
   const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    modeStorageKey: defaultModeStorageKey,
-    enableColorScheme: designSystemEnableColorScheme
+    defaultMode: designSystemMode,
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    modeStorageKey: defaultModeStorageKey
   }, params));
 
   return {

package/esm/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,6 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    enableColorScheme = true,
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -41,9 +40,6 @@ export default function getInitColorSchemeScript(options) {
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
-        if (${enableColorScheme} && !!cssColorScheme) {
-          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
-        }
       } catch (e) {} })();`
     }
   });

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.7
+/** @license MUI v5.10.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Unstable_Grid/createGrid.js

@@ -11,7 +11,7 @@ import useThemePropsSystem from '../useThemeProps';
 import useTheme from '../useTheme';
 import { extendSxProp } from '../styleFunctionSx';
 import createTheme from '../createTheme';
-import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames } from './gridGenerator';
+import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from './gridGenerator';
 import { jsx as _jsx } from "react/jsx-runtime";
 var defaultTheme = createTheme(); // widening Theme to any so that the consumer can own the theme structure.
 
@@ -49,7 +49,7 @@ export default function createGrid() {
         wrap = ownerState.wrap,
         gridSize = ownerState.gridSize;
     var slots = {
-      root: ['root', container && 'container', direction !== 'row' && "direction-xs-".concat(String(direction)), wrap !== 'wrap' && "wrap-xs-".concat(String(wrap))].concat(_toConsumableArray(generateSizeClassNames(gridSize)), _toConsumableArray(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []))
+      root: ['root', container && 'container', wrap !== 'wrap' && "wrap-xs-".concat(String(wrap))].concat(_toConsumableArray(generateDirectionClasses(direction)), _toConsumableArray(generateSizeClassNames(gridSize)), _toConsumableArray(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []))
     };
     return composeClasses(slots, function (slot) {
       return generateUtilityClass(componentName, slot);

package/legacy/Unstable_Grid/gridGenerator.js

@@ -242,4 +242,21 @@ export var generateSpacingClassNames = function generateSpacingClassNames(spacin
   }
 
   return [];
+};
+export var generateDirectionClasses = function generateDirectionClasses(direction) {
+  if (direction === undefined) {
+    return [];
+  }
+
+  if (_typeof(direction) === 'object') {
+    return Object.entries(direction).map(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 2),
+          key = _ref13[0],
+          value = _ref13[1];
+
+      return "direction-".concat(key, "-").concat(value);
+    });
+  }
+
+  return ["direction-xs-".concat(String(direction))];
 };

package/legacy/cssVars/createCssVarsProvider.js

@@ -6,7 +6,7 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
@@ -25,12 +25,10 @@ export default function createCssVarsProvider(options) {
       _options$colorSchemeS = options.colorSchemeStorageKey,
       defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
       _options$defaultMode = options.defaultMode,
-      desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+      designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
       _options$disableTrans = options.disableTransitionOnChange,
       designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-      _options$enableColorS = options.enableColorScheme,
-      designSystemEnableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
       designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
       resolveTheme = options.resolveTheme,
       excludeVariablesFromRoot = options.excludeVariablesFromRoot;
@@ -62,13 +60,11 @@ export default function createCssVarsProvider(options) {
         _ref$attribute = _ref.attribute,
         attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
         _ref$defaultMode = _ref.defaultMode,
-        defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _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$enableColorSchem = _ref.enableColorScheme,
-        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,
@@ -90,7 +86,7 @@ export default function createCssVarsProvider(options) {
 
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
 
     var _useCurrentColorSchem = useCurrentColorScheme({
       supportedColorSchemes: allColorSchemes,
@@ -109,31 +105,44 @@ export default function createCssVarsProvider(options) {
         colorScheme = _useCurrentColorSchem.colorScheme,
         setColorScheme = _useCurrentColorSchem.setColorScheme;
 
-    var resolvedColorScheme = function () {
+    var calculatedMode = function () {
+      if (!mode) {
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
+        }
+
+        return defaultMode;
+      }
+
+      return mode;
+    }();
+
+    var calculatedColorScheme = function () {
       if (!colorScheme) {
         // This scope occurs on the server
-        if (defaultMode === 'dark') {
+        if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'auto'
+        } // use light color scheme, if default mode is 'light' | 'system'
 
 
         return defaultLightColorScheme;
       }
 
       return colorScheme;
-    }();
+    }(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
 
-    var theme = restThemeProp;
 
-    var _cssVarsParser = cssVarsParser(theme, {
+    var _cssVarsParser = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar: shouldSkipGeneratingVar
     }),
         rootCss = _cssVarsParser.css,
         rootVars = _cssVarsParser.vars,
-        parsedTheme = _cssVarsParser.parsedTheme;
+        parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
 
-    theme = _extends({}, parsedTheme, {
+
+    var theme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
       cssVarPrefix: cssVarPrefix,
@@ -141,7 +150,11 @@ export default function createCssVarsProvider(options) {
       getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
         return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
       }
-    });
+    }); // 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 (_ref2) {
@@ -159,13 +172,12 @@ export default function createCssVarsProvider(options) {
 
       theme.vars = deepmerge(theme.vars, vars);
 
-      if (key === resolvedColorScheme) {
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
         theme = _extends({}, theme, parsedScheme);
 
         if (theme.palette) {
-          // assign runtime mode & colorScheme
-          theme.palette.mode = mode;
-          theme.palette.colorScheme = resolvedColorScheme;
+          theme.palette.colorScheme = key;
         }
       }
 
@@ -195,35 +207,21 @@ export default function createCssVarsProvider(options) {
       } else {
         otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
       }
-    });
+    }); // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+
     React.useEffect(function () {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
-    useEnhancedEffect(function () {
-      if (!mode || !enableColorScheme || !colorSchemeNode) {
-        return undefined;
-      }
+    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
 
-      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') {
-        colorSchemeNode.style.setProperty('color-scheme', systemMode);
-      } else {
-        colorSchemeNode.style.setProperty('color-scheme', mode);
-      }
-
-      return function () {
-        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
-      };
-    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(function () {
       var timer;
 
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
         var css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
         documentNode.head.appendChild(css); // Force browser repaint
@@ -250,6 +248,7 @@ export default function createCssVarsProvider(options) {
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode: mode,
+        systemMode: systemMode,
         setMode: setMode,
         lightColorScheme: lightColorScheme,
         darkColorScheme: darkColorScheme,
@@ -316,11 +315,6 @@ export default function createCssVarsProvider(options) {
      */
     documentNode: PropTypes.any,
 
-    /**
-     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-     */
-    enableColorScheme: PropTypes.bool,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
@@ -342,13 +336,17 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+  var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+  var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
 
   var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
     return systemGetInitColorSchemeScript(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      modeStorageKey: defaultModeStorageKey,
-      enableColorScheme: designSystemEnableColorScheme
+      defaultMode: designSystemMode,
+      defaultLightColorScheme: defaultLightColorScheme,
+      defaultDarkColorScheme: defaultDarkColorScheme,
+      modeStorageKey: defaultModeStorageKey
     }, params));
   };
 

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -5,8 +5,6 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
-      _ref$enableColorSchem = _ref.enableColorScheme,
-      enableColorScheme = _ref$enableColorSchem === void 0 ? true : _ref$enableColorSchem,
       _ref$defaultMode = _ref.defaultMode,
       defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
       _ref$defaultLightColo = _ref.defaultLightColorScheme,
@@ -25,7 +23,7 @@ export default function getInitColorSchemeScript(options) {
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n        var cssColorScheme = mode;\n        var colorScheme = '';\n        if (mode === 'system') {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            cssColorScheme = 'dark';\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            cssColorScheme = 'light';\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        if (").concat(enableColorScheme, " && !!cssColorScheme) {\n          ").concat(colorSchemeNode, ".style.setProperty('color-scheme', cssColorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n        var cssColorScheme = mode;\n        var colorScheme = '';\n        if (mode === 'system') {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            cssColorScheme = 'dark';\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            cssColorScheme = 'light';\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/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.7
+/** @license MUI v5.10.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/Unstable_Grid/createGrid.js

@@ -10,7 +10,7 @@ import useThemePropsSystem from '../useThemeProps';
 import useTheme from '../useTheme';
 import { extendSxProp } from '../styleFunctionSx';
 import createTheme from '../createTheme';
-import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames } from './gridGenerator';
+import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from './gridGenerator';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme(); // widening Theme to any so that the consumer can own the theme structure.
 
@@ -47,7 +47,7 @@ export default function createGrid(options = {}) {
       gridSize
     } = ownerState;
     const slots = {
-      root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+      root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
     };
     return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
   };

package/modern/Unstable_Grid/gridGenerator.js

@@ -229,4 +229,15 @@ export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') =>
   }
 
   return [];
+};
+export const generateDirectionClasses = direction => {
+  if (direction === undefined) {
+    return [];
+  }
+
+  if (typeof direction === 'object') {
+    return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
+  }
+
+  return [`direction-xs-${String(direction)}`];
 };

package/modern/cssVars/createCssVarsProvider.js

@@ -4,7 +4,7 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
@@ -19,10 +19,9 @@ export default function createCssVarsProvider(options) {
     attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: desisgnSystemMode = 'light',
+    defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    enableColorScheme: designSystemEnableColorScheme = true,
     shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
@@ -50,10 +49,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
-    defaultMode = desisgnSystemMode,
+    defaultMode = designSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
-    enableColorScheme = designSystemEnableColorScheme,
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -71,7 +69,8 @@ export default function createCssVarsProvider(options) {
 
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+
     const {
       mode,
       setMode,
@@ -90,36 +89,54 @@ export default function createCssVarsProvider(options) {
       storageWindow
     });
 
-    const resolvedColorScheme = (() => {
+    const calculatedMode = (() => {
+      if (!mode) {
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
+        }
+
+        return defaultMode;
+      }
+
+      return mode;
+    })();
+
+    const calculatedColorScheme = (() => {
       if (!colorScheme) {
         // This scope occurs on the server
-        if (defaultMode === 'dark') {
+        if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'auto'
+        } // use light color scheme, if default mode is 'light' | 'system'
 
 
         return defaultLightColorScheme;
       }
 
       return colorScheme;
-    })();
+    })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+
 
-    let theme = restThemeProp;
     const {
       css: rootCss,
       vars: rootVars,
       parsedTheme
-    } = cssVarsParser(theme, {
+    } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    });
-    theme = _extends({}, parsedTheme, {
+    }); // 3. Start composing the theme object
+
+    let theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    });
+    }); // 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 = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -133,13 +150,12 @@ export default function createCssVarsProvider(options) {
       });
       theme.vars = deepmerge(theme.vars, vars);
 
-      if (key === resolvedColorScheme) {
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
         theme = _extends({}, theme, parsedScheme);
 
         if (theme.palette) {
-          // assign runtime mode & colorScheme
-          theme.palette.mode = mode;
-          theme.palette.colorScheme = resolvedColorScheme;
+          theme.palette.colorScheme = key;
         }
       }
 
@@ -169,35 +185,21 @@ export default function createCssVarsProvider(options) {
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
-    });
+    }); // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+
     React.useEffect(() => {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
-    useEnhancedEffect(() => {
-      if (!mode || !enableColorScheme || !colorSchemeNode) {
-        return undefined;
-      }
-
-      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') {
-        colorSchemeNode.style.setProperty('color-scheme', systemMode);
-      } else {
-        colorSchemeNode.style.setProperty('color-scheme', mode);
-      }
+    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
 
-      return () => {
-        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
-      };
-    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(() => {
       let timer;
 
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
         const css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
         documentNode.head.appendChild(css); // Force browser repaint
@@ -222,6 +224,7 @@ export default function createCssVarsProvider(options) {
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode,
+        systemMode,
         setMode,
         lightColorScheme,
         darkColorScheme,
@@ -290,11 +293,6 @@ export default function createCssVarsProvider(options) {
      */
     documentNode: PropTypes.any,
 
-    /**
-     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-     */
-    enableColorScheme: PropTypes.bool,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
@@ -316,12 +314,16 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
 
   const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    modeStorageKey: defaultModeStorageKey,
-    enableColorScheme: designSystemEnableColorScheme
+    defaultMode: designSystemMode,
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    modeStorageKey: defaultModeStorageKey
   }, params));
 
   return {

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,6 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    enableColorScheme = true,
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -41,9 +40,6 @@ export default function getInitColorSchemeScript(options) {
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
-        if (${enableColorScheme} && !!cssColorScheme) {
-          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
-        }
       } catch (e) {} })();`
     }
   });

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.7
+/** @license MUI v5.10.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.10.7",
+  "version": "5.10.9",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
-    "@mui/private-theming": "^5.10.6",
-    "@mui/styled-engine": "^5.10.7",
+    "@mui/private-theming": "^5.10.9",
+    "@mui/styled-engine": "^5.10.8",
     "@mui/types": "^7.2.0",
-    "@mui/utils": "^5.10.6",
+    "@mui/utils": "^5.10.9",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",
     "prop-types": "^15.8.1"