@mui/system 5.11.16 → 5.12.0

package/cssVars/createCssVarsProvider.d.ts

@@ -41,14 +41,22 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
   disableTransitionOnChange?: boolean;
 }
 
-export interface CreateCssVarsProviderResult<ColorScheme extends string> {
+type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
+
+export interface CreateCssVarsProviderResult<
+  ColorScheme extends string,
+  Identifier extends string | undefined = undefined,
+> {
   CssVarsProvider: (
     props: React.PropsWithChildren<
       Partial<CssVarsProviderConfig<ColorScheme>> & {
-        theme?: {
-          cssVarPrefix?: string;
-          colorSchemes: Record<ColorScheme, Record<string, any>>;
-        };
+        theme?: Identify<
+          Identifier,
+          {
+            cssVarPrefix?: string;
+            colorSchemes: Record<ColorScheme, Record<string, any>>;
+          }
+        >;
         /**
          * The document used to perform `disableTransitionOnChange` feature
          * @default document
@@ -87,8 +95,15 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string> {
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
 
-export default function createCssVarsProvider<ColorScheme extends string>(
+export default function createCssVarsProvider<
+  ColorScheme extends string,
+  Identifier extends string | undefined = undefined,
+>(
   options: CssVarsProviderConfig<ColorScheme> & {
+    /**
+     * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+     */
+    themeId?: Identifier;
     /**
      * Design system default theme
      *
@@ -136,7 +151,7 @@ export default function createCssVarsProvider<ColorScheme extends string>(
      */
     excludeVariablesFromRoot?: (cssVarPrefix: string) => string[];
   },
-): CreateCssVarsProviderResult<ColorScheme>;
+): CreateCssVarsProviderResult<ColorScheme, Identifier>;
 
 // disable automatic export
 export {};

package/cssVars/createCssVarsProvider.js

@@ -24,6 +24,7 @@ const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transit
 exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
 function createCssVarsProvider(options) {
   const {
+    themeId,
     theme: defaultTheme = {},
     attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
@@ -65,7 +66,9 @@ function createCssVarsProvider(options) {
     const upperTheme = (0, _privateTheming.useTheme)();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
-    const {
+    const scopedTheme = themeProp[themeId];
+    const _ref = scopedTheme || themeProp,
+      {
         colorSchemes = {},
         components = {},
         generateCssVars = () => ({
@@ -73,8 +76,8 @@ function createCssVarsProvider(options) {
           css: {}
         }),
         cssVarPrefix
-      } = themeProp,
-      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
+      } = _ref,
+      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -250,6 +253,7 @@ function createCssVarsProvider(options) {
           styles: otherColorSchemesStyleSheet
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+        themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]

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

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

package/esm/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/esm/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/esm/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';
@@ -70,16 +68,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;
@@ -123,20 +131,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 = {};
@@ -152,7 +162,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);
         });
       }
@@ -171,15 +184,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/esm/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/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.0
  *
  * @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/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;