@mui/system 5.12.0 → 5.12.3

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,53 +1,53 @@
-export type Mode = 'light' | 'dark' | 'system';
-export 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 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;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    storageWindow?: Window | null;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};
+export type Mode = 'light' | 'dark' | 'system';
+export 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 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;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    storageWindow?: Window | null;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/esm/Stack/Stack.js

@@ -4,6 +4,7 @@ import createStack from './createStack';
  *
  * Demos:
  *
+ * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
  * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
@@ -48,7 +49,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the theme's default props configuration.

package/esm/Unstable_Grid/createGrid.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+const _excluded = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_isMuiElement as isMuiElement } from '@mui/utils';
 import systemStyled from '../styled';
 import useThemePropsSystem from '../useThemeProps';
 import useTheme from '../useTheme';
@@ -34,7 +34,6 @@ export default function createGrid(options = {}) {
     useThemeProps = useThemePropsDefault,
     componentName = 'MuiGrid'
   } = options;
-  const NestedContext = /*#__PURE__*/React.createContext(0);
   const OverflowContext = /*#__PURE__*/React.createContext(undefined);
   const useUtilityClasses = (ownerState, theme) => {
     const {
@@ -55,10 +54,10 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    const level = React.useContext(NestedContext);
     const overflow = React.useContext(OverflowContext);
     const {
         className,
+        children,
         columns: columnsProp = 12,
         container = false,
         component = 'div',
@@ -67,7 +66,8 @@ export default function createGrid(options = {}) {
         spacing: spacingProp = 0,
         rowSpacing: rowSpacingProp = spacingProp,
         columnSpacing: columnSpacingProp = spacingProp,
-        disableEqualOverflow: themeDisableEqualOverflow
+        disableEqualOverflow: themeDisableEqualOverflow,
+        unstable_level: level = 0
       } = props,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
     // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
@@ -114,13 +114,17 @@ export default function createGrid(options = {}) {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className)
-    }, other));
-    if (container) {
-      result = /*#__PURE__*/_jsx(NestedContext.Provider, {
-        value: level + 1,
-        children: result
-      });
-    }
+    }, other, {
+      children: React.Children.map(children, child => {
+        if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+          var _child$props$unstable;
+          return /*#__PURE__*/React.cloneElement(child, {
+            unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+          });
+        }
+        return child;
+      })
+    }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
       // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
@@ -156,5 +160,8 @@ export default function createGrid(options = {}) {
     xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   } : void 0;
+
+  // @ts-ignore internal logic for nested grid
+  Grid.muiName = 'Grid';
   return Grid;
 }

package/esm/Unstable_Grid/gridGenerator.js

