@mui/material 5.13.0 → 5.13.1

package/Slider/Slider.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -32,7 +29,7 @@ const SliderRoot = styled('span', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   borderRadius: 12,
   boxSizing: 'content-box',
   display: 'inline-block',
@@ -40,34 +37,39 @@ const SliderRoot = styled('span', {
   cursor: 'pointer',
   touchAction: 'none',
   color: (theme.vars || theme).palette[ownerState.color].main,
-  WebkitTapHighlightColor: 'transparent'
-}, ownerState.orientation === 'horizontal' && _extends({
-  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' && _extends({
-  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' && {
+    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
+    })
+  }),
   '@media print': {
     colorAdjust: 'exact'
   },
@@ -99,24 +101,27 @@ const SliderRail = styled('span', {
   overridesResolver: (props, styles) => styles.rail
 })(({
   ownerState
-}) => _extends({
+}) => ({
   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
+  })
 }));
 process.env.NODE_ENV !== "production" ? SliderRail.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -140,7 +145,7 @@ const SliderTrack = styled('span', {
   const color =
   // Same logic as the LinearProgress track color
   theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5);
-  return _extends({
+  return {
     display: 'block',
     position: 'absolute',
     borderRadius: 'inherit',
@@ -148,23 +153,28 @@ const SliderTrack = styled('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
-  });
+  };
 });
 process.env.NODE_ENV !== "production" ? SliderTrack.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -189,7 +199,7 @@ const SliderThumb = styled('span', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   position: 'absolute',
   width: 20,
   height: 20,
@@ -202,27 +212,30 @@ const SliderThumb = styled('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': _extends({
+  }),
+  ...(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': {
     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: '""',
@@ -267,13 +280,13 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   [`&.${sliderClasses.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
@@ -286,37 +299,40 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   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: '-20%',
+      top: '50%'
+    }
+  }),
+  ...(ownerState.size === 'small' && {
+    fontSize: theme.typography.pxToRem(12),
+    padding: '0.25rem 0.5rem'
+  })
 }));
 process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -343,21 +359,24 @@ const SliderMark = styled('span', {
   theme,
   ownerState,
   markActive
-}) => _extends({
+}) => ({
   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
+  })
 }));
 process.env.NODE_ENV !== "production" ? SliderMark.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -379,24 +398,28 @@ const SliderMarkLabel = styled('span', {
   theme,
   ownerState,
   markLabelActive
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...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
+  })
 }));
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -448,35 +471,41 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = useTheme();
   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,
-      orientation = 'horizontal',
-      size = 'medium',
-      step = 1,
-      scale = Identity,
-      slotProps,
-      slots,
-      track = 'normal',
-      valueLabelDisplay = 'off',
-      valueLabelFormat = Identity
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, 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',
+    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,
@@ -492,7 +521,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  });
+  };
   const {
     axisProps,
     getRootProps,
@@ -508,9 +537,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     values,
     trackOffset,
     trackLeap
-  } = useSlider(_extends({}, ownerState, {
+  } = useSlider({
+    ...ownerState,
     rootRef: ref
-  }));
+  });
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;
   ownerState.focusedThumbIndex = focusedThumbIndex;
@@ -538,10 +568,15 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
-    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
-      as: component
-    }),
-    ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    additionalProps: {
+      ...(shouldSpreadAdditionalProps(RootSlot) && {
+        as: component
+      })
+    },
+    ownerState: {
+      ...ownerState,
+      ...(rootSlotProps == null ? void 0 : rootSlotProps.ownerState)
+    },
     className: [classes.root, className]
   });
   const railProps = useSlotProps({
@@ -554,22 +589,34 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
-      style: _extends({}, 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: _extends({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
     className: classes.track
   });
   const thumbProps = useSlotProps({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...(thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    },
     className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: _extends({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...(valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState)
+    },
     className: classes.valueLabel
   });
   const markProps = useSlotProps({
@@ -590,8 +637,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
-    children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [/*#__PURE__*/_jsx(RailSlot, {
+      ...railProps
+    }), /*#__PURE__*/_jsx(TrackSlot, {
+      ...trackProps
+    }), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = valueToPercent(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
@@ -601,23 +653,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__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
-          "data-index": index
-        }, markProps, !isHostComponent(MarkSlot) && {
-          markActive
-        }, {
-          style: _extends({}, style, markProps.style),
+        children: [/*#__PURE__*/_jsx(MarkSlot, {
+          "data-index": index,
+          ...markProps,
+          ...(!isHostComponent(MarkSlot) && {
+            markActive
+          }),
+          style: {
+            ...style,
+            ...markProps.style
+          },
           className: clsx(markProps.className, markActive && classes.markActive)
-        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
+        }), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, {
           "aria-hidden": true,
-          "data-index": index
-        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
-          markLabelActive: markActive
-        }, {
-          style: _extends({}, style, markLabelProps.style),
+          "data-index": index,
+          ...markLabelProps,
+          ...(!isHostComponent(MarkLabelSlot) && {
+            markLabelActive: markActive
+          }),
+          style: {
+            ...style,
+            ...markLabelProps.style
+          },
           className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
           children: mark.label
-        })) : null]
+        }) : null]
       }, index);
     }), values.map((value, index) => {
       const percent = valueToPercent(value, min, max);
@@ -626,34 +686,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. */
-        _jsx(ValueLabelComponent, _extends({}, !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__*/_jsx(ThumbSlot, _extends({
-            "data-index": index
-          }, thumbProps, {
+        _jsx(ValueLabelComponent, {
+          ...(!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__*/_jsx(ThumbSlot, {
+            "data-index": index,
+            ...thumbProps,
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: _extends({}, style, {
-              pointerEvents: disableSwap && active !== index ? 'none' : undefined
-            }, thumbProps.style),
-            children: /*#__PURE__*/_jsx(InputSlot, _extends({
+            style: {
+              ...style,
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined,
+              ...thumbProps.style
+            },
+            children: /*#__PURE__*/_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 --------------------------------