@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/Slider/Slider.js

@@ -6,28 +6,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SliderValueLabel = exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRail = exports.SliderMarkLabel = exports.SliderMark = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useSlider = require("@mui/base/useSlider");
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useSlider = require("./useSlider");
+var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
 var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSlider');
 function Identity(x) {
   return x;
 }
@@ -40,104 +39,98 @@ const SliderRoot = exports.SliderRoot = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => {
-  var _theme$vars;
-  return {
-    borderRadius: 12,
-    boxSizing: 'content-box',
-    display: 'inline-block',
-    position: 'relative',
-    cursor: 'pointer',
-    touchAction: 'none',
-    WebkitTapHighlightColor: 'transparent',
-    '@media print': {
-      colorAdjust: 'exact'
+}) => ({
+  borderRadius: 12,
+  boxSizing: 'content-box',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  touchAction: 'none',
+  WebkitTapHighlightColor: 'transparent',
+  '@media print': {
+    colorAdjust: 'exact'
+  },
+  [`&.${_sliderClasses.default.disabled}`]: {
+    pointerEvents: 'none',
+    cursor: 'default',
+    color: (theme.vars || theme).palette.grey[400]
+  },
+  [`&.${_sliderClasses.default.dragging}`]: {
+    [`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
+      transition: 'none'
+    }
+  },
+  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color
     },
-    [`&.${_sliderClasses.default.disabled}`]: {
-      pointerEvents: 'none',
-      cursor: 'default',
-      color: (theme.vars || theme).palette.grey[400]
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  })), {
+    props: {
+      orientation: 'horizontal'
     },
-    [`&.${_sliderClasses.default.dragging}`]: {
-      [`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
-        transition: 'none'
+    style: {
+      height: 4,
+      width: '100%',
+      padding: '13px 0',
+      // The primary input mechanism of the device includes a pointing device of limited accuracy.
+      '@media (pointer: coarse)': {
+        // Reach 42px touch target, about ~8mm on screen.
+        padding: '20px 0'
       }
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      size: 'small'
     },
-    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
-      var _theme$vars2;
-      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
-    }).map(color => ({
-      props: {
-        color
-      },
-      style: {
-        color: (theme.vars || theme).palette[color].main
-      }
-    })), {
-      props: {
-        orientation: 'horizontal'
-      },
-      style: {
-        height: 4,
-        width: '100%',
-        padding: '13px 0',
-        // The primary input mechanism of the device includes a pointing device of limited accuracy.
-        '@media (pointer: coarse)': {
-          // Reach 42px touch target, about ~8mm on screen.
-          padding: '20px 0'
-        }
-      }
-    }, {
-      props: {
-        orientation: 'horizontal',
-        size: 'small'
-      },
-      style: {
-        height: 2
-      }
-    }, {
-      props: {
-        orientation: 'horizontal',
-        marked: true
-      },
-      style: {
-        marginBottom: 20
-      }
-    }, {
-      props: {
-        orientation: 'vertical'
-      },
-      style: {
-        height: '100%',
-        width: 4,
-        padding: '0 13px',
-        // The primary input mechanism of the device includes a pointing device of limited accuracy.
-        '@media (pointer: coarse)': {
-          // Reach 42px touch target, about ~8mm on screen.
-          padding: '0 20px'
-        }
-      }
-    }, {
-      props: {
-        orientation: 'vertical',
-        size: 'small'
-      },
-      style: {
-        width: 2
-      }
-    }, {
-      props: {
-        orientation: 'vertical',
-        marked: true
-      },
-      style: {
-        marginRight: 44
+    style: {
+      height: 2
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      marked: true
+    },
+    style: {
+      marginBottom: 20
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      height: '100%',
+      width: 4,
+      padding: '0 13px',
+      // The primary input mechanism of the device includes a pointing device of limited accuracy.
+      '@media (pointer: coarse)': {
+        // Reach 42px touch target, about ~8mm on screen.
+        padding: '0 20px'
       }
-    }]
-  };
-});
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      size: 'small'
+    },
+    style: {
+      width: 2
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      marked: true
+    },
+    style: {
+      marginRight: 44
+    }
+  }]
+})));
 const SliderRail = exports.SliderRail = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Rail',
