@mui/material 5.10.11 → 5.10.13

package/umd/material-ui.development.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.
@@ -7582,10 +7582,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
   }
 
+  const EMPTY_THEME = {};
+
   function InnerThemeProvider(props) {
     const theme = useTheme$1();
     return /*#__PURE__*/jsxRuntime_1(ThemeContext$2.Provider, {
-      value: typeof theme === 'object' ? theme : {},
+      value: typeof theme === 'object' ? theme : EMPTY_THEME,
       children: props.children
     });
   }
@@ -7818,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) {
@@ -8269,17 +8271,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           hasMounted.current = false;
         };
       }, []);
+      const contextValue = React__namespace.useMemo(() => ({
+        mode,
+        systemMode,
+        setMode,
+        lightColorScheme,
+        darkColorScheme,
+        colorScheme,
+        setColorScheme,
+        allColorSchemes
+      }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
       return /*#__PURE__*/jsxRuntime_2(ColorSchemeContext.Provider, {
-        value: {
-          mode,
-          systemMode,
-          setMode,
-          lightColorScheme,
-          darkColorScheme,
-          colorScheme,
-          setColorScheme,
-          allColorSchemes
-        },
+        value: contextValue,
         children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
           styles: {
             [colorSchemeSelector]: rootCss
@@ -9949,7 +9952,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * @param otherProps Props of the element.
    * @param ownerState
    */
-  function appendOwnerState(elementType, otherProps = {}, ownerState) {
+  function appendOwnerState(elementType, otherProps, ownerState) {
     if (isHostComponent(elementType)) {
       return otherProps;
     }
@@ -14357,7 +14360,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return isForbiddenTagName || isInputHidden;
   }
 
-  function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude = [], show) {
+  function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
     const blacklist = [mountElement, currentElement, ...elementsToExclude];
     [].forEach.call(container.children, element => {
       const isNotExcludedElement = blacklist.indexOf(element) === -1;
@@ -19393,7 +19396,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       nextKey.current += 1;
       rippleCallback.current = cb;
     }, [classes]);
-    const start = React__namespace.useCallback((event = {}, options = {}, cb) => {
+    const start = React__namespace.useCallback((event = {}, options = {}, cb = () => {}) => {
       const {
         pulsate = false,
         center = centerProp || options.pulsate,
@@ -20525,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 {
@@ -20635,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,
@@ -20655,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);
@@ -20666,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,
@@ -20696,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]
     }));
@@ -20750,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({
@@ -20760,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({
@@ -20807,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.
      */
@@ -21667,6 +21707,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled,
       size,
       color,
+      iconColor,
       onDelete,
       clickable,
       variant
@@ -21675,7 +21716,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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);
@@ -21690,6 +21731,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props;
       const {
         color,
+        iconColor,
         clickable,
         onDelete,
         size,
@@ -21706,7 +21748,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }, {
         [`& .${chipClasses$1.icon}`]: styles[`icon${capitalize(size)}`]
       }, {
-        [`& .${chipClasses$1.icon}`]: styles[`iconColor${capitalize(color)}`]
+        [`& .${chipClasses$1.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
       }, {
         [`& .${chipClasses$1.deleteIcon}`]: styles.deleteIcon
       }, {
@@ -21775,16 +21817,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         fontSize: theme.typography.pxToRem(10)
       },
       [`& .${chipClasses$1.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$1.deleteIcon}`]: _extends({
         WebkitTapHighlightColor: 'transparent',
         color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
@@ -21990,6 +22033,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled,
       size,
       color,
+      iconColor: /*#__PURE__*/React__namespace.isValidElement(iconProp) ? iconProp.props.color || color : color,
       onDelete: !!onDelete,
       clickable,
       variant
@@ -22264,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
@@ -22460,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'
@@ -22495,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
@@ -22698,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)
@@ -22793,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({
@@ -22803,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({
@@ -22971,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.
      */
@@ -23030,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 {
@@ -23356,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,
@@ -23417,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 */
@@ -23526,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,
@@ -23550,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]
             })
@@ -23580,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,
@@ -24070,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.
      */
@@ -24368,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
@@ -24420,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,
@@ -24433,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'
@@ -24468,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,
@@ -24477,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, {
@@ -24526,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({
@@ -24545,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'
@@ -24792,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 {
@@ -24831,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,
@@ -24846,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
@@ -24858,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
@@ -24903,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({
@@ -24912,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({
@@ -24931,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.
      */
@@ -25265,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({
@@ -25275,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({
@@ -28634,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({
@@ -28644,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({
@@ -30755,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 {
@@ -30926,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'
@@ -30938,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);
@@ -30958,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,
@@ -31010,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({
@@ -31020,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({
@@ -31150,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.
      */
@@ -31350,35 +31556,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
     }
 
-    const onFilled = React__namespace.useCallback(() => {
-      setFilled(true);
-    }, []);
-    const onEmpty = React__namespace.useCallback(() => {
-      setFilled(false);
-    }, []);
-    const childContext = {
-      adornedStart,
-      setAdornedStart,
-      color,
-      disabled,
-      error,
-      filled,
-      focused,
-      fullWidth,
-      hiddenLabel,
-      size,
-      onBlur: () => {
-        setFocused(false);
-      },
-      onEmpty,
-      onFilled,
-      onFocus: () => {
-        setFocused(true);
-      },
-      registerEffect,
-      required,
-      variant
-    };
+    const childContext = React__namespace.useMemo(() => {
+      return {
+        adornedStart,
+        setAdornedStart,
+        color,
+        disabled,
+        error,
+        filled,
+        focused,
+        fullWidth,
+        hiddenLabel,
+        size,
+        onBlur: () => {
+          setFocused(false);
+        },
+        onEmpty: () => {
+          setFilled(false);
+        },
+        onFilled: () => {
+          setFilled(true);
+        },
+        onFocus: () => {
+          setFocused(true);
+        },
+        registerEffect,
+        required,
+        variant
+      };
+    }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
     return /*#__PURE__*/jsxRuntime_1(FormControlContext$1.Provider, {
       value: childContext,
       children: /*#__PURE__*/jsxRuntime_1(FormControlRoot, _extends({
@@ -31500,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 {
@@ -31567,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'
@@ -31579,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);
 
@@ -31615,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
       }));
     }
@@ -31709,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.
      */
@@ -34613,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 {
@@ -34714,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'
@@ -34726,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);
@@ -34739,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,
@@ -34791,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({
@@ -34801,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({
@@ -34923,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.
      */
@@ -36260,11 +36517,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$_);
 
     const context = React__namespace.useContext(ListContext$1);
-    const childContext = {
+    const childContext = React__namespace.useMemo(() => ({
       dense: dense || context.dense || false,
       alignItems,
       disableGutters
-    };
+    }), [alignItems, context.dense, dense, disableGutters]);
     const listItemRef = React__namespace.useRef(null);
     useEnhancedEffect$1(() => {
       if (autoFocus) {
@@ -36495,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
@@ -36635,17 +36892,19 @@ 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);
 
     const context = React__namespace.useContext(ListContext$1);
-    const childContext = {
+    const childContext = React__namespace.useMemo(() => ({
       dense: dense || context.dense || false,
       alignItems,
       disableGutters
-    };
+    }), [alignItems, context.dense, dense, disableGutters]);
     const listItemRef = React__namespace.useRef(null);
     useEnhancedEffect$1(() => {
       if (autoFocus) {
@@ -36675,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),
@@ -36726,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, {
@@ -36810,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({
@@ -36819,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({
@@ -36889,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.
      */
@@ -38497,10 +38786,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$R);
 
     const context = React__namespace.useContext(ListContext$1);
-    const childContext = {
+    const childContext = React__namespace.useMemo(() => ({
       dense: dense || context.dense || false,
       disableGutters
-    };
+    }), [context.dense, dense, disableGutters]);
     const menuItemRef = React__namespace.useRef(null);
     useEnhancedEffect$1(() => {
       if (autoFocus) {
@@ -38886,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'
@@ -38903,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
     '&&&': {
@@ -38916,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
 
     },
     '&&&': {
@@ -38950,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)'
@@ -39338,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 {
@@ -39444,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,
@@ -39458,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);
@@ -39483,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,
@@ -39543,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({
@@ -39672,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.
      */
@@ -39832,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 {
@@ -40031,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,
@@ -40060,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, {
@@ -40130,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,
@@ -40176,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.
      */
@@ -40590,7 +40908,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    color: (theme.vars || theme).palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary
+  }, !ownerState.disableRipple && {
     '&:hover': {
       backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -40825,22 +41144,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }), []);
     const handleRef = useForkRef(ref, rootRef);
+    const name = useId(nameProp);
+    const contextValue = React__namespace.useMemo(() => ({
+      name,
 
-    const handleChange = event => {
-      setValueState(event.target.value);
+      onChange(event) {
+        setValueState(event.target.value);
 
-      if (onChange) {
-        onChange(event, event.target.value);
-      }
-    };
+        if (onChange) {
+          onChange(event, event.target.value);
+        }
+      },
 
-    const name = useId(nameProp);
+      value
+    }), [name, onChange, setValueState, value]);
     return /*#__PURE__*/jsxRuntime_1(RadioGroupContext$1.Provider, {
-      value: {
-        name,
-        onChange: handleChange,
-        value
-      },
+      value: contextValue,
       children: /*#__PURE__*/jsxRuntime_1(FormGroup$1, _extends({
         role: "radiogroup",
         ref: handleRef
@@ -42665,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.
      */
@@ -42680,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.
      */
@@ -43528,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({
@@ -43544,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]),
@@ -45129,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;
@@ -45320,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,
@@ -45350,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
@@ -45568,7 +45898,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, [handleClose, open]);
     const 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;
     }
 
@@ -45688,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,
@@ -45715,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]
+          }))
+        }))
       }))]
     });
   });
@@ -45767,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({
@@ -45779,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({
@@ -45904,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.
      */
@@ -46913,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 {
@@ -47011,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'
@@ -47023,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,
@@ -47055,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,
@@ -47073,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]
       })]
@@ -47128,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/).
      */
@@ -48014,7 +48391,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       claimedSwipeInstance = null;
       touchDetected.current = false;
-      setMaybeSwiping(false); // The swipe wasn't started.
+      ReactDOM.flushSync(() => {
+        setMaybeSwiping(false);
+      }); // The swipe wasn't started.
 
       if (!swipeInstance.current.isSwiping) {
         swipeInstance.current.isSwiping = null;
@@ -48216,7 +48595,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       claimedSwipeInstance = null;
       swipeInstance.current.startX = currentX;
       swipeInstance.current.startY = currentY;
-      setMaybeSwiping(true);
+      ReactDOM.flushSync(() => {
+        setMaybeSwiping(true);
+      });
 
       if (!open && paperRef.current) {
         // The ref may be null when a parent component updates while swiping.
@@ -48272,6 +48653,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           BackdropProps: _extends({}, BackdropProps, {
             ref: backdropRef
           })
+        }, variant === 'temporary' && {
+          keepMounted: true
         }, ModalPropsProp),
         hideBackdrop: hideBackdrop,
         PaperProps: _extends({}, PaperProps, {