@mui/system 5.11.16 → 5.12.1

package/esm/index.js

@@ -1,5 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-export { css, keyframes, GlobalStyles, StyledEngineProvider } from '@mui/styled-engine';
+export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
+export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';
 export * from './borders';
 export { default as breakpoints } from './breakpoints';

package/esm/useThemeProps/useThemeProps.js

@@ -3,9 +3,13 @@ import useTheme from '../useTheme';
 export default function useThemeProps({
   props,
   name,
-  defaultTheme
+  defaultTheme,
+  themeId
 }) {
-  const theme = useTheme(defaultTheme);
+  let theme = useTheme(defaultTheme);
+  if (themeId) {
+    theme = theme[themeId] || theme;
+  }
   const mergedProps = getThemeProps({
     theme,
     name,

package/esm/useThemeWithoutDefault.js

@@ -1,9 +1,10 @@
-import { useTheme as muiUseTheme } from '@mui/private-theming';
+import * as React from 'react';
+import { ThemeContext } from '@mui/styled-engine';
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 function useTheme(defaultTheme = null) {
-  const contextTheme = muiUseTheme();
+  const contextTheme = React.useContext(ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 export default useTheme;

package/index.d.ts

@@ -104,13 +104,13 @@ export { DefaultTheme } from '@mui/private-theming';
 export {
   css,
   keyframes,
-  GlobalStyles,
-  GlobalStylesProps,
   StyledEngineProvider,
   Interpolation,
   CSSInterpolation,
   CSSObject,
 } from '@mui/styled-engine';
+export { default as GlobalStyles } from './GlobalStyles';
+export type { GlobalStylesProps } from './GlobalStyles';
 
 export * from './style';
 export * from './spacing';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.11.16
+ * @mui/system v5.12.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,8 +15,8 @@ var _exportNames = {
   experimental_sx: true,
   css: true,
   keyframes: true,
-  GlobalStyles: true,
   StyledEngineProvider: true,
+  GlobalStyles: true,
   borders: true,
   breakpoints: true,
   handleBreakpoints: true,
@@ -79,7 +79,7 @@ Object.defineProperty(exports, "Container", {
 Object.defineProperty(exports, "GlobalStyles", {
   enumerable: true,
   get: function () {
-    return _styledEngine.GlobalStyles;
+    return _GlobalStyles.default;
   }
 });
 Object.defineProperty(exports, "Stack", {
@@ -367,6 +367,7 @@ Object.defineProperty(exports, "useThemeWithoutDefault", {
 });
 var _utils = require("@mui/utils");
 var _styledEngine = require("@mui/styled-engine");
+var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
 var _borders = _interopRequireWildcard(require("./borders"));
 Object.keys(_borders).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/legacy/GlobalStyles/GlobalStyles.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
+import useTheme from '../useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GlobalStyles(_ref) {
+  var styles = _ref.styles,
+    themeId = _ref.themeId,
+    _ref$defaultTheme = _ref.defaultTheme,
+    defaultTheme = _ref$defaultTheme === void 0 ? {} : _ref$defaultTheme;
+  var upperTheme = useTheme(defaultTheme);
+  var globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  return /*#__PURE__*/_jsx(MuiGlobalStyles, {
+    styles: globalStyles
+  });
+}
+process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  defaultTheme: PropTypes.object,
+  /**
+   * @ignore
+   */
+  styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  /**
+   * @ignore
+   */
+  themeId: PropTypes.string
+} : void 0;
+export default GlobalStyles;

package/legacy/GlobalStyles/index.js

@@ -0,0 +1,2 @@
+export { default } from './GlobalStyles';
+export * from './GlobalStyles';

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

@@ -1,36 +1,57 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider } from '@mui/private-theming';
+import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
 import { exactProp } from '@mui/utils';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
-import useTheme from '../useTheme';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import { jsx as _jsx } from "react/jsx-runtime";
 var EMPTY_THEME = {};
-function InnerThemeProvider(props) {
-  var theme = useTheme();
-  return /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
-    value: _typeof(theme) === 'object' ? theme : EMPTY_THEME,
-    children: props.children
-  });
+function useThemeScoping(themeId, upperTheme, localTheme) {
+  var isPrivate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return React.useMemo(function () {
+    var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    if (typeof localTheme === 'function') {
+      var mergedTheme = localTheme(resolvedTheme);
+      var result = themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, mergedTheme)) : mergedTheme;
+      // must return a function for the private theme to NOT merge with the upper theme.
+      // see the test case "use provided theme from a callback" in ThemeProvider.test.js
+      if (isPrivate) {
+        return function () {
+          return result;
+        };
+      }
+      return result;
+    }
+    return themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, localTheme)) : _extends({}, upperTheme, localTheme);
+  }, [themeId, upperTheme, localTheme, isPrivate]);
 }
-process.env.NODE_ENV !== "production" ? InnerThemeProvider.propTypes = {
-  /**
-   * Your component tree.
-   */
-  children: PropTypes.node
-} : void 0;
 
 /**
  * This component makes the `theme` available down the React tree.
  * It should preferably be used at **the root of your component tree**.
+ *
+ * <ThemeProvider theme={theme}> // existing use case
+ * <ThemeProvider theme={{ id: theme }}> // theme scoping
  */
 function ThemeProvider(props) {
   var children = props.children,
-    localTheme = props.theme;
+    localTheme = props.theme,
+    themeId = props.themeId;
+  var upperTheme = useThemeWithoutDefault(EMPTY_THEME);
+  var upperPrivateTheme = usePrivateTheme() || EMPTY_THEME;
+  if (process.env.NODE_ENV !== 'production') {
+    if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
+      console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+    }
+  }
+  var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+  var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
-    theme: localTheme,
-    children: /*#__PURE__*/_jsx(InnerThemeProvider, {
+    theme: privateTheme,
+    children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
+      value: engineTheme,
       children: children
     })
   });
