@mui/material 5.11.16 → 5.12.1

package/modern/Button/Button.js

@@ -59,106 +59,110 @@ const ButtonRoot = styled(ButtonBase, {
 })(({
   theme,
   ownerState
-}) => _extends({}, theme.typography.button, {
-  minWidth: 64,
-  padding: '6px 16px',
-  borderRadius: (theme.vars || theme).shape.borderRadius,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-    duration: theme.transitions.duration.short
-  }),
-  '&:hover': _extends({
-    textDecoration: 'none',
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+}) => {
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
+  return _extends({}, theme.typography.button, {
+    minWidth: 64,
+    padding: '6px 16px',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': _extends({
+      textDecoration: 'none',
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+      border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'contained' && {
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+      boxShadow: (theme.vars || theme).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      }
+    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
+    }),
+    '&:active': _extends({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[8]
+    }),
+    [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[6]
+    }),
+    [`&.${buttonClasses.disabled}`]: _extends({
+      color: (theme.vars || theme).palette.action.disabled
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+    }, ownerState.variant === 'contained' && {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    })
+  }, ownerState.variant === 'text' && {
+    padding: '6px 8px'
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.variant === 'outlined' && {
+    padding: '5px 15px',
+    border: '1px solid currentColor'
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
   }, ownerState.variant === 'contained' && {
-    backgroundColor: (theme.vars || theme).palette.grey.A100,
-    boxShadow: (theme.vars || theme).shadows[4],
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      boxShadow: (theme.vars || theme).shadows[2],
-      backgroundColor: (theme.vars || theme).palette.grey[300]
-    }
+    color: theme.vars ?
+    // this is safe because grey does not change between default light/dark mode
+    theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-    }
-  }),
-  '&:active': _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[8]
-  }),
-  [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[6]
-  }),
-  [`&.${buttonClasses.disabled}`]: _extends({
-    color: (theme.vars || theme).palette.action.disabled
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-  }, ownerState.variant === 'contained' && {
-    color: (theme.vars || theme).palette.action.disabled,
-    boxShadow: (theme.vars || theme).shadows[0],
-    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-  })
-}, ownerState.variant === 'text' && {
-  padding: '6px 8px'
-}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-  color: (theme.vars || theme).palette[ownerState.color].main
-}, ownerState.variant === 'outlined' && {
-  padding: '5px 15px',
-  border: '1px solid currentColor'
-}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-  color: (theme.vars || theme).palette[ownerState.color].main,
-  border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
-}, ownerState.variant === 'contained' && {
-  color: theme.vars ?
-  // this is safe because grey does not change between default light/dark mode
-  theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
-  backgroundColor: (theme.vars || theme).palette.grey[300],
-  boxShadow: (theme.vars || theme).shadows[2]
-}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-  color: (theme.vars || theme).palette[ownerState.color].contrastText,
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-}, ownerState.color === 'inherit' && {
-  color: 'inherit',
-  borderColor: 'currentColor'
-}, ownerState.size === 'small' && ownerState.variant === 'text' && {
-  padding: '4px 5px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'text' && {
-  padding: '8px 11px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-  padding: '3px 9px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-  padding: '7px 21px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-  padding: '4px 10px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-  padding: '8px 22px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.fullWidth && {
-  width: '100%'
-}), ({
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit',
+    borderColor: 'currentColor'
+  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+    padding: '4px 5px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+    padding: '8px 11px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    padding: '3px 9px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+    padding: '7px 21px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    padding: '4px 10px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+    padding: '8px 22px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.fullWidth && {
+    width: '100%'
+  });
+}, ({
   ownerState
 }) => ownerState.disableElevation && {
   boxShadow: 'none',

package/modern/FormControlLabel/FormControlLabel.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -20,11 +20,13 @@ const useUtilityClasses = ownerState => {
     classes,
     disabled,
     labelPlacement,
-    error
+    error,
+    required
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
-    label: ['label', disabled && 'disabled']
+    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],
+    label: ['label', disabled && 'disabled'],
+    asterisk: ['asterisk', error && 'error']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
 };
@@ -73,6 +75,17 @@ export const FormControlLabelRoot = styled('label', {
     }
   }
 }));
+const AsteriskComponent = styled('span', {
+  name: 'MuiFormControlLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${formControlLabelClasses.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
 
 /**
  * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
@@ -91,19 +104,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       disableTypography,
       label: labelProp,
       labelPlacement = 'end',
+      required: requiredProp,
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = 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 = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
+  const required = 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') {
@@ -118,6 +128,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   const ownerState = _extends({}, props, {
     disabled,
     labelPlacement,
+    required,
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
@@ -136,7 +147,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__*/_jsxs(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -199,6 +215,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.func,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
   /**
    * The props used for each slot inside.
    * @default {}

package/modern/FormControlLabel/formControlLabelClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 export default formControlLabelClasses;

package/modern/GlobalStyles/GlobalStyles.js

@@ -3,10 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles as SystemGlobalStyles } from '@mui/system';
 import defaultTheme from '../styles/defaultTheme';
+import THEME_ID from '../styles/identifier';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GlobalStyles(props) {
   return /*#__PURE__*/_jsx(SystemGlobalStyles, _extends({}, props, {
-    defaultTheme: defaultTheme
+    defaultTheme: defaultTheme,
+    themeId: THEME_ID
   }));
 }
 process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
@@ -17,8 +19,6 @@ process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptyp
   /**
    * The styles you want to apply globally.
    */
-  styles: PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
-    __emotion_styles: PropTypes.any.isRequired
-  }), PropTypes.string, PropTypes.bool])
+  styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
 } : void 0;
 export default GlobalStyles;

