@mui/system 5.2.2 → 5.2.3

package/Box/Box.spec.d.ts

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

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 ### [Versions](https://mui.com/versions/)
 
+## 5.2.3
+
+<!-- generated comparing v5.2.2..master -->
+
+_Dec 6, 2021_
+
+A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ We have introduced a new unstyled component in `@mui/base`: `TablePagination` (#29759) @mnajdova
+
+  <a href="https://mui.com/components/tables/#unstyled-table"><img width="800" alt="unstyled table" src="https://user-images.githubusercontent.com/4512430/144862194-584356ef-7d9d-462c-a631-186a7e716193.png"></a>
+
+  You can follow our progress with unstyled components at https://github.com/mui-org/material-ui/issues/27170.
+
+- 🎉 We have added an example of how to use MUI with [Remix](https://remix.run/) (#29952) @mnajdova
+
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@mui/material@5.2.3`
+
+- &#8203;<!-- 33 -->[Accordion] Add a test for handling `square` prop (#29972) @daniel-sachs
+- &#8203;<!-- 32 -->[Alert] Fix `square` Paper prop (#30027) @ZeeshanTamboli
+- &#8203;<!-- 31 -->[AvatarGroup] Allow specifying total number of avatars (#29898) @eduardomcv
+- &#8203;<!-- 29 -->[Button] Fix regression from context API (#29982) @siriwatknp
+- &#8203;<!-- 13 -->[Grid] Fix generated classes for `spacing` prop when the value is object (#29880) @jayeclark
+- &#8203;<!-- 10 -->[Select] Should not crash when an empty array is passed with `multiple` enabled (#29957) @Domino987
+
+### `@mui/system@5.2.3`
+
+- &#8203;<!-- 06 -->[system] Fix return type of `createBox` (#29989) @mnajdova
+- &#8203;<!-- 05 -->[system] Support boolean values in typescript for the `sx` prop when used as array (#29911) @tasugi
+
+### `@mui/utils@5.2.3`
+
+- &#8203;<!-- 03 -->[utils] Add typings for `@mui-material/styles/cssUtils` (#29621) @Semigradsky
+
+### `@mui/icons-material@5.2.1`
+
+- &#8203;<!-- 12 -->[icons] Consolidate ignored icons into one list (#29843) @chao813
+
+### `@mui/base@5.0.0-alpha.59`
+
+- &#8203;<!-- 30 -->[base] Fix missing ClickAwayListener barrel index export (#30000) @oliviertassinari
+- &#8203;<!-- 04 -->[TablePaginationUnstyled] Introduce new component (#29759) @mnajdova
+
+### `@mui/lab@5.0.0-alpha.59`
+
+- &#8203;<!-- 27 -->[DateRangePicker] Fix `DateRangePickerDayProps` interface (#29067) @jonathanrtuck
+- &#8203;<!-- 10 -->[Pickers] Remove propagation of custom props to the `MonthPicker` component's DOM element (#30021) @ZeeshanTamboli
+- &#8203;<!-- 08 -->[StaticDatePicker] Add className and slot to PickerStaticWrapper (#29619) @kkorach
+
+### `@mui/joy@5.0.0-alpha.5`
+
+- &#8203;<!-- 11 -->[Joy] Theme setup (#29846) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 34 -->[docs] Fix link in TypeScript doc page (#30044) @genzyy
+- &#8203;<!-- 26 -->[docs] Remove the 'WIP' icon from the 'Group & Pivot' page title (#30077) @flaviendelangle
+- &#8203;<!-- 25 -->[docs] Add warning that `@mui/styled-engine-sc` does not work in SSR (#30026) @mnajdova
+- &#8203;<!-- 24 -->[docs] Add section for CSS specificity in the migration guide (#30008) @hbjORbj
+- &#8203;<!-- 28 -->[docs] Clarify comment in migration doc (#30076) @hbjORbj
+- &#8203;<!-- 23 -->[docs] Sync translations with Crowdin (#30041) @l10nbot
+- &#8203;<!-- 22 -->[docs] Explain how Paper changes shade in dark mode (#30003) @michaldudak
+- &#8203;<!-- 21 -->[docs] Update nextjs-typescript-example (#29974) @huydhoang
+- &#8203;<!-- 20 -->[docs] Add missing global state classes to API docs generator (#29945) @michaldudak
+- &#8203;<!-- 19 -->[docs] Fix benchmarks folder link (#29981) @fourjr
+- &#8203;<!-- 18 -->[docs] Improve wording in StackOverflow section of support page (#29956) @ronwarner
+- &#8203;<!-- 17 -->[docs] Remove Black Friday sale notification (#29936) @mbrookes
+- &#8203;<!-- 16 -->[examples] Fix typos in the Remix example (#30071) @MichaelDeBoey
+- &#8203;<!-- 15 -->[examples] Add Remix example (#29952) @mnajdova
+- &#8203;<!-- 14 -->[examples] Fix lint issue for displayName missing in the Next.js examples (#29985) @ZeeshanTamboli
+- &#8203;<!-- 09 -->[Stack] Document system props in Stack API (#30069) @ThewBear
+- &#8203;<!-- 07 -->[survey] Add a banner and card for promoting the 2021 survey (#29950) @danilo-leal
+- &#8203;<!-- 02 -->[website] Correct the Careers page description (#30073) @michaldudak
+- &#8203;<!-- 01 -->[website] Fix 301 links (#30040) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 31 -->[core] Batch small changes (#30042) @oliviertassinari
+- &#8203;<!-- 28 -->[core] Transition to a new StackOverflow tag (#29967) @oliviertassinari
+
+All contributors of this release in alphabetical order: @chao813, @daniel-sachs, @danilo-leal, @Domino987, @eduardomcv, @flaviendelangle, @fourjr, @genzyy, @hbjORbj, @huydhoang, @jayeclark, @jonathanrtuck, @kkorach, @l10nbot, @mbrookes, @MichaelDeBoey, @michaldudak, @mnajdova, @oliviertassinari, @ronwarner, @Semigradsky, @siriwatknp, @tasugi, @ThewBear, @ZeeshanTamboli
+
 ## 5.2.2
 
 <!-- generated comparing v5.2.1..master -->

package/createBox.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import Box from './Box';
 
 export default function createBox(options?: {
   defaultTheme: object;
   defaultClassName?: string;
-  generateClassName?: () => string;
-}): React.ElementType;
+  generateClassName?: (componentName: string) => string;
+}): typeof Box;

package/createBox.spec.d.ts

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

package/createTheme/createSpacing.d.ts

@@ -1,10 +1,10 @@
-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 interface Spacing {
-    (): string;
-    (value: number): string;
-    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
-    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
-    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
-}
-export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+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 interface Spacing {
+    (): string;
+    (value: number): string;
+    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
+}
+export default function createSpacing(spacingInput?: SpacingOptions): Spacing;

package/cssVars/createCssVarsProvider.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
+import getInitColorSchemeScript from './getInitColorSchemeScript';
 import { Mode, Result } from './useCurrentColorScheme';
 
-type RequiredDeep<T> = {
-  [K in keyof T]-?: RequiredDeep<T[K]>;
-};
-
 export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
   colorSchemes: Record<string, infer ColorSystems>;
 }
@@ -25,7 +22,16 @@ type DecideTheme<
   ApplicationTheme extends { colorSchemes: Record<ApplicationColorScheme, any> },
   ApplicationColorScheme extends string | never,
 > = [ApplicationColorScheme] extends [never]
-  ? { theme?: DesignSystemTheme }
+  ? {
+      theme?: Omit<DesignSystemTheme, 'colorSchemes'> & {
+        colorSchemes?: Partial<
+          Record<
+            DesignSystemColorScheme,
+            DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
+          >
+        >;
+      };
+    }
   : {
       theme: Omit<ApplicationTheme, 'colorSchemes'> & {
         colorSchemes: Partial<
@@ -34,9 +40,7 @@ type DecideTheme<
             DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
           >
         > &
-          RequiredDeep<
-            Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>
-          >;
+          Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>;
       };
     };
 
@@ -134,7 +138,7 @@ export default function createCssVarsProvider<
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<DesignSystemColorScheme | ApplicationColorScheme>;
-  getInitColorSchemeScript: () => React.ReactElement;
+  getInitColorSchemeScript: typeof getInitColorSchemeScript;
 };
 
 // disable automatic export

package/cssVars/createCssVarsProvider.js

@@ -20,6 +20,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledEngine = require("@mui/styled-engine");
 
+var _createSpacing = _interopRequireDefault(require("../createTheme/createSpacing"));
+
+var _createBreakpoints = _interopRequireDefault(require("../createTheme/createBreakpoints"));
+
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
 
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
@@ -42,6 +46,8 @@ const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transit
 exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
 
 function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   const {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
@@ -51,6 +57,8 @@ function createCssVarsProvider(options) {
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
+  const systemSpacing = (0, _createSpacing.default)(baseTheme.spacing);
+  const systemBreakpoints = (0, _createBreakpoints.default)((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -77,10 +85,13 @@ function createCssVarsProvider(options) {
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
     const {
       colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = (0, _objectWithoutPropertiesLoose2.default)(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = (0, _objectWithoutPropertiesLoose2.default)(clonedBaseTheme, _excluded);
     const {
       colorSchemes: colorSchemesProp = {}
     } = themeProp,
@@ -138,7 +149,9 @@ function createCssVarsProvider(options) {
     mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components,
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -172,7 +185,8 @@ function createCssVarsProvider(options) {
     });
     React.useEffect(() => {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
     React.useEffect(() => {

package/cssVars/createCssVarsProvider.spec.d.ts

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

package/cssVars/cssVarsParser.d.ts

@@ -1,68 +1,68 @@
-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) => 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, scope: Record<string, string | number>) => void) => 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
- *
- *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
- *
- * @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 } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
- *
- * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
- * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
- */
-export default function cssVarsParser(theme: Record<string, any>, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-};
-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) => 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, scope: Record<string, string | number>) => 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
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
+ * @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 } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+export default function cssVarsParser(theme: Record<string, any>, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+};
+export {};

package/cssVars/cssVarsParser.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.assignNestedKeys = void 0;
 exports.default = cssVarsParser;
 exports.walkObjectDeep = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -59,14 +55,16 @@ const assignNestedKeys = (obj, keys, value) => {
 
 exports.assignNestedKeys = assignNestedKeys;
 
-const walkObjectDeep = (obj, callback) => {
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -118,9 +116,6 @@ const getCssValue = (keys, value) => {
 
 
 function cssVarsParser(theme, options) {
-  const clonedTheme = (0, _extends2.default)({}, theme);
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -128,13 +123,18 @@ function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -148,7 +148,8 @@ function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,12 +1,12 @@
-/// <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 default function getInitColorSchemeScript(options?: {
-    enableSystem?: boolean;
-    defaultLightColorScheme?: string;
-    defaultDarkColorScheme?: string;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    attribute?: string;
-}): JSX.Element;
+/// <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 default function getInitColorSchemeScript(options?: {
+    enableSystem?: boolean;
+    defaultLightColorScheme?: string;
+    defaultDarkColorScheme?: string;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    attribute?: string;
+}): JSX.Element;

package/cssVars/getInitColorSchemeScript.js

@@ -52,7 +52,7 @@ function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/cssVars/index.d.ts

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

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,50 +1,50 @@
-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;
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-}): Result<SupportedColorScheme>;
+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;
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+}): Result<SupportedColorScheme>;

package/esm/cssVars/createCssVarsProvider.js

@@ -8,6 +8,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -16,6 +18,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   const {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
@@ -25,6 +29,8 @@ export default function createCssVarsProvider(options) {
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -51,10 +57,14 @@ export default function createCssVarsProvider(options) {
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
+
     const {
       colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
@@ -114,7 +124,9 @@ export default function createCssVarsProvider(options) {
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components,
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -148,7 +160,8 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(() => {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
     React.useEffect(() => {

package/esm/cssVars/cssVarsParser.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
 
 
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/esm/cssVars/getInitColorSchemeScript.js

@@ -34,7 +34,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/esm/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   const {
     theme,
@@ -12,18 +10,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  const output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.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

@@ -7,6 +7,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -15,6 +17,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   var _options$theme = options.theme,
       baseTheme = _options$theme === void 0 ? {} : _options$theme,
       _options$defaultMode = options.defaultMode,
@@ -27,6 +31,8 @@ export default function createCssVarsProvider(options) {
       _options$prefix = options.prefix,
       designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
       shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
+  var systemSpacing = createSpacing(baseTheme.spacing);
+  var systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
@@ -58,10 +64,15 @@ export default function createCssVarsProvider(options) {
         defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
         defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    var clonedBaseTheme = React.useMemo(function () {
+      return JSON.parse(JSON.stringify(baseTheme));
+    }, []);
 
-    var _baseTheme$colorSchem = baseTheme.colorSchemes,
-        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
-        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+    var _clonedBaseTheme$colo = clonedBaseTheme.colorSchemes,
+        baseColorSchemes = _clonedBaseTheme$colo === void 0 ? {} : _clonedBaseTheme$colo,
+        restBaseTheme = _objectWithoutProperties(clonedBaseTheme, ["colorSchemes"]);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
         colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
@@ -119,7 +130,9 @@ export default function createCssVarsProvider(options) {
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components: components,
       colorSchemes: colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
     var styleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {
@@ -157,7 +170,8 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(function () {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
     React.useEffect(function () {

package/legacy/cssVars/cssVarsParser.js

@@ -49,7 +49,7 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export var walkObjectDeep = function walkObjectDeep(obj, callback) {
+export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
   function recurse(object) {
     var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     Object.entries(object).forEach(function (_ref) {
@@ -57,11 +57,13 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback) {
           key = _ref2[0],
           value = _ref2[1];
 
-      if (value !== undefined && value !== null) {
-        if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
-        } else {
-          callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
+        if (value !== undefined && value !== null) {
+          if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+          } else {
+            callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+          }
         }
       }
     });
@@ -113,10 +115,6 @@ var getCssValue = function getCssValue(keys, value) {
 
 
 export default function cssVarsParser(theme, options) {
-  var clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   var _ref3 = options || {},
       prefix = _ref3.prefix,
       _ref3$basePrefix = _ref3.basePrefix,
@@ -125,13 +123,18 @@ export default function cssVarsParser(theme, options) {
 
   var css = {};
   var vars = {};
-  walkObjectDeep(clonedTheme, function (keys, val, scope) {
+  walkObjectDeep(theme, function (keys, val, scope) {
     if (typeof val === 'string' || typeof val === 'number') {
       var _value = val;
 
       if (typeof _value === 'string' && _value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        _value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          _value = _value.replace(/var\(--/g, "var(--".concat(prefix, "-"));
+        } else {
+          _value = prefix ? _value.replace(new RegExp(basePrefix, 'g'), prefix) : _value.replace(new RegExp("".concat(basePrefix, "-"), 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = _value;
       }
@@ -145,7 +148,10 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
       }
     }
-  });
+  }, function (keys) {
+    return keys[0] === 'vars';
+  } // skip 'vars/*' paths
+  );
   return {
     css: css,
     vars: vars

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -20,7 +20,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, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\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          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\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          document.documentElement.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.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/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   var theme = params.theme,
       name = params.name,
@@ -10,18 +8,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  var output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  var defaultProps = theme.components[name].defaultProps;
-  var propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -8,6 +8,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -25,6 +27,8 @@ export default function createCssVarsProvider(options) {
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -51,10 +55,14 @@ export default function createCssVarsProvider(options) {
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
+
     const {
       colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
@@ -114,7 +122,9 @@ export default function createCssVarsProvider(options) {
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components,
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -148,7 +158,8 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(() => {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
     React.useEffect(() => {

package/modern/cssVars/cssVarsParser.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
 
 
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/modern/cssVars/getInitColorSchemeScript.js

@@ -34,7 +34,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/modern/index.js

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

package/modern/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   const {
     theme,
@@ -12,18 +10,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  const output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -23,7 +23,7 @@
   "homepage": "https://mui.com/system/basics/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/material-ui"
+    "url": "https://opencollective.com/mui"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.2",
+    "@mui/private-theming": "^5.2.3",
     "@mui/styled-engine": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.2",
+    "@mui/utils": "^5.2.3",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",
     "prop-types": "^15.7.2"

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -57,7 +57,7 @@ export type SystemStyleObject<Theme extends object = {}> =
 export type SxProps<Theme extends object = {}> =
   | SystemStyleObject<Theme>
   | ((theme: Theme) => SystemStyleObject<Theme>)
-  | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
+  | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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

package/useThemeProps/getThemeProps.js

@@ -1,15 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getThemeProps;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _utils = require("@mui/utils");
 
-/* eslint-disable no-restricted-syntax */
 function getThemeProps(params) {
   const {
     theme,
@@ -21,17 +18,5 @@ function getThemeProps(params) {
     return props;
   }
 
-  const output = (0, _extends2.default)({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return (0, _utils.internal_resolveProps)(theme.components[name].defaultProps, props);
 }