@mui/material 5.10.12 → 5.10.13

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.12
+/** @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.
@@ -7820,7 +7820,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         }
       } catch (e) {} })();`
       }
-    });
+    }, "mui-color-scheme-init");
   }
 
   function getSystemMode(mode) {
@@ -20528,7 +20528,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   }), 'Close');
 
-  const _excluded$1V = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+  const _excluded$1V = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
 
   const useUtilityClasses$1C = ownerState => {
     const {
@@ -20638,7 +20638,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })
   };
   const Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var _components$CloseButt, _components$CloseIcon;
+    var _ref, _slots$closeButton, _ref2, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
 
     const props = useThemeProps({
       props: inProps,
@@ -20658,6 +20658,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onClose,
       role = 'alert',
       severity = 'success',
+      slotProps = {},
+      slots = {},
       variant = 'standard'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1V);
@@ -20669,8 +20671,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$1C(ownerState);
-    const AlertCloseButton = (_components$CloseButt = components.CloseButton) != null ? _components$CloseButt : IconButton$1;
-    const AlertCloseIcon = (_components$CloseIcon = components.CloseIcon) != null ? _components$CloseIcon : ClearIcon;
+    const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : IconButton$1;
+    const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : ClearIcon;
+    const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
+    const closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -20699,10 +20703,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           title: closeText,
           color: "inherit",
           onClick: onClose
-        }, componentsProps.closeButton, {
+        }, closeButtonProps, {
           children: /*#__PURE__*/jsxRuntime_1(AlertCloseIcon, _extends({
             fontSize: "small"
-          }, componentsProps.closeIcon))
+          }, closeIconProps))
         }))
       }) : null]
     }));
