@mui/material 5.8.4 → 5.8.7

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

@@ -60,22 +60,30 @@ const AlertRoot = styled(Paper, {
     display: 'flex',
     padding: '6px 16px'
   }, color && ownerState.variant === 'standard' && {
-    color: getColor(theme.palette[color].light, 0.6),
-    backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${alertClasses.icon}`]: {
+    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+    [`& .${alertClasses.icon}`]: theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}IconColor`]
+    } : {
       color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
     }
   }, color && ownerState.variant === 'outlined' && {
-    color: getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${theme.palette[color].light}`,
-    [`& .${alertClasses.icon}`]: {
+    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+    [`& .${alertClasses.icon}`]: theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}IconColor`]
+    } : {
       color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
     }
-  }, color && ownerState.variant === 'filled' && {
-    color: '#fff',
-    fontWeight: theme.typography.fontWeightMedium,
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-  });
+  }, color && ownerState.variant === 'filled' && _extends({
+    fontWeight: theme.typography.fontWeightMedium
+  }, theme.vars ? {
+    color: theme.vars.palette.Alert[`${color}FilledColor`],
+    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+  } : {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+  }));
 });
 const AlertIcon = styled('div', {
   name: 'MuiAlert',

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

@@ -22,7 +22,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
   };
   return composeClasses(slots, getAppBarUtilityClass, classes);
-};
+}; // var2 is the fallback.
+// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
+
+
+const joinVars = (var1, var2) => `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})`;
 
 const AppBarRoot = styled(Paper, {
   name: 'MuiAppBar',
@@ -47,7 +51,7 @@ const AppBarRoot = styled(Paper, {
     flexShrink: 0
   }, ownerState.position === 'fixed' && {
     position: 'fixed',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0,
@@ -57,14 +61,14 @@ const AppBarRoot = styled(Paper, {
     }
   }, ownerState.position === 'absolute' && {
     position: 'absolute',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0
   }, ownerState.position === 'sticky' && {
     // ⚠️ sticky is not supported by IE11.
     position: 'sticky',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0
@@ -72,7 +76,7 @@ const AppBarRoot = styled(Paper, {
     position: 'static'
   }, ownerState.position === 'relative' && {
     position: 'relative'
-  }, ownerState.color === 'default' && {
+  }, !theme.vars && _extends({}, ownerState.color === 'default' && {
     backgroundColor: backgroundColorDefault,
     color: theme.palette.getContrastText(backgroundColorDefault)
   }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
@@ -88,6 +92,19 @@ const AppBarRoot = styled(Paper, {
     color: 'inherit'
   }, theme.palette.mode === 'dark' && {
     backgroundImage: 'none'
+  })), theme.vars && _extends({}, ownerState.color === 'default' && {
+    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
+    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
+  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
+    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
+    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, {
+    backgroundColor: 'var(--AppBar-background)',
+    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
+  }, ownerState.color === 'transparent' && {
+    backgroundImage: 'none',
+    backgroundColor: 'transparent',
+    color: 'inherit'
   }));
 });
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {

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

@@ -120,6 +120,8 @@ export interface AutocompleteProps<
   componentsProps?: {
     clearIndicator?: Partial<IconButtonProps>;
     paper?: PaperProps;
+    popper?: Partial<PopperProps>;
+    popupIndicator?: Partial<IconButtonProps>;
   };
   /**
    * If `true`, the component is disabled.

package/Autocomplete/Autocomplete.js

@@ -349,7 +349,7 @@ const AutocompleteGroupUl = styled('ul', {
 });
 export { createFilterOptions };
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$pape;
+  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
   const props = useThemeProps({
     props: inProps,
@@ -550,8 +550,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
-              className: clsx(classes.popupIndicator),
-              ownerState: ownerState,
+              ownerState: ownerState
+            }, componentsProps.popupIndicator, {
+              className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
               children: popupIcon
             })) : null]
           })
@@ -562,9 +563,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
+    })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
       as: PopperComponent,
-      className: clsx(classes.popper),
       disablePortal: disablePortal,
       style: {
         width: anchorEl ? anchorEl.clientWidth : null
@@ -572,7 +572,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: true,
+      open: true
+    }, componentsProps.popper, {
+      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
         as: PaperComponent
@@ -609,7 +611,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           })
         })) : null]
       }))
-    }) : null]
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
@@ -711,7 +713,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   componentsProps: PropTypes.shape({
     clearIndicator: PropTypes.object,
-    paper: PropTypes.object
+    paper: PropTypes.object,
+    popper: PropTypes.object,
+    popupIndicator: PropTypes.object
   }),
 
   /**

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 the input is 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 the input is 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

@@ -52,13 +52,16 @@ const AvatarRoot = styled('div', {
   overflow: 'hidden',
   userSelect: 'none'
 }, ownerState.variant === 'rounded' && {
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.variant === 'square' && {
   borderRadius: 0
-}, ownerState.colorDefault && {
-  color: theme.palette.background.default,
+}, ownerState.colorDefault && _extends({
+  color: (theme.vars || theme).palette.background.default
+}, theme.vars ? {
+  backgroundColor: theme.vars.palette.Avatar.defaultBg
+} : {
   backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-}));
+})));
 const AvatarImg = styled('img', {
   name: 'MuiAvatar',
   slot: 'Img',

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;