@@ -47,7 +68,11 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-propty
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId: PropTypes.string
 } : void 0;
 if (process.env.NODE_ENV !== 'production') {
   process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;

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

@@ -8,7 +8,8 @@ import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var defaultTheme = options.defaultTheme,
+  var themeId = options.themeId,
+    defaultTheme = options.defaultTheme,
     _options$defaultClass = options.defaultClassName,
     defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
     generateClassName = options.generateClassName;
@@ -28,7 +29,7 @@ export default function createBox() {
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: theme
+      theme: themeId ? theme[themeId] || theme : theme
     }, other));
   });
   return Box;

package/legacy/createStyled.js

@@ -68,18 +68,27 @@ export var systemDefaultTheme = createTheme();
 var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
+function resolveTheme(_ref) {
+  var defaultTheme = _ref.defaultTheme,
+    theme = _ref.theme,
+    themeId = _ref.themeId;
+  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+}
 export default function createStyled() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _input$defaultTheme = input.defaultTheme,
+  var themeId = input.themeId,
+    _input$defaultTheme = input.defaultTheme,
     defaultTheme = _input$defaultTheme === void 0 ? systemDefaultTheme : _input$defaultTheme,
     _input$rootShouldForw = input.rootShouldForwardProp,
     rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
     _input$slotShouldForw = input.slotShouldForwardProp,
     slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
   var systemSx = function systemSx(props) {
-    var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
     return styleFunctionSx(_extends({}, props, {
-      theme: theme
+      theme: resolveTheme(_extends({}, props, {
+        defaultTheme: defaultTheme,
+        themeId: themeId
+      }))
     }));
   };
   systemSx.__mui_systemSx = true;