@@ -181,10 +174,9 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => {
-  var _theme$vars3;
   return {
     display: 'block',
     position: 'absolute',
@@ -226,28 +218,29 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(key => {
-      var _theme$vars4;
-      return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
-    }).map(color => ({
+    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
       props: {
         color,
         track: 'inverted'
       },
-      style: (0, _extends2.default)({}, theme.vars ? {
-        backgroundColor: theme.vars.palette.Slider[`${color}Track`],
-        borderColor: theme.vars.palette.Slider[`${color}Track`]
-      } : (0, _extends2.default)({
-        backgroundColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
-        borderColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62)
-      }, theme.applyStyles('dark', {
-        backgroundColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
-      }), theme.applyStyles('dark', {
-        borderColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
-      })))
+      style: {
+        ...(theme.vars ? {
+          backgroundColor: theme.vars.palette.Slider[`${color}Track`],
+          borderColor: theme.vars.palette.Slider[`${color}Track`]
+        } : {
+          backgroundColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
+          borderColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
+          ...theme.applyStyles('dark', {
+            backgroundColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
+          }),
+          ...theme.applyStyles('dark', {
+            borderColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
+          })
+        })
+      }
     }))]
   };
-});
+}));
 const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
@@ -257,111 +250,108 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.thumb, styles[`thumbColor${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`thumbSize${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => {
-  var _theme$vars5;
-  return {
+}) => ({
+  position: 'absolute',
+  width: 20,
+  height: 20,
+  boxSizing: 'border-box',
+  borderRadius: '50%',
+  outline: 0,
+  backgroundColor: 'currentColor',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  '&::before': {
+    position: 'absolute',
+    content: '""',
+    borderRadius: 'inherit',
+    width: '100%',
+    height: '100%',
+    boxShadow: (theme.vars || theme).shadows[2]
+  },
+  '&::after': {
     position: 'absolute',
-    width: 20,
-    height: 20,
-    boxSizing: 'border-box',
+    content: '""',
     borderRadius: '50%',
-    outline: 0,
-    backgroundColor: 'currentColor',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
-      duration: theme.transitions.duration.shortest
-    }),
-    '&::before': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: 'inherit',
-      width: '100%',
-      height: '100%',
-      boxShadow: (theme.vars || theme).shadows[2]
+    // 42px is the hit target
+    width: 42,
+    height: 42,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  },
+  [`&.${_sliderClasses.default.disabled}`]: {
+    '&:hover': {
+      boxShadow: 'none'
+    }
+  },
+  variants: [{
+    props: {
+      size: 'small'
     },
-    '&::after': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: '50%',
-      // 42px is the hit target
-      width: 42,
-      height: 42,
+    style: {
+      width: 12,
+      height: 12,
+      '&::before': {
+        boxShadow: 'none'
+      }
+    }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
       top: '50%',
-      left: '50%',
       transform: 'translate(-50%, -50%)'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
     },
-    [`&.${_sliderClasses.default.disabled}`]: {
-      '&:hover': {
-        boxShadow: 'none'
-      }
+    style: {
+      left: '50%',
+      transform: 'translate(-50%, 50%)'
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color
     },
-    variants: [{
-      props: {
-        size: 'small'
-      },
-      style: {
-        width: 12,
-        height: 12,
-        '&::before': {
-          boxShadow: 'none'
-        }
-      }
-    }, {
-      props: {
-        orientation: 'horizontal'
-      },
-      style: {
-        top: '50%',
-        transform: 'translate(-50%, -50%)'
-      }
-    }, {
-      props: {
-        orientation: 'vertical'
-      },
-      style: {
-        left: '50%',
-        transform: 'translate(-50%, 50%)'
-      }
-    }, ...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(key => {
-      var _theme$vars6;
-      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
-    }).map(color => ({
-      props: {
-        color
-      },
-      style: {
-        [`&:hover, &.${_sliderClasses.default.focusVisible}`]: (0, _extends2.default)({}, theme.vars ? {
+    style: {
+      [`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
+        ...(theme.vars ? {
           boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
         } : {
           boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
-        }, {
-          '@media (hover: none)': {
-            boxShadow: 'none'
-          }
         }),
-        [`&.${_sliderClasses.default.active}`]: (0, _extends2.default)({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+        '@media (hover: none)': {
+          boxShadow: 'none'
+        }
+      },
+      [`&.${_sliderClasses.default.active}`]: {
+        ...(theme.vars ? {
+          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
         } : {
           boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
         })
       }
-    }))]
-  };
-});
+    }
+  }))]
+})));
 const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_SliderValueLabel.default, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   zIndex: 1,
-  whiteSpace: 'nowrap'
-}, theme.typography.body2, {
+  whiteSpace: 'nowrap',
+  ...theme.typography.body2,
   fontWeight: 500,
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
@@ -436,7 +426,7 @@ const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_Sli
       right: '20px'
     }
   }]
-}));
+})));
 const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -447,7 +437,7 @@ const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.mark, markActive && styles.markActive];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   position: 'absolute',
@@ -480,15 +470,16 @@ const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
       opacity: 0.8
     }
   }]
-}));
+})));
 const SliderMarkLabel = exports.SliderMarkLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markLabelActive',
   overridesResolver: (props, styles) => styles.markLabel
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap',
@@ -522,7 +513,7 @@ const SliderMarkLabel = exports.SliderMarkLabel = (0, _zeroStyled.styled)('span'
       color: (theme.vars || theme).palette.text.primary
     }
   }]
-}));
+})));
 const useUtilityClasses = ownerState => {
   const {
     disabled,
@@ -554,43 +545,48 @@ const Forward = ({
   children
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inputProps,
     name: 'MuiSlider'
   });
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
-      'aria-label': ariaLabel,
-      'aria-valuetext': ariaValuetext,
-      'aria-labelledby': ariaLabelledby,
-      // eslint-disable-next-line react/prop-types
-      component = 'span',
-      components = {},
-      componentsProps = {},
-      color = 'primary',
-      classes: classesProp,
-      className,
-      disableSwap = false,
-      disabled = false,
-      getAriaLabel,
-      getAriaValueText,
-      marks: marksProp = false,
-      max = 100,
-      min = 0,
-      orientation = 'horizontal',
-      shiftStep = 10,
-      size = 'medium',
-      step = 1,
-      scale = Identity,
-      slotProps,
-      slots,
-      track = 'normal',
-      valueLabelDisplay = 'off',
-      valueLabelFormat = Identity
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    'aria-label': ariaLabel,
+    'aria-valuetext': ariaValuetext,
+    'aria-labelledby': ariaLabelledby,
+    // eslint-disable-next-line react/prop-types
+    component = 'span',
+    components = {},
+    componentsProps = {},
+    color = 'primary',
+    classes: classesProp,
+    className,
+    disableSwap = false,
+    disabled = false,
+    getAriaLabel,
+    getAriaValueText,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = 'horizontal',
+    shiftStep = 10,
+    size = 'medium',
+    step = 1,
+    scale = Identity,
+    slotProps,
+    slots,
+    tabIndex,
+    track = 'normal',
+    value: valueProp,
+    valueLabelDisplay = 'off',
+    valueLabelFormat = Identity,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     isRtl,
     max,
     min,
@@ -607,7 +603,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  });
+  };
   const {
     axisProps,
     getRootProps,
@@ -624,116 +620,147 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     trackOffset,
     trackLeap,
     getThumbStyle
-  } = (0, _useSlider.useSlider)((0, _extends2.default)({}, ownerState, {
+  } = (0, _useSlider.useSlider)({
+    ...ownerState,
     rootRef: ref
-  }));
+  });
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;
   ownerState.focusedThumbIndex = focusedThumbIndex;
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : SliderRoot;
-  const RailSlot = (_ref2 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref2 : SliderRail;
-  const TrackSlot = (_ref3 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref3 : SliderTrack;
-  const ThumbSlot = (_ref4 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref4 : SliderThumb;
-  const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
-  const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
-  const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
-  const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
-  const trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
-  const thumbSlotProps = (_slotProps$thumb = slotProps == null ? void 0 : slotProps.thumb) != null ? _slotProps$thumb : componentsProps.thumb;
-  const valueLabelSlotProps = (_slotProps$valueLabel = slotProps == null ? void 0 : slotProps.valueLabel) != null ? _slotProps$valueLabel : componentsProps.valueLabel;
-  const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
-  const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
-  const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  const rootProps = (0, _utils.useSlotProps)({
+  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 ?? '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;
+  const rootProps = (0, _useSlotProps.default)({
     elementType: RootSlot,
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
-    additionalProps: (0, _extends2.default)({}, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
-      as: component
-    }),
-    ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    additionalProps: {
+      ...((0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
+        as: component
+      })
+    },
+    ownerState: {
+      ...ownerState,
+      ...rootSlotProps?.ownerState
+    },
     className: [classes.root, className]
   });
-  const railProps = (0, _utils.useSlotProps)({
+  const railProps = (0, _useSlotProps.default)({
     elementType: RailSlot,
     externalSlotProps: railSlotProps,
     ownerState,
     className: classes.rail
   });
-  const trackProps = (0, _utils.useSlotProps)({
+  const trackProps = (0, _useSlotProps.default)({
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
-      style: (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      style: {
+        ...axisProps[axis].offset(trackOffset),
+        ...axisProps[axis].leap(trackLeap)
+      }
+    },
+    ownerState: {
+      ...ownerState,
+      ...trackSlotProps?.ownerState
     },
-    ownerState: (0, _extends2.default)({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
     className: classes.track
   });
-  const thumbProps = (0, _utils.useSlotProps)({
+  const thumbProps = (0, _useSlotProps.default)({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...thumbSlotProps?.ownerState
+    },
     className: classes.thumb
   });
-  const valueLabelProps = (0, _utils.useSlotProps)({
+  const valueLabelProps = (0, _useSlotProps.default)({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: (0, _extends2.default)({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...valueLabelSlotProps?.ownerState
+    },
     className: classes.valueLabel
   });
-  const markProps = (0, _utils.useSlotProps)({
+  const markProps = (0, _useSlotProps.default)({
     elementType: MarkSlot,
     externalSlotProps: markSlotProps,
     ownerState,
     className: classes.mark
   });
-  const markLabelProps = (0, _utils.useSlotProps)({
+  const markLabelProps = (0, _useSlotProps.default)({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
     ownerState,
     className: classes.markLabel
   });
-  const inputSliderProps = (0, _utils.useSlotProps)({
+  const inputSliderProps = (0, _useSlotProps.default)({
     elementType: InputSlot,
     getSlotProps: getHiddenInputProps,
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, (0, _extends2.default)({}, rootProps, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RailSlot, (0, _extends2.default)({}, railProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, (0, _extends2.default)({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RailSlot, {
+      ...railProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, {
+      ...trackProps
+    }), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = (0, _useSlider.valueToPercent)(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
       if (track === false) {
-        markActive = values.indexOf(mark.value) !== -1;
+        markActive = values.includes(mark.value);
       } else {
         markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, (0, _extends2.default)({
-          "data-index": index
-        }, markProps, !(0, _utils.isHostComponent)(MarkSlot) && {
-          markActive
-        }, {
-          style: (0, _extends2.default)({}, style, markProps.style),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, {
+          "data-index": index,
+          ...markProps,
+          ...(!(0, _isHostComponent.default)(MarkSlot) && {
+            markActive
+          }),
+          style: {
+            ...style,
+            ...markProps.style
+          },
           className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
-        })), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, (0, _extends2.default)({
+        }), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, {
           "aria-hidden": true,
-          "data-index": index
-        }, markLabelProps, !(0, _utils.isHostComponent)(MarkLabelSlot) && {
-          markLabelActive: markActive
-        }, {
-          style: (0, _extends2.default)({}, style, markLabelProps.style),
+          "data-index": index,
+          ...markLabelProps,
+          ...(!(0, _isHostComponent.default)(MarkLabelSlot) && {
+            markLabelActive: markActive
+          }),
+          style: {
+            ...style,
+            ...markLabelProps.style
+          },
           className: (0, _clsx.default)(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
           children: mark.label
-        })) : null]
+        }) : null]
       }, index);
     }), values.map((value, index) => {
       const percent = (0, _useSlider.valueToPercent)(value, min, max);
@@ -742,32 +769,39 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       return (
         /*#__PURE__*/
         /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
-        (0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _utils.isHostComponent)(ValueLabelComponent) && {
-          valueLabelFormat,
-          valueLabelDisplay,
-          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-          index,
-          open: open === index || active === index || valueLabelDisplay === 'on',
-          disabled
-        }, valueLabelProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, (0, _extends2.default)({
-            "data-index": index
-          }, thumbProps, {
+        (0, _jsxRuntime.jsx)(ValueLabelComponent, {
+          ...(!(0, _isHostComponent.default)(ValueLabelComponent) && {
+            valueLabelFormat,
+            valueLabelDisplay,
+            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+            index,
+            open: open === index || active === index || valueLabelDisplay === 'on',
+            disabled
+          }),
+          ...valueLabelProps,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, {
+            "data-index": index,
+            ...thumbProps,
             className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: (0, _extends2.default)({}, style, getThumbStyle(index), thumbProps.style),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, (0, _extends2.default)({
+            style: {
+              ...style,
+              ...getThumbStyle(index),
+              ...thumbProps.style
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, {
               "data-index": index,
               "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               "aria-valuenow": scale(value),
               "aria-labelledby": ariaLabelledby,
               "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-              value: values[index]
-            }, inputSliderProps))
-          }))
-        }), index)
+              value: values[index],
+              ...inputSliderProps
+            })
+          })
+        }, index)
       );
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -820,7 +854,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -838,7 +872,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */