@mui/system 5.10.15 → 5.10.17

package/cssVars/cssVarsParser.d.ts

@@ -1,4 +1,4 @@
-declare type NestedRecord<V = any> = {
+type NestedRecord<V = any> = {
     [k: string | number]: NestedRecord<V> | V;
 };
 /**
@@ -41,10 +41,10 @@ export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, ca
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @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.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -52,7 +52,6 @@ export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, ca
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
     prefix?: string;
@@ -60,6 +59,5 @@ export default function cssVarsParser<T extends Record<string, any>>(theme: T, o
 }): {
     css: Record<string, string | number>;
     vars: NestedRecord<string>;
-    parsedTheme: T;
 };
 export {};

package/cssVars/cssVarsParser.js

@@ -96,10 +96,10 @@ const getCssValue = (keys, value) => {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @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.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -107,7 +107,6 @@ const getCssValue = (keys, value) => {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 function cssVarsParser(theme, options) {
   const {
@@ -116,7 +115,6 @@ function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -128,13 +126,11 @@ function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
 
   return {
     css,
-    vars,
-    parsedTheme
+    vars
   };
 }

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,5 +1,5 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
+export type Mode = 'light' | 'dark' | 'system';
+export type SystemMode = Exclude<Mode, 'system'>;
 export interface State<SupportedColorScheme extends string> {
     /**
      * User selected mode.
@@ -19,7 +19,7 @@ export interface State<SupportedColorScheme extends string> {
      */
     darkColorScheme: SupportedColorScheme;
 }
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
     /**
      * The current application color scheme. It is always `undefined` on the server.
      */

package/esm/colorManipulator.js

@@ -90,6 +90,16 @@ export const colorChannel = color => {
   const decomposedColor = decomposeColor(color);
   return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
 };
