@mui/material 5.10.10 → 5.10.12

package/legacy/Tooltip/Tooltip.js

@@ -486,7 +486,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }, [handleClose, open]);
   var handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
-  if (typeof title !== 'number' && !title) {
+  if (!title && title !== 0) {
     open = false;
   }
 

package/legacy/Tooltip/tooltipClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiTooltip', slot);
 }

package/legacy/Typography/typographyClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getTypographyUtilityClass(slot) {
   return generateUtilityClass('MuiTypography', slot);
 }

package/legacy/Unstable_Grid2/grid2Classes.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getGrid2UtilityClass(slot) {
   return generateUtilityClass('MuiGrid2', slot);
 }

package/legacy/generateUtilityClass/index.js

@@ -0,0 +1 @@
+export { unstable_generateUtilityClass as default } from '@mui/utils';

package/legacy/generateUtilityClasses/index.js

@@ -0,0 +1 @@
+export { unstable_generateUtilityClasses as default } from '@mui/utils';

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.10
+/** @license MUI v5.10.12
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -278,7 +278,7 @@ export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
 export { StyledEngineProvider } from './styles';
 export { default as unstable_composeClasses } from '@mui/base/composeClasses';
-export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
-export * from '@mui/base/generateUtilityClass';
-export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';
+export { default as generateUtilityClass } from './generateUtilityClass';
+export * from './generateUtilityClass';
+export { default as generateUtilityClasses } from './generateUtilityClasses';
 export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';

package/legacy/internal/switchBaseClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getSwitchBaseUtilityClass(slot) {
   return generateUtilityClass('PrivateSwitchBase', slot);
 }

package/legacy/styles/createTheme.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import { deepmerge } from '@mui/utils';
-import { generateUtilityClass } from '@mui/base';
 import { createTheme as systemCreateTheme } from '@mui/system';
+import generateUtilityClass from '../generateUtilityClass';
 import createMixins from './createMixins';
 import createPalette from './createPalette';
 import createTypography from './createTypography';

package/legacy/styles/createTransitions.js

@@ -12,7 +12,7 @@ export var easing = {
   easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
   // The sharp curve is used by objects that may return to the screen at any time.
   sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
-}; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+}; // Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
 // to learn when use what timing
 
 export var duration = {

package/legacy/styles/createTypography.js

@@ -11,8 +11,8 @@ var caseAllCaps = {
 };
 var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 /**
- * @see @link{https://material.io/design/typography/the-type-system.html}
- * @see @link{https://material.io/design/typography/understanding-typography.html}
+ * @see @link{https://m2.material.io/design/typography/the-type-system.html}
+ * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 
 export default function createTypography(palette, typography) {

package/modern/Accordion/accordionClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionUtilityClass(slot) {
   return generateUtilityClass('MuiAccordion', slot);
 }

package/modern/AccordionActions/accordionActionsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionActionsUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionActions', slot);
 }

package/modern/AccordionDetails/accordionDetailsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionDetailsUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionDetails', slot);
 }

package/modern/AccordionSummary/accordionSummaryClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionSummaryUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionSummary', slot);
 }

package/modern/Alert/Alert.js

@@ -1,9 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-var _CloseIcon;
-
-const _excluded = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -142,6 +139,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     className,
     closeText = 'Close',
     color,
+    components = {},
+    componentsProps = {},
     icon,
     iconMapping = defaultIconMapping,
     onClose,
@@ -158,6 +157,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
+  const AlertCloseButton = components.CloseButton ?? IconButton;
+  const AlertCloseIcon = components.CloseIcon ?? CloseIcon;
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -180,16 +181,17 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
       ownerState: ownerState,
       className: classes.action,
-      children: /*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(AlertCloseButton, _extends({
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
-        onClick: onClose,
-        children: _CloseIcon || (_CloseIcon = /*#__PURE__*/_jsx(CloseIcon, {
+        onClick: onClose
+      }, componentsProps.closeButton, {
+        children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({
           fontSize: "small"
-        }))
-      })
+        }, componentsProps.closeIcon))
+      }))
     }) : null]
   }));
 });
@@ -238,6 +240,25 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
 
