@mui/system 5.6.2 → 5.6.3

package/Box/Box.d.ts

@@ -174,13 +174,30 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
     SystemProps<Theme> & {
       children?: React.ReactNode;
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
       component?: React.ElementType;
       ref?: React.Ref<unknown>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
       sx?: SxProps<Theme>;
     };
   defaultComponent: D;
 }
-
+/**
+ *
+ * Demos:
+ *
+ * - [Box (Material UI)](https://mui.com/material-ui/react-box/)
+ * - [Box (MUI System)](https://mui.com/system/react-box/)
+ *
+ * API:
+ *
+ * - [Box API](https://mui.com/system/api/box/)
+ */
 declare const Box: OverridableComponent<BoxTypeMap>;
 
 export type BoxProps<

package/Box/Box.js

@@ -7,8 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _createBox = _interopRequireDefault(require("../createBox"));
 
 const Box = (0, _createBox.default)();
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
 var _default = Box;
 exports.default = _default;

package/Box/Box.spec.d.ts

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

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.6.3
+
+<!-- generated comparing v5.6.2..master -->
+
+_Apr 25, 2022_
+
+A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 Fixed TypeScript issue when the `fill` CSS property is used in the system (#32355) @valerii15298
+- And more 🐛 bug fixes and 📚 improvements.
+
+### `@mui/material@5.6.3`
+
+- [BottomNavigation] Action icon `padding` fix (#32030) @abhinav-22-tech
+- [Dialog] Fix `component` prop is not available in `DialogTitleProps` (#32389) @hbjORbj
+- [StepContent] Fix TypeScript type of `TransitionComponent` prop (#32314) @ZeeshanTamboli
+
+### `@mui/system@5.6.3`
+
+- [system] Fix prop types when the `fill` CSS property is used (#32355) @valerii15298
+- [system] Fix broken behavior when theme value is `zero` (#32365) @ZeeshanTamboli
+
+### `@mui/base@5.0.0-alpha.78`
+
+- [InputUnstyled] `multiline` property should not log DOM warnings for `maxRows` and `minRows` props (#32401) @ZeeshanTamboli
+
+### `@mui/joy@5.0.0-alpha.25`
+
+- [Joy] Improve theme focus to be more flexible (#32405) @siriwatknp
+- [Joy] Add `Radio`, `RadioGroup` components (#32279) @siriwatknp
+- [Joy] Add `Chip` component (#31983) @hbjORbj
+- [Joy] Improve controls (#32267) @siriwatknp
+- [Joy] Set up docs (#32370) @siriwatknp
+
+### Docs
+
+- [docs] Enable row reordering on the pricing page (#31875) @DanailH
+- [blog] A few improvements on date picker change (#32325) @oliviertassinari
+- [docs] Emphasize how to avoid failing tests when migrating from v4 to v5 (#32159) @dwjohnston
+- [docs] Revise the related projects page (#32180) @danilo-leal
+- [docs] Cleanup remaining @mui/styles usages (#32313) @mnajdova
+- [docs] Fix sidenav mobile color (#32324) @oliviertassinari
+- [docs] Base TrapFocus style revisions and final review (#32364) @samuelsycamore
+- [docs] Update the README.md to better cover the different products (#32360) @samuelsycamore
+- [docs] Improve the propTypes generation and API demos' links (#32295) @mnajdova
+- [docs] Add ability to display a plan icon next to a page link in nav bar (#32393) @flaviendelangle
+- [docs] Change label on `FormControlLabelPlacement` (#32322) @ainatenhi
+- [website] Update Diamond sponsors list (#32433) @oliviertassinari
+- [website] Add privacy policy link to website's footer (#32080) @danilo-leal
+- [website] Remove the designer role (#32384) @danilo-leal
+
+### Core
+
+- [core] `yarn prettier` write @oliviertassinari
+- [core] Fix changelog warning message (#32240) @praveen001
+- [core] Update the proptypes scripts to support components in @mui/system (#32456) @mnajdova
+
+All contributors of this release in alphabetical order: @abhinav-22-tech, @ainatenhi, @DanailH, @danilo-leal, @dwjohnston, @flaviendelangle, @hbjORbj, @mnajdova, @oliviertassinari, @praveen001, @samuelsycamore, @siriwatknp, @valerii15298, @ZeeshanTamboli
+
 ## 5.6.2
 
 <!-- generated comparing v5.6.1..master -->

package/ThemeProvider/ThemeProvider.d.ts

@@ -1,7 +1,13 @@
 import { DefaultTheme } from '@mui/private-theming';
 
 export interface ThemeProviderProps<Theme = DefaultTheme> {
+  /**
+   * Your component tree.
+   */
   children?: React.ReactNode;
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
 }
 

package/ThemeProvider/ThemeProvider.js

@@ -57,7 +57,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -66,7 +73,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired
+  theme: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/createBox.js

@@ -13,8 +13,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styledEngine = _interopRequireDefault(require("@mui/styled-engine"));
@@ -56,29 +54,5 @@ function createBox(options = {}) {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: _propTypes.default.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: _propTypes.default.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.func])
-  } : void 0;
   return Box;
 }

package/createBox.spec.d.ts

@@ -1 +1 @@
-export {};
+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.spec.d.ts

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

package/cssVars/createGetCssVar.d.ts

@@ -1,5 +1,5 @@
-/**
- * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
- * and they does not need to remember the prefix (defined once).
- */
-export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;

package/cssVars/cssVarsParser.d.ts

@@ -1,70 +1,70 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
- *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
- *
- * @example
- * const { css, vars, parsedTheme } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
- */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-    parsedTheme: T;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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
+ *
+ *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ *
+ * @example
+ * const { css, vars, parsedTheme } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
+ * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+    parsedTheme: T;
+};
+export {};

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,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/index.d.ts

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

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,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/Box/Box.js

@@ -1,3 +1,28 @@
+import PropTypes from 'prop-types';
 import createBox from '../createBox';
 const Box = createBox();
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/esm/ThemeProvider/ThemeProvider.js

@@ -38,7 +38,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -47,7 +54,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/esm/createBox.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "component"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
 import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
@@ -33,29 +32,5 @@ export default function createBox(options = {}) {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-  } : void 0;
   return Box;
 }

package/esm/spacing.js

@@ -43,7 +43,9 @@ const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTo
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath(theme, themeKey) || defaultValue;
+  var _getPath;
+
+  const themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/esm/style.js

@@ -15,7 +15,13 @@ export function getPath(obj, path) {
     }
   }
 
-  return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+  return path.split('.').reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
+  }, obj);
 }
 
 function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.2
+/** @license MUI v5.6.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/Box/Box.js

@@ -1,3 +1,28 @@
+import PropTypes from 'prop-types';
 import createBox from '../createBox';
 var Box = createBox();
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/legacy/ThemeProvider/ThemeProvider.js

@@ -37,7 +37,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -46,7 +53,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/legacy/createBox.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
 import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
@@ -32,29 +31,5 @@ export default function createBox() {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-  } : void 0;
   return Box;
 }

package/legacy/index.js

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

package/legacy/spacing.js

@@ -50,7 +50,9 @@ var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop'
 var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var themeSpacing = getPath(theme, themeKey) || defaultValue;
+  var _getPath;
+
+  var themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return function (abs) {

package/legacy/style.js

@@ -19,7 +19,11 @@ export function getPath(obj, path) {
   }
 
   return path.split('.').reduce(function (acc, item) {
-    return acc && acc[item] ? acc[item] : null;
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
   }, obj);
 }
 

package/modern/Box/Box.js

@@ -1,3 +1,28 @@
+import PropTypes from 'prop-types';
 import createBox from '../createBox';
 const Box = createBox();
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/modern/ThemeProvider/ThemeProvider.js

@@ -38,7 +38,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -47,7 +54,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/modern/createBox.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "component"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
 import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
@@ -33,29 +32,5 @@ export default function createBox(options = {}) {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-  } : void 0;
   return Box;
 }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.2
+/** @license MUI v5.6.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/spacing.js

@@ -43,7 +43,7 @@ const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTo
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath(theme, themeKey) || defaultValue;
+  const themeSpacing = getPath(theme, themeKey) ?? defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/modern/style.js

@@ -15,7 +15,13 @@ export function getPath(obj, path) {
     }
   }
 
-  return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+  return path.split('.').reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
+  }, obj);
 }
 
 function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.6.2",
+  "version": "5.6.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",

package/spacing.js

@@ -64,7 +64,9 @@ const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddin
 const spacingKeys = [...marginKeys, ...paddingKeys];
 
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = (0, _style.getPath)(theme, themeKey) || defaultValue;
+  var _getPath;
+
+  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/style.js

@@ -28,7 +28,13 @@ function getPath(obj, path) {
     }
   }
 
-  return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+  return path.split('.').reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
+  }, obj);
 }
 
 function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -69,7 +69,9 @@ export type SystemStyleObject<Theme extends object = {}> =
 export type SxProps<Theme extends object = {}> =
   | SystemStyleObject<Theme>
   | ((theme: Theme) => SystemStyleObject<Theme>)
-  | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
+  | ReadonlyArray<
+      boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)
+    >;
 
 export interface StyleFunctionSx {
   (props: object): object;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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