package/modern/Menu/Menu.js

@@ -47,7 +47,7 @@ const MenuPaper = styled(Paper, {
   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/modern/Popper/Popper.js

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

package/modern/Select/Select.js

@@ -228,7 +228,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
   onChange: PropTypes.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/modern/Stack/Stack.js

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

package/modern/Tabs/ScrollbarSize.js

@@ -4,7 +4,7 @@ const _excluded = ["onChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '../utils/debounce';
-import { ownerWindow } from '../utils';
+import { ownerWindow, unstable_useEnhancedEffect as useEnhancedEffect } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   width: 99,
@@ -29,7 +29,7 @@ export default function ScrollbarSize(props) {
   const setMeasurements = () => {
     scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
   };
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     const handleResize = debounce(() => {
       const prevHeight = scrollbarHeight.current;
       setMeasurements();

package/modern/Tabs/Tabs.js

@@ -418,7 +418,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/modern/Toolbar/Toolbar.js

@@ -81,7 +81,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.node,
   /**

package/modern/darkScrollbar/index.js

@@ -1,4 +1,4 @@
-// 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/modern/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/modern/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/modern/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/modern/styles/experimental_extendTheme.js

@@ -109,7 +109,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));
@@ -133,6 +133,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'));
@@ -193,6 +195,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/modern/styles/identifier.js

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

package/modern/styles/index.js

@@ -1,4 +1,5 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';
 export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
 // TODO: Remove this function in v6.

package/modern/styles/styled.js

@@ -1,8 +1,10 @@
 import { createStyled, shouldForwardProp } from '@mui/system';
 import defaultTheme from './defaultTheme';
+import THEME_ID from './identifier';
 export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
 export const slotShouldForwardProp = shouldForwardProp;
 const styled = createStyled({
+  themeId: THEME_ID,
   defaultTheme,
   rootShouldForwardProp
 });

package/modern/styles/useTheme.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { useTheme as useThemeSystem } from '@mui/system';
 import defaultTheme from './defaultTheme';
+import THEME_ID from './identifier';
 export default function useTheme() {
   const theme = useThemeSystem(defaultTheme);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
-  return theme;
+  return theme[THEME_ID] || theme;
 }

package/modern/styles/useThemeProps.js

@@ -1,5 +1,6 @@
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
+import THEME_ID from './identifier';
 export default function useThemeProps({
   props,
   name
@@ -7,6 +8,7 @@ export default function useThemeProps({
   return systemUseThemeProps({
     props,
     name,
-    defaultTheme
+    defaultTheme,
+    themeId: THEME_ID
   });
 }

package/node/Autocomplete/Autocomplete.js

@@ -152,7 +152,7 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       paddingRight: 52 + 4 + 9
     },
     [`& .${_autocompleteClasses.default.input}`]: {
-      padding: '7.5px 4px 7.5px 6px'
+      padding: '7.5px 4px 7.5px 5px'
     },
     [`& .${_autocompleteClasses.default.endAdornment}`]: {
       right: 9
@@ -165,7 +165,7 @@ const AutocompleteRoot = (0, _styled.default)('div', {
     paddingBottom: 6,
     paddingLeft: 6,
     [`& .${_autocompleteClasses.default.input}`]: {
-      padding: '2.5px 4px 2.5px 6px'
+      padding: '2.5px 4px 2.5px 8px'
     }
   },
   [`& .${_filledInputClasses.default.root}`]: {

package/node/Box/Box.js

@@ -9,8 +9,10 @@ var _system = require("@mui/system");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _className = require("../className");
 var _styles = require("../styles");
+var _identifier = _interopRequireDefault(require("../styles/identifier"));
 const defaultTheme = (0, _styles.createTheme)();
 const Box = (0, _system.createBox)({
+  themeId: _identifier.default,
   defaultTheme,
   defaultClassName: 'MuiBox-root',
   generateClassName: _className.unstable_ClassNameGenerator.generate

package/node/Button/Button.js

@@ -69,6 +69,8 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   ownerState
 }) => {
   var _theme$palette$getCon, _theme$palette;
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return (0, _extends2.default)({}, theme.typography.button, {
     minWidth: 64,
     padding: '6px 16px',
@@ -97,7 +99,7 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'contained' && {
-      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
       boxShadow: (theme.vars || theme).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
@@ -140,7 +142,7 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     color: theme.vars ?
     // this is safe because grey does not change between default light/dark mode
     theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-    backgroundColor: (theme.vars || theme).palette.grey[300],
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
     boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
     color: (theme.vars || theme).palette[ownerState.color].contrastText,