@mui/material 5.12.0 → 5.12.2

package/index.js

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

package/legacy/Autocomplete/Autocomplete.js

@@ -105,7 +105,7 @@ var AutocompleteRoot = styled('div', {
   }), _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
   }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.input), {
-    padding: '7.5px 4px 7.5px 6px'
+    padding: '7.5px 4px 7.5px 5px'
   }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
   }), _$concat2)), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
@@ -115,7 +115,7 @@ var AutocompleteRoot = styled('div', {
     paddingBottom: 6,
     paddingLeft: 6
   }, "& .".concat(autocompleteClasses.input), {
-    padding: '2.5px 4px 2.5px 6px'
+    padding: '2.5px 4px 2.5px 8px'
   })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root), (_$concat3 = {
     paddingTop: 19,
     paddingLeft: 8

package/legacy/Button/Button.js

@@ -60,6 +60,8 @@ var ButtonRoot = styled(ButtonBase, {
   var _extends2, _theme$palette$getCon, _theme$palette;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
+  var inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  var inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return _extends({}, theme.typography.button, (_extends2 = {
     minWidth: 64,
     padding: '6px 16px',
@@ -88,7 +90,7 @@ var ButtonRoot = styled(ButtonBase, {
         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)': {
@@ -129,7 +131,7 @@ var ButtonRoot = styled(ButtonBase, {
     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,

package/legacy/FormControl/FormControl.js

@@ -145,7 +145,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, re
           if (!isMuiElement(child, ['Input', 'Select'])) {
             return;
           }
-          if (isFilled(child.props, true)) {
+          if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
             initialFilled = true;
           }
         });

package/legacy/FormControlLabel/FormControlLabel.js

@@ -19,10 +19,12 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disabled = ownerState.disabled,
     labelPlacement = ownerState.labelPlacement,
-    error = ownerState.error;
+    error = ownerState.error,
+    required = ownerState.required;
   var slots = {
-    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement)), error && 'error'],
-    label: ['label', disabled && 'disabled']
+    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement)), error && 'error', required && 'required'],
+    label: ['label', disabled && 'disabled'],
+    asterisk: ['asterisk', error && 'error']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
 };
@@ -62,13 +64,25 @@ export var FormControlLabelRoot = styled('label', {
     color: (theme.vars || theme).palette.text.disabled
   })));
 });
