@mui/material 5.11.16 → 5.12.1

package/node/FormControlLabel/FormControlLabel.js

@@ -20,7 +20,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 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; }
 const useUtilityClasses = ownerState => {
@@ -28,11 +28,13 @@ const useUtilityClasses = ownerState => {
     classes,
     disabled,
     labelPlacement,
-    error
+    error,
+    required
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`, error && 'error'],
-    label: ['label', disabled && 'disabled']
+    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`, error && 'error', required && 'required'],
+    label: ['label', disabled && 'disabled'],
+    asterisk: ['asterisk', error && 'error']
   };
   return (0, _base.unstable_composeClasses)(slots, _formControlLabelClasses.getFormControlLabelUtilityClasses, classes);
 };
@@ -81,14 +83,25 @@ const FormControlLabelRoot = (0, _styled.default)('label', {
     }
   }
 }));
+exports.FormControlLabelRoot = FormControlLabelRoot;
+const AsteriskComponent = (0, _styled.default)('span', {
+  name: 'MuiFormControlLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${_formControlLabelClasses.default.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
 
 /**
  * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
  * Use this component if you want to display an extra label.
  */
-exports.FormControlLabelRoot = FormControlLabelRoot;
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _slotProps$typography;
+  var _ref, _slotProps$typography;
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -101,19 +114,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       disableTypography,
       label: labelProp,
       labelPlacement = 'end',
+      required: requiredProp,
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const muiFormControl = (0, _FormControl.useFormControl)();
-  let disabled = disabledProp;
-  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-    disabled = control.props.disabled;
-  }
-  if (typeof disabled === 'undefined' && muiFormControl) {
-    disabled = muiFormControl.disabled;
-  }
+  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
+  const required = requiredProp != null ? requiredProp : control.props.required;
   const controlProps = {
-    disabled
+    disabled,
+    required
   };
   ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
     if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -128,6 +138,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
     labelPlacement,
+    required,
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
@@ -146,7 +157,12 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label, required && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -209,6 +225,10 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: _propTypes.default.func,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: _propTypes.default.bool,
   /**
    * The props used for each slot inside.
    * @default {}

package/node/FormControlLabel/formControlLabelClasses.js

@@ -11,6 +11,6 @@ var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityCl
 function getFormControlLabelUtilityClasses(slot) {
   return (0, _generateUtilityClass.default)('MuiFormControlLabel', slot);
 }
-const formControlLabelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+const formControlLabelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 var _default = formControlLabelClasses;
 exports.default = _default;

package/node/GlobalStyles/GlobalStyles.js

@@ -10,12 +10,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("../styles/defaultTheme"));
+var _identifier = _interopRequireDefault(require("../styles/identifier"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 GlobalStyles(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.GlobalStyles, (0, _extends2.default)({}, props, {
-    defaultTheme: _defaultTheme.default
+    defaultTheme: _defaultTheme.default,
+    themeId: _identifier.default
   }));
 }
 process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
@@ -26,9 +28,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptyp
   /**
    * The styles you want to apply globally.
    */
-  styles: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-    __emotion_styles: _propTypes.default.any.isRequired
-  }), _propTypes.default.string, _propTypes.default.bool])
+  styles: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool])
 } : void 0;
 var _default = GlobalStyles;
 exports.default = _default;

package/node/Menu/Menu.js

