@mui/material 5.13.1 → 5.13.3

package/modern/Slider/Slider.js

@@ -1,3 +1,6 @@
+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';
@@ -29,7 +32,7 @@ const SliderRoot = styled('span', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   borderRadius: 12,
   boxSizing: 'content-box',
   display: 'inline-block',
@@ -37,39 +40,34 @@ const SliderRoot = styled('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' && _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
+}), {
   '@media print': {
     colorAdjust: 'exact'
   },
@@ -101,27 +99,24 @@ 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 --------------------------------
@@ -145,7 +140,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 {
+  return _extends({
     display: 'block',
     position: 'absolute',
     borderRadius: 'inherit',
@@ -153,28 +148,23 @@ 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 --------------------------------
@@ -199,7 +189,7 @@ const SliderThumb = styled('span', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   position: 'absolute',
   width: 20,
   height: 20,
@@ -212,30 +202,27 @@ 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': {
+  })
+}, 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({
     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: '""',
@@ -280,13 +267,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
@@ -299,40 +286,37 @@ 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: -8,
+    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 --------------------------------
@@ -359,24 +343,21 @@ 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 --------------------------------
@@ -398,28 +379,24 @@ const SliderMarkLabel = styled('span', {
   theme,
   ownerState,
   markLabelActive
-}) => ({
-  ...theme.typography.body2,
+}) => _extends({}, 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 --------------------------------
@@ -470,41 +447,35 @@ 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,
-    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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     isRtl,
     max,
     min,
@@ -520,7 +491,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  };
+  });
   const {
     axisProps,
     getRootProps,
@@ -536,10 +507,9 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     values,
     trackOffset,
     trackLeap
-  } = useSlider({
-    ...ownerState,
+  } = useSlider(_extends({}, ownerState, {
     rootRef: ref
-  });
+  }));
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;
   ownerState.focusedThumbIndex = focusedThumbIndex;
@@ -567,15 +537,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
-    additionalProps: {
-      ...(shouldSpreadAdditionalProps(RootSlot) && {
-        as: component
-      })
-    },
-    ownerState: {
-      ...ownerState,
-      ...rootSlotProps?.ownerState
-    },
+    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
+      as: component
+    }),
+    ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
     className: [classes.root, className]
   });
   const railProps = useSlotProps({
@@ -588,34 +553,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?.ownerState
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
     },
+    ownerState: _extends({}, ownerState, trackSlotProps?.ownerState),
     className: classes.track
   });
   const thumbProps = useSlotProps({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: {
-      ...ownerState,
-      ...thumbSlotProps?.ownerState
-    },
+    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState),
     className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: {
-      ...ownerState,
-      ...valueLabelSlotProps?.ownerState
-    },
+    ownerState: _extends({}, ownerState, valueLabelSlotProps?.ownerState),
     className: classes.valueLabel
   });
   const markProps = useSlotProps({
@@ -636,13 +589,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  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) => {
+  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) => {
       const percent = valueToPercent(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
@@ -652,31 +600,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__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(MarkSlot, {
-          "data-index": index,
-          ...markProps,
-          ...(!isHostComponent(MarkSlot) && {
-            markActive
-          }),
-          style: {
-            ...style,
-            ...markProps.style
-          },
+        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
+          "data-index": index
+        }, markProps, !isHostComponent(MarkSlot) && {
+          markActive
+        }, {
+          style: _extends({}, style, markProps.style),
           className: clsx(markProps.className, markActive && classes.markActive)
-        }), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, {
+        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
           "aria-hidden": true,
-          "data-index": index,
-          ...markLabelProps,
-          ...(!isHostComponent(MarkLabelSlot) && {
-            markLabelActive: markActive
-          }),
-          style: {
-            ...style,
-            ...markLabelProps.style
-          },
+          "data-index": index
+        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: _extends({}, 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);
@@ -685,39 +625,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. */
-        _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,
+        _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, {
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: {
-              ...style,
-              pointerEvents: disableSwap && active !== index ? 'none' : undefined,
-              ...thumbProps.style
-            },
-            children: /*#__PURE__*/_jsx(InputSlot, {
+            style: _extends({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/_jsx(InputSlot, _extends({
               "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 --------------------------------