@mui/material 5.13.1 → 5.13.3

package/node/Slider/Slider.js

@@ -5,6 +5,8 @@ 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"));
@@ -20,6 +22,7 @@ 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", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function Identity(x) {
@@ -37,7 +40,7 @@ const SliderRoot = (0, _styled.default)('span', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   borderRadius: 12,
   boxSizing: 'content-box',
   display: 'inline-block',
@@ -45,39 +48,34 @@ const SliderRoot = (0, _styled.default)('span', {
   cursor: 'pointer',
   touchAction: 'none',
   color: (theme.vars || theme).palette[ownerState.color].main,
-  WebkitTapHighlightColor: 'transparent',
-  ...(ownerState.orientation === 'horizontal' && {
-    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'
-    },
-    ...(ownerState.size === 'small' && {
-      height: 2
-    }),
-    ...(ownerState.marked && {
-      marginBottom: 20
-    })
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    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'
-    },
-    ...(ownerState.size === 'small' && {
-      width: 2
-    }),
-    ...(ownerState.marked && {
-      marginRight: 44
-    })
-  }),
+  WebkitTapHighlightColor: 'transparent'
+}, ownerState.orientation === 'horizontal' && (0, _extends2.default)({
+  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'
+  }
+}, ownerState.size === 'small' && {
+  height: 2
+}, ownerState.marked && {
+  marginBottom: 20
+}), ownerState.orientation === 'vertical' && (0, _extends2.default)({
+  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'
+  }
+}, ownerState.size === 'small' && {
+  width: 2
+}, ownerState.marked && {
+  marginRight: 44
+}), {
   '@media print': {
     colorAdjust: 'exact'
   },
@@ -109,27 +107,24 @@ const SliderRail = (0, _styled.default)('span', {
   overridesResolver: (props, styles) => styles.rail
 })(({
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   display: 'block',
   position: 'absolute',
   borderRadius: 'inherit',
   backgroundColor: 'currentColor',
-  opacity: 0.38,
-  ...(ownerState.orientation === 'horizontal' && {
-    width: '100%',
-    height: 'inherit',
-    top: '50%',
-    transform: 'translateY(-50%)'
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    height: '100%',
-    width: 'inherit',
-    left: '50%',
-    transform: 'translateX(-50%)'
-  }),
-  ...(ownerState.track === 'inverted' && {
-    opacity: 1
-  })
+  opacity: 0.38
+}, ownerState.orientation === 'horizontal' && {
+  width: '100%',
+  height: 'inherit',
+  top: '50%',
+  transform: 'translateY(-50%)'
+}, ownerState.orientation === 'vertical' && {
+  height: '100%',
+  width: 'inherit',
+  left: '50%',
+  transform: 'translateX(-50%)'
+}, ownerState.track === 'inverted' && {
+  opacity: 1
 }));
 exports.SliderRail = SliderRail;
 process.env.NODE_ENV !== "production" ? SliderRail.propTypes /* remove-proptypes */ = {
@@ -153,7 +148,7 @@ const SliderTrack = (0, _styled.default)('span', {
   const color =
   // Same logic as the LinearProgress track color
   theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.5);
-  return {
+  return (0, _extends2.default)({
     display: 'block',
     position: 'absolute',
     borderRadius: 'inherit',
@@ -161,28 +156,23 @@ const SliderTrack = (0, _styled.default)('span', {
     backgroundColor: 'currentColor',
     transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
       duration: theme.transitions.duration.shortest
-    }),
-    ...(ownerState.size === 'small' && {
-      border: 'none'
-    }),
-    ...(ownerState.orientation === 'horizontal' && {
-      height: 'inherit',
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }),
-    ...(ownerState.orientation === 'vertical' && {
-      width: 'inherit',
-      left: '50%',
-      transform: 'translateX(-50%)'
-    }),
-    ...(ownerState.track === false && {
-      display: 'none'
-    }),
-    ...(ownerState.track === 'inverted' && {
-      backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
-      borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
     })
-  };
+  }, ownerState.size === 'small' && {
+    border: 'none'
+  }, ownerState.orientation === 'horizontal' && {
+    height: 'inherit',
+    top: '50%',
+    transform: 'translateY(-50%)'
+  }, ownerState.orientation === 'vertical' && {
+    width: 'inherit',
+    left: '50%',
+    transform: 'translateX(-50%)'
+  }, ownerState.track === false && {
+    display: 'none'
+  }, ownerState.track === 'inverted' && {
+    backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
+    borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
+  });
 });
 exports.SliderTrack = SliderTrack;
 process.env.NODE_ENV !== "production" ? SliderTrack.propTypes /* remove-proptypes */ = {
@@ -207,7 +197,7 @@ const SliderThumb = (0, _styled.default)('span', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   position: 'absolute',
   width: 20,
   height: 20,
@@ -220,30 +210,27 @@ const SliderThumb = (0, _styled.default)('span', {
   justifyContent: 'center',
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
-  }),
-  ...(ownerState.size === 'small' && {
-    width: 12,
-    height: 12
-  }),
-  ...(ownerState.orientation === 'horizontal' && {
-    top: '50%',
-    transform: 'translate(-50%, -50%)'
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    left: '50%',
-    transform: 'translate(-50%, 50%)'
-  }),
-  '&:before': {
+  })
+}, ownerState.size === 'small' && {
+  width: 12,
+  height: 12
+}, ownerState.orientation === 'horizontal' && {
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+}, ownerState.orientation === 'vertical' && {
+  left: '50%',
+  transform: 'translate(-50%, 50%)'
+}, {
+  '&:before': (0, _extends2.default)({
     position: 'absolute',
     content: '""',
     borderRadius: 'inherit',
     width: '100%',
     height: '100%',
-    boxShadow: (theme.vars || theme).shadows[2],
-    ...(ownerState.size === 'small' && {
-      boxShadow: 'none'
-    })
-  },
+    boxShadow: (theme.vars || theme).shadows[2]
+  }, ownerState.size === 'small' && {
+    boxShadow: 'none'
+  }),
   '&::after': {
     position: 'absolute',
     content: '""',
@@ -288,13 +275,13 @@ const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
 })(({
   theme,
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   [`&.${_sliderClasses.default.valueLabelOpen}`]: {
     transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
   },
   zIndex: 1,
-  whiteSpace: 'nowrap',
-  ...theme.typography.body2,
+  whiteSpace: 'nowrap'
+}, theme.typography.body2, {
   fontWeight: 500,
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
@@ -307,40 +294,37 @@ const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  padding: '0.25rem 0.75rem',
-  ...(ownerState.orientation === 'horizontal' && {
-    top: '-10px',
-    transformOrigin: 'bottom center',
-    '&:before': {
-      position: 'absolute',
-      content: '""',
-      width: 8,
-      height: 8,
-      transform: 'translate(-50%, 50%) rotate(45deg)',
-      backgroundColor: 'inherit',
-      bottom: 0,
-      left: '50%'
-    }
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    right: ownerState.size === 'small' ? '20px' : '30px',
-    top: '50%',
-    transformOrigin: 'right center',
-    '&:before': {
-      position: 'absolute',
-      content: '""',
-      width: 8,
-      height: 8,
-      transform: 'translate(-50%, -50%) rotate(45deg)',
-      backgroundColor: 'inherit',
-      right: '-20%',
-      top: '50%'
-    }
-  }),
-  ...(ownerState.size === 'small' && {
-    fontSize: theme.typography.pxToRem(12),
-    padding: '0.25rem 0.5rem'
-  })
+  padding: '0.25rem 0.75rem'
+}, ownerState.orientation === 'horizontal' && {
+  top: '-10px',
+  transformOrigin: 'bottom center',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
+    bottom: 0,
+    left: '50%'
+  }
+}, ownerState.orientation === 'vertical' && {
+  right: ownerState.size === 'small' ? '20px' : '30px',
+  top: '50%',
+  transformOrigin: 'right center',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: 'translate(-50%, -50%) rotate(45deg)',
+    backgroundColor: 'inherit',
+    right: -8,
+    top: '50%'
+  }
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: '0.25rem 0.5rem'
 }));
 exports.SliderValueLabel = StyledSliderValueLabel;
 process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.propTypes /* remove-proptypes */ = {
@@ -367,24 +351,21 @@ const SliderMark = (0, _styled.default)('span', {
   theme,
   ownerState,
   markActive
-}) => ({
+}) => (0, _extends2.default)({
   position: 'absolute',
   width: 2,
   height: 2,
   borderRadius: 1,
-  backgroundColor: 'currentColor',
-  ...(ownerState.orientation === 'horizontal' && {
-    top: '50%',
-    transform: 'translate(-1px, -50%)'
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    left: '50%',
-    transform: 'translate(-50%, 1px)'
-  }),
-  ...(markActive && {
-    backgroundColor: (theme.vars || theme).palette.background.paper,
-    opacity: 0.8
-  })
+  backgroundColor: 'currentColor'
+}, ownerState.orientation === 'horizontal' && {
+  top: '50%',
+  transform: 'translate(-1px, -50%)'
+}, ownerState.orientation === 'vertical' && {
+  left: '50%',
+  transform: 'translate(-50%, 1px)'
+}, markActive && {
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  opacity: 0.8
 }));
 exports.SliderMark = SliderMark;
 process.env.NODE_ENV !== "production" ? SliderMark.propTypes /* remove-proptypes */ = {
@@ -406,28 +387,24 @@ const SliderMarkLabel = (0, _styled.default)('span', {
   theme,
   ownerState,
   markLabelActive
-}) => ({
-  ...theme.typography.body2,
+}) => (0, _extends2.default)({}, theme.typography.body2, {
   color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
-  whiteSpace: 'nowrap',
-  ...(ownerState.orientation === 'horizontal' && {
-    top: 30,
-    transform: 'translateX(-50%)',
-    '@media (pointer: coarse)': {
-      top: 40
-    }
-  }),
-  ...(ownerState.orientation === 'vertical' && {
-    left: 36,
-    transform: 'translateY(50%)',
-    '@media (pointer: coarse)': {
-      left: 44
-    }
-  }),
-  ...(markLabelActive && {
-    color: (theme.vars || theme).palette.text.primary
-  })
+  whiteSpace: 'nowrap'
+}, ownerState.orientation === 'horizontal' && {
+  top: 30,
+  transform: 'translateX(-50%)',
+  '@media (pointer: coarse)': {
+    top: 40
+  }
+}, ownerState.orientation === 'vertical' && {
+  left: 36,
+  transform: 'translateY(50%)',
+  '@media (pointer: coarse)': {
+    left: 44
+  }
+}, markLabelActive && {
+  color: (theme.vars || theme).palette.text.primary
 }));
 exports.SliderMarkLabel = SliderMarkLabel;
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-proptypes */ = {
@@ -479,41 +456,35 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = (0, _useTheme.default)();
   const isRtl = theme.direction === 'rtl';
   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,
-    name,
-    onChange,
-    onChangeCommitted,
-    orientation = 'horizontal',
-    size = 'medium',
-    step = 1,
-    scale = Identity,
-    slotProps,
-    slots,
-    tabIndex,
-    track = 'normal',
-    value: valueProp,
-    valueLabelDisplay = 'off',
-    valueLabelFormat = Identity,
-    ...other
-  } = props;
-  const ownerState = {
-    ...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,
+      orientation = 'horizontal',
+      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, {
     isRtl,
     max,
     min,
@@ -529,7 +500,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  };
+  });
   const {
     axisProps,
     getRootProps,
@@ -545,10 +516,9 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     values,
     trackOffset,
     trackLeap
-  } = (0, _useSlider.default)({
-    ...ownerState,
+  } = (0, _useSlider.default)((0, _extends2.default)({}, ownerState, {
     rootRef: ref
-  });
+  }));
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;
   ownerState.focusedThumbIndex = focusedThumbIndex;
