@mui/system 5.1.1 → 5.2.0

package/Box/Box.spec.d.ts

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

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 ### [Versions](https://mui.com/versions/)
 
+## 5.2.0
+
+<!-- generated comparing v5.1.1..master -->
+
+_Nov 23, 2021_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Created another unstyled component: [TabsUnstyled](https://mui.com/components/tabs/#unstyled) (#29597) @mnajdova.
+- 🎉 Updated the Material Icons set with the latest changes from Google (#29328) @michaldudak / (#29818) @chao813.
+  This update adds 200 new icons and tweaks the appearance of many more.
+  With it, we're getting close to having 2000 icons in our set.
+- 🐛 Fixed bugs and improved the infrastructure and documentation 📚.
+
+### `@mui/material@5.2.0`
+
+- [IconButton] Remove on hover effect when `disableRipple` is set (#29298) @adamfitzgibbon
+- [i18n] Add the amharic language (#29153) @NatiG100
+- [material] Fix types for `variants.style` to accept callbacks (#29610) @mnajdova
+- [Popper] Simplify prop types (#29680) @michaldudak
+- [Select] Include aria-selected=false when option not selected (#29695) @michaldudak
+- [useMediaQuery] Fix crash in Safari < 14 and IE 11 (#29776) @eps1lon
+- [useMediaQuery] Ensure no tearing in React 18 (#28491) @eps1lon
+
+### `@mui/codemod@5.2.0`
+
+- [codemod] Fix `jss-to-styled` to support multiple withStyles (#29824) @siriwatknp
+
+### `@mui/icons-material@5.2.0`
+
+- [icons] Sync new Google Material Icons (#29818) @chao813
+- [icons] Sync recent Material Icons from Google (#29328) @michaldudak
+
+### `@mui/system@5.2.0`
+
+- [Box] Fix `sx` prop runtime issue when used as function (#29830) @mnajdova
+- [system] Fix `sx` throw error when value is `null` or `undefined` (#29756) @siriwatknp
+- [system] Fix minor CssVars issues (#29747) @siriwatknp
+
+### `@mui/styled-engine@5.2.0`
+
+- [styled-engine] Fix props inference in styled-engine (#29739) @Janpot
+
+### `@mui/base@5.0.0-alpha.56`
+
+- [FormControlUnstyled] `focused` is always false unless explicitly set to `true` @mwilkins91
+- [TabsUnstyled] Introduce new component (#29597) @mnajdova
+
+### `@mui/lab@5.0.0-alpha.56`
+
+- [DatePicker][timepicker] Add missing component declarations (#29517) @longzheng
+- [Masonry] exports from root package (#29754) @abhinav-22-tech
+- [pickers] Widen accepted `luxon` version range (#29761) @eps1lon
+
+### Docs
+
+- [blog] MUI X v5 blog post (#29590) @DanailH
+- [blog] Polish the Benny Joo joins MUI post (#29697) @oliviertassinari
+- [CHANGELOG] Explain why we do breaking changes @oliviertassinari
+- [core] Update latest issue template for codesandbox CI (#29783) @eps1lon
+- [core] Ensure `@mui/core` is an alias for `@mui/base` (#29762) @eps1lon
+- [docs] Fix broken Next and Previous links (#29711) @scallaway
+- [docs] Add a note that ToggleButton exclusive does not enforce selection (#29812) @mmacu
+- [docs] Update the list of supported locales (#29831) @michaldudak
+- [docs] Update tooltip doc to better define touch action (#29717) @gnowland
+- [website] Standardize the background color from the MUI team photos (#29738) @danilo-leal
+- [website] Add Bharat to the About Us Page (#29714) @bharatkashyap
+- [website] Add about page entry for jan (#29701) @Janpot
+- [website] Adding Prakhar to the about page (#29737) @danilo-leal
+
+### Core
+
+- [test] Allow debugging with Chrome and VSCode inspector (#29777) @eps1lon
+- [test] Use renderer clock instead of custom useFakeTimers call (#29778) @eps1lon
+- [test] Only mock Date in regression tests (#29763) @eps1lon
+- [test] Disable nightly integration tests on `next` branch (#29748) @eps1lon
+- [test] Allow configuring clock directly from `createRenderer` (#29684) @eps1lon
+- [test] Accept backslashes as path separators in test CLI (#29694) @michaldudak
+- [utils] Use built-in hook when available for useId (#26489) @eps1lon
+
+All contributors of this release in alphabetical order: @abhinav-22-tech, @adamfitzgibbon, @bharatkashyap, @chao813, @DanailH, @danilo-leal, @eps1lon, @gnowland, @Janpot, @longzheng, @michaldudak, @mmacu, @mnajdova, @mwilkins91, @NatiG100, @oliviertassinari, @scallaway, @siriwatknp
+
 ## 5.1.1
 
 <!-- generated comparing v5.1.0..master -->
@@ -8,7 +90,7 @@ _Nov 16, 2021_
 
 A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 🛠 Rename `@mui/core` to `@mui/base`. (#29585) @michaldudak
+- 🛠 Renamed `@mui/core` to `@mui/base` (#29585) @michaldudak.
 - And many more 🐛 bug fixes and 📚 improvements.
 
 ### `@mui/material@5.1.1`
@@ -22,10 +104,19 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 ### `@mui/base@5.0.0-alpha.55`
 
-#### BREAKING CHANGE
+#### Breaking changes
 
 - &#8203;<!-- 27 -->[core] Rename mui/core to mui/base (#29585) @michaldudak
 
+  Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
+
+  The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a **base** to build on.
+
+  ```diff
+  -import { useSwitch } from '@mui/core/SwitchUnstyled';
+  +import { useSwitch } from '@mui/base/SwitchUnstyled';
+  ```
+
 ### `@mui/lab@5.0.0-alpha.55`
 
 - &#8203;<!-- 12 -->[LoadingButton] Text variant spacing fixed for both start and end (#29194) @joshua-lawrence

package/breakpoints.js

@@ -118,7 +118,7 @@ function createEmptyBreakpointObject(breakpointsInput = {}) {
 function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
-    const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
     if (isBreakpointUnused) {
       delete acc[key];

package/createBox.js

@@ -77,7 +77,7 @@ function createBox(options = {}) {
     /**
      * @ignore
      */
-    sx: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])
+    sx: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.func])
   } : void 0;
   return Box;
 }

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.js

@@ -121,6 +121,7 @@ function createCssVarsProvider(options) {
       shouldSkipGeneratingVar
     });
     mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      colorSchemes,
       vars: rootVars
     });
     const styleSheet = {};
@@ -133,10 +134,7 @@ function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = (0, _extends2.default)({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = (0, _utils.deepmerge)(mergedTheme.vars, vars);
 
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {

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) => 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/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?: {
-    defaultMode?: 'light' | 'dark' | 'system';
-    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

@@ -23,7 +23,7 @@ exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
 
 function getInitColorSchemeScript(options) {
   const {
-    defaultMode = 'light',
+    enableSystem,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -36,20 +36,20 @@ function getInitColorSchemeScript(options) {
       __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
         var colorScheme = '';
-        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+        if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
         if (mode === 'light') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
         }
         if (mode === 'dark') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
           document.body.setAttribute('${attribute}', colorScheme);

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/breakpoints.js

@@ -95,7 +95,7 @@ export function createEmptyBreakpointObject(breakpointsInput = {}) {
 export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
-    const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
     if (isBreakpointUnused) {
       delete acc[key];

package/esm/createBox.js

@@ -54,7 +54,7 @@ export default function createBox(options = {}) {
     /**
      * @ignore
      */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
   } : void 0;
   return Box;
 }

package/esm/cssVars/createCssVarsProvider.js

@@ -100,6 +100,7 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar
     });
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      colorSchemes,
       vars: rootVars
     });
     const styleSheet = {};
@@ -112,10 +113,7 @@ export default function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {

package/esm/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,7 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    defaultMode = 'light',
+    enableSystem,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -18,20 +18,20 @@ export default function getInitColorSchemeScript(options) {
       __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
         var colorScheme = '';
-        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+        if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
         if (mode === 'light') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
         }
         if (mode === 'dark') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
           document.body.setAttribute('${attribute}', colorScheme);

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -44,27 +44,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          const breakpointsValues = handleBreakpoints({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (propToStyleFunction[styleKey]) {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           } else {
-            css = merge(css, breakpointsValues);
+            const breakpointsValues = handleBreakpoints({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = merge(css, breakpointsValues);
+            }
           }
+        } else {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      } else {
-        css = merge(css, getThemeValue(styleKey, value, theme));
       }
     });
     return removeUnusedBreakpoints(breakpointsKeys, css);

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.1
+/** @license MUI v5.2.0
  *
  * 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/breakpoints.js

@@ -102,7 +102,7 @@ export function createEmptyBreakpointObject() {
 export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce(function (acc, key) {
     var breakpointOutput = acc[key];
-    var isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+    var isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
     if (isBreakpointUnused) {
       delete acc[key];

package/legacy/createBox.js

@@ -52,7 +52,7 @@ export default function createBox() {
     /**
      * @ignore
      */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
   } : void 0;
   return Box;
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -105,6 +105,7 @@ export default function createCssVarsProvider(options) {
         rootVars = _cssVarsParser.vars;
 
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      colorSchemes: colorSchemes,
       vars: rootVars
     });
     var styleSheet = {};
@@ -121,9 +122,7 @@ export default function createCssVarsProvider(options) {
           css = _cssVarsParser2.css,
           vars = _cssVarsParser2.vars;
 
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
       var resolvedDefaultColorScheme = function () {
         if (typeof defaultColorScheme === 'string') {

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -5,8 +5,7 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
-      _ref$defaultMode = _ref.defaultMode,
-      defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
+      enableSystem = _ref.enableSystem,
       _ref$defaultLightColo = _ref.defaultLightColorScheme,
       defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
       _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
@@ -21,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(defaultMode, " === 'system')) {\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(defaultLightColorScheme, ";\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultDarkColorScheme, ";\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.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

package/legacy/index.js

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

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -54,27 +54,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(function (styleKey) {
       var value = callIfFn(sxObject[styleKey], theme);
 
-      if (_typeof(value) === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          var breakpointsValues = handleBreakpoints({
-            theme: theme
-          }, value, function (x) {
-            return _defineProperty({}, styleKey, x);
-          });
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
+      if (value !== null && value !== undefined) {
+        if (_typeof(value) === 'object') {
+          if (propToStyleFunction[styleKey]) {
+            css = merge(css, getThemeValue(styleKey, value, theme));
+          } else {
+            var breakpointsValues = handleBreakpoints({
               theme: theme
+            }, value, function (x) {
+              return _defineProperty({}, styleKey, x);
             });
-          } else {
-            css = merge(css, breakpointsValues);
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme: theme
+              });
+            } else {
+              css = merge(css, breakpointsValues);
+            }
           }
+        } else {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      } else {
-        css = merge(css, getThemeValue(styleKey, value, theme));
       }
     });
     return removeUnusedBreakpoints(breakpointsKeys, css);

package/modern/breakpoints.js

@@ -93,7 +93,7 @@ export function createEmptyBreakpointObject(breakpointsInput = {}) {
 export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
-    const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
     if (isBreakpointUnused) {
       delete acc[key];

package/modern/createBox.js

@@ -54,7 +54,7 @@ export default function createBox(options = {}) {
     /**
      * @ignore
      */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
   } : void 0;
   return Box;
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -100,6 +100,7 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar
     });
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      colorSchemes,
       vars: rootVars
     });
     const styleSheet = {};
@@ -112,10 +113,7 @@ export default function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,7 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    defaultMode = 'light',
+    enableSystem,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -18,20 +18,20 @@ export default function getInitColorSchemeScript(options) {
       __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
         var colorScheme = '';
-        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+        if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
         if (mode === 'light') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
         }
         if (mode === 'dark') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
           document.body.setAttribute('${attribute}', colorScheme);

package/modern/index.js

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

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -44,27 +44,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          const breakpointsValues = handleBreakpoints({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (propToStyleFunction[styleKey]) {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           } else {
-            css = merge(css, breakpointsValues);
+            const breakpointsValues = handleBreakpoints({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = merge(css, breakpointsValues);
+            }
           }
+        } else {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      } else {
-        css = merge(css, getThemeValue(styleKey, value, theme));
       }
     });
     return removeUnusedBreakpoints(breakpointsKeys, css);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.1.1",
-    "@mui/styled-engine": "^5.1.1",
+    "@mui/private-theming": "^5.2.0",
+    "@mui/styled-engine": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.1.1",
+    "@mui/utils": "^5.2.0",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.9",
+    "csstype": "^3.0.10",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

package/styleFunctionSx/styleFunctionSx.js

@@ -59,27 +59,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (_getThemeValue.propToStyleFunction[styleKey]) {
-          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-        } else {
-          const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (_getThemeValue.propToStyleFunction[styleKey]) {
+            css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
           } else {
-            css = (0, _merge.default)(css, breakpointsValues);
+            const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = (0, _merge.default)(css, breakpointsValues);
+            }
           }
+        } else {
+          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
         }
-      } else {
-        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
       }
     });
     return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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