@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.8

package/node/Slider/Slider.js

@@ -6,8 +6,6 @@ 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"));
@@ -24,7 +22,6 @@ 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');
@@ -42,102 +39,96 @@ const SliderRoot = exports.SliderRoot = (0, _zeroStyled.styled)('span', {
   }
 })(({
   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',
@@ -184,7 +175,6 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
 })(({
   theme
 }) => {
-  var _theme$vars3;
   return {
     display: 'block',
     position: 'absolute',
@@ -226,25 +216,26 @@ 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)
+          })
+        })
+      }
     }))]
   };
 });
@@ -259,109 +250,106 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   }
 })(({
   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'
+    },
+    style: {
+      width: 12,
+      height: 12,
+      '&::before': {
+        boxShadow: 'none'
+      }
+    }
+  }, {
+    props: {
+      orientation: 'horizontal'
     },
-    '&::after': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: '50%',
-      // 42px is the hit target
-      width: 42,
-      height: 42,
+    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 ? {
+        '@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
 })(({
   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
@@ -488,7 +476,8 @@ const SliderMarkLabel = exports.SliderMarkLabel = (0, _zeroStyled.styled)('span'
   overridesResolver: (props, styles) => styles.markLabel
 })(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap',
@@ -561,36 +550,42 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   });
   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 +602,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  });
+  };
   const {
     axisProps,
     getRootProps,
@@ -624,9 +619,10 @@ 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;
@@ -654,10 +650,15 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     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 == null ? void 0 : rootSlotProps.ownerState)
+    },
     className: [classes.root, className]
   });
   const railProps = (0, _utils.useSlotProps)({
@@ -670,22 +671,34 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     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 == null ? void 0 : trackSlotProps.ownerState)
     },
-    ownerState: (0, _extends2.default)({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
     className: classes.track
   });
   const thumbProps = (0, _utils.useSlotProps)({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...(thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    },
     className: classes.thumb
   });
   const valueLabelProps = (0, _utils.useSlotProps)({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: (0, _extends2.default)({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...(valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState)
+    },
     className: classes.valueLabel
   });
   const markProps = (0, _utils.useSlotProps)({
@@ -706,8 +719,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     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;
@@ -717,23 +735,31 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
         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, _utils.isHostComponent)(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, _utils.isHostComponent)(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 +768,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, _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, {
+            "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 ──────────────────────────────┐