+export const private_safeColorChannel = (color, warning) => {
+  try {
+    return colorChannel(color);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+};
 
 /**
  * Converts a color object with type and values to a string.
@@ -220,6 +230,16 @@ export function alpha(color, value) {
   }
   return recomposeColor(color);
 }
+export function private_safeAlpha(color, value, warning) {
+  try {
+    return alpha(color, value);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darkens a color.
@@ -239,6 +259,16 @@ export function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function private_safeDarken(color, coefficient, warning) {
+  try {
+    return darken(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Lightens a color.
@@ -262,6 +292,16 @@ export function lighten(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function private_safeLighten(color, coefficient, warning) {
+  try {
+    return lighten(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darken or lighten a color, depending on its luminance.
@@ -272,4 +312,14 @@ export function lighten(color, coefficient) {
  */
 export function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+export function private_safeEmphasize(color, coefficient, warning) {
+  try {
+    return private_safeEmphasize(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
 }

package/esm/cssVars/createCssVarsProvider.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
+import { useTheme as muiUseTheme } from '@mui/private-theming';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -50,9 +51,14 @@ export default function createCssVarsProvider(options) {
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
     colorSchemeSelector = ':root',
-    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
+    disableNestedContext = false,
+    disableStyleSheetGeneration = false
   }) {
     const hasMounted = React.useRef(false);
+    const upperTheme = muiUseTheme();
+    const ctx = React.useContext(ColorSchemeContext);
+    const nested = !!ctx && !disableNestedContext;
     const {
         colorSchemes = {},
         components = {},
@@ -65,12 +71,12 @@ export default function createCssVarsProvider(options) {
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
-      mode,
+      mode: stateMode,
       setMode,
       systemMode,
       lightColorScheme,
       darkColorScheme,
-      colorScheme,
+      colorScheme: stateColorScheme,
       setColorScheme
     } = useCurrentColorScheme({
       supportedColorSchemes: allColorSchemes,
@@ -81,6 +87,12 @@ export default function createCssVarsProvider(options) {
       defaultMode,
       storageWindow
     });
+    let mode = stateMode;
+    let colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
     const calculatedMode = (() => {
       if (!mode) {
         // This scope occurs on the server
@@ -106,15 +118,14 @@ export default function createCssVarsProvider(options) {
     // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     const {
       css: rootCss,
-      vars: rootVars,
-      parsedTheme
+      vars: rootVars
     } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
 
     // 3. Start composing the theme object
-    const theme = _extends({}, parsedTheme, {
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -130,8 +141,7 @@ export default function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars,
-        parsedTheme: parsedScheme
+        vars
       } = cssVarsParser(scheme, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
@@ -139,12 +149,12 @@ export default function createCssVarsProvider(options) {
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        Object.keys(parsedScheme).forEach(schemeKey => {
-          if (parsedScheme[schemeKey] && typeof parsedScheme[schemeKey] === 'object') {
+        Object.keys(scheme).forEach(schemeKey => {
+          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
-            theme[schemeKey] = parsedScheme[schemeKey];
+            theme[schemeKey] = scheme[schemeKey];
           }
         });
         if (theme.palette) {
@@ -219,21 +229,33 @@ export default function createCssVarsProvider(options) {
       setColorScheme,
       allColorSchemes
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/_jsx(GlobalStyles, {
-        styles: {
-          [colorSchemeSelector]: rootCss
-        }
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    let shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    const element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(GlobalStyles, {
+          styles: {
+            [colorSchemeSelector]: rootCss
+          }
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
@@ -264,6 +286,16 @@ export default function createCssVarsProvider(options) {
      * The initial mode used.
      */
     defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */

package/esm/cssVars/cssVarsParser.js

@@ -86,10 +86,10 @@ const getCssValue = (keys, value) => {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @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.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -97,7 +97,6 @@ const getCssValue = (keys, value) => {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser(theme, options) {
   const {
@@ -106,7 +105,6 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -118,13 +116,11 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
 
   return {
     css,
-    vars,
-    parsedTheme
+    vars
   };
 }

package/index.js

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

package/legacy/colorManipulator.js

@@ -96,6 +96,16 @@ export var colorChannel = function colorChannel(color) {
     return decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? "".concat(val, "%") : val;
   }).join(' ');
 };
+export var private_safeColorChannel = function private_safeColorChannel(color, warning) {
+  try {
+    return colorChannel(color);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+};
 
 /**
  * Converts a color object with type and values to a string.
@@ -227,6 +237,16 @@ export function alpha(color, value) {
   }
   return recomposeColor(color);
 }
+export function private_safeAlpha(color, value, warning) {
+  try {
+    return alpha(color, value);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darkens a color.
@@ -246,6 +266,16 @@ export function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function private_safeDarken(color, coefficient, warning) {
+  try {
+    return darken(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Lightens a color.
@@ -269,6 +299,16 @@ export function lighten(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function private_safeLighten(color, coefficient, warning) {
+  try {
+    return lighten(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darken or lighten a color, depending on its luminance.
@@ -280,4 +320,14 @@ export function lighten(color, coefficient) {
 export function emphasize(color) {
   var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+export function private_safeEmphasize(color, coefficient, warning) {
+  try {
+    return private_safeEmphasize(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -8,6 +8,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
+import { useTheme as muiUseTheme } from '@mui/private-theming';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -68,8 +69,15 @@ export default function createCssVarsProvider(options) {
       _ref$colorSchemeSelec = _ref.colorSchemeSelector,
       colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
       _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
-      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
+      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera,
+      _ref$disableNestedCon = _ref.disableNestedContext,
+      disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
+      _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
+      disableStyleSheetGeneration = _ref$disableStyleShee === void 0 ? false : _ref$disableStyleShee;
     var hasMounted = React.useRef(false);
+    var upperTheme = muiUseTheme();
+    var ctx = React.useContext(ColorSchemeContext);
+    var nested = !!ctx && !disableNestedContext;
     var _themeProp$colorSchem = themeProp.colorSchemes,
       colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
       _themeProp$components = themeProp.components,
@@ -90,13 +98,19 @@ export default function createCssVarsProvider(options) {
         defaultMode: defaultMode,
         storageWindow: storageWindow
       }),
-      mode = _useCurrentColorSchem.mode,
+      stateMode = _useCurrentColorSchem.mode,
       setMode = _useCurrentColorSchem.setMode,
       systemMode = _useCurrentColorSchem.systemMode,
       lightColorScheme = _useCurrentColorSchem.lightColorScheme,
       darkColorScheme = _useCurrentColorSchem.darkColorScheme,
-      colorScheme = _useCurrentColorSchem.colorScheme,
+      stateColorScheme = _useCurrentColorSchem.colorScheme,
       setColorScheme = _useCurrentColorSchem.setColorScheme;
+    var mode = stateMode;
+    var colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
     var calculatedMode = function () {
       if (!mode) {
         // This scope occurs on the server
@@ -125,9 +139,8 @@ export default function createCssVarsProvider(options) {
         shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
       rootCss = _cssVarsParser.css,
-      rootVars = _cssVarsParser.vars,
-      parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
-    var theme = _extends({}, parsedTheme, {
+      rootVars = _cssVarsParser.vars; // 3. Start composing the theme object
+    var theme = _extends({}, restThemeProp, {
       components: components,
       colorSchemes: colorSchemes,
       cssVarPrefix: cssVarPrefix,
@@ -151,17 +164,16 @@ export default function createCssVarsProvider(options) {
           shouldSkipGeneratingVar: shouldSkipGeneratingVar
         }),
         css = _cssVarsParser2.css,
-        vars = _cssVarsParser2.vars,
-        parsedScheme = _cssVarsParser2.parsedTheme;
+        vars = _cssVarsParser2.vars;
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        Object.keys(parsedScheme).forEach(function (schemeKey) {
-          if (parsedScheme[schemeKey] && _typeof(parsedScheme[schemeKey]) === 'object') {
+        Object.keys(scheme).forEach(function (schemeKey) {
+          if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
-            theme[schemeKey] = parsedScheme[schemeKey];
+            theme[schemeKey] = scheme[schemeKey];
           }
         });
         if (theme.palette) {
@@ -240,19 +252,31 @@ export default function createCssVarsProvider(options) {
         allColorSchemes: allColorSchemes
       };
     }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/_jsx(GlobalStyles, {
-        styles: _defineProperty({}, colorSchemeSelector, rootCss)
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    var shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    var element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(GlobalStyles, {
+          styles: _defineProperty({}, colorSchemeSelector, rootCss)
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
@@ -283,6 +307,16 @@ export default function createCssVarsProvider(options) {
      * The initial mode used.
      */
     defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */

package/legacy/cssVars/cssVarsParser.js

@@ -99,10 +99,10 @@ var getCssValue = function getCssValue(keys, value) {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @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.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -110,7 +110,6 @@ var getCssValue = function getCssValue(keys, value) {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser(theme, options) {
   var _ref3 = options || {},
@@ -118,7 +117,6 @@ export default function cssVarsParser(theme, options) {
     shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
   var css = {};
   var vars = {};
-  var parsedTheme = {};
   walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -128,7 +126,6 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, function (keys) {
     return keys[0] === 'vars';
   } // skip 'vars/*' paths
@@ -136,7 +133,6 @@ export default function cssVarsParser(theme, options) {
 
   return {
     css: css,
-    vars: vars,
-    parsedTheme: parsedTheme
+    vars: vars
   };
 }

package/legacy/index.js

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