@mui/system 5.8.0 → 5.8.3

package/cssVars/cssVarsParser.d.ts

@@ -1,70 +1,70 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  basePrefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
- *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
- *
- * @example
- * const { css, vars, parsedTheme } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
- */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-    parsedTheme: T;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ *
+ * @example
+ * const { css, vars, parsedTheme } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
+ * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+    parsedTheme: T;
+};
+export {};

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,40 +1,40 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
-export interface GetInitColorSchemeScriptOptions {
-    /**
-     * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
-     * @default false
-     */
-    enableSystem?: boolean;
-    /**
-     * The default color scheme to be used on the light mode
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`
-     * @default 'mui-mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`
-     * @default 'mui-color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme
-     * @default 'data-mui-color-scheme'
-     */
-    attribute?: string;
-}
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
+/// <reference types="react" />
+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 {
+    /**
+     * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
+     * @default false
+     */
+    enableSystem?: boolean;
+    /**
+     * The default color scheme to be used on the light mode
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     */
+    defaultDarkColorScheme?: string;
+    /**
+     * The node (provided as string) used to attach the color-scheme attribute
+     * @default 'document.documentElement'
+     */
+    colorSchemeNode?: string;
+    /**
+     * localStorage key used to store `mode`
+     * @default 'mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * DOM attribute for applying color scheme
+     * @default 'data-color-scheme'
+     */
+    attribute?: string;
+}
+export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;

package/cssVars/getInitColorSchemeScript.js

@@ -14,11 +14,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+const DEFAULT_MODE_STORAGE_KEY = 'mode';
 exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
-const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
-const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
 
 function getInitColorSchemeScript(options) {

package/cssVars/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export type { CreateCssVarsProviderResult } from './createCssVarsProvider';

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,53 +1,53 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-    /**
-     * User selected mode.
-     * Note: on the server, mode is always undefined
-     */
-    mode: Mode | undefined;
-    /**
-     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-     */
-    systemMode: SystemMode | undefined;
-    /**
-     * The color scheme for the light mode.
-     */
-    lightColorScheme: SupportedColorScheme;
-    /**
-     * The color scheme for the dark mode.
-     */
-    darkColorScheme: SupportedColorScheme;
-}
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-    /**
-     * The current application color scheme. It is always `undefined` on the server.
-     */
-    colorScheme: SupportedColorScheme | undefined;
-    /**
-     * `mode` is saved to internal state and localStorage
-     * If `mode` is null, it will be reset to the defaultMode
-     */
-    setMode: (mode: Mode | null) => void;
-    /**
-     * `colorScheme` is saved to internal state and localStorage
-     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-     */
-    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-        light: SupportedColorScheme | null;
-        dark: SupportedColorScheme | null;
-    }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    storageWindow?: Window | null;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};
+export declare type Mode = 'light' | 'dark' | 'system';
+export declare type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    storageWindow?: Window | null;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/esm/cssVars/createCssVarsProvider.js

@@ -8,7 +8,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_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import systemGetInitColorSchemeScript, { 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";
@@ -17,6 +17,9 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
 export default function createCssVarsProvider(options) {
   const {
     theme: defaultTheme = {},
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -46,9 +49,9 @@ export default function createCssVarsProvider(options) {
     children,
     theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey = defaultModeStorageKey,
+    colorSchemeStorageKey = defaultColorSchemeStorageKey,
+    attribute = defaultAttribute,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
@@ -116,9 +119,11 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       prefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix)
+      getCssVar: createGetCssVar(prefix),
+      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
-    const styleSheet = {};
+    const defaultColorSchemeStyleSheet = {};
+    const otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
@@ -154,9 +159,9 @@ export default function createCssVarsProvider(options) {
       })();
 
       if (key === resolvedDefaultColorScheme) {
-        styleSheet[colorSchemeSelector] = css;
+        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
       } else {
-        styleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
+        otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
     React.useEffect(() => {
@@ -223,7 +228,9 @@ export default function createCssVarsProvider(options) {
           [colorSchemeSelector]: rootCss
         }
       }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: styleSheet
+        styles: defaultColorSchemeStyleSheet
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: otherColorSchemesStyleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -303,6 +310,13 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+    attribute: defaultAttribute,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    modeStorageKey: defaultModeStorageKey
+  }, params));
+
   return {
     CssVarsProvider,
     useColorScheme,

package/esm/cssVars/getInitColorSchemeScript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
     enableSystem = false,

package/esm/spacing.js

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

package/esm/style.js

@@ -1,13 +1,13 @@
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-export function getPath(obj, path) {
+export function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
   } // Check if CSS variables are used
 
 
-  if (obj && obj.vars) {
+  if (obj && obj.vars && checkVars) {
     const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
 
     if (val != null) {

package/index.js

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

package/index.spec.d.ts

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

package/legacy/cssVars/createCssVarsProvider.js

@@ -10,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_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import systemGetInitColorSchemeScript, { 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";
@@ -19,6 +19,12 @@ export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-tr
 export default function createCssVarsProvider(options) {
   var _options$theme = options.theme,
       defaultTheme = _options$theme === void 0 ? {} : _options$theme,
+      _options$attribute = options.attribute,
+      defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
+      _options$modeStorageK = options.modeStorageKey,
+      defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+      _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,
       designSystemColorScheme = options.defaultColorScheme,
@@ -54,11 +60,11 @@ export default function createCssVarsProvider(options) {
         _ref$prefix = _ref.prefix,
         prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         _ref$modeStorageKey = _ref.modeStorageKey,
-        modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+        modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
         _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
+        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
         _ref$attribute = _ref.attribute,
-        attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+        attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
         _ref$defaultMode = _ref.defaultMode,
         defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
@@ -134,9 +140,13 @@ export default function createCssVarsProvider(options) {
       colorSchemes: colorSchemes,
       prefix: prefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix)
+      getCssVar: createGetCssVar(prefix),
+      getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
+        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
+      }
     });
-    var styleSheet = {};
+    var defaultColorSchemeStyleSheet = {};
+    var otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
@@ -176,9 +186,9 @@ export default function createCssVarsProvider(options) {
       }();
 
       if (key === resolvedDefaultColorScheme) {
-        styleSheet[colorSchemeSelector] = css;
+        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
       } else {
-        styleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
+        otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
       }
     });
     React.useEffect(function () {
@@ -245,7 +255,9 @@ export default function createCssVarsProvider(options) {
       children: [/*#__PURE__*/_jsx(GlobalStyles, {
         styles: _defineProperty({}, colorSchemeSelector, rootCss)
       }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: styleSheet
+        styles: defaultColorSchemeStyleSheet
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: otherColorSchemesStyleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -325,6 +337,15 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+
+  var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
+    return systemGetInitColorSchemeScript(_extends({
+      attribute: defaultAttribute,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey,
+      modeStorageKey: defaultModeStorageKey
+    }, params));
+  };
+
   return {
     CssVarsProvider: CssVarsProvider,
     useColorScheme: useColorScheme,

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export var DEFAULT_MODE_STORAGE_KEY = 'mode';
+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$enableSystem = _ref.enableSystem,

package/legacy/index.js

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

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);