@mui/material 5.10.11 → 5.10.13

package/legacy/Tooltip/Tooltip.js

@@ -209,7 +209,7 @@ function composeEventHandler(handler, eventHandler) {
 
 
 var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _components$Popper, _ref5, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+  var _ref5, _slots$popper, _ref6, _ref7, _slots$transition, _ref8, _slots$tooltip, _ref9, _slots$arrow, _slotProps$popper, _ref10, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref11, _slotProps$tooltip2, _slotProps$arrow, _ref12, _slotProps$arrow2;
 
   var props = useThemeProps({
     props: inProps,
@@ -255,11 +255,15 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       PopperComponentProp = props.PopperComponent,
       _props$PopperProps = props.PopperProps,
       PopperProps = _props$PopperProps === void 0 ? {} : _props$PopperProps,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       title = props.title,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponentProp = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
       TransitionProps = props.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"]);
+      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", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"]);
 
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
@@ -486,7 +490,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;
   }
 
@@ -606,14 +610,20 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
 
   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);
+  var PopperComponent = (_ref5 = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref5 : TooltipPopper;
+  var TransitionComponent = (_ref6 = (_ref7 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref7 : TransitionComponentProp) != null ? _ref6 : Grow;
+  var TooltipComponent = (_ref8 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref8 : TooltipTooltip;
+  var ArrowComponent = (_ref9 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref9 : TooltipArrow;
+  var popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
+    className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref10 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref10.className)
+  }), ownerState);
+  var transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
+  var tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
+    className: clsx(classes.tooltip, (_ref11 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref11.className)
+  }), ownerState);
+  var tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
+    className: clsx(classes.arrow, (_ref12 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref12.className)
+  }), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
       as: PopperComponentProp != null ? PopperComponentProp : Popper,
@@ -635,19 +645,15 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true
     }, interactiveWrapperListeners, popperProps, {
-      className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
-      children: function children(_ref6) {
-        var _componentsProps$tool, _componentsProps$arro;
-
-        var TransitionPropsInner = _ref6.TransitionProps;
+      children: function children(_ref13) {
+        var TransitionPropsInner = _ref13.TransitionProps;
         return /*#__PURE__*/_jsx(TransitionComponent, _extends({
           timeout: theme.transitions.duration.shorter
         }, TransitionPropsInner, transitionProps, {
+          "data-foo": "bar",
           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]
           }))
@@ -686,8 +692,11 @@ 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.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -698,9 +707,12 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Tooltip.
-   * Note that `componentsProps.popper` prop values win over `PopperProps`
-   * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -823,6 +835,35 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   PopperProps: PropTypes.object,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    arrow: PropTypes.object,
+    popper: PropTypes.object,
+    tooltip: PropTypes.object,
+    transition: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    arrow: PropTypes.elementType,
+    popper: PropTypes.elementType,
+    tooltip: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/index.js

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

package/modern/Alert/Alert.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -146,6 +146,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     onClose,
     role = 'alert',
     severity = 'success',
+    slotProps = {},
+    slots = {},
     variant = 'standard'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -157,8 +159,10 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-  const AlertCloseButton = components.CloseButton ?? IconButton;
-  const AlertCloseIcon = components.CloseIcon ?? CloseIcon;
+  const AlertCloseButton = slots.closeButton ?? components.CloseButton ?? IconButton;
+  const AlertCloseIcon = slots.closeIcon ?? components.CloseIcon ?? CloseIcon;
+  const closeButtonProps = slotProps.closeButton ?? componentsProps.closeButton;
+  const closeIconProps = slotProps.closeIcon ?? componentsProps.closeIcon;
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -187,10 +191,10 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
         title: closeText,
         color: "inherit",
         onClick: onClose
-      }, componentsProps.closeButton, {
+      }, closeButtonProps, {
         children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({
           fontSize: "small"
-        }, componentsProps.closeIcon))
+        }, closeIconProps))
       }))
     }) : null]
   }));
