@mui/system 5.10.15 → 5.10.17

package/CHANGELOG.md

@@ -1,5 +1,125 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.17
+
+<!-- generated comparing v5.10.16..master -->
+
+_Dec 6, 2022_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ @mnajdova added a [Material You Button playground](https://mui.com/material-ui/react-button/#material-you-version) (#35222)
+- 🔧 @hbjORbj renamed `components` / `componentProps` to `slots` / `slotProps` prop in Joy UI to create consistency across products (#34997)
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.17`
+
+- &#8203;<!-- 31 -->[Slider] Fix `markActive` theme class not getting applied (#35067) @ZeeshanTamboli
+- &#8203;<!-- 30 -->[SwipeableDrawer] Fix missing close animation when initial open is true (#35010) @sai6855
+- &#8203;<!-- 28 -->[material-ui] Add channel colors if possible (#35178) @siriwatknp
+- &#8203;<!-- 10 -->[Fab] Increase disabled styles precedence (#35304) @Uzwername
+- &#8203;<!-- 05 -->[Rating] Apply `labelEmptyValueActive` style overrides from theme (#35315) @sai6855
+
+### `@mui/system@5.10.17`
+
+- &#8203;<!-- 04 -->[system] Add support for nested CssVarsProvider (#35277) @siriwatknp
+
+### `@mui/joy@5.0.0-alpha.57`
+
+#### BREAKING CHANGE
+
+- &#8203;<!-- 08 -->[Joy] Add `slots`/`slotProps` props to the typing of all components and apply `useSlot` to all components (#34997) @hbjORbj
+
+  - Change all occurrences of `components` and `componentsProps` props in Joy UI components to `slots` and `slotProps`, respectively.
+
+  ```diff
+  -<Autocomplete components={{listbox: CustomListbox}} componentsProps={{listbox: { className: 'custom-listbox' }}} />
+  +<Autocomplete slots={{listbox: CustomListbox}} slotProps={{listbox: { className: 'custom-listbox' }}} />
+  ```
+
+  You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#joy-rename-components-to-slots) to help with the migration.
+
+#### Changes
+
+- &#8203;<!-- 07 -->[Joy] Miscellaneous fixes (#35345) @siriwatknp
+- &#8203;<!-- 06 -->[Joy][textarea] Expose decorator classes (#35247) @zignis
+
+### Docs
+
+- &#8203;<!-- 29 -->[docs] Improve spacing with ul (#35302) @oliviertassinari
+- &#8203;<!-- 23 -->[docs] Correct grammatically incorrect sentences in CONTRIBUTING.md (#34949) @Pandey-utkarsh
+- &#8203;<!-- 22 -->[docs] Move the demo higher in the API TOC (#35202) @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix incorrect link in minimizing-bundle-size (#35297) @Juneezee
+- &#8203;<!-- 20 -->[docs] Revise and expand Joy UI "Breadcrumbs" page (#35292) @samuelsycamore
+- &#8203;<!-- 19 -->[docs] Fix wrong import in the unstyled tabs page (#35310) @guotie
+- &#8203;<!-- 18 -->[docs] Disable translations (#34820) @mnajdova
+- &#8203;<!-- 17 -->[docs] Fix typo (#35312) @flaviendelangle
+- &#8203;<!-- 16 -->[docs] Add Material You Button playground (#35222) @mnajdova
+- &#8203;<!-- 15 -->[docs] Fix experimental API page duplication (#35213) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Improve the autogenerated "Unstyled" and "API" text (#35185) @samuelsycamore
+- &#8203;<!-- 13 -->[docs] Fix ad margin on API pages (#35201) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Revise and expand the Joy UI "Badge" page (#35199) @samuelsycamore
+- &#8203;<!-- 11 -->[docs] Update MUI Base docs with latest style conventions (#35034) @samuelsycamore
+- &#8203;<!-- 09 -->[l10n] Improve Chinese (Taiwan) zh-TW locale (#35328) @happyincent
+- &#8203;<!-- 02 -->[website] Update MUI stats: GitHub stars, Twitter followers, etc. (#35318) @nomandhoni-cs
+
+### Core
+
+- &#8203;<!-- 27 -->[core] Use componentStyles.name over componentName (#35303) @oliviertassinari
+- &#8203;<!-- 26 -->[core] Fix warning leak in production (#35313) @oliviertassinari
+- &#8203;<!-- 25 -->[core] Move the internal packages from docs/packages (#35305) @michaldudak
+- &#8203;<!-- 24 -->[core] Clean up the API docs generation scripts (#35244) @michaldudak
+- &#8203;<!-- 03 -->[test] Scope the tests to just Material UI components (#35219) @siriwatknp
+- &#8203;<!-- 01 -->[website] Remove BlackFriday notification @oliviertassinari
+
+All contributors of this release in alphabetical order: @flaviendelangle, @guotie, @happyincent, @hbjORbj, @Juneezee, @michaldudak, @mnajdova, @nomandhoni-cs, @oliviertassinari, @Pandey-utkarsh, @sai6855, @samuelsycamore, @siriwatknp, @Uzwername, @zignis
+
+## 5.10.16
+
+<!-- generated comparing v5.10.15..master -->
+
+_Nov 28, 2022_
+
+A big thanks to the 13 contributors who made this release possible. This release contains various 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
+
+### `@mui/material@5.10.16`
+
+- &#8203;<!-- 21 -->[Autocomplete] Fix inferred value type when `multiple` prop is `true` (#35275) @fenghan34
+- &#8203;<!-- 19 -->[Chip] Add `skipFocusWhenDisabled` prop to not allow focussing deletable chip if disabled (#35065) @sai6855
+- &#8203;<!-- 18 -->[Chip] Remove unnecessary handleKeyDown event handler (#35231) @ZeeshanTamboli
+- &#8203;<!-- 05 -->[FormControl] Add missing types in `useFormControl` (#35168) @ZeeshanTamboli
+- &#8203;<!-- 04 -->[IconButton] Add missing color classes (#33820) @Zetta56
+- &#8203;<!-- 03 -->[SwipeableDrawer] Make paper ref accessible (#35082) @sai6855
+
+### `@mui/system@5.10.16`
+
+- &#8203;<!-- 02 -->[system] Remove unnecessary parsed theme (#35239) @siriwatknp
+- &#8203;<!-- 01 -->[theme] Fix TypeScript type for custom variants in responsive font sizes (#35057) @ZeeshanTamboli
+
+### `@mui/base@5.0.0-alpha.108`
+
+- &#8203;<!-- 20 -->[Base] Allow useSlotProps to receive undefined elementType (#35192) @leventdeniz
+
+### Docs
+
+- &#8203;<!-- 13 -->[docs] Improve feedback precision (#34641) @alexfauquette
+- &#8203;<!-- 12 -->[docs] Add Black Friday notification @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix migration feedback (#35232) @alexfauquette
+- &#8203;<!-- 10 -->[docs] Improve the useSelect demo styling (#33883) @michaldudak
+- &#8203;<!-- 09 -->[docs] Fix layout jump on first mistake (#35215) @oliviertassinari
+- &#8203;<!-- 08 -->[docs] Support demos with side effect imports (#35177) @m4theushw
+- &#8203;<!-- 07 -->[examples] Fix Next.js errors (#35246) @oliviertassinari
+- &#8203;<!-- 06 -->[examples] Updated Remix examples with the lates changes using React 18 (#35092) @58bits
+
+### Core
+
+- &#8203;<!-- 17 -->[core] Remove unused pattern (#35165) @iamxukai
+- &#8203;<!-- 16 -->[core] Fix Base version in changelog (#35224) @siriwatknp
+- &#8203;<!-- 15 -->[core] Migrate `describeConformance` to TypeScript (#35193) @flaviendelangle
+- &#8203;<!-- 14 -->[core] Skip CI for docs and examples paths (#35225) @siriwatknp
+
+All contributors of this release in alphabetical order: @58bits, @alexfauquette, @fenghan34, @flaviendelangle, @iamxukai, @leventdeniz, @m4theushw, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli, @Zetta56
+
 ## 5.10.15
 
 <!-- generated comparing v5.10.14..master -->
@@ -26,7 +146,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
 
 - [Material You] Add theme structure & Button component (#34650) @mnajdova
 
-### `@mui/base@5.0.0-alpha.106`
+### `@mui/base@5.0.0-alpha.107`
 
 - [Select] Add attributes to conform with ARIA 1.2 (#35182) @michaldudak
 

package/Container/ContainerProps.d.ts

@@ -37,4 +37,4 @@ export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
     };
     defaultComponent: D;
 }
-export declare type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
+export type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;

package/Container/containerClasses.d.ts

@@ -16,7 +16,7 @@ export interface ContainerClasses {
     /** Styles applied to the root element if `maxWidth="xl"`. */
     maxWidthXl: string;
 }
-export declare type ContainerClassKey = keyof ContainerClasses;
+export type ContainerClassKey = keyof ContainerClasses;
 export declare function getContainerUtilityClass(slot: string): string;
 declare const containerClasses: ContainerClasses;
 export default containerClasses;

package/Container/createContainer.d.ts

@@ -7,7 +7,7 @@ interface StyleFnProps<Theme> extends ContainerProps {
     theme: Theme;
     ownerState: ContainerProps;
 }
-declare type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
+type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
 export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
     createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
     useThemeProps?: (inProps: ContainerProps) => ContainerProps & {

package/Stack/StackProps.d.ts

@@ -33,7 +33,7 @@ export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
     } & SystemProps<Theme>;
     defaultComponent: D;
 }
-export declare type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
+export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
     component?: React.ElementType;
 }> = OverrideProps<StackTypeMap<P, D>, D>;
 export interface StackOwnerState {

package/Stack/stackClasses.d.ts

@@ -2,7 +2,7 @@ export interface StackClasses {
     /** Styles applied to the root element. */
     root: string;
 }
-export declare type StackClassKey = keyof StackClasses;
+export type StackClassKey = keyof StackClasses;
 export declare function getStackUtilityClass(slot: string): string;
 declare const stackClasses: StackClasses;
 export default stackClasses;

package/Unstable_Grid/GridProps.d.ts

@@ -3,13 +3,13 @@ import { OverrideProps, IfEquals } from '@mui/types';
 import { SxProps } from '../styleFunctionSx';
 import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
 import { SystemProps } from '../Box';
-declare type ResponsiveStyleValue<T> = T | Array<T | null> | {
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
     [key in Breakpoint]?: T | null;
 };
-export declare type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export declare type GridSpacing = number | string;
-export declare type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export declare type GridSize = 'auto' | number;
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | number;
 export interface GridDefaultBreakpoints {
     /**
      * If a number, it sets the number of columns the grid item uses.
@@ -92,10 +92,10 @@ export interface GridDefaultBreakpoints {
      */
     xsOffset?: GridSize;
 }
-declare type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
+type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
 interface BreakpointOverridesEmpty {
 }
-declare type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
+type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
 export interface GridBaseProps extends Breakpoints {
     /**
      * The content of the component.
@@ -156,7 +156,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
     } & SystemProps<Theme>;
     defaultComponent: D;
 }
-export declare type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
     component?: React.ElementType;
 }> = OverrideProps<GridTypeMap<P, D>, D>;
 export {};

package/Unstable_Grid/gridClasses.d.ts

@@ -14,7 +14,7 @@ export interface GridClasses {
     /** Styles applied to the root element if `wrap="reverse"`. */
     'wrap-xs-wrap-reverse': string;
 }
-export declare type GridClassKey = keyof GridClasses;
+export type GridClassKey = keyof GridClasses;
 export declare function getGridUtilityClass(slot: string): string;
 declare const gridClasses: GridClasses;
 export default gridClasses;

package/colorManipulator.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
 export interface ColorObject {
   type: ColorFormat;
@@ -10,10 +11,19 @@ export function rgbToHex(color: string): string;
 export function hslToRgb(color: string): string;
 export function decomposeColor(color: string): ColorObject;
 export function colorChannel(color: string): string;
+export function private_safeColorChannel(color: string, warning?: string): string;
 export function recomposeColor(color: ColorObject): string;
 export function getContrastRatio(foreground: string, background: string): number;
 export function getLuminance(color: string): number;
 export function emphasize(color: string, coefficient?: number): string;
+export function private_safeEmphasize(
+  color: string,
+  coefficient?: number,
+  warning?: string,
+): string;
 export function alpha(color: string, value: number): string;
+export function private_safeAlpha(color: string, value: number, warning?: string): string;
 export function darken(color: string, coefficient: number): string;
+export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
 export function lighten(color: string, coefficient: number): string;
+export function private_safeLighten(color: string, coefficient: number, warning?: string): string;

package/colorManipulator.js

@@ -13,6 +13,11 @@ exports.getLuminance = getLuminance;
 exports.hexToRgb = hexToRgb;
 exports.hslToRgb = hslToRgb;
 exports.lighten = lighten;
+exports.private_safeAlpha = private_safeAlpha;
+exports.private_safeColorChannel = void 0;
+exports.private_safeDarken = private_safeDarken;
+exports.private_safeEmphasize = private_safeEmphasize;
+exports.private_safeLighten = private_safeLighten;
 exports.recomposeColor = recomposeColor;
 exports.rgbToHex = rgbToHex;
 var _utils = require("@mui/utils");
@@ -107,6 +112,17 @@ 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(' ');
 };
+exports.colorChannel = colorChannel;
+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.
@@ -115,7 +131,7 @@ const colorChannel = color => {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-exports.colorChannel = colorChannel;
+exports.private_safeColorChannel = private_safeColorChannel;
 function recomposeColor(color) {
   const {
     type,
@@ -238,6 +254,16 @@ function alpha(color, value) {
   }
   return recomposeColor(color);
 }
+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.
@@ -257,6 +283,16 @@ function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
+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.
@@ -280,6 +316,16 @@ function lighten(color, coefficient) {
   }
   return recomposeColor(color);
 }
+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.
@@ -290,4 +336,14 @@ function lighten(color, coefficient) {
  */
 function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+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/createTheme/createSpacing.d.ts

@@ -1,5 +1,5 @@
-export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export declare type SpacingArgument = number | string;
+export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export type SpacingArgument = number | string;
 export interface Spacing {
     (): string;
     (value: number): string;

package/cssVars/createCssVarsProvider.d.ts

@@ -66,7 +66,7 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string> {
          * The node used to attach the color-scheme attribute
          * @default document
          */
-        colorSchemeNode?: Document | HTMLElement | null;
+        colorSchemeNode?: Element | null;
         /**
          * The CSS selector for attaching the generated custom properties
          * @default ':root'
@@ -77,10 +77,63 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string> {
          * @default window
          */
         storageWindow?: Window | null;
+        /**
+         * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+         */
+        disableNestedContext?: boolean;
+        /**
+         * If `true`, the style sheet won't be generated.
+         *
+         * This is useful for controlling nested CssVarsProvider behavior.
+         * @default false
+         */
+        disableStyleSheetGeneration?: boolean;
       }
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
+  generateCssThemeVars: (options?: {
+    /**
+     * Design system default color scheme.
+     * - provides string if the design system has one default color scheme (either light or dark)
+     * - provides object if the design system has default light & dark color schemes
+     */
+    defaultColorScheme?: ColorScheme | { light: ColorScheme; dark: ColorScheme };
+    /**
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark';
+    /**
+     * The selector for attaching CSS variables that are **outside** of `theme.colorSchemes.*`.
+     * @default ':root'
+     */
+    rootSelector: string;
+    /**
+     * The selector for attaching CSS variables that are **outside** of `theme.colorSchemes.*`.
+     * @default (key) => `[data-color-scheme="${key}"]`
+     */
+    colorSchemeSelector: (key: ColorScheme) => string;
+    /**
+     * A function to determine if the key, value should be attached as CSS Variable
+     * `keys` is an array that represents the object path keys.
+     *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+     *  then, keys = ['foo', 'bar']
+     *        value = 'var(--test)'
+     */
+    shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+    /**
+     * Controlled mode. If not provided, it will try to read the value from the upper CssVarsProvider.
+     */
+    mode?: Mode;
+    /**
+     * Controlled color scheme. If not provided, it will try to read the value from the upper CssVarsProvider.
+     */
+    colorScheme?: ColorScheme;
+    theme?: {
+      cssVarPrefix?: string;
+      colorSchemes: Record<ColorScheme, Record<string, any>>;
+    };
+  }) => Record<string, any>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
 
@@ -89,7 +142,7 @@ export default function createCssVarsProvider<ColorScheme extends string>(
     /**
      * Design system default theme
      *
-     * The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
+     * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
      * those object of the color scheme will be used when the color scheme is active.
      *
      *  {
@@ -99,16 +152,21 @@ export default function createCssVarsProvider<ColorScheme extends string>(
      *    }
      *  }
      *
-     *  If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
-     *  likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
+     * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
+     *   likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
      *
-     *  !!! Don't provided the same keys as in colorSchemes to theme because they will be replaced internally when the selected colorScheme is calculated.
+     * - If the theme contains the same keys as the color scheme, their values will be merged.
      *  Ex. {
      *    colorSchemes: {
-     *      light: { palette: { ... } },
-     *      dark: { palette: { ... } }
+     *      light: { palette: { primary: { ... } } },
+     *      dark: { palette: { primary: { ...} } }
      *    },
-     *    palette: { ... }, // This values will be replaced by the `palette` from the light | dark color scheme at runtime.
+     *    palette: { shared: { ... } }
+     *  }
+     *
+     *  becomes: {
+     *    colorSchemes: { ... },
+     *    palette: { shared: { ... }, primary: { ... } }
      *  }
      */
     theme: any;

package/cssVars/createCssVarsProvider.js

@@ -12,6 +12,7 @@ var _utils = require("@mui/utils");
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledEngine = require("@mui/styled-engine");
+var _privateTheming = require("@mui/private-theming");
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
@@ -59,9 +60,14 @@ 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 = (0, _privateTheming.useTheme)();
+    const ctx = React.useContext(ColorSchemeContext);
+    const nested = !!ctx && !disableNestedContext;
     const {
         colorSchemes = {},
         components = {},
@@ -74,12 +80,12 @@ 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
     } = (0, _useCurrentColorScheme.default)({
       supportedColorSchemes: allColorSchemes,
@@ -90,6 +96,12 @@ 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
@@ -115,15 +127,14 @@ 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
     } = (0, _cssVarsParser.default)(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
 
     // 3. Start composing the theme object
-    const theme = (0, _extends2.default)({}, parsedTheme, {
+    const theme = (0, _extends2.default)({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -139,8 +150,7 @@ function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars,
-        parsedTheme: parsedScheme
+        vars
       } = (0, _cssVarsParser.default)(scheme, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
@@ -148,12 +158,12 @@ function createCssVarsProvider(options) {
       theme.vars = (0, _utils.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] = (0, _extends2.default)({}, theme[schemeKey], parsedScheme[schemeKey]);
+            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
           } else {
-            theme[schemeKey] = parsedScheme[schemeKey];
+            theme[schemeKey] = scheme[schemeKey];
           }
         });
         if (theme.palette) {
@@ -228,21 +238,33 @@ function createCssVarsProvider(options) {
       setColorScheme,
       allColorSchemes
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: {
-          [colorSchemeSelector]: rootCss
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    let shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: {
+            [colorSchemeSelector]: rootCss
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
@@ -273,6 +295,16 @@ function createCssVarsProvider(options) {
      * The initial mode used.
      */
     defaultMode: _propTypes.default.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: _propTypes.default.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: _propTypes.default.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */