@mui/material 5.0.4 → 5.0.5

package/Tab/Tab.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
+const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -52,16 +52,24 @@ const TabRoot = styled(ButtonBase, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center',
-  flexDirection: 'column',
+  textAlign: 'center'
+}, ownerState.label && {
+  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
+}, {
   lineHeight: 1.25
 }, ownerState.icon && ownerState.label && {
   minHeight: 72,
   paddingTop: 9,
   paddingBottom: 9,
-  [`& > .${tabClasses.iconWrapper}`]: {
+  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {
     marginBottom: 6
-  }
+  }, ownerState.iconPosition === 'bottom' && {
+    marginTop: 6
+  }, ownerState.iconPosition === 'start' && {
+    marginRight: theme.spacing(1)
+  }, ownerState.iconPosition === 'end' && {
+    marginLeft: theme.spacing(1)
+  })
 }, ownerState.textColor === 'inherit' && {
   color: 'inherit',
   opacity: 0.6,
@@ -109,6 +117,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     // eslint-disable-next-line react/prop-types
     fullWidth,
     icon: iconProp,
+    iconPosition = 'top',
     // eslint-disable-next-line react/prop-types
     indicator,
     label,
@@ -131,6 +140,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     disableFocusRipple,
     selected,
     icon: !!iconProp,
+    iconPosition,
     label: !!label,
     fullWidth,
     textColor,
@@ -174,7 +184,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     ownerState: ownerState,
     tabIndex: selected ? 0 : -1
   }, other, {
-    children: [icon, label, indicator]
+    children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [icon, label]
+    }) : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [label, icon]
+    }), indicator]
   }));
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes
@@ -227,6 +241,12 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
    */
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
 
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),
+
   /**
    * The label element.
    */
@@ -250,7 +270,7 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/TabScrollButton/TabScrollButton.js

@@ -132,6 +132,6 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TabScrollButton;

package/Table/Table.js

@@ -142,6 +142,6 @@ process.env.NODE_ENV !== "production" ? Table.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default Table;

package/TableBody/TableBody.js

@@ -92,6 +92,6 @@ process.env.NODE_ENV !== "production" ? TableBody.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TableBody;

package/TableCell/TableCell.js

@@ -222,7 +222,7 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * Specify the cell type.

package/TableContainer/TableContainer.js

@@ -84,6 +84,6 @@ process.env.NODE_ENV !== "production" ? TableContainer.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TableContainer;

package/TableFooter/TableFooter.js

@@ -92,6 +92,6 @@ process.env.NODE_ENV !== "production" ? TableFooter.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TableFooter;

package/TableHead/TableHead.js

@@ -92,6 +92,6 @@ process.env.NODE_ENV !== "production" ? TableHead.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TableHead;

package/TablePagination/TablePagination.js

@@ -417,6 +417,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TablePagination;

package/TableRow/TableRow.js

@@ -136,6 +136,6 @@ process.env.NODE_ENV !== "production" ? TableRow.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TableRow;

package/TableSortLabel/TableSortLabel.js

@@ -179,6 +179,6 @@ process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default TableSortLabel;

package/Tabs/Tabs.js

@@ -807,7 +807,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * Props applied to the tab indicator element.

package/TextField/TextField.js

@@ -411,7 +411,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

package/TextareaAutosize/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './TextareaAutosize';
-export * from './TextareaAutosize';
+export { default } from '@mui/core/TextareaAutosize';
+export * from '@mui/core/TextareaAutosize';

package/TextareaAutosize/index.js

@@ -1 +1 @@
-export { default } from './TextareaAutosize';
+export { default } from '@mui/core/TextareaAutosize';

package/ToggleButton/ToggleButton.js

@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The value to associate with the button when selected in a

package/ToggleButtonGroup/ToggleButtonGroup.js

@@ -243,7 +243,7 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The currently selected value within the group or an array of selected

package/Toolbar/Toolbar.js

@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? Toolbar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/Tooltip/Tooltip.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { MUIStyledCommonProps, SxProps } from '@mui/system';
+import { PopperProps } from '@mui/core/Popper';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
-import { PopperProps } from '../Popper/Popper';
 import { TooltipClasses } from './tooltipClasses';
 
 export interface TooltipComponentsPropsOverrides {}

package/Tooltip/Tooltip.js

@@ -211,11 +211,11 @@ function composeEventHandler(handler, eventHandler) {
 
     handler(event);
   };
