@mui/material 5.0.2 → 5.0.6

package/legacy/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementAcceptingRef } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/core';
 import { alpha } from '@mui/system';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
@@ -205,9 +205,12 @@ function composeEventHandler(handler, eventHandler) {
 
     handler(event);
   };
-}
+} // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+
 
 var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
+  var _components$Popper, _ref5, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiTooltip'
@@ -217,6 +220,10 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       arrow = _props$arrow === void 0 ? false : _props$arrow,
       children = props.children,
       classesProp = props.classes,
+      _props$components = props.components,
+      components = _props$components === void 0 ? {} : _props$components,
+      _props$componentsProp = props.componentsProps,
+      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       _props$describeChild = props.describeChild,
       describeChild = _props$describeChild === void 0 ? false : _props$describeChild,
       _props$disableFocusLi = props.disableFocusListener,
@@ -245,15 +252,14 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       openProp = props.open,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      _props$PopperComponen = props.PopperComponent,
-      PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
+      PopperComponentProp = props.PopperComponent,
       _props$PopperProps = props.PopperProps,
       PopperProps = _props$PopperProps === void 0 ? {} : _props$PopperProps,
       title = props.title,
       _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
+      TransitionComponentProp = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
       TransitionProps = props.TransitionProps,
-      other = _objectWithoutProperties(props, ["arrow", "children", "classes", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);
+      other = _objectWithoutProperties(props, ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);
 
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
@@ -597,15 +603,22 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     arrow: arrow,
     disableInteractive: disableInteractive,
     placement: placement,
-    PopperComponent: PopperComponent,
+    PopperComponentProp: PopperComponentProp,
     touch: ignoreNonTouchEvents.current
   });
 
   var classes = useUtilityClasses(ownerState);
+  var PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
+  var TransitionComponent = (_ref5 = (_components$Transitio = components.Transition) != null ? _components$Transitio : TransitionComponentProp) != null ? _ref5 : Grow;
+  var TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
+  var ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
+  var popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
+  var transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, componentsProps.transition), ownerState);
+  var tooltipProps = appendOwnerState(TooltipComponent, _extends({}, componentsProps.tooltip), ownerState);
+  var tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, componentsProps.arrow), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(TooltipPopper, _extends({
-      as: PopperComponent,
-      className: classes.popper,
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
+      as: PopperComponentProp != null ? PopperComponentProp : Popper,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: function getBoundingClientRect() {
@@ -623,23 +636,23 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       open: childNode ? open : false,
       id: id,
       transition: true
-    }, interactiveWrapperListeners, PopperProps, {
+    }, interactiveWrapperListeners, popperProps, {
+      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
-      ownerState: ownerState,
-      children: function children(_ref5) {
-        var TransitionPropsInner = _ref5.TransitionProps;
+      children: function children(_ref6) {
+        var _componentsProps$tool, _componentsProps$arro;
+
+        var TransitionPropsInner = _ref6.TransitionProps;
         return /*#__PURE__*/_jsx(TransitionComponent, _extends({
           timeout: theme.transitions.duration.shorter
-        }, TransitionPropsInner, TransitionProps, {
-          children: /*#__PURE__*/_jsxs(TooltipTooltip, {
-            className: classes.tooltip,
-            ownerState: ownerState,
-            children: [title, arrow ? /*#__PURE__*/_jsx(TooltipArrow, {
-              className: classes.arrow,
-              ref: setArrowRef,
-              ownerState: ownerState
-            }) : null]
-          })
+        }, TransitionPropsInner, transitionProps, {
+          children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
+            className: clsx(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
+            children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
+              className: clsx(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
+              ref: setArrowRef
+            })) : null]
+          }))
         }));
       }
     }))]
@@ -674,6 +687,24 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The components used for each slot inside the Tooltip.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Arrow: PropTypes.elementType,
+    Popper: PropTypes.elementType,
+    Tooltip: PropTypes.elementType,
+    Transition: PropTypes.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Tooltip.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
+
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.
@@ -790,7 +821,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/legacy/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/legacy/Zoom/Zoom.js

@@ -28,7 +28,8 @@ var defaultTimeout = {
  */
 
 var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
-  var _props$appear = props.appear,
+  var addEndListener = props.addEndListener,
+      _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
       _children = props.children,
       easing = props.easing,
@@ -44,7 +45,7 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
   var theme = useTheme();
   var nodeRef = React.useRef(null);
@@ -101,6 +102,14 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }
   });
   var handleExited = normalizedTransitionCallback(onExited);
