@mui/material 5.10.9 → 5.10.11

package/modern/InputLabel/inputLabelClasses.js

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

package/modern/LinearProgress/linearProgressClasses.js

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

package/modern/Link/linkClasses.js

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

package/modern/List/listClasses.js

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

package/modern/ListItem/listItemClasses.js

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

package/modern/ListItemAvatar/listItemAvatarClasses.js

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

package/modern/ListItemButton/listItemButtonClasses.js

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

package/modern/ListItemIcon/listItemIconClasses.js

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

package/modern/ListItemSecondaryAction/listItemSecondaryActionClasses.js

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

package/modern/ListItemText/listItemTextClasses.js

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

package/modern/ListSubheader/listSubheaderClasses.js

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

package/modern/Menu/menuClasses.js

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

package/modern/MenuItem/MenuItem.js

@@ -116,7 +116,7 @@ const MenuItemRoot = styled(ButtonBase, {
   }
 }, ownerState.dense && _extends({
   minHeight: 32,
-  // https://material.io/components/menus#specs > Dense
+  // https://m2.material.io/components/menus#specs > Dense
   paddingTop: 4,
   paddingBottom: 4
 }, theme.typography.body2, {

package/modern/MenuItem/menuItemClasses.js

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

package/modern/MobileStepper/mobileStepperClasses.js

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

package/modern/Modal/Modal.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
@@ -83,6 +83,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock = false,
     hideBackdrop = false,
     keepMounted = false,
+    slotProps,
+    slots,
     // eslint-disable-next-line react/prop-types
     theme
   } = props,
@@ -106,18 +108,21 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   });
 
   const classes = extendUtilityClasses(ownerState);
-  const Root = components.Root ?? component ?? ModalRoot;
+  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
+  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
   return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
-    components: _extends({
-      Root,
-      Backdrop: BackdropComponent
-    }, components),
-    componentsProps: {
-      root: () => _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
+    slots: {
+      root: RootSlot,
+      backdrop: BackdropSlot
+    },
+    slotProps: {
+      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
         as: component,
         theme
       }),
-      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState))
+      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -138,8 +143,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -154,7 +159,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `componentsProps.backdrop` instead.
+   * @deprecated Use `slotProps.backdrop` instead.
    */
   BackdropProps: PropTypes.object,
 
@@ -289,6 +294,25 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   open: PropTypes.bool.isRequired,
 
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/NativeSelect/nativeSelectClasses.js

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

package/modern/OutlinedInput/outlinedInputClasses.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);

package/modern/Pagination/paginationClasses.js

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

package/modern/PaginationItem/paginationItemClasses.js

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

package/modern/Paper/paperClasses.js

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

package/modern/Popover/Popover.js

@@ -237,6 +237,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transformOrigin: getTransformOriginValue(elemTransformOrigin)
     };
   }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+  const [isPositioned, setIsPositioned] = React.useState(open);
   const setPositioningStyles = React.useCallback(() => {
     const element = paperRef.current;
 
@@ -255,6 +256,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   const handleEntering = (element, isAppearing) => {
@@ -265,6 +267,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  const handleExited = () => {
+    setIsPositioned(false);
+  };
+
   React.useEffect(() => {
     if (open) {
       setPositioningStyles();
@@ -314,13 +320,19 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       appear: true,
       in: open,
       onEntering: handleEntering,
+      onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
       children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
         elevation: elevation
       }, PaperProps, {
         ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className),
+        className: clsx(classes.paper, PaperProps.className)
+      }, isPositioned ? undefined : {
+        style: _extends({}, PaperProps.style, {
+          opacity: 0
+        })
+      }, {
         ownerState: ownerState,
         children: children
       }))

package/modern/Popover/popoverClasses.js

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

package/modern/Popper/Popper.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "componentsProps", "slots", "slotProps"];
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
@@ -26,13 +28,27 @@ const PopperRoot = styled(PopperUnstyled, {
 
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const theme = useTheme();
-  const props = useThemeProps({
+
+  const _useThemeProps = useThemeProps({
     props: inProps,
     name: 'MuiPopper'
-  });
+  }),
+        {
+    components,
+    componentsProps,
+    slots,
+    slotProps
+  } = _useThemeProps,
+        other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+
+  const RootComponent = slots?.root ?? components?.Root;
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
-    direction: theme?.direction
-  }, props, {
+    direction: theme?.direction,
+    slots: {
+      root: RootComponent
+    },
+    slotProps: slotProps ?? componentsProps
+  }, other, {
     ref: ref
   }));
 });
@@ -158,6 +174,23 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: refType,
 
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Radio/radioClasses.js

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

package/modern/Rating/ratingClasses.js

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

package/modern/ScopedCssBaseline/scopedCssBaselineClasses.js

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

package/modern/Select/selectClasses.js

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

package/modern/Skeleton/skeletonClasses.js

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

package/modern/Slider/Slider.js