-} // TODO (v6) Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+} // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 
 
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _components$Popper, _ref, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+  var _components$Popper, _ref, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
 
   const props = useThemeProps({
     props: inProps,
@@ -586,7 +586,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
   const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
-  const TransitionComponent = (_ref = TransitionComponentProp != null ? TransitionComponentProp : components.Transition) != null ? _ref : Grow;
+  const TransitionComponent = (_ref = (_components$Transitio = components.Transition) != null ? _components$Transitio : TransitionComponentProp) != null ? _ref : Grow;
   const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
   const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
   const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
@@ -797,7 +797,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * Tooltip title. Zero-length titles string are never displayed.

package/Typography/Typography.js

@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * Applies the theme typography styles.

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.4
+/** @license MUI v5.0.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Accordion/Accordion.js

@@ -269,7 +269,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/legacy/AccordionActions/AccordionActions.js

@@ -92,6 +92,6 @@ process.env.NODE_ENV !== "production" ? AccordionActions.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionActions;

package/legacy/AccordionDetails/AccordionDetails.js

@@ -72,6 +72,6 @@ process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionDetails;

package/legacy/AccordionSummary/AccordionSummary.js

@@ -202,6 +202,6 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionSummary;

package/legacy/Alert/Alert.js

@@ -271,7 +271,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/AlertTitle/AlertTitle.js

@@ -76,6 +76,6 @@ process.env.NODE_ENV !== "production" ? AlertTitle.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default AlertTitle;

package/legacy/AppBar/AppBar.js

@@ -163,6 +163,6 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default AppBar;

package/legacy/Autocomplete/Autocomplete.js

@@ -15,6 +15,10 @@ import ListSubheader from '../ListSubheader';
 import Paper from '../Paper';
 import IconButton from '../IconButton';
 import Chip from '../Chip';
+import inputClasses from '../Input/inputClasses';
+import inputBaseClasses from '../InputBase/inputBaseClasses';
+import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
+import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import useThemeProps from '../styles/useThemeProps';
@@ -67,7 +71,7 @@ var AutocompleteRoot = styled('div', {
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })(function (_ref6) {
-  var _extends2, _$concat, _MuiOutlinedInput, _MuiFilledInputRo, _extends3;
+  var _extends2, _$concat, _$concat2, _$concat3, _extends3;
 
   var ownerState = _ref6.ownerState;
   return _extends((_extends2 = {}, _defineProperty(_extends2, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
@@ -91,46 +95,43 @@ var AutocompleteRoot = styled('div', {
   }), _defineProperty(_$concat, "& .".concat(autocompleteClasses.input), {
     width: 0,
     minWidth: 30
-  }), _$concat)), _defineProperty(_extends3, '& .MuiInput-root', {
+  }), _$concat)), _defineProperty(_extends3, "& .".concat(inputClasses.root), {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
-  }), _defineProperty(_extends3, '& .MuiInput-root.MuiInputBase-sizeSmall', {
-    '& .MuiInput-input': {
-      padding: '2px 4px 3px 0'
-    }
-  }), _defineProperty(_extends3, '& .MuiOutlinedInput-root', (_MuiOutlinedInput = {
+  }), _defineProperty(_extends3, "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
+    padding: '2px 4px 3px 0'
+  })), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root), (_$concat2 = {
     padding: 9
-  }, _defineProperty(_MuiOutlinedInput, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4 + 9
-  }), _defineProperty(_MuiOutlinedInput, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
-  }), _defineProperty(_MuiOutlinedInput, "& .".concat(autocompleteClasses.input), {
+  }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.input), {
     padding: '7.5px 4px 7.5px 6px'
-  }), _defineProperty(_MuiOutlinedInput, "& .".concat(autocompleteClasses.endAdornment), {
+  }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
-  }), _MuiOutlinedInput)), _defineProperty(_extends3, '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall', _defineProperty({
+  }), _$concat2)), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
     padding: 6
   }, "& .".concat(autocompleteClasses.input), {
     padding: '2.5px 4px 2.5px 6px'
-  })), _defineProperty(_extends3, '& .MuiFilledInput-root', (_MuiFilledInputRo = {
+  })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root), (_$concat3 = {
     paddingTop: 19,
     paddingLeft: 8
-  }, _defineProperty(_MuiFilledInputRo, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, _defineProperty(_$concat3, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4 + 9
-  }), _defineProperty(_MuiFilledInputRo, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), _defineProperty(_$concat3, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
-  }), _defineProperty(_MuiFilledInputRo, '& .MuiFilledInput-input', {
+  }), _defineProperty(_$concat3, "& .".concat(filledInputClasses.input), {
     padding: '7px 4px'
-  }), _defineProperty(_MuiFilledInputRo, "& .".concat(autocompleteClasses.endAdornment), {
+  }), _defineProperty(_$concat3, "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
-  }), _MuiFilledInputRo)), _defineProperty(_extends3, '& .MuiFilledInput-root.MuiInputBase-sizeSmall', {
-    paddingBottom: 1,
-    '& .MuiFilledInput-input': {
-      padding: '2.5px 4px'
-    }
-  }), _defineProperty(_extends3, "& .".concat(autocompleteClasses.input), _extends({
+  }), _$concat3)), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+    paddingBottom: 1
+  }, "& .".concat(filledInputClasses.input), {
+    padding: '2.5px 4px'
+  })), _defineProperty(_extends3, "& .".concat(autocompleteClasses.input), _extends({
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0
@@ -239,7 +240,7 @@ var AutocompleteListbox = styled('div', {
     return styles.listbox;
   }
 })(function (_ref14) {
-  var _ariaSelectedTru, _$concat2;
+  var _ariaSelectedTru, _$concat4;
 
   var theme = _ref14.theme;
   return _defineProperty({
@@ -248,7 +249,7 @@ var AutocompleteListbox = styled('div', {
     padding: '8px 0',
     maxHeight: '40vh',
     overflow: 'auto'
-  }, "& .".concat(autocompleteClasses.option), (_$concat2 = {
+  }, "& .".concat(autocompleteClasses.option), (_$concat4 = {
     minHeight: 48,
     display: 'flex',
     overflow: 'hidden',
@@ -262,20 +263,20 @@ var AutocompleteListbox = styled('div', {
     paddingBottom: 6,
     paddingLeft: 16,
     paddingRight: 16
-  }, _defineProperty(_$concat2, theme.breakpoints.up('sm'), {
+  }, _defineProperty(_$concat4, theme.breakpoints.up('sm'), {
     minHeight: 'auto'
-  }), _defineProperty(_$concat2, "&.".concat(autocompleteClasses.focused), {
+  }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focused), {
     backgroundColor: theme.palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }), _defineProperty(_$concat2, '&[aria-disabled="true"]', {
+  }), _defineProperty(_$concat4, '&[aria-disabled="true"]', {
     opacity: theme.palette.action.disabledOpacity,
     pointerEvents: 'none'
-  }), _defineProperty(_$concat2, "&.".concat(autocompleteClasses.focusVisible), {
+  }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focusVisible), {
     backgroundColor: theme.palette.action.focus
-  }), _defineProperty(_$concat2, '&[aria-selected="true"]', (_ariaSelectedTru = {
+  }), _defineProperty(_$concat4, '&[aria-selected="true"]', (_ariaSelectedTru = {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focused), {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
@@ -285,7 +286,7 @@ var AutocompleteListbox = styled('div', {
     }
   }), _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focusVisible), {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  }), _ariaSelectedTru)), _$concat2));
+  }), _ariaSelectedTru)), _$concat4));
 });
 var AutocompleteGroupLabel = styled(ListSubheader, {
   name: 'MuiAutocomplete',
@@ -1071,7 +1072,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the autocomplete.

package/legacy/Avatar/Avatar.js

@@ -258,7 +258,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The shape of the avatar.

package/legacy/AvatarGroup/AvatarGroup.js

@@ -9,7 +9,7 @@ import { chainPropTypes } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import Avatar from '../Avatar';
+import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SPACINGS = {
@@ -36,7 +36,7 @@ var AvatarGroupRoot = styled('div', {
   var _ref2;
 
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .MuiAvatar-root", {
+  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat(theme.palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/Backdrop/Backdrop.js

@@ -140,7 +140,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The duration for the transition, in milliseconds.

package/legacy/Badge/Badge.js

@@ -293,7 +293,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/BottomNavigation/BottomNavigation.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the currently selected `BottomNavigationAction`.

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -172,7 +172,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -241,6 +241,6 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default Breadcrumbs;

package/legacy/Button/Button.js

@@ -377,7 +377,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * @ignore

package/legacy/ButtonBase/ButtonBase.js

@@ -532,7 +532,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * @default 0

package/legacy/ButtonGroup/ButtonGroup.js

@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.