@mui/system 5.12.0 → 5.12.1

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/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/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.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Stack/Stack.js

@@ -4,6 +4,7 @@ import createStack from './createStack';
  *
  * Demos:
  *
+ * - [Stack (Joy UI)](https://mui.com/joy/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/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/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.1
  *
  * @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/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/modern/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 {
@@ -54,10 +53,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',
@@ -66,7 +65,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.
@@ -113,13 +113,16 @@ 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'])) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            unstable_level: child.props.unstable_level ?? level + 1
+          });
+        }
+        return child;
+      })
+    }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (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`.
@@ -155,5 +158,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/modern/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,11 +155,11 @@ 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) => {
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;
@@ -175,11 +175,11 @@ 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) => {
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;

package/modern/createStyled.js

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

package/modern/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/modern/index.js

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

package/package.json

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