+
+  var handleAddEndListener = function handleAddEndListener(next) {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
+  };
+
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     appear: appear,
     in: inProp,
@@ -111,6 +120,7 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
     timeout: timeout
   }, other, {
     children: function children(state, childProps) {
@@ -132,6 +142,13 @@ process.env.NODE_ENV !== "production" ? Zoom.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -142,7 +159,7 @@ process.env.NODE_ENV !== "production" ? Zoom.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

package/legacy/index.js

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

package/legacy/styles/index.js

@@ -1,5 +1,5 @@
 export { default as adaptV4Theme } from './adaptV4Theme';
-export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten } from '@mui/system';
+export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';

package/legacy/utils/index.js

@@ -14,4 +14,5 @@ export { default as unsupportedProp } from './unsupportedProp';
 export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
-export { default as useIsFocusVisible } from './useIsFocusVisible';
+export { default as useIsFocusVisible } from './useIsFocusVisible';
+export { unstable_ClassNameGenerator } from '@mui/core';

package/locale/index.d.ts

@@ -1,65 +1,65 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Accordion/Accordion.js

@@ -261,7 +261,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/modern/AccordionActions/AccordionActions.js

@@ -97,6 +97,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/modern/AccordionDetails/AccordionDetails.js

@@ -74,6 +74,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/modern/AccordionSummary/AccordionSummary.js

@@ -204,6 +204,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/modern/Alert/Alert.js

@@ -269,7 +269,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/modern/AlertTitle/AlertTitle.js

@@ -80,6 +80,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/modern/AppBar/AppBar.js

@@ -168,6 +168,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/modern/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';
@@ -118,18 +122,18 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
-  '& .MuiInput-root': {
+  [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
   },
-  '& .MuiInput-root.MuiInputBase-sizeSmall': {
-    '& .MuiInput-input': {
+  [`& .${inputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
+    [`& .${inputClasses.input}`]: {
       padding: '2px 4px 3px 0'
     }
   },
-  '& .MuiOutlinedInput-root': {
+  [`& .${outlinedInputClasses.root}`]: {
     padding: 9,
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4 + 9
@@ -144,13 +148,13 @@ const AutocompleteRoot = styled('div', {
       right: 9
     }
   },
-  '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+  [`& .${outlinedInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
     padding: 6,
     [`& .${autocompleteClasses.input}`]: {
       padding: '2.5px 4px 2.5px 6px'
     }
   },
-  '& .MuiFilledInput-root': {
+  [`& .${filledInputClasses.root}`]: {
     paddingTop: 19,
     paddingLeft: 8,
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -159,16 +163,16 @@ const AutocompleteRoot = styled('div', {
     [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 52 + 4 + 9
     },
-    '& .MuiFilledInput-input': {
+    [`& .${filledInputClasses.input}`]: {
       padding: '7px 4px'
     },
     [`& .${autocompleteClasses.endAdornment}`]: {
       right: 9
     }
   },
-  '& .MuiFilledInput-root.MuiInputBase-sizeSmall': {
+  [`& .${filledInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
     paddingBottom: 1,
-    '& .MuiFilledInput-input': {
+    [`& .${filledInputClasses.input}`]: {
       padding: '2.5px 4px'
     }
   },
@@ -983,7 +987,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Render the group.
    *
-   * @param {any} option The group to render.
+   * @param {AutocompleteRenderGroupParams} params The group to render.
    * @returns {ReactNode}
    */
   renderGroup: PropTypes.func,
@@ -1033,7 +1037,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/modern/Avatar/Avatar.js

@@ -255,7 +255,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/modern/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";
 const SPACINGS = {
@@ -37,7 +37,7 @@ const AvatarGroupRoot = styled('div', {
 })(({
   theme
 }) => ({
-  [`& .MuiAvatar-root`]: {
+  [`& .${avatarClasses.root}`]: {
     border: `2px solid ${theme.palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
@@ -165,7 +165,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/modern/Backdrop/Backdrop.js

@@ -141,7 +141,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/modern/Badge/Badge.js

@@ -296,7 +296,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/modern/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/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -176,7 +176,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/modern/Breadcrumbs/Breadcrumbs.js

@@ -232,6 +232,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/modern/Button/Button.js

@@ -372,7 +372,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/modern/ButtonBase/ButtonBase.js

@@ -514,7 +514,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