@@ -20753,8 +20757,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     .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({
@@ -20763,7 +20770,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * 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({
@@ -20810,6 +20822,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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.
      */
@@ -22271,7 +22308,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
   var inputBaseClasses$1 = inputBaseClasses;
 
-  const _excluded$1O = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
+  const _excluded$1O = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
   const rootOverridesResolver = (props, styles) => {
     const {
       ownerState
@@ -22467,6 +22504,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
 
   const InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
+    var _slotProps$input;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiInputBase'
@@ -22502,6 +22541,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       readOnly,
       renderSuffix,
       rows,
+      slotProps = {},
+      slots = {},
       startAdornment,
       type = 'text',
       value: valueProp
@@ -22705,10 +22746,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$1w(ownerState);
-    const Root = components.Root || InputBaseRoot;
-    const rootProps = componentsProps.root || {};
-    const Input = components.Input || InputBaseComponent;
-    inputProps = _extends({}, inputProps, componentsProps.input);
+    const Root = slots.root || components.Root || InputBaseRoot;
+    const rootProps = slotProps.root || componentsProps.root || {};
+    const Input = slots.input || components.Input || InputBaseComponent;
+    inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, !isHostComponent(Root) && {
         ownerState: _extends({}, ownerState, rootProps.ownerState)
@@ -22800,8 +22841,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     .oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
 
     /**
-     * The components used for each slot inside the InputBase.
-     * 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({
@@ -22810,7 +22854,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * The props used for each slot inside the Input.
+     * 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({
@@ -22978,6 +23027,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* @typescript-to-proptypes-ignore */
     .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
 
+    /**
+     * 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({
+      input: PropTypes.object,
+      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({
+      input: PropTypes.elementType,
+      root: PropTypes.elementType
+    }),
+
     /**
      * Start `InputAdornment` for this component.
      */
@@ -23037,7 +23111,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _ClearIcon, _ArrowDropDownIcon;
 
-  const _excluded$1N = ["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$1N = ["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"];
 
   const useUtilityClasses$1v = ownerState => {
     const {
@@ -23363,7 +23437,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
-    var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
+    var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
 
     const props = useThemeProps({
       props: inProps,
@@ -23424,7 +23498,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       renderOption: renderOptionProp,
       renderTags,
       selectOnFocus = !props.freeSolo,
-      size = 'medium'
+      size = 'medium',
+      slotProps = {}
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1N);
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -23533,6 +23608,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       });
     };
 
+    const clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
+    const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
+    const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
+    const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(AutocompleteRoot, _extends({
         ref: ref,
@@ -23557,16 +23636,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 "aria-label": clearText,
                 title: clearText,
                 ownerState: ownerState
-              }, componentsProps.clearIndicator, {
-                className: clsx(classes.clearIndicator, (_componentsProps$clea = componentsProps.clearIndicator) == null ? void 0 : _componentsProps$clea.className),
+              }, clearIndicatorSlotProps, {
+                className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
                 children: clearIcon
               })) : null, hasPopupIcon ? /*#__PURE__*/jsxRuntime_1(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
                 disabled: disabled,
                 "aria-label": popupOpen ? closeText : openText,
                 title: popupOpen ? closeText : openText,
                 ownerState: ownerState
-              }, componentsProps.popupIndicator, {
-                className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
+              }, popupIndicatorSlotProps, {
+                className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
                 children: popupIcon
               })) : null]
             })
@@ -23587,13 +23666,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: "presentation",
         anchorEl: anchorEl,
         open: popupOpen
-      }, componentsProps.popper, {
-        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+      }, popperSlotProps, {
+        className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
           as: PaperComponent
-        }, componentsProps.paper, {
-          className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
+        }, paperSlotProps, {
+          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
           children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntime_1(AutocompleteLoading, {
             className: classes.loading,
             ownerState: ownerState,
@@ -24077,6 +24156,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* @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.
      */
@@ -24375,7 +24465,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
   const SPACINGS$2 = {
     small: -16,
     medium: null
@@ -24427,7 +24517,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }));
   const AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
-    var _componentsProps$addi, _componentsProps$addi2;
+    var _slotProps$additional;
 
     const props = useThemeProps({
       props: inProps,
@@ -24440,6 +24530,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component = 'div',
       componentsProps = {},
       max = 5,
+      slotProps = {},
       spacing = 'medium',
       total,
       variant = 'circular'
@@ -24475,6 +24566,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const maxAvatars = Math.min(children.length, clampedMax - 1);
     const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     const marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
+    const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       as: component,
       ownerState: ownerState,
@@ -24484,11 +24576,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, _extends({
         ownerState: ownerState,
         variant: variant
-      }, componentsProps.additionalAvatar, {
-        className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+      }, additionalAvatarSlotProps, {
+        className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
         style: _extends({
           marginLeft
-        }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
+        }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
         children: ["+", extraAvatars]
       })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
@@ -24533,7 +24625,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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({
@@ -24552,6 +24649,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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'
@@ -24799,7 +24908,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  const _excluded$1J = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+  const _excluded$1J = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
 
   const useUtilityClasses$1s = ownerState => {
     const {
@@ -24838,7 +24947,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     backgroundColor: 'transparent'
   }));
   const Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var _components$Root, _componentsProps$root;
+    var _slotProps$root, _ref, _slots$root;
 
     const props = useThemeProps({
       props: inProps,
@@ -24853,6 +24962,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       invisible = false,
       open,
+      slotProps = {},
+      slots = {},
       transitionDuration,
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Fade$1
@@ -24865,19 +24976,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$1s(ownerState);
+    const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
     }, other, {
-      children: /*#__PURE__*/jsxRuntime_1(BackdropRoot, {
-        "aria-hidden": true,
-        as: (_components$Root = components.Root) != null ? _components$Root : component,
-        className: clsx(classes.root, className),
-        ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
+      children: /*#__PURE__*/jsxRuntime_1(BackdropRoot, _extends({
+        "aria-hidden": true
+      }, rootSlotProps, {
+        as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
+        className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
+        ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
         classes: classes,
         ref: ref,
         children: children
-      })
+      }))
     }));
   });
   Backdrop.propTypes
@@ -24910,8 +25023,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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({
@@ -24919,7 +25035,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * 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({
@@ -24938,6 +25059,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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.
      */
@@ -25272,8 +25416,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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({
@@ -25282,7 +25429,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * 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({
@@ -28641,8 +28793,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     component: PropTypes.elementType,
 
     /**
-     * The components used for each slot inside the Modal.
-     * 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({
@@ -28651,7 +28806,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * The props used for each slot inside the Modal.
+     * 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({
@@ -30762,7 +30922,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Fab$1 = Fab;
 
-  const _excluded$1j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "type"];
+  const _excluded$1j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 
   const useUtilityClasses$14 = ownerState => {
     const {
@@ -30933,6 +31093,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingBottom: 9
   }));
   const FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
+    var _ref, _slots$root, _ref2, _slots$input;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiFilledInput'
@@ -30945,6 +31107,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // declare here to prevent spreading to DOM
       inputComponent = 'input',
       multiline = false,
+      slotProps,
+      slots = {},
       type = 'text'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1j);
@@ -30965,12 +31129,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState
       }
     };
-    const componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+    const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+    const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
+    const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
-      components: _extends({
-        Root: FilledInputRoot,
-        Input: FilledInputInput
-      }, components),
+      slots: {
+        root: RootSlot,
+        input: InputSlot
+      },
       componentsProps: componentsProps,
       fullWidth: fullWidth,
       inputComponent: inputComponent,
@@ -31017,8 +31183,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
     /**
-     * The components used for each slot inside the InputBase.
-     * 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({
@@ -31027,7 +31196,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * The props used for each slot inside the Input.
+     * 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({
@@ -31157,6 +31331,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+    /**
+     * 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({
+      input: PropTypes.object,
+      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({
+      input: PropTypes.elementType,
+      root: PropTypes.elementType
+    }),
+
     /**
      * Start `InputAdornment` for this component.
      */
@@ -31507,7 +31706,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
-  const _excluded$1h = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "value"];
+  const _excluded$1h = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
 
   const useUtilityClasses$12 = ownerState => {
     const {
@@ -31574,6 +31773,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    */
 
   const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
+    var _slotProps$typography;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiFormControlLabel'
@@ -31586,7 +31787,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled: disabledProp,
       disableTypography,
       label: labelProp,
-      labelPlacement = 'end'
+      labelPlacement = 'end',
+      slotProps = {}
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1h);
 
@@ -31622,13 +31824,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$12(ownerState);
+    const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
     let label = labelProp;
 
     if (label != null && label.type !== Typography$1 && !disableTypography) {
       label = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
-        component: "span",
-        className: classes.label
-      }, componentsProps.typography, {
+        component: "span"
+      }, typographySlotProps, {
+        className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
         children: label
       }));
     }
@@ -31716,6 +31919,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     onChange: PropTypes.func,
 
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      typography: PropTypes.object
+    }),
+
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -34620,7 +34831,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var ImageListItemBar$1 = ImageListItemBar;
 
-  const _excluded$14 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"];
+  const _excluded$14 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 
   const useUtilityClasses$U = ownerState => {
     const {
@@ -34721,6 +34932,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     overridesResolver: inputOverridesResolver
   })({});
   const Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
+    var _ref, _slots$root, _ref2, _slots$input;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiInput'
@@ -34733,6 +34946,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       fullWidth = false,
       inputComponent = 'input',
       multiline = false,
+      slotProps,
+      slots = {},
       type = 'text'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$14);
@@ -34746,13 +34961,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState
       }
     };
-    const componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+    const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+    const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
+    const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
-      components: _extends({
-        Root: InputRoot,
-        Input: InputInput
-      }, components),
-      componentsProps: componentsProps,
+      slots: {
+        root: RootSlot,
+        input: InputSlot
+      },
+      slotProps: componentsProps,
       fullWidth: fullWidth,
       inputComponent: inputComponent,
       multiline: multiline,
@@ -34798,8 +35015,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
     /**
-     * The components used for each slot inside the InputBase.
-     * 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({
@@ -34808,7 +35028,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * The props used for each slot inside the Input.
+     * 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({
@@ -34930,6 +35155,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+    /**
+     * 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({
+      input: PropTypes.object,
+      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({
+      input: PropTypes.elementType,
+      root: PropTypes.elementType
+    }),
+
     /**
      * Start `InputAdornment` for this component.
      */
@@ -36502,7 +36752,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ListItemSecondaryAction$1 = ListItemSecondaryAction;
 
   const _excluded$Y = ["className"],
-        _excluded2$7 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"];
+        _excluded2$7 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
   const overridesResolver$2 = (props, styles) => {
     const {
       ownerState
@@ -36642,7 +36892,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       divider = false,
       focusVisibleClassName,
       secondaryAction,
-      selected = false
+      selected = false,
+      slotProps = {},
+      slots = {}
     } = props,
           ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$Y),
           other = _objectWithoutPropertiesLoose(props, _excluded2$7);
@@ -36682,8 +36934,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const classes = useUtilityClasses$M(ownerState);
     const handleRef = useForkRef(listItemRef, ref);
-    const Root = components.Root || ListItemRoot;
-    const rootProps = componentsProps.root || {};
+    const Root = slots.root || components.Root || ListItemRoot;
+    const rootProps = slotProps.root || componentsProps.root || {};
 
     const componentProps = _extends({
       className: clsx(classes.root, rootProps.className, className),
@@ -36733,8 +36985,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: childContext,
       children: /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
         as: Component,
-        ref: handleRef,
-        ownerState: ownerState
+        ref: handleRef
       }, !isHostComponent(Root) && {
         ownerState: _extends({}, ownerState, rootProps.ownerState)
       }, componentProps, {
@@ -36817,8 +37068,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     component: PropTypes.elementType,
 
     /**
-     * The components used for each slot inside the InputBase.
-     * 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({
@@ -36826,7 +37080,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * The props used for each slot inside the Input.
+     * 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({
@@ -36896,6 +37155,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     selected: PropTypes.bool,
 
+    /**
+     * 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.
      */
@@ -38893,12 +39175,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     borderRadius: 0,
     // Reset
     cursor: 'pointer',
-    '&:focus': {
-      // Show that it's not an text input
-      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+    '&:focus': _extends({}, theme.vars ? {
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
+    } : {
+      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+    }, {
       borderRadius: 0 // Reset Chrome style
 
-    },
+    }),
     // Remove IE11 arrow
     '&::-ms-expand': {
       display: 'none'
@@ -38910,7 +39194,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       height: 'auto'
     },
     '&:not([multiple]) option, &:not([multiple]) optgroup': {
-      backgroundColor: theme.palette.background.paper
+      backgroundColor: (theme.vars || theme).palette.background.paper
     },
     // Bump specificity to allow extending custom inputs
     '&&&': {
@@ -38923,9 +39207,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       paddingRight: 32
     }
   }, ownerState.variant === 'outlined' && {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     '&:focus': {
-      borderRadius: theme.shape.borderRadius // Reset the reset for Chrome style
+      borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
 
     },
     '&&&': {
@@ -38957,9 +39241,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // Center vertically, height is 1em
     pointerEvents: 'none',
     // Don't block pointer events on the select under the icon.
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     [`&.${nativeSelectClasses$1.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }, ownerState.open && {
     transform: 'rotate(180deg)'
@@ -39345,7 +39629,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     style: PropTypes.object
   } ;
 
-  const _excluded$M = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"];
+  const _excluded$M = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 
   const useUtilityClasses$C = ownerState => {
     const {
@@ -39451,7 +39735,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingRight: 0
   }));
   const OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
-    var _React$Fragment;
+    var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
 
     const props = useThemeProps({
       props: inProps,
@@ -39465,6 +39749,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       label,
       multiline = false,
       notched,
+      slots = {},
       type = 'text'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$M);
@@ -39490,11 +39775,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
+    const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
+    const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
-      components: _extends({
-        Root: OutlinedInputRoot,
-        Input: OutlinedInputInput
-      }, components),
+      slots: {
+        root: RootSlot,
+        input: InputSlot
+      },
       renderSuffix: state => /*#__PURE__*/jsxRuntime_1(NotchedOutlineRoot, {
         ownerState: ownerState,
         className: classes.notchedOutline,
@@ -39550,8 +39837,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
     /**
-     * The components used for each slot inside the InputBase.
-     * 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({
@@ -39679,6 +39969,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+    /**
+     * 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({
+      input: PropTypes.elementType,
+      root: PropTypes.elementType
+    }),
+
     /**
      * Start `InputAdornment` for this component.
      */
@@ -39839,7 +40141,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
   }), 'NavigateNext');
 
-  const _excluded$K = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+  const _excluded$K = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 
   const overridesResolver = (props, styles) => {
     const {
@@ -40038,17 +40340,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       color = 'standard',
       component,
-      components = {
-        first: FirstPageIcon,
-        last: LastPageIcon,
-        next: NavigateNextIcon,
-        previous: NavigateBeforeIcon
-      },
+      components = {},
       disabled = false,
       page,
       selected = false,
       shape = 'circular',
       size = 'medium',
+      slots = {},
       type = 'page',
       variant = 'text'
     } = props,
@@ -40067,15 +40365,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const theme = useTheme();
     const classes = useUtilityClasses$B(ownerState);
     const normalizedIcons = theme.direction === 'rtl' ? {
-      previous: components.next || NavigateNextIcon,
-      next: components.previous || NavigateBeforeIcon,
-      last: components.first || FirstPageIcon,
-      first: components.last || LastPageIcon
+      previous: slots.next || components.next || NavigateNextIcon,
+      next: slots.previous || components.previous || NavigateBeforeIcon,
+      last: slots.first || components.first || FirstPageIcon,
+      first: slots.last || components.last || LastPageIcon
     } : {
-      previous: components.previous || NavigateBeforeIcon,
-      next: components.next || NavigateNextIcon,
-      first: components.first || FirstPageIcon,
-      last: components.last || LastPageIcon
+      previous: slots.previous || components.previous || NavigateBeforeIcon,
+      next: slots.next || components.next || NavigateNextIcon,
+      first: slots.first || components.first || FirstPageIcon,
+      last: slots.last || components.last || LastPageIcon
     };
     const Icon = normalizedIcons[type];
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
@@ -40137,13 +40435,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     component: PropTypes.elementType,
 
     /**
-     * The components used for first, last, next & previous item type
-     * @default {
-     *   first: FirstPageIcon,
-     *   last: LastPageIcon,
-     *   next: NavigateNextIcon,
-     *   previous: NavigateBeforeIcon,
-     * }
+     * 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({
       first: PropTypes.elementType,
@@ -40183,6 +40480,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* @typescript-to-proptypes-ignore */
     .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
 
+    /**
+     * 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({
+      first: PropTypes.elementType,
+      last: PropTypes.elementType,
+      next: PropTypes.elementType,
+      previous: PropTypes.elementType
+    }),
+
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -42673,14 +42984,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * @param {SelectChangeEvent<T>} event The event source of the callback.
      * You can pull out the new value by accessing `event.target.value` (any).
-     * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.
+     * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
      * @param {object} [child] The react element that was selected when `native` is `false` (default).
      */
     onChange: PropTypes.func,
 
     /**
      * Callback fired when the component requests to be closed.
-     * Use in controlled mode (see open).
+     * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
      *
      * @param {object} event The event source of the callback.
      */
@@ -42688,7 +42999,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the component requests to be opened.
-     * Use in controlled mode (see open).
+     * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
      *
      * @param {object} event The event source of the callback.
      */
@@ -43536,8 +43847,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
     /**
-     * The components used for each slot inside the Slider.
-     * 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({
@@ -43552,7 +43866,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * @ignore
+     * 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({
       input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -45137,7 +45457,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
   var tooltipClasses$1 = tooltipClasses;
 
-  const _excluded$w = ["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"];
+  const _excluded$w = ["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"];
 
   function round(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -45328,7 +45648,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
 
   const Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProps, ref) {
-    var _components$Popper, _ref, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+    var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
 
     const props = useThemeProps({
       props: inProps,
@@ -45358,6 +45678,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       placement = 'bottom',
       PopperComponent: PopperComponentProp,
       PopperProps = {},
+      slotProps = {},
+      slots = {},
       title,
       TransitionComponent: TransitionComponentProp = Grow$1,
       TransitionProps
@@ -45696,14 +46018,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$q(ownerState);
-    const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
-    const TransitionComponent = (_ref = (_components$Transitio = components.Transition) != null ? _components$Transitio : TransitionComponentProp) != null ? _ref : Grow$1;
-    const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
-    const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
-    const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
-    const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, componentsProps.transition), ownerState);
-    const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, componentsProps.tooltip), ownerState);
-    const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, componentsProps.arrow), ownerState);
+    const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
+    const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow$1;
+    const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
+    const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
+    const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
+      className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
+    }), ownerState);
+    const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
+    const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
+      className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+    }), ownerState);
+    const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
+      className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+    }), ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/React__namespace.cloneElement(children, childrenProps), /*#__PURE__*/jsxRuntime_1(PopperComponent, _extends({
         as: PopperComponentProp != null ? PopperComponentProp : Popper$1,
@@ -45723,25 +46051,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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: ({
           TransitionProps: TransitionPropsInner
-        }) => {
-          var _componentsProps$tool, _componentsProps$arro;
-
-          return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
-            timeout: theme.transitions.duration.shorter
-          }, TransitionPropsInner, transitionProps, {
-            children: /*#__PURE__*/jsxRuntime_2(TooltipComponent, _extends({}, tooltipProps, {
-              className: clsx(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
-              children: [title, arrow ? /*#__PURE__*/jsxRuntime_1(ArrowComponent, _extends({}, tooltipArrowProps, {
-                className: clsx(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
-                ref: setArrowRef
-              })) : null]
-            }))
-          }));
-        }
+        }) => /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
+          timeout: theme.transitions.duration.shorter
+        }, TransitionPropsInner, transitionProps, {
+          "data-foo": "bar",
+          children: /*#__PURE__*/jsxRuntime_2(TooltipComponent, _extends({}, tooltipProps, {
+            children: [title, arrow ? /*#__PURE__*/jsxRuntime_1(ArrowComponent, _extends({}, tooltipArrowProps, {
+              ref: setArrowRef
+            })) : null]
+          }))
+        }))
       }))]
     });
   });
@@ -45775,8 +46097,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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({
@@ -45787,9 +46112,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
 
     /**
-     * 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({
@@ -45912,6 +46240,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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.
      */
@@ -46921,7 +47278,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const stepLabelClasses = generateUtilityClasses('MuiStepLabel', ['root', 'horizontal', 'vertical', 'label', 'active', 'completed', 'error', 'disabled', 'iconContainer', 'alternativeLabel', 'labelContainer']);
   var stepLabelClasses$1 = stepLabelClasses;
 
-  const _excluded$q = ["children", "className", "componentsProps", "error", "icon", "optional", "StepIconComponent", "StepIconProps"];
+  const _excluded$q = ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"];
 
   const useUtilityClasses$l = ownerState => {
     const {
@@ -47019,6 +47376,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }));
   const StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
+    var _slotProps$label;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiStepLabel'
@@ -47031,6 +47390,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       error = false,
       icon: iconProp,
       optional,
+      slotProps = {},
       StepIconComponent: StepIconComponentProp,
       StepIconProps
     } = props,
@@ -47063,6 +47423,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$l(ownerState);
+    const labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
     return /*#__PURE__*/jsxRuntime_2(StepLabelRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -47081,9 +47442,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: classes.labelContainer,
         ownerState: ownerState,
         children: [children ? /*#__PURE__*/jsxRuntime_1(StepLabelLabel, _extends({
-          className: classes.label,
           ownerState: ownerState
-        }, componentsProps.label, {
+        }, labelSlotProps, {
+          className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
           children: children
         })) : null, optional]
       })]
@@ -47136,6 +47497,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     optional: PropTypes.node,
 
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      label: PropTypes.object
+    }),
+
     /**
      * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
      */