@mui/system 5.11.15 → 5.12.0

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/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)));

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

@@ -1,12 +1,13 @@
 /**
- * @mui/system v5.11.15
+ * @mui/system v5.12.0
  *
  * @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;

package/modern/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({
+  styles,
+  themeId,
+  defaultTheme = {}
+}) {
+  const upperTheme = useTheme(defaultTheme);
+  const 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/modern/GlobalStyles/index.js

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

package/modern/ThemeProvider/ThemeProvider.js

@@ -1,37 +1,59 @@
+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";
 const EMPTY_THEME = {};
-function InnerThemeProvider(props) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
-    value: typeof theme === 'object' ? theme : EMPTY_THEME,
-    children: props.children
-  });
+function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
+  return React.useMemo(() => {
+    const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    if (typeof localTheme === 'function') {
+      const mergedTheme = localTheme(resolvedTheme);
+      const result = themeId ? _extends({}, upperTheme, {
+        [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 () => result;
+      }
+      return result;
+    }
+    return themeId ? _extends({}, upperTheme, {
+      [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) {
   const {
     children,
-    theme: localTheme
+    theme: localTheme,
+    themeId
   } = props;
+  const upperTheme = useThemeWithoutDefault(EMPTY_THEME);
+  const 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'));
+    }
+  }
+  const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+  const 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
     })
   });
@@ -48,7 +70,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/modern/createBox.js

@@ -9,6 +9,7 @@ import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {
+    themeId,
     defaultTheme,
     defaultClassName = 'MuiBox-root',
     generateClassName
@@ -28,7 +29,7 @@ export default function createBox(options = {}) {
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: theme
+      theme: themeId ? theme[themeId] || theme : theme
     }, other));
   });
   return Box;

package/modern/createStyled.js

@@ -1,8 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-  _excluded2 = ["theme"],
-  _excluded3 = ["theme"];
+const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
@@ -69,16 +67,26 @@ export const systemDefaultTheme = createTheme();
 const lowercaseFirstLetter = string => {
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
+function resolveTheme({
+  defaultTheme,
+  theme,
+  themeId
+}) {
+  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+}
 export default function createStyled(input = {}) {
   const {
+    themeId,
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
     return styleFunctionSx(_extends({}, props, {
-      theme
+      theme: resolveTheme(_extends({}, props, {
+        defaultTheme,
+        themeId
+      }))
     }));
   };
   systemSx.__mui_systemSx = true;
@@ -122,20 +130,22 @@ export default function createStyled(input = {}) {
         // 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 ? _ref => {
-          let {
-              theme: themeInput
-            } = _ref,
-            other = _objectWithoutPropertiesLoose(_ref, _excluded2);
-          return stylesArg(_extends({
-            theme: isEmpty(themeInput) ? defaultTheme : themeInput
-          }, other));
+        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
+          return stylesArg(_extends({}, props, {
+            theme: resolveTheme(_extends({}, props, {
+              defaultTheme,
+              themeId
+            }))
+          }));
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+          const theme = resolveTheme(_extends({}, props, {
+            defaultTheme,
+            themeId
+          }));
           const styleOverrides = getStyleOverrides(componentName, theme);
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
@@ -151,7 +161,10 @@ export default function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+          const theme = resolveTheme(_extends({}, props, {
+            defaultTheme,
+            themeId
+          }));
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
@@ -170,15 +183,12 @@ export default function createStyled(input = {}) {
       // 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 = _ref2 => {
-          let {
-              theme: themeInput
-            } = _ref2,
-            other = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-          return styleArg(_extends({
-            theme: isEmpty(themeInput) ? defaultTheme : themeInput
-          }, other));
-        };
+        transformedStyleArg = props => styleArg(_extends({}, props, {
+          theme: resolveTheme(_extends({}, props, {
+            defaultTheme,
+            themeId
+          }))
+        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {

package/modern/cssVars/createCssVarsProvider.js

@@ -15,6 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export const 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) {
   const {
+    themeId,
     theme: defaultTheme = {},
     attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -56,7 +57,9 @@ export default function createCssVarsProvider(options) {
     const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
-    const {
+    const scopedTheme = themeProp[themeId];
+    const _ref = scopedTheme || themeProp,
+      {
         colorSchemes = {},
         components = {},
         generateCssVars = () => ({
@@ -64,8 +67,8 @@ export default function createCssVarsProvider(options) {
           css: {}
         }),
         cssVarPrefix
-      } = themeProp,
-      restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
+      } = _ref,
+      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -241,6 +244,7 @@ export default function createCssVarsProvider(options) {
           styles: otherColorSchemesStyleSheet
         })]
       }), /*#__PURE__*/_jsx(ThemeProvider, {
+        themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]

package/modern/index.js

@@ -1,12 +1,13 @@
 /**
- * @mui/system v5.11.15
+ * @mui/system v5.12.0
  *
  * @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/modern/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/modern/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;