@@ -241,8 +245,11 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   .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.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -251,7 +258,12 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   }),
 
   /**
-   * The props used for each slot inside.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -298,6 +310,31 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
    */
   severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    closeButton: PropTypes.object,
+    closeIcon: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    closeButton: PropTypes.elementType,
+    closeIcon: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
 var _ClearIcon, _ArrowDropDownIcon;
 
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -408,7 +408,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderOption: renderOptionProp,
     renderTags,
     selectOnFocus = !props.freeSolo,
-    size = 'medium'
+    size = 'medium',
+    slotProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -517,6 +518,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     });
   };
 
+  const clearIndicatorSlotProps = slotProps.clearIndicator ?? componentsProps.clearIndicator;
+  const paperSlotProps = slotProps.paper ?? componentsProps.paper;
+  const popperSlotProps = slotProps.popper ?? componentsProps.popper;
+  const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -541,16 +546,16 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               "aria-label": clearText,
               title: clearText,
               ownerState: ownerState
-            }, componentsProps.clearIndicator, {
-              className: clsx(classes.clearIndicator, componentsProps.clearIndicator?.className),
+            }, clearIndicatorSlotProps, {
+              className: clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
               children: clearIcon
             })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
               ownerState: ownerState
-            }, componentsProps.popupIndicator, {
-              className: clsx(classes.popupIndicator, componentsProps.popupIndicator?.className),
+            }, popupIndicatorSlotProps, {
+              className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
               children: popupIcon
             })) : null]
           })
@@ -571,13 +576,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: popupOpen
-    }, componentsProps.popper, {
-      className: clsx(classes.popper, componentsProps.popper?.className),
+    }, popperSlotProps, {
+      className: clsx(classes.popper, popperSlotProps?.className),
       children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
         as: PaperComponent
-      }, componentsProps.paper, {
-        className: clsx(classes.paper, componentsProps.paper?.className),
+      }, paperSlotProps, {
+        className: clsx(classes.paper, paperSlotProps?.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -1061,6 +1066,17 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object,
+    popper: PropTypes.object,
+    popupIndicator: PropTypes.object
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -74,6 +74,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     component = 'div',
     componentsProps = {},
     max = 5,
+    slotProps = {},
     spacing = 'medium',
     total,
     variant = 'circular'
@@ -109,6 +110,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
+  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -118,11 +120,11 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
-    }, componentsProps.additionalAvatar, {
-      className: clsx(classes.avatar, componentsProps.additionalAvatar?.className),
+    }, additionalAvatarSlotProps, {
+      className: clsx(classes.avatar, additionalAvatarSlotProps?.className),
       style: _extends({
         marginLeft
-      }, componentsProps.additionalAvatar?.style),
+      }, additionalAvatarSlotProps?.style),
       children: ["+", extraAvatars]
     })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -167,7 +169,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The props used for each slot inside the AvatarGroup.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -186,6 +193,18 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
     return null;
   }),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    additionalAvatar: PropTypes.object
+  }),
+
   /**
    * Spacing between avatars.
    * @default 'medium'

package/modern/Backdrop/Backdrop.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -61,6 +61,8 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     className,
     invisible = false,
     open,
+    slotProps = {},
+    slots = {},
     transitionDuration,
     // eslint-disable-next-line react/prop-types
     TransitionComponent = Fade
@@ -73,19 +75,21 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
+  const rootSlotProps = slotProps.root ?? componentsProps.root;
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, {
-      "aria-hidden": true,
-      as: components.Root ?? component,
-      className: clsx(classes.root, className),
-      ownerState: _extends({}, ownerState, componentsProps.root?.ownerState),
+    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+      "aria-hidden": true
+    }, rootSlotProps, {
+      as: slots.root ?? components.Root ?? component,
+      className: clsx(classes.root, className, rootSlotProps?.className),
+      ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
       classes: classes,
       ref: ref,
       children: children
-    })
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes
@@ -118,8 +122,11 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the Backdrop.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -127,7 +134,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Backdrop.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -146,6 +158,29 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   open: PropTypes.bool.isRequired,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Badge/Badge.js

@@ -314,8 +314,11 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -324,7 +327,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Badge.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({

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