+  /**
+   * The components used for each slot inside the Alert.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    CloseButton: PropTypes.elementType,
+    CloseIcon: PropTypes.elementType
+  }),
+
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    closeButton: PropTypes.object,
+    closeIcon: PropTypes.object
+  }),
+
   /**
    * Override the icon displayed before the children.
    * Unless provided, the icon is mapped to the value of the `severity` prop.

package/modern/Alert/alertClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }

package/modern/AlertTitle/alertTitleClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAlertTitleUtilityClass(slot) {
   return generateUtilityClass('MuiAlertTitle', slot);
 }

package/modern/AppBar/appBarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAppBarUtilityClass(slot) {
   return generateUtilityClass('MuiAppBar', slot);
 }

package/modern/Autocomplete/autocompleteClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAutocompleteUtilityClass(slot) {
   return generateUtilityClass('MuiAutocomplete', slot);
 }

package/modern/Avatar/avatarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAvatarUtilityClass(slot) {
   return generateUtilityClass('MuiAvatar', slot);
 }

package/modern/AvatarGroup/avatarGroupClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAvatarGroupUtilityClass(slot) {
   return generateUtilityClass('MuiAvatarGroup', slot);
 }

package/modern/Backdrop/backdropClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBackdropUtilityClass(slot) {
   return generateUtilityClass('MuiBackdrop', slot);
 }

package/modern/Badge/Badge.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -176,6 +176,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     invisible: invisibleProp = false,
     max,
     badgeContent: badgeContentProp,
+    slots,
+    slotProps,
     showZero = false,
     variant: variantProp = 'standard'
   } = props,
@@ -213,33 +215,38 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
 
   if (variant !== 'dot') {
     displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
+  } // support both `slots` and `components` for backward compatibility
+
 
+  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
+  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
   return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
     invisible: invisibleProp,
     badgeContent: displayValue,
     showZero: showZero,
     max: max
   }, other, {
-    components: _extends({
-      Root: BadgeRoot,
-      Badge: BadgeBadge
-    }, components),
-    className: clsx(componentsProps.root?.className, classes.root, className),
-    componentsProps: {
-      root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+    slots: {
+      root: RootSlot,
+      badge: BadgeSlot
+    },
+    className: clsx(rootSlotProps?.className, classes.root, className),
+    slotProps: {
+      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
         as: component,
-        ownerState: _extends({}, componentsProps.root?.ownerState, {
+        ownerState: _extends({}, rootSlotProps?.ownerState, {
           anchorOrigin,
           color,
           overlap,
           variant
         })
       }),
-      badge: _extends({}, componentsProps.badge, {
-        className: clsx(classes.badge, componentsProps.badge?.className)
-      }, shouldSpreadAdditionalProps(components.Badge) && {
-        ownerState: _extends({}, componentsProps.badge?.ownerState, {
+      badge: _extends({}, badgeSlotProps, {
+        className: clsx(classes.badge, badgeSlotProps?.className)
+      }, shouldSpreadAdditionalProps(BadgeSlot) && {
+        ownerState: _extends({}, badgeSlotProps?.ownerState, {
           anchorOrigin,
           color,
           overlap,
@@ -349,6 +356,25 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    */
   showZero: PropTypes.bool,
 