@@ -127,18 +136,22 @@ export default function createStyled() {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
-        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? function (_ref) {
-          var themeInput = _ref.theme,
-            other = _objectWithoutProperties(_ref, ["theme"]);
-          return stylesArg(_extends({
-            theme: isEmpty(themeInput) ? defaultTheme : themeInput
-          }, other));
+        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? function (props) {
+          return stylesArg(_extends({}, props, {
+            theme: resolveTheme(_extends({}, props, {
+              defaultTheme: defaultTheme,
+              themeId: themeId
+            }))
+          }));
         } : stylesArg;
       }) : [];
       var transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(function (props) {
-          var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+          var theme = resolveTheme(_extends({}, props, {
+            defaultTheme: defaultTheme,
+            themeId: themeId
+          }));
           var styleOverrides = getStyleOverrides(componentName, theme);
           if (styleOverrides) {
             var resolvedStyleOverrides = {};
@@ -157,7 +170,10 @@ export default function createStyled() {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(function (props) {
-          var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+          var theme = resolveTheme(_extends({}, props, {
+            defaultTheme: defaultTheme,
+            themeId: themeId
+          }));
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
@@ -176,12 +192,13 @@ export default function createStyled() {
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = function transformedStyleArg(_ref4) {
-          var themeInput = _ref4.theme,
-            other = _objectWithoutProperties(_ref4, ["theme"]);
-          return styleArg(_extends({
-            theme: isEmpty(themeInput) ? defaultTheme : themeInput
-          }, other));
+        transformedStyleArg = function transformedStyleArg(props) {
+          return styleArg(_extends({}, props, {
+            theme: resolveTheme(_extends({}, props, {
+              defaultTheme: defaultTheme,
+              themeId: themeId
+            }))
+          }));
         };
       }
       var Component = defaultStyledResolver.apply(void 0, [transformedStyleArg].concat(_toConsumableArray(expressionsWithDefaultTheme)));
@@ -195,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/createCssVarsProvider.js

@@ -16,7 +16,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
-  var _options$theme = options.theme,
+  var themeId = options.themeId,
+    _options$theme = options.theme,
     defaultTheme = _options$theme === void 0 ? {} : _options$theme,
     _options$attribute = options.attribute,
     defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
@@ -74,19 +75,21 @@ export default function createCssVarsProvider(options) {
     var upperTheme = muiUseTheme();
     var ctx = React.useContext(ColorSchemeContext);
     var nested = !!ctx && !disableNestedContext;
-    var _themeProp$colorSchem = themeProp.colorSchemes,
-      colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
-      _themeProp$components = themeProp.components,
-      components = _themeProp$components === void 0 ? {} : _themeProp$components,
-      _themeProp$generateCs = themeProp.generateCssVars,
-      generateCssVars = _themeProp$generateCs === void 0 ? function () {
+    var scopedTheme = themeProp[themeId];
+    var _ref2 = scopedTheme || themeProp,
+      _ref2$colorSchemes = _ref2.colorSchemes,
+      colorSchemes = _ref2$colorSchemes === void 0 ? {} : _ref2$colorSchemes,
+      _ref2$components = _ref2.components,
+      components = _ref2$components === void 0 ? {} : _ref2$components,
+      _ref2$generateCssVars = _ref2.generateCssVars,
+      generateCssVars = _ref2$generateCssVars === void 0 ? function () {
         return {
           vars: {},
           css: {}
         };
-      } : _themeProp$generateCs,
-      cssVarPrefix = themeProp.cssVarPrefix,
-      restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+      } : _ref2$generateCssVars,
+      cssVarPrefix = _ref2.cssVarPrefix,
+      restThemeProp = _objectWithoutProperties(_ref2, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -155,10 +158,10 @@ export default function createCssVarsProvider(options) {
     //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
     var defaultColorSchemeStyleSheet = {};
     var otherColorSchemesStyleSheet = {};
-    Object.entries(colorSchemes).forEach(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        scheme = _ref3[1];
+    Object.entries(colorSchemes).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        scheme = _ref4[1];
       var _generateCssVars2 = generateCssVars(key),
         css = _generateCssVars2.css,
         vars = _generateCssVars2.vars;
@@ -264,6 +267,7 @@ export default function createCssVarsProvider(options) {
           styles: otherColorSchemesStyleSheet
         })]
       }), /*#__PURE__*/_jsx(ThemeProvider, {
+        themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]

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,12 +1,13 @@
 /**
- * @mui/system v5.11.16
+ * @mui/system v5.12.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-export { css, keyframes, GlobalStyles, StyledEngineProvider } from '@mui/styled-engine';
+export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
+export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';
 export * from './borders';
 export { default as breakpoints } from './breakpoints';

package/legacy/useThemeProps/useThemeProps.js

@@ -3,8 +3,12 @@ import useTheme from '../useTheme';
 export default function useThemeProps(_ref) {
   var props = _ref.props,
     name = _ref.name,
-    defaultTheme = _ref.defaultTheme;
+    defaultTheme = _ref.defaultTheme,
+    themeId = _ref.themeId;
   var theme = useTheme(defaultTheme);
+  if (themeId) {
+    theme = theme[themeId] || theme;
+  }
   var mergedProps = getThemeProps({
     theme: theme,
     name: name,

package/legacy/useThemeWithoutDefault.js

@@ -1,10 +1,11 @@
-import { useTheme as muiUseTheme } from '@mui/private-theming';
+import * as React from 'react';
+import { ThemeContext } from '@mui/styled-engine';
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 function useTheme() {
   var defaultTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var contextTheme = muiUseTheme();
+  var contextTheme = React.useContext(ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 export default useTheme;