@mui/material 5.0.2 → 5.0.6

package/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/Accordion/accordionClasses.d.ts

@@ -1,18 +1,18 @@
-export interface AccordionClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `square={true}`. */
-    rounded: string;
-    /** State class applied to the root element if `expanded={true}`. */
-    expanded: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the region element, the container of the children. */
-    region: string;
-}
-export declare type AccordionClassKey = keyof AccordionClasses;
-export declare function getAccordionUtilityClass(slot: string): string;
-declare const accordionClasses: AccordionClasses;
-export default accordionClasses;
+export interface AccordionClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `square={true}`. */
+    rounded: string;
+    /** State class applied to the root element if `expanded={true}`. */
+    expanded: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the region element, the container of the children. */
+    region: string;
+}
+export declare type AccordionClassKey = keyof AccordionClasses;
+export declare function getAccordionUtilityClass(slot: string): string;
+declare const accordionClasses: AccordionClasses;
+export default accordionClasses;

package/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/AccordionActions/accordionActionsClasses.d.ts

@@ -1,10 +1,10 @@
-export interface AccordionActionsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `disableSpacing={true}`. */
-    spacing: string;
-}
-export declare type AccordionActionsClassKey = keyof AccordionActionsClasses;
-export declare function getAccordionActionsUtilityClass(slot: string): string;
-declare const accordionActionsClasses: AccordionActionsClasses;
-export default accordionActionsClasses;
+export interface AccordionActionsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `disableSpacing={true}`. */
+    spacing: string;
+}
+export declare type AccordionActionsClassKey = keyof AccordionActionsClasses;
+export declare function getAccordionActionsUtilityClass(slot: string): string;
+declare const accordionActionsClasses: AccordionActionsClasses;
+export default accordionActionsClasses;

package/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/AccordionDetails/accordionDetailsClasses.d.ts

@@ -1,8 +1,8 @@
-export interface AccordionDetailsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type AccordionDetailsClassKey = keyof AccordionDetailsClasses;
-export declare function getAccordionDetailsUtilityClass(slot: string): string;
-declare const accordionDetailsClasses: AccordionDetailsClasses;
-export default accordionDetailsClasses;
+export interface AccordionDetailsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type AccordionDetailsClassKey = keyof AccordionDetailsClasses;
+export declare function getAccordionDetailsUtilityClass(slot: string): string;
+declare const accordionDetailsClasses: AccordionDetailsClasses;
+export default accordionDetailsClasses;

package/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/AccordionSummary/accordionSummaryClasses.d.ts

@@ -1,22 +1,22 @@
-export interface AccordionSummaryClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
-    expanded: string;
-    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the children wrapper element unless `disableGutters={true}`. */
-    contentGutters: string;
-    /** Styles applied to the children wrapper element. */
-    content: string;
-    /** Styles applied to the `expandIcon`'s wrapper element. */
-    expandIconWrapper: string;
-}
-export declare type AccordionSummaryClassKey = keyof AccordionSummaryClasses;
-export declare function getAccordionSummaryUtilityClass(slot: string): string;
-declare const accordionSummaryClasses: AccordionSummaryClasses;
-export default accordionSummaryClasses;
+export interface AccordionSummaryClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
+    expanded: string;
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the children wrapper element unless `disableGutters={true}`. */
+    contentGutters: string;
+    /** Styles applied to the children wrapper element. */
+    content: string;
+    /** Styles applied to the `expandIcon`'s wrapper element. */
+    expandIconWrapper: string;
+}
+export declare type AccordionSummaryClassKey = keyof AccordionSummaryClasses;
+export declare function getAccordionSummaryUtilityClass(slot: string): string;
+declare const accordionSummaryClasses: AccordionSummaryClasses;
+export default accordionSummaryClasses;

package/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/Alert/alertClasses.d.ts