@@ -56,7 +56,7 @@ const MenuPaper = (0, _styled.default)(_Paper.default, {
   overridesResolver: (props, styles) => styles.paper
 })({
   // specZ: The maximum height of a simple menu should be one or more rows less than the view
-  // height. This ensures a tapable area outside of the simple menu with which to dismiss
+  // height. This ensures a tappable area outside of the simple menu with which to dismiss
   // the menu.
   maxHeight: 'calc(100% - 96px)',
   // Add iOS momentum scrolling for iOS < 13.0

package/node/Popper/Popper.js

@@ -139,10 +139,6 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * If `true`, the component is shown.
    */
   open: _propTypes.default.bool.isRequired,
-  /**
-   * @ignore
-   */
-  ownerState: _propTypes.default.any,
   /**
    * Popper placement.
    * @default 'bottom'

package/node/Select/Select.js

@@ -237,7 +237,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
   onChange: _propTypes.default.func,
   /**
    * Callback fired when the component requests to be closed.
-   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapses).
    *
    * @param {object} event The event source of the callback.
    */

package/node/Stack/Stack.js

@@ -56,7 +56,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](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/node/Tabs/ScrollbarSize.js

@@ -38,7 +38,7 @@ function ScrollbarSize(props) {
   const setMeasurements = () => {
     scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
   };
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     const handleResize = (0, _debounce.default)(() => {
       const prevHeight = scrollbarHeight.current;
       setMeasurements();

package/node/Tabs/Tabs.js

@@ -426,7 +426,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     moveTabsScroll(getScrollSize());
   };
 
-  // TODO Remove <ScrollbarSize /> as browser support for hidding the scrollbar
+  // TODO Remove <ScrollbarSize /> as browser support for hiding the scrollbar
   // with CSS improves.
   const handleScrollbarSizeChange = React.useCallback(scrollbarWidth => {
     setScrollerStyle({

package/node/Toolbar/Toolbar.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */
   // ----------------------------------------------------------------------
   /**
    * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
-   * The Toolbar is a flex container, allowing flex item properites to be used to lay out the children.
+   * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
    */
   children: _propTypes.default.node,
   /**

package/node/darkScrollbar/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = darkScrollbar;
-// track, thumb and active are derieved from macOS 10.15.7
+// track, thumb and active are derived from macOS 10.15.7
 const scrollBar = {
   track: '#2b2b2b',
   thumb: '#6b6b6b',

package/node/index.js

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

package/node/styles/CssVarsProvider.js

@@ -10,12 +10,14 @@ var _system = require("@mui/system");
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
   CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
+  themeId: _identifier.default,
   theme: defaultTheme,
   attribute: 'data-mui-color-scheme',
   modeStorageKey: 'mui-mode',

package/node/styles/ThemeProvider.js

@@ -1,12 +1,38 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _system.ThemeProvider;
-  }
-});
-var _system = require("@mui/system");
+exports.default = ThemeProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _system = require("@mui/system");
+var _identifier = _interopRequireDefault(require("./identifier"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["theme"];
+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 ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const scopedTheme = themeInput[_identifier.default];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.ThemeProvider, (0, _extends2.default)({}, props, {
+    themeId: scopedTheme ? _identifier.default : undefined,
+    theme: scopedTheme || themeInput
+  }));
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: _propTypes.default.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired
+} : void 0;

package/node/styles/experimental_extendTheme.js

@@ -119,7 +119,7 @@ function extendTheme(options = {}, ...args) {
     }
 
     // assign component variables
-    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
     if (key === 'light') {
       setColor(palette.Alert, 'errorColor', (0, _system.private_safeDarken)(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', (0, _system.private_safeDarken)(palette.info.light, 0.6));
@@ -143,6 +143,8 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
       setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
       setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
       setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
       setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
@@ -203,6 +205,8 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
       setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
       setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
       setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));

package/node/styles/identifier.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = '$$material';
+exports.default = _default;

package/node/styles/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   experimental_sx: true,
+  THEME_ID: true,
   adaptV4Theme: true,
   hexToRgb: true,
   rgbToHex: true,
@@ -50,6 +51,12 @@ Object.defineProperty(exports, "StyledEngineProvider", {
     return _system.StyledEngineProvider;
   }
 });
+Object.defineProperty(exports, "THEME_ID", {
+  enumerable: true,
+  get: function () {
+    return _identifier.default;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -268,6 +275,7 @@ Object.defineProperty(exports, "withTheme", {
   }
 });
 var _utils = require("@mui/utils");
+var _identifier = _interopRequireDefault(require("./identifier"));
 var _adaptV4Theme = _interopRequireDefault(require("./adaptV4Theme"));
 var _system = require("@mui/system");
 var _createTheme = _interopRequireWildcard(require("./createTheme"));

package/node/styles/styled.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.slotShouldForwardProp = exports.rootShouldForwardProp = exports.default = void 0;
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 const rootShouldForwardProp = prop => (0, _system.shouldForwardProp)(prop) && prop !== 'classes';
 exports.rootShouldForwardProp = rootShouldForwardProp;
 const slotShouldForwardProp = _system.shouldForwardProp;
 exports.slotShouldForwardProp = slotShouldForwardProp;
 const styled = (0, _system.createStyled)({
+  themeId: _identifier.default,
   defaultTheme: _defaultTheme.default,
   rootShouldForwardProp
 });

package/node/styles/useTheme.js

@@ -8,6 +8,7 @@ exports.default = useTheme;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 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 useTheme() {
@@ -16,5 +17,5 @@ function useTheme() {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
-  return theme;
+  return theme[_identifier.default] || theme;
 }

package/node/styles/useThemeProps.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = useThemeProps;
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 function useThemeProps({
   props,
   name
@@ -14,6 +15,7 @@ function useThemeProps({
   return (0, _system.useThemeProps)({
     props,
     name,
-    defaultTheme: _defaultTheme.default
+    defaultTheme: _defaultTheme.default,
+    themeId: _identifier.default
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.16",
+  "version": "5.12.1",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,11 +46,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-alpha.124",
-    "@mui/core-downloads-tracker": "^5.11.16",
-    "@mui/system": "^5.11.16",
-    "@mui/types": "^7.2.3",
-    "@mui/utils": "^5.11.13",
+    "@mui/base": "5.0.0-alpha.126",
+    "@mui/core-downloads-tracker": "^5.12.1",
+    "@mui/system": "^5.12.1",
+    "@mui/types": "^7.2.4",
+    "@mui/utils": "^5.12.0",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",

package/styles/CssVarsProvider.d.ts

@@ -1,15 +1,20 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-    disableNestedContext?: boolean | undefined;
-    disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | {
+        $$material: {
+            cssVarPrefix?: string | undefined;
+            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+        };
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Element | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+    disableNestedContext?: boolean | undefined;
+    disableStyleSheetGeneration?: boolean | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/CssVarsProvider.js

@@ -3,12 +3,14 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_style
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+import THEME_ID from './identifier';
 const defaultTheme = experimental_extendTheme();
 const {
   CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = createCssVarsProvider({
+  themeId: THEME_ID,
   theme: defaultTheme,
   attribute: 'data-mui-color-scheme',
   modeStorageKey: 'mui-mode',

package/styles/ThemeProvider.js

@@ -1 +1,29 @@
-export { ThemeProvider as default } from '@mui/system';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["theme"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider as SystemThemeProvider } from '@mui/system';
+import THEME_ID from './identifier';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const scopedTheme = themeInput[THEME_ID];
+  return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  }));
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+} : void 0;

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
-export default excludeVariablesFromRoot;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+export default excludeVariablesFromRoot;

package/styles/experimental_extendTheme.d.ts

@@ -128,6 +128,11 @@ export interface PaletteAvatar {
   defaultBg: string;
 }
 
+export interface PaletteButton {
+  inheritContainedBg: string;
+  inheritContainedHoverBg: string;
+}
+
 export interface PaletteChip {
   defaultBorder: string;
   defaultAvatarColor: string;
@@ -214,6 +219,7 @@ export interface ColorSystemOptions {
     Alert?: Partial<PaletteAlert>;
     AppBar?: Partial<PaletteAppBar>;
     Avatar?: Partial<PaletteAvatar>;
+    Button?: Partial<PaletteButton>;
     Chip?: Partial<PaletteChip>;
     FilledInput?: Partial<PaletteFilledInput>;
     LinearProgress?: Partial<PaletteLinearProgress>;
@@ -247,6 +253,7 @@ export interface CssVarsPalette {
   Alert: PaletteAlert;
   AppBar: PaletteAppBar;
   Avatar: PaletteAvatar;
+  Button: PaletteButton;
   Chip: PaletteChip;
   FilledInput: PaletteFilledInput;
   LinearProgress: PaletteLinearProgress;
@@ -407,7 +414,7 @@ export interface CssVarsTheme extends ColorSystem {
 
   // Default theme tokens
   spacing: Theme['spacing'];
-  breakpints: Theme['breakpoints'];
+  breakpoints: Theme['breakpoints'];
   shape: Theme['shape'];
   typography: Theme['typography'];
   transitions: Theme['transitions'];

package/styles/experimental_extendTheme.js

@@ -110,7 +110,7 @@ export default function extendTheme(options = {}, ...args) {
     }
 
     // assign component variables
-    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
     if (key === 'light') {
       setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
@@ -134,6 +134,8 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
       setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
       setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
       setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
       setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
@@ -194,6 +196,8 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
       setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
       setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
       setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));

package/styles/getOverlayAlpha.d.ts

@@ -1,2 +1,2 @@
-declare const getOverlayAlpha: (elevation: number) => string;
-export default getOverlayAlpha;
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/styles/identifier.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "$$material";
+export default _default;

package/styles/identifier.js

@@ -0,0 +1 @@
+export default '$$material';

package/styles/index.d.ts

@@ -1,3 +1,4 @@
+export { default as THEME_ID } from './identifier';
 export {
   default as createTheme,
   default as unstable_createMuiStrictModeTheme,