@@ -576,15 +546,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
-    additionalProps: {
-      ...((0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
-        as: component
-      })
-    },
-    ownerState: {
-      ...ownerState,
-      ...(rootSlotProps == null ? void 0 : rootSlotProps.ownerState)
-    },
+    additionalProps: (0, _extends2.default)({}, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
+      as: component
+    }),
+    ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
     className: [classes.root, className]
   });
   const railProps = (0, _base.useSlotProps)({
@@ -597,34 +562,22 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
-      style: {
-        ...axisProps[axis].offset(trackOffset),
-        ...axisProps[axis].leap(trackLeap)
-      }
-    },
-    ownerState: {
-      ...ownerState,
-      ...(trackSlotProps == null ? void 0 : trackSlotProps.ownerState)
+      style: (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
     },
+    ownerState: (0, _extends2.default)({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
     className: classes.track
   });
   const thumbProps = (0, _base.useSlotProps)({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: {
-      ...ownerState,
-      ...(thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
-    },
+    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
     className: classes.thumb
   });
   const valueLabelProps = (0, _base.useSlotProps)({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: {
-      ...ownerState,
-      ...(valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState)
-    },
+    ownerState: (0, _extends2.default)({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
     className: classes.valueLabel
   });
   const markProps = (0, _base.useSlotProps)({
@@ -645,13 +598,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  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) => {
+  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) => {
       const percent = (0, _useSlider.valueToPercent)(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
@@ -661,31 +609,23 @@ 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, {
-          "data-index": index,
-          ...markProps,
-          ...(!(0, _base.isHostComponent)(MarkSlot) && {
-            markActive
-          }),
-          style: {
-            ...style,
-            ...markProps.style
-          },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, (0, _extends2.default)({
+          "data-index": index
+        }, markProps, !(0, _base.isHostComponent)(MarkSlot) && {
+          markActive
+        }, {
+          style: (0, _extends2.default)({}, style, markProps.style),
           className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
-        }), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, {
+        })), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, (0, _extends2.default)({
           "aria-hidden": true,
-          "data-index": index,
-          ...markLabelProps,
-          ...(!(0, _base.isHostComponent)(MarkLabelSlot) && {
-            markLabelActive: markActive
-          }),
-          style: {
-            ...style,
-            ...markLabelProps.style
-          },
+          "data-index": index
+        }, markLabelProps, !(0, _base.isHostComponent)(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: (0, _extends2.default)({}, 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);
@@ -694,39 +634,34 @@ 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, _base.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,
+        (0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _base.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, {
             className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: {
-              ...style,
-              pointerEvents: disableSwap && active !== index ? 'none' : undefined,
-              ...thumbProps.style
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, {
+            style: (0, _extends2.default)({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, (0, _extends2.default)({
               "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 --------------------------------