@@ -1,44 +1,44 @@
-export interface AlertClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="success"`. */
-    standardSuccess: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="info"`. */
-    standardInfo: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="warning"`. */
-    standardWarning: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="error"`. */
-    standardError: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */
-    outlinedSuccess: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */
-    outlinedInfo: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */
-    outlinedWarning: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */
-    outlinedError: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="success"`. */
-    filledSuccess: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="info"`. */
-    filledInfo: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */
-    filledWarning: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="error"`. */
-    filledError: string;
-    /** Styles applied to the icon wrapper element. */
-    icon: string;
-    /** Styles applied to the message wrapper element. */
-    message: string;
-    /** Styles applied to the action wrapper element if `action` is provided. */
-    action: string;
-}
-export declare type AlertClassKey = keyof AlertClasses;
-export declare function getAlertUtilityClass(slot: string): string;
-declare const alertClasses: AlertClasses;
-export default alertClasses;
+export interface AlertClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the root element if `variant="standard"` and `color="success"`. */
+    standardSuccess: string;
+    /** Styles applied to the root element if `variant="standard"` and `color="info"`. */
+    standardInfo: string;
+    /** Styles applied to the root element if `variant="standard"` and `color="warning"`. */
+    standardWarning: string;
+    /** Styles applied to the root element if `variant="standard"` and `color="error"`. */
+    standardError: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */
+    outlinedSuccess: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */
+    outlinedInfo: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */
+    outlinedWarning: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */
+    outlinedError: string;
+    /** Styles applied to the root element if `variant="filled"` and `color="success"`. */
+    filledSuccess: string;
+    /** Styles applied to the root element if `variant="filled"` and `color="info"`. */
+    filledInfo: string;
+    /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */
+    filledWarning: string;
+    /** Styles applied to the root element if `variant="filled"` and `color="error"`. */
+    filledError: string;
+    /** Styles applied to the icon wrapper element. */
+    icon: string;
+    /** Styles applied to the message wrapper element. */
+    message: string;
+    /** Styles applied to the action wrapper element if `action` is provided. */
+    action: string;
+}
+export declare type AlertClassKey = keyof AlertClasses;
+export declare function getAlertUtilityClass(slot: string): string;
+declare const alertClasses: AlertClasses;
+export default alertClasses;

package/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/AlertTitle/alertTitleClasses.d.ts

@@ -1,8 +1,8 @@
-export interface AlertTitleClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type AlertTitleClassKey = keyof AlertTitleClasses;
-export declare function getAlertTitleUtilityClass(slot: string): string;
-declare const alertTitleClasses: AlertTitleClasses;
-export default alertTitleClasses;
+export interface AlertTitleClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type AlertTitleClassKey = keyof AlertTitleClasses;
+export declare function getAlertTitleUtilityClass(slot: string): string;
+declare const alertTitleClasses: AlertTitleClasses;
+export default alertTitleClasses;

package/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/AppBar/appBarClasses.d.ts

@@ -1,28 +1,28 @@
-export interface AppBarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `position="fixed"`. */
-    positionFixed: string;
-    /** Styles applied to the root element if `position="absolute"`. */
-    positionAbsolute: string;
-    /** Styles applied to the root element if `position="sticky"`. */
-    positionSticky: string;
-    /** Styles applied to the root element if `position="static"`. */
-    positionStatic: string;
-    /** Styles applied to the root element if `position="relative"`. */
-    positionRelative: string;
-    /** Styles applied to the root element if `color="default"`. */
-    colorDefault: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `color="transparent"`. */
-    colorTransparent: string;
-}
-export declare type AppBarClassKey = keyof AppBarClasses;
-export declare function getAppBarUtilityClass(slot: string): string;
-declare const appBarClasses: AppBarClasses;
-export default appBarClasses;
+export interface AppBarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `position="fixed"`. */
+    positionFixed: string;
+    /** Styles applied to the root element if `position="absolute"`. */
+    positionAbsolute: string;
+    /** Styles applied to the root element if `position="sticky"`. */
+    positionSticky: string;
+    /** Styles applied to the root element if `position="static"`. */
+    positionStatic: string;
+    /** Styles applied to the root element if `position="relative"`. */
+    positionRelative: string;
+    /** Styles applied to the root element if `color="default"`. */
+    colorDefault: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `color="transparent"`. */
+    colorTransparent: string;
+}
+export declare type AppBarClassKey = keyof AppBarClasses;
+export declare function getAppBarUtilityClass(slot: string): string;
+declare const appBarClasses: AppBarClasses;
+export default appBarClasses;

package/Autocomplete/Autocomplete.d.ts

@@ -190,7 +190,7 @@ export interface AutocompleteProps<
   /**
    * Render the group.
    *
-   * @param {any} option The group to render.
+   * @param {AutocompleteRenderGroupParams} params The group to render.
    * @returns {ReactNode}
    */
   renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;

package/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'
     }
   },
@@ -989,7 +993,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,
@@ -1039,7 +1043,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/Autocomplete/autocompleteClasses.d.ts

@@ -1,54 +1,54 @@
-export interface AutocompleteClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** State class applied to the root element if focused. */
-    focused: string;
-    /** Styles applied to the tag elements, e.g. the chips. */
-    tag: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
-    tagSizeSmall: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
-    tagSizeMedium: string;
-    /** Styles applied when the popup icon is rendered. */
-    hasPopupIcon: string;
-    /** Styles applied when the clear icon is rendered. */
-    hasClearIcon: string;
-    /** Styles applied to the Input element. */
-    inputRoot: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if tag focused. */
-    inputFocused: string;
-    /** Styles applied to the endAdornment element. */
-    endAdornment: string;
-    /** Styles applied to the clear indicator. */
-    clearIndicator: string;
-    /** Styles applied to the popup indicator. */
-    popupIndicator: string;
-    /** Styles applied to the popup indicator if the popup is open. */
-    popupIndicatorOpen: string;
-    /** Styles applied to the popper element. */
-    popper: string;
-    /** Styles applied to the popper element if `disablePortal={true}`. */
-    popperDisablePortal: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the listbox component. */
-    listbox: string;
-    /** Styles applied to the loading wrapper. */
-    loading: string;
-    /** Styles applied to the no option wrapper. */
-    noOptions: string;
-    /** Styles applied to the option elements. */
-    option: string;
-    /** Styles applied to the group's label elements. */
-    groupLabel: string;
-    /** Styles applied to the group's ul elements. */
-    groupUl: string;
-}
-export declare type AutocompleteClassKey = keyof AutocompleteClasses;
-export declare function getAutocompleteUtilityClass(slot: string): string;
-declare const autocompleteClasses: AutocompleteClasses;
-export default autocompleteClasses;
+export interface AutocompleteClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** State class applied to the root element if focused. */
+    focused: string;
+    /** Styles applied to the tag elements, e.g. the chips. */
+    tag: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
+    tagSizeSmall: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
+    tagSizeMedium: string;
+    /** Styles applied when the popup icon is rendered. */
+    hasPopupIcon: string;
+    /** Styles applied when the clear icon is rendered. */
+    hasClearIcon: string;
+    /** Styles applied to the Input element. */
+    inputRoot: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if tag focused. */
+    inputFocused: string;
+    /** Styles applied to the endAdornment element. */
+    endAdornment: string;
+    /** Styles applied to the clear indicator. */
+    clearIndicator: string;
+    /** Styles applied to the popup indicator. */
+    popupIndicator: string;
+    /** Styles applied to the popup indicator if the popup is open. */
+    popupIndicatorOpen: string;
+    /** Styles applied to the popper element. */
+    popper: string;
+    /** Styles applied to the popper element if `disablePortal={true}`. */
+    popperDisablePortal: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the listbox component. */
+    listbox: string;
+    /** Styles applied to the loading wrapper. */
+    loading: string;
+    /** Styles applied to the no option wrapper. */
+    noOptions: string;
+    /** Styles applied to the option elements. */
+    option: string;
+    /** Styles applied to the group's label elements. */
+    groupLabel: string;
+    /** Styles applied to the group's ul elements. */
+    groupUl: string;
+}
+export declare type AutocompleteClassKey = keyof AutocompleteClasses;
+export declare function getAutocompleteUtilityClass(slot: string): string;
+declare const autocompleteClasses: AutocompleteClasses;
+export default autocompleteClasses;

package/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/Avatar/avatarClasses.d.ts

@@ -1,20 +1,20 @@
-export interface AvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if not `src` or `srcSet`. */
-    colorDefault: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** Styles applied to the root element if `variant="rounded"`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="square"`. */
-    square: string;
-    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
-    img: string;
-    /** Styles applied to the fallback icon */
-    fallback: string;
-}
-export declare type AvatarClassKey = keyof AvatarClasses;
-export declare function getAvatarUtilityClass(slot: string): string;
-declare const avatarClasses: AvatarClasses;
-export default avatarClasses;
+export interface AvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if not `src` or `srcSet`. */
+    colorDefault: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** Styles applied to the root element if `variant="rounded"`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="square"`. */
+    square: string;
+    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
+    img: string;
+    /** Styles applied to the fallback icon */
+    fallback: string;
+}
+export declare type AvatarClassKey = keyof AvatarClasses;
+export declare function getAvatarUtilityClass(slot: string): string;
+declare const avatarClasses: AvatarClasses;
+export default avatarClasses;

package/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.