+var AsteriskComponent = styled('span', {
+  name: 'MuiFormControlLabel',
+  slot: 'Asterisk',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.asterisk;
+  }
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return _defineProperty({}, "&.".concat(formControlLabelClasses.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.
  */
 var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _slotProps$typography;
+  var _ref5, _slotProps$typography;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -86,20 +100,17 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
     labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
     name = props.name,
     onChange = props.onChange,
+    requiredProp = props.required,
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     value = props.value,
-    other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"]);
+    other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"]);
   var muiFormControl = useFormControl();
-  var disabled = disabledProp;
-  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-    disabled = control.props.disabled;
-  }
-  if (typeof disabled === 'undefined' && muiFormControl) {
-    disabled = muiFormControl.disabled;
-  }
+  var disabled = (_ref5 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref5 : muiFormControl == null ? void 0 : muiFormControl.disabled;
+  var required = requiredProp != null ? requiredProp : control.props.required;
   var controlProps = {
-    disabled: disabled
+    disabled: disabled,
+    required: required
   };
   ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {
     if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -114,6 +125,7 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
   var ownerState = _extends({}, props, {
     disabled: disabled,
     labelPlacement: labelPlacement,
+    required: required,
     error: fcs.error
   });
   var classes = useUtilityClasses(ownerState);
@@ -132,7 +144,12 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
     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 */ = {
@@ -195,6 +212,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/legacy/FormControlLabel/formControlLabelClasses.js

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

package/legacy/Modal/Modal.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import ModalUnstyled, { modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
@@ -69,6 +69,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     _props$closeAfterTran = props.closeAfterTransition,
     closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
     children = props.children,
+    container = props.container,
     component = props.component,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
@@ -90,14 +91,18 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
     _props$keepMounted = props.keepMounted,
     keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
+    onBackdropClick = props.onBackdropClick,
+    onClose = props.onClose,
+    open = props.open,
     slotProps = props.slotProps,
     slots = props.slots,
     theme = props.theme,
-    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"]);
+    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"]);
   var _React$useState = React.useState(true),
     exited = _React$useState[0],
     setExited = _React$useState[1];
   var commonProps = {
+    container: container,
     closeAfterTransition: closeAfterTransition,
     disableAutoFocus: disableAutoFocus,
     disableEnforceFocus: disableEnforceFocus,
@@ -106,7 +111,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus: disableRestoreFocus,
     disableScrollLock: disableScrollLock,
     hideBackdrop: hideBackdrop,
-    keepMounted: keepMounted
+    keepMounted: keepMounted,
+    onBackdropClick: onBackdropClick,
+    onClose: onClose,
+    open: open
   };
   var ownerState = _extends({}, props, commonProps, {
     exited: exited

package/legacy/Modal/index.js

@@ -1,3 +1,3 @@
-export * from '@mui/base/ModalUnstyled';
+export { ModalManager } from '@mui/base/Modal';
 export { default } from './Modal';
 export * from './Modal';

package/legacy/Popper/Popper.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+import BasePopper from '@mui/base/Popper';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var PopperRoot = styled(PopperUnstyled, {
+var PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -34,19 +34,43 @@ var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     props: inProps,
     name: 'MuiPopper'
   });
-  var components = props.components,
+  var anchorEl = props.anchorEl,
+    component = props.component,
+    components = props.components,
     componentsProps = props.componentsProps,
+    container = props.container,
+    disablePortal = props.disablePortal,
+    keepMounted = props.keepMounted,
+    modifiers = props.modifiers,
+    open = props.open,
+    placement = props.placement,
+    popperOptions = props.popperOptions,
+    popperRef = props.popperRef,
+    transition = props.transition,
     slots = props.slots,
     slotProps = props.slotProps,
-    other = _objectWithoutProperties(props, ["components", "componentsProps", "slots", "slotProps"]);
+    other = _objectWithoutProperties(props, ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"]);
   var RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  var otherProps = _extends({
+    anchorEl: anchorEl,
+    component: component,
+    container: container,
+    disablePortal: disablePortal,
+    keepMounted: keepMounted,
+    modifiers: modifiers,
+    open: open,
+    placement: placement,
+    popperOptions: popperOptions,
+    popperRef: popperRef,
+    transition: transition
+  }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme == null ? void 0 : theme.direction,
     slots: {
       root: RootComponent
     },
     slotProps: slotProps != null ? slotProps : componentsProps
-  }, other, {
+  }, otherProps, {
     ref: ref
   }));
 });

package/legacy/Stack/Stack.js

@@ -53,7 +53,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/legacy/Tabs/ScrollbarSize.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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";
 var styles = {
   width: 99,
@@ -26,7 +26,7 @@ export default function ScrollbarSize(props) {
   var setMeasurements = function setMeasurements() {
     scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
   };
-  React.useEffect(function () {
+  useEnhancedEffect(function () {
     var handleResize = debounce(function () {
       var prevHeight = scrollbarHeight.current;
       setMeasurements();

package/legacy/index.js

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

package/legacy/styles/ThemeProvider.js

@@ -15,5 +15,12 @@ export default function ThemeProvider(_ref) {
   }));
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
-  theme: PropTypes.object
+  /**
+   * 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/legacy/styles/experimental_extendTheme.js

@@ -112,7 +112,7 @@ export default function extendTheme() {
     }
 
     // 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));
@@ -144,6 +144,8 @@ export default function extendTheme() {
       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'));
@@ -214,6 +216,8 @@ export default function extendTheme() {
       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/Autocomplete/Autocomplete.js

@@ -138,7 +138,7 @@ const AutocompleteRoot = styled('div', {
       paddingRight: 52 + 4 + 9
     },
     [`& .${autocompleteClasses.input}`]: {
-      padding: '7.5px 4px 7.5px 6px'
+      padding: '7.5px 4px 7.5px 5px'
     },
     [`& .${autocompleteClasses.endAdornment}`]: {
       right: 9
@@ -151,7 +151,7 @@ const AutocompleteRoot = styled('div', {
     paddingBottom: 6,
     paddingLeft: 6,
     [`& .${autocompleteClasses.input}`]: {
-      padding: '2.5px 4px 2.5px 6px'
+      padding: '2.5px 4px 2.5px 8px'
     }
   },
   [`& .${filledInputClasses.root}`]: {

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

@@ -138,7 +138,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
         if (!isMuiElement(child, ['Input', 'Select'])) {
           return;
         }
-        if (isFilled(child.props, true)) {
+        if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
           initialFilled = true;
         }
       });