+  /**
+   * The props used for each slot inside the Badge.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Badge.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    badge: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Badge/badgeClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClasses from '@mui/base/generateUtilityClasses';
-import generateUtilityClass from '@mui/base/generateUtilityClass';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBadgeUtilityClass(slot) {
   return generateUtilityClass('MuiBadge', slot);
 }

package/modern/BottomNavigation/bottomNavigationClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBottomNavigationUtilityClass(slot) {
   return generateUtilityClass('MuiBottomNavigation', slot);
 }

package/modern/BottomNavigationAction/bottomNavigationActionClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBottomNavigationActionUtilityClass(slot) {
   return generateUtilityClass('MuiBottomNavigationAction', slot);
 }

package/modern/Breadcrumbs/breadcrumbsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBreadcrumbsUtilityClass(slot) {
   return generateUtilityClass('MuiBreadcrumbs', slot);
 }

package/modern/Button/buttonClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }

package/modern/ButtonBase/TouchRipple.js

@@ -184,7 +184,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     nextKey.current += 1;
     rippleCallback.current = cb;
   }, [classes]);
-  const start = React.useCallback((event = {}, options = {}, cb) => {
+  const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {
     const {
       pulsate = false,
       center = centerProp || options.pulsate,

package/modern/ButtonBase/buttonBaseClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass('MuiButtonBase', slot);
 }

package/modern/ButtonBase/touchRippleClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getTouchRippleUtilityClass(slot) {
   return generateUtilityClass('MuiTouchRipple', slot);
 }

package/modern/ButtonGroup/buttonGroupClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }

package/modern/Card/cardClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCardUtilityClass(slot) {
   return generateUtilityClass('MuiCard', slot);
 }

package/modern/CardActionArea/cardActionAreaClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCardActionAreaUtilityClass(slot) {
   return generateUtilityClass('MuiCardActionArea', slot);
 }

package/modern/CardActions/cardActionsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCardActionsUtilityClass(slot) {
   return generateUtilityClass('MuiCardActions', slot);
 }

package/modern/CardContent/cardContentClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCardContentUtilityClass(slot) {
   return generateUtilityClass('MuiCardContent', slot);
 }

package/modern/CardHeader/cardHeaderClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCardHeaderUtilityClass(slot) {
   return generateUtilityClass('MuiCardHeader', slot);
 }

package/modern/CardMedia/cardMediaClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCardMediaUtilityClass(slot) {
   return generateUtilityClass('MuiCardMedia', slot);
 }

package/modern/Checkbox/checkboxClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCheckboxUtilityClass(slot) {
   return generateUtilityClass('MuiCheckbox', slot);
 }

package/modern/Chip/Chip.js

@@ -23,6 +23,7 @@ const useUtilityClasses = ownerState => {
     disabled,
     size,
     color,
+    iconColor,
     onDelete,
     clickable,
     variant
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant, disabled && 'disabled', `size${capitalize(size)}`, `color${capitalize(color)}`, clickable && 'clickable', clickable && `clickableColor${capitalize(color)}`, onDelete && 'deletable', onDelete && `deletableColor${capitalize(color)}`, `${variant}${capitalize(color)}`],
     label: ['label', `label${capitalize(size)}`],
     avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
-    icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(color)}`],
+    icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(iconColor)}`],
     deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
   };
   return composeClasses(slots, getChipUtilityClass, classes);
@@ -46,6 +47,7 @@ const ChipRoot = styled('div', {
     } = props;
     const {
       color,
+      iconColor,
       clickable,
       onDelete,
       size,
@@ -62,7 +64,7 @@ const ChipRoot = styled('div', {
     }, {
       [`& .${chipClasses.icon}`]: styles[`icon${capitalize(size)}`]
     }, {
-      [`& .${chipClasses.icon}`]: styles[`iconColor${capitalize(color)}`]
+      [`& .${chipClasses.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles.deleteIcon
     }, {
@@ -131,16 +133,17 @@ const ChipRoot = styled('div', {
       fontSize: theme.typography.pxToRem(10)
     },
     [`& .${chipClasses.icon}`]: _extends({
-      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
       marginLeft: 5,
       marginRight: -6
     }, ownerState.size === 'small' && {
       fontSize: 18,
       marginLeft: 4,
       marginRight: -4
+    }, ownerState.iconColor === ownerState.color && _extends({
+      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
     }, ownerState.color !== 'default' && {
       color: 'inherit'
-    }),
+    })),
     [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
@@ -346,6 +349,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     disabled,
     size,
     color,
+    iconColor: /*#__PURE__*/React.isValidElement(iconProp) ? iconProp.props.color || color : color,
     onDelete: !!onDelete,
     clickable,
     variant

package/modern/Chip/chipClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getChipUtilityClass(slot) {
   return generateUtilityClass('MuiChip', slot);
 }

package/modern/CircularProgress/circularProgressClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCircularProgressUtilityClass(slot) {
   return generateUtilityClass('MuiCircularProgress', slot);
 }

package/modern/Collapse/collapseClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getCollapseUtilityClass(slot) {
   return generateUtilityClass('MuiCollapse', slot);
 }

package/modern/Container/containerClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getContainerUtilityClass(slot) {
   return generateUtilityClass('MuiContainer', slot);
 }

package/modern/Dialog/Dialog.js

@@ -291,8 +291,8 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',

package/modern/Dialog/dialogClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getDialogUtilityClass(slot) {
   return generateUtilityClass('MuiDialog', slot);
 }

package/modern/DialogActions/dialogActionsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getDialogActionsUtilityClass(slot) {
   return generateUtilityClass('MuiDialogActions', slot);
 }