@mui/system 5.11.16 → 5.12.1

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/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/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/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/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') {
@@ -191,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/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/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,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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.11.16",
+  "version": "5.12.1",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/private-theming": "^5.11.13",
-    "@mui/styled-engine": "^5.11.16",
-    "@mui/types": "^7.2.3",
-    "@mui/utils": "^5.11.13",
+    "@mui/private-theming": "^5.12.0",
+    "@mui/styled-engine": "^5.12.0",
+    "@mui/types": "^7.2.4",
+    "@mui/utils": "^5.12.0",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"

package/useThemeProps/useThemeProps.d.ts

@@ -12,4 +12,9 @@ export default function useThemeProps<
   Theme extends ThemeWithProps,
   Props,
   Name extends keyof any,
->(params: { props: Props; name: Name; defaultTheme?: Theme }): Props & ThemedProps<Theme, Name>;
+>(params: {
+  props: Props;
+  name: Name;
+  defaultTheme?: Theme;
+  themeId?: string;
+}): Props & ThemedProps<Theme, Name>;

package/useThemeProps/useThemeProps.js

@@ -10,9 +10,13 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 function useThemeProps({
   props,
   name,
-  defaultTheme
+  defaultTheme,
+  themeId
 }) {
-  const theme = (0, _useTheme.default)(defaultTheme);
+  let theme = (0, _useTheme.default)(defaultTheme);
+  if (themeId) {
+    theme = theme[themeId] || theme;
+  }
   const mergedProps = (0, _getThemeProps.default)({
     theme,
     name,

package/useThemeWithoutDefault.js

@@ -4,12 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _privateTheming = require("@mui/private-theming");
+var React = _interopRequireWildcard(require("react"));
+var _styledEngine = require("@mui/styled-engine");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 function useTheme(defaultTheme = null) {
-  const contextTheme = (0, _privateTheming.useTheme)();
+  const contextTheme = React.useContext(_styledEngine.ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 var _default = useTheme;

package/Box/Box.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/createBox.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/cssVars/createCssVarsProvider.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +0,0 @@
-export {};