@@ -6,26 +6,26 @@ function appendLevel(level) {
   return `Level${level}`;
 }
 function isNestedContainer(ownerState) {
-  return ownerState.level > 0 && ownerState.container;
+  return ownerState.unstable_level > 0 && ownerState.container;
 }
 function createGetSelfSpacing(ownerState) {
   return function getSelfSpacing(axis) {
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
+    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
   };
 }
 function createGetParentSpacing(ownerState) {
   return function getParentSpacing(axis) {
-    if (ownerState.level === 0) {
+    if (ownerState.unstable_level === 0) {
       return `var(--Grid-${axis}Spacing)`;
     }
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
+    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
   };
 }
 function getParentColumns(ownerState) {
-  if (ownerState.level === 0) {
+  if (ownerState.unstable_level === 0) {
     return `var(--Grid-columns)`;
   }
-  return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+  return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
 }
 export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
 export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
@@ -133,13 +133,13 @@ export const generateGridColumnsStyles = ({
     return {};
   }
   const styles = isNestedContainer(ownerState) ? {
-    [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+    [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
   } : {
     '--Grid-columns': 12
   };
   traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
     appendStyle(styles, {
-      [`--Grid-columns${appendLevel(ownerState.level)}`]: value
+      [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
     });
   });
   return styles;
@@ -155,12 +155,12 @@ export const generateGridRowSpacingStyles = ({
   const styles = isNestedContainer(ownerState) ? {
     // Set the default spacing as its parent spacing.
     // It will be overridden if spacing props are provided
-    [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('row')
+    [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
   } : {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
     var _theme$spacing;
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
     });
   });
   return styles;
@@ -176,12 +176,12 @@ export const generateGridColumnSpacingStyles = ({
   const styles = isNestedContainer(ownerState) ? {
     // Set the default spacing as its parent spacing.
     // It will be overridden if spacing props are provided
-    [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('column')
+    [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
   } : {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
     var _theme$spacing2;
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
     });
   });
   return styles;

package/esm/colorManipulator.js

@@ -1,4 +1,5 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+/* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped

package/esm/createStyled.js

@@ -202,6 +202,9 @@ export default function createStyled(input = {}) {
         }
         Component.displayName = displayName;
       }
+      if (tag.muiName) {
+        Component.muiName = tag.muiName;
+      }
       return Component;
     };
     if (defaultStyledResolver.withConfig) {

package/esm/createTheme/createSpacing.js

@@ -1,4 +1,8 @@
 import { createUnarySpacing } from '../spacing';
+
+// The different signatures imply different meaning for their arguments that can't be expressed structurally.
+// We express the difference with variable names.
+/* tslint:disable:unified-signatures */
 /* tslint:enable:unified-signatures */
 
 export default function createSpacing(spacingInput = 8) {

package/esm/cssVars/prepareCssVars.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["colorSchemes", "components"],
   _excluded2 = ["light"];
@@ -48,11 +49,14 @@ function prepareCssVars(theme, parserConfig) {
   const generateCssVars = colorScheme => {
     if (!colorScheme) {
       return {
-        css: rootCss,
+        css: _extends({}, rootCss),
         vars: rootVars
       };
     }
-    return colorSchemesMap[colorScheme];
+    return {
+      css: _extends({}, colorSchemesMap[colorScheme].css),
+      vars: colorSchemesMap[colorScheme].vars
+    };
   };
   return {
     vars: themeVars,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.12.0
+ * @mui/system v5.12.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -557,4 +557,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function experimental_sx() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _utils.formatMuiErrorMessage)(20));
-}
+}
+
+/** ----------------- */
+/** Layout components */

package/legacy/Stack/Stack.js

@@ -4,6 +4,7 @@ import createStack from './createStack';
  *
  * Demos:
  *
+ * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
  * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
@@ -48,7 +49,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the theme's default props configuration.

package/legacy/Unstable_Grid/createGrid.js

@@ -5,7 +5,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_isMuiElement as isMuiElement } from '@mui/utils';
 import systemStyled from '../styled';
 import useThemePropsSystem from '../useThemeProps';
 import useTheme from '../useTheme';
@@ -38,7 +38,6 @@ export default function createGrid() {
     useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
     _options$componentNam = options.componentName,
     componentName = _options$componentNam === void 0 ? 'MuiGrid' : _options$componentNam;
-  var NestedContext = /*#__PURE__*/React.createContext(0);
   var OverflowContext = /*#__PURE__*/React.createContext(undefined);
   var useUtilityClasses = function useUtilityClasses(ownerState, theme) {
     var container = ownerState.container,
@@ -59,9 +58,9 @@ export default function createGrid() {
     var theme = useTheme();
     var themeProps = useThemeProps(inProps);
     var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    var level = React.useContext(NestedContext);
     var overflow = React.useContext(OverflowContext);
     var className = props.className,
+      children = props.children,
       _props$columns = props.columns,
       columnsProp = _props$columns === void 0 ? 12 : _props$columns,
       _props$container = props.container,
@@ -79,7 +78,9 @@ export default function createGrid() {
       _props$columnSpacing = props.columnSpacing,
       columnSpacingProp = _props$columnSpacing === void 0 ? spacingProp : _props$columnSpacing,
       themeDisableEqualOverflow = props.disableEqualOverflow,
-      rest = _objectWithoutProperties(props, ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"]); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
+      _props$unstable_level = props.unstable_level,
+      level = _props$unstable_level === void 0 ? 0 : _props$unstable_level,
+      rest = _objectWithoutProperties(props, ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"]); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     var disableEqualOverflow = themeDisableEqualOverflow;
     if (level && themeDisableEqualOverflow !== undefined) {
       disableEqualOverflow = inProps.disableEqualOverflow;
@@ -126,13 +127,17 @@ export default function createGrid() {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className)
-    }, other));
-    if (container) {
-      result = /*#__PURE__*/_jsx(NestedContext.Provider, {
-        value: level + 1,
-        children: result
-      });
-    }
+    }, other, {
+      children: React.Children.map(children, function (child) {
+        if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+          var _child$props$unstable;
+          return /*#__PURE__*/React.cloneElement(child, {
+            unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+          });
+        }
+        return child;
+      })
+    }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
       // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
@@ -168,5 +173,8 @@ export default function createGrid() {
     xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   } : void 0;
+
+  // @ts-ignore internal logic for nested grid
+  Grid.muiName = 'Grid';
   return Grid;
 }

package/legacy/Unstable_Grid/gridGenerator.js

@@ -9,26 +9,26 @@ function appendLevel(level) {
   return "Level".concat(level);
 }
 function isNestedContainer(ownerState) {
-  return ownerState.level > 0 && ownerState.container;
+  return ownerState.unstable_level > 0 && ownerState.container;
 }
 function createGetSelfSpacing(ownerState) {
   return function getSelfSpacing(axis) {
-    return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.level), ")");
+    return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.unstable_level), ")");
   };
 }
 function createGetParentSpacing(ownerState) {
   return function getParentSpacing(axis) {
-    if (ownerState.level === 0) {
+    if (ownerState.unstable_level === 0) {
       return "var(--Grid-".concat(axis, "Spacing)");
     }
-    return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.level - 1), ")");
+    return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.unstable_level - 1), ")");
   };
 }
 function getParentColumns(ownerState) {
-  if (ownerState.level === 0) {
+  if (ownerState.unstable_level === 0) {
     return "var(--Grid-columns)";
   }
-  return "var(--Grid-columns".concat(appendLevel(ownerState.level - 1), ")");
+  return "var(--Grid-columns".concat(appendLevel(ownerState.unstable_level - 1), ")");
 }
 export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
   return breakpointsKeys.filter(function (key) {
@@ -136,11 +136,11 @@ export var generateGridColumnsStyles = function generateGridColumnsStyles(_ref3)
   if (!ownerState.container) {
     return {};
   }
-  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.level)), getParentColumns(ownerState)) : {
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.unstable_level)), getParentColumns(ownerState)) : {
     '--Grid-columns': 12
   };
   traverseBreakpoints(theme.breakpoints, ownerState.columns, function (appendStyle, value) {
-    appendStyle(styles, _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.level)), value));
+    appendStyle(styles, _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.unstable_level)), value));
   });
   return styles;
 };