@@ -1,11 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["component", "components", "componentsProps", "color", "size"];
+const _excluded = ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@mui/utils';
-import { generateUtilityClasses } from '@mui/base';
+import { chainPropTypes, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
@@ -446,7 +445,9 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     components = {},
     componentsProps = {},
     color = 'primary',
-    size = 'medium'
+    size = 'medium',
+    slotProps,
+    slots
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -455,44 +456,66 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     size
   });
 
-  const classes = extendUtilityClasses(ownerState);
+  const classes = extendUtilityClasses(ownerState); // support both `slots` and `components` for backward compatibility
+
+  const RootSlot = slots?.root ?? components.Root ?? SliderRoot;
+  const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
+  const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
+  const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
+  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel;
+  const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
+  const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
+  const InputSlot = slots?.input ?? components.Input;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const railSlotProps = slotProps?.rail ?? componentsProps.rail;
+  const trackSlotProps = slotProps?.track ?? componentsProps.track;
+  const thumbSlotProps = slotProps?.thumb ?? componentsProps.thumb;
+  const valueLabelSlotProps = slotProps?.valueLabel ?? componentsProps.valueLabel;
+  const markSlotProps = slotProps?.mark ?? componentsProps.mark;
+  const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel;
+  const inputSlotProps = slotProps?.input ?? componentsProps.input;
   return /*#__PURE__*/_jsx(SliderUnstyled, _extends({}, other, {
     isRtl: isRtl,
-    components: _extends({
-      Root: SliderRoot,
-      Rail: SliderRail,
-      Track: SliderTrack,
-      Thumb: SliderThumb,
-      ValueLabel: SliderValueLabel,
-      Mark: SliderMark,
-      MarkLabel: SliderMarkLabel
-    }, components),
-    componentsProps: _extends({}, componentsProps, {
-      root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+    slots: {
+      root: RootSlot,
+      rail: RailSlot,
+      track: TrackSlot,
+      thumb: ThumbSlot,
+      valueLabel: ValueLabelSlot,
+      mark: MarkSlot,
+      markLabel: MarkLabelSlot,
+      input: InputSlot
+    },
+    slotProps: _extends({}, componentsProps, {
+      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
         as: component,
-        ownerState: _extends({}, componentsProps.root?.ownerState, {
+        ownerState: _extends({}, rootSlotProps?.ownerState, {
           color,
           size
         })
       }),
-      thumb: _extends({}, componentsProps.thumb, shouldSpreadAdditionalProps(components.Thumb) && {
-        ownerState: _extends({}, componentsProps.thumb?.ownerState, {
+      rail: railSlotProps,
+      thumb: _extends({}, thumbSlotProps, shouldSpreadAdditionalProps(ThumbSlot) && {
+        ownerState: _extends({}, thumbSlotProps?.ownerState, {
           color,
           size
         })
       }),
-      track: _extends({}, componentsProps.track, shouldSpreadAdditionalProps(components.Track) && {
-        ownerState: _extends({}, componentsProps.track?.ownerState, {
+      track: _extends({}, trackSlotProps, shouldSpreadAdditionalProps(TrackSlot) && {
+        ownerState: _extends({}, trackSlotProps?.ownerState, {
           color,
           size
         })
       }),
-      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadAdditionalProps(components.ValueLabel) && {
-        ownerState: _extends({}, componentsProps.valueLabel?.ownerState, {
+      valueLabel: _extends({}, valueLabelSlotProps, shouldSpreadAdditionalProps(ValueLabelSlot) && {
+        ownerState: _extends({}, valueLabelSlotProps?.ownerState, {
           color,
           size
         })
-      })
+      }),
+      mark: markSlotProps,
+      markLabel: markLabelSlotProps,
+      input: inputSlotProps
     }),
     classes: classes,
     ref: ref
@@ -574,8 +597,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Slider.
-   * @default {}
+   * @ignore
    */
   componentsProps: PropTypes.shape({
     input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -588,9 +610,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
       children: PropTypes.element,
       className: PropTypes.string,
-      components: PropTypes.shape({
-        Root: PropTypes.elementType
-      }),
       open: PropTypes.bool,
       style: PropTypes.object,
       value: PropTypes.number,
@@ -707,6 +726,44 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
 
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      children: PropTypes.element,
+      className: PropTypes.string,
+      open: PropTypes.bool,
+      style: PropTypes.object,
+      value: PropTypes.number,
+      valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
+    })])
+  }),
+
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    mark: PropTypes.elementType,
+    markLabel: PropTypes.elementType,
+    rail: PropTypes.elementType,
+    root: PropTypes.elementType,
+    thumb: PropTypes.elementType,
+    track: PropTypes.elementType,
+    valueLabel: PropTypes.elementType
+  }),
+
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.

package/modern/Snackbar/snackbarClasses.js

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

package/modern/SnackbarContent/snackbarContentClasses.js

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

package/modern/SpeedDial/speedDialClasses.js

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

package/modern/SpeedDialAction/speedDialActionClasses.js

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

package/modern/SpeedDialIcon/speedDialIconClasses.js

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