@@ -151,10 +151,10 @@ export var generateGridRowSpacingStyles = function generateGridRowSpacingStyles(
     return {};
   }
   var getParentSpacing = createGetParentSpacing(ownerState);
-  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.level)), getParentSpacing('row')) : {};
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.unstable_level)), getParentSpacing('row')) : {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, function (appendStyle, value) {
     var _theme$spacing;
-    appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.level)), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
+    appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.unstable_level)), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
   });
   return styles;
 };
@@ -165,10 +165,10 @@ export var generateGridColumnSpacingStyles = function generateGridColumnSpacingS
     return {};
   }
   var getParentSpacing = createGetParentSpacing(ownerState);
-  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.level)), getParentSpacing('column')) : {};
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.unstable_level)), getParentSpacing('column')) : {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, function (appendStyle, value) {
     var _theme$spacing2;
-    appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.level)), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
+    appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.unstable_level)), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
   });
   return styles;
 };

package/legacy/colorManipulator.js

@@ -1,4 +1,5 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+/* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped

package/legacy/createStyled.js

@@ -212,6 +212,9 @@ export default function createStyled() {
         }
         Component.displayName = displayName;
       }
+      if (tag.muiName) {
+        Component.muiName = tag.muiName;
+      }
       return Component;
     };
     if (defaultStyledResolver.withConfig) {

package/legacy/createTheme/createSpacing.js

@@ -1,4 +1,8 @@
 import { createUnarySpacing } from '../spacing';
+
+// The different signatures imply different meaning for their arguments that can't be expressed structurally.
+// We express the difference with variable names.
+/* tslint:disable:unified-signatures */
 /* tslint:enable:unified-signatures */
 
 export default function createSpacing() {

package/legacy/cssVars/prepareCssVars.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { deepmerge } from '@mui/utils';
@@ -45,11 +46,14 @@ function prepareCssVars(theme, parserConfig) {
   var generateCssVars = function generateCssVars(colorScheme) {
     if (!colorScheme) {
       return {
-        css: rootCss,
+        css: _extends({}, rootCss),
         vars: rootVars
       };
     }
-    return colorSchemesMap[colorScheme];
+    return {
+      css: _extends({}, colorSchemesMap[colorScheme].css),
+      vars: colorSchemesMap[colorScheme].vars
+    };
   };
   return {
     vars: themeVars,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.12.0
+ * @mui/system v5.12.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Stack/Stack.js

@@ -4,6 +4,7 @@ import createStack from './createStack';
  *
  * Demos:
  *
+ * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
  * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
  * - [Stack (MUI System)](https://mui.com/system/react-stack/)
  *
@@ -48,7 +49,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the theme's default props configuration.