@equinor/eds-core-react 0.23.0 → 0.24.0-dev.20221006

package/dist/esm/components/Slider/Slider.js

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
@@ -7,105 +10,99 @@ import { SliderInput } from './SliderInput.js';
 import { bordersTemplate, useId } from '@equinor/eds-utils';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-const {
-  entities: {
-    track,
-    handle,
-    dot
-  }
-} = slider;
-const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
-const fakeTrackBgHover = css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
+var _excluded = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "step", "disabled", "ariaLabelledby", "aria-labelledby"];
+var _tokens$entities = slider.entities,
+    track = _tokens$entities.track,
+    handle = _tokens$entities.handle,
+    dot = _tokens$entities.dot;
+var fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
+var fakeTrackBgHover = css({
+  backgroundImage: "url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='".concat(track.states.hover.background, "' width='100%' height='4' rx='2' /></svg>\")")
 });
-const trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
-const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
-const RangeWrapper = styled.div.withConfig({
+var trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
+var wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
+var RangeWrapper = styled.div.withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], _ref => {
-  let {
-    valA
-  } = _ref;
+})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], function (_ref) {
+  var valA = _ref.valA;
   return valA;
-}, _ref2 => {
-  let {
-    valB
-  } = _ref2;
+}, function (_ref2) {
+  var valB = _ref2.valB;
   return valB;
-}, _ref3 => {
-  let {
-    min
-  } = _ref3;
+}, function (_ref3) {
+  var min = _ref3.min;
   return min;
-}, _ref4 => {
-  let {
-    max
-  } = _ref4;
+}, function (_ref4) {
+  var max = _ref4.max;
   return max;
-}, wrapperGrid, fakeTrackBg, trackFill, _ref5 => {
-  let {
-    disabled
-  } = _ref5;
+}, wrapperGrid, fakeTrackBg, trackFill, function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
 }, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-const Wrapper = styled.div.withConfig({
+var Wrapper = styled.div.withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], _ref6 => {
-  let {
-    min
-  } = _ref6;
+})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], function (_ref6) {
+  var min = _ref6.min;
   return min;
-}, _ref7 => {
-  let {
-    max
-  } = _ref7;
+}, function (_ref7) {
+  var max = _ref7.max;
   return max;
-}, _ref8 => {
-  let {
-    value
-  } = _ref8;
+}, function (_ref8) {
+  var value = _ref8.value;
   return value;
-}, wrapperGrid, fakeTrackBg, trackFill, _ref9 => {
-  let {
-    disabled
-  } = _ref9;
+}, wrapperGrid, fakeTrackBg, trackFill, function (_ref9) {
+  var disabled = _ref9.disabled;
   return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
 }, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-const WrapperGroupLabel = styled.div.withConfig({
+var WrapperGroupLabel = styled.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
 })(["grid-row:1;grid-column:1 / 3;"]);
-const WrapperGroupLabelDots = styled(WrapperGroupLabel).withConfig({
+var WrapperGroupLabelDots = styled(WrapperGroupLabel).withConfig({
   displayName: "Slider__WrapperGroupLabelDots",
   componentId: "sc-n1grrg-3"
 })(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", " bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, bordersTemplate(dot.border), dot.spacings.bottom);
-const SrOnlyLabel = styled.label.withConfig({
+var SrOnlyLabel = styled.label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
-  let {
-    min = 0,
-    max = 100,
-    value = [40, 60],
-    outputFunction,
-    onChange,
-    onChangeCommitted,
-    minMaxDots = true,
-    minMaxValues = true,
-    step = 1,
-    disabled,
-    ariaLabelledby,
-    'aria-labelledby': ariaLabelledbyNative,
-    ...rest
-  } = _ref10;
-  const isRangeSlider = Array.isArray(value);
-  const parsedValue = isRangeSlider ? value : [value];
-  const [initalValue, setInitalValue] = useState(parsedValue);
-  const [sliderValue, setSliderValue] = useState(parsedValue);
-  useEffect(() => {
+var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
+  var _ref10$min = _ref10.min,
+      min = _ref10$min === void 0 ? 0 : _ref10$min,
+      _ref10$max = _ref10.max,
+      max = _ref10$max === void 0 ? 100 : _ref10$max,
+      _ref10$value = _ref10.value,
+      value = _ref10$value === void 0 ? [40, 60] : _ref10$value,
+      outputFunction = _ref10.outputFunction,
+      onChange = _ref10.onChange,
+      onChangeCommitted = _ref10.onChangeCommitted,
+      _ref10$minMaxDots = _ref10.minMaxDots,
+      minMaxDots = _ref10$minMaxDots === void 0 ? true : _ref10$minMaxDots,
+      _ref10$minMaxValues = _ref10.minMaxValues,
+      minMaxValues = _ref10$minMaxValues === void 0 ? true : _ref10$minMaxValues,
+      _ref10$step = _ref10.step,
+      step = _ref10$step === void 0 ? 1 : _ref10$step,
+      disabled = _ref10.disabled,
+      ariaLabelledby = _ref10.ariaLabelledby,
+      ariaLabelledbyNative = _ref10['aria-labelledby'],
+      rest = _objectWithoutProperties(_ref10, _excluded);
+
+  var isRangeSlider = Array.isArray(value);
+  var parsedValue = isRangeSlider ? value : [value];
+
+  var _useState = useState(parsedValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      initalValue = _useState2[0],
+      setInitalValue = _useState2[1];
+
+  var _useState3 = useState(parsedValue),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sliderValue = _useState4[0],
+      setSliderValue = _useState4[1];
+
+  useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
         setInitalValue(value);
@@ -118,20 +115,21 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
       }
     }
   }, [value, initalValue, isRangeSlider]);
-  const minRange = useRef(null);
-  const maxRange = useRef(null);
+  var minRange = useRef(null);
+  var maxRange = useRef(null);
 
-  const onValueChange = (event, valueArrIdx) => {
-    const changedValue = parseFloat(event.target.value);
+  var onValueChange = function onValueChange(event, valueArrIdx) {
+    var changedValue = parseFloat(event.target.value);
 
     if (isRangeSlider) {
-      const newValue = sliderValue.slice();
-      newValue[valueArrIdx] = changedValue;
-      setSliderValue(newValue);
+      var _newValue = sliderValue.slice();
+
+      _newValue[valueArrIdx] = changedValue;
+      setSliderValue(_newValue);
 
       if (onChange) {
         // Callback for provided onChange func
-        onChange(event, newValue);
+        onChange(event, _newValue);
       }
 
       return;
@@ -145,38 +143,38 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     }
   };
 
-  const handleKeyUp = event => {
+  var handleKeyUp = function handleKeyUp(event) {
     if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
       handleCommitedValue(event);
     }
   };
 
-  const handleCommitedValue = event => {
+  var handleCommitedValue = function handleCommitedValue(event) {
     if (onChangeCommitted) {
       onChangeCommitted(event, sliderValue);
     }
   };
 
-  const getFormattedText = text => {
+  var getFormattedText = function getFormattedText(text) {
     return outputFunction ? outputFunction(text) : text;
   };
 
-  const findClosestRange = event => {
-    const target = event.target;
+  var findClosestRange = function findClosestRange(event) {
+    var target = event.target;
 
     if (target.type === 'output') {
       return;
     }
 
-    const bounds = target.getBoundingClientRect();
-    const x = event.clientX - bounds.left;
-    const inputWidth = minRange.current.offsetWidth;
-    const minValue = minRange.current.value;
-    const maxValue = maxRange.current.value;
-    const diff = max - min;
-    const normX = x / inputWidth * diff + min;
-    const maxX = Math.abs(normX - parseFloat(maxValue));
-    const minX = Math.abs(normX - parseFloat(minValue));
+    var bounds = target.getBoundingClientRect();
+    var x = event.clientX - bounds.left;
+    var inputWidth = minRange.current.offsetWidth;
+    var minValue = minRange.current.value;
+    var maxValue = maxRange.current.value;
+    var diff = max - min;
+    var normX = x / inputWidth * diff + min;
+    var maxX = Math.abs(normX - parseFloat(maxValue));
+    var minX = Math.abs(normX - parseFloat(minValue));
 
     if (minX > maxX) {
       minRange.current.style.zIndex = '10';
@@ -187,24 +185,24 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     }
   };
 
-  let inputIdA = useId(null, 'inputA');
-  let inputIdB = useId(null, 'inputB');
-  let inputId = useId(null, 'thumb');
+  var inputIdA = useId(null, 'inputA');
+  var inputIdB = useId(null, 'inputB');
+  var inputId = useId(null, 'thumb');
 
   if (rest['id']) {
-    const overrideId = rest['id'];
-    inputIdA = `${overrideId}-thumb-a`;
-    inputIdB = `${overrideId}-thumb-b`;
-    inputId = `${overrideId}-thumb`;
+    var overrideId = rest['id'];
+    inputIdA = "".concat(overrideId, "-thumb-a");
+    inputIdB = "".concat(overrideId, "-thumb-b");
+    inputId = "".concat(overrideId, "-thumb");
   }
 
-  const getAriaLabelledby = useCallback(() => {
+  var getAriaLabelledby = useCallback(function () {
     if (ariaLabelledbyNative) return ariaLabelledbyNative;
     if (ariaLabelledby) return ariaLabelledby;
     return null;
   }, [ariaLabelledbyNative, ariaLabelledby]);
   return /*#__PURE__*/jsx(Fragment, {
-    children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, { ...rest,
+    children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       role: "group",
       "aria-labelledby": getAriaLabelledby(),
@@ -229,11 +227,15 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
         "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         id: inputIdA,
         step: step,
-        onChange: event => {
+        onChange: function onChange(event) {
           onValueChange(event, 0);
         },
-        onMouseUp: event => handleCommitedValue(event),
-        onKeyUp: event => handleKeyUp(event),
+        onMouseUp: function onMouseUp(event) {
+          return handleCommitedValue(event);
+        },
+        onKeyUp: function onKeyUp(event) {
+          return handleKeyUp(event);
+        },
         disabled: disabled
       }), /*#__PURE__*/jsx(Output, {
         htmlFor: inputIdA,
@@ -256,11 +258,15 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
         id: inputIdB,
         step: step,
         ref: maxRange,
-        onChange: event => {
+        onChange: function onChange(event) {
           onValueChange(event, 1);
         },
-        onMouseUp: event => handleCommitedValue(event),
-        onKeyUp: event => handleKeyUp(event),
+        onMouseUp: function onMouseUp(event) {
+          return handleCommitedValue(event);
+        },
+        onKeyUp: function onKeyUp(event) {
+          return handleKeyUp(event);
+        },
         disabled: disabled
       }), /*#__PURE__*/jsx(Output, {
         htmlFor: inputIdB,
@@ -269,7 +275,7 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
       }), minMaxValues && /*#__PURE__*/jsx(MinMax, {
         children: getFormattedText(max)
       })]
-    }) : /*#__PURE__*/jsxs(Wrapper, { ...rest,
+    })) : /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       max: max,
       min: min,
@@ -286,13 +292,17 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
         "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         step: step,
         id: inputId,
-        onChange: event => {
+        onChange: function onChange(event) {
           onValueChange(event);
         },
         disabled: disabled,
         "aria-labelledby": getAriaLabelledby(),
-        onMouseUp: event => handleCommitedValue(event),
-        onKeyUp: event => handleKeyUp(event)
+        onMouseUp: function onMouseUp(event) {
+          return handleCommitedValue(event);
+        },
+        onKeyUp: function onKeyUp(event) {
+          return handleKeyUp(event);
+        }
       }), /*#__PURE__*/jsx(Output, {
         htmlFor: inputId,
         value: sliderValue[0],
@@ -304,7 +314,7 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
           children: getFormattedText(max)
         })]
       })]
-    })
+    }))
   });
 });
 

package/dist/esm/components/Slider/Slider.tokens.js

@@ -1,54 +1,22 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__light: {
-        rgba: backgroundColor
-      },
-      background__default: {
-        rgba: backgroundColorDefault
-      },
-      background__medium: {
-        rgba: backgroundColorMedium
-      }
-    },
-    interactive: {
-      primary__resting: {
-        rgba: indicatorColor
-      },
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      primary__hover: {
-        rgba: primaryHover
-      },
-      focus: {
-        rgba: focusOutlineColor
-      },
-      disabled__fill: {
-        rgba: backgroundColorDisabled
-      },
-      disabled__border: {
-        rgba: backgroundBorderDisabled
-      }
-    },
-    text: {
-      static_icons__tertiary: {
-        rgba: textColor
-      }
-    }
-  },
-  typography: {
-    paragraph
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  }
-} = tokens;
-const slider = {
+var _tokens$colors = tokens.colors,
+    _tokens$colors$ui = _tokens$colors.ui,
+    backgroundColor = _tokens$colors$ui.background__light.rgba,
+    backgroundColorDefault = _tokens$colors$ui.background__default.rgba,
+    backgroundColorMedium = _tokens$colors$ui.background__medium.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    indicatorColor = _tokens$colors$intera.primary__resting.rgba,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    primaryHover = _tokens$colors$intera.primary__hover.rgba,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    backgroundColorDisabled = _tokens$colors$intera.disabled__fill.rgba,
+    backgroundBorderDisabled = _tokens$colors$intera.disabled__border.rgba,
+    textColor = _tokens$colors.text.static_icons__tertiary.rgba,
+    paragraph = tokens.typography.paragraph,
+    focusOutlineWidth = tokens.interactions.focused.width;
+var slider = {
   background: backgroundColorDefault,
   entities: {
     track: {
@@ -78,9 +46,9 @@ const slider = {
       }
     },
     output: {
-      typography: { ...paragraph.overline,
+      typography: _objectSpread(_objectSpread({}, paragraph.overline), {}, {
         color: textColor
-      }
+      })
     },
     handle: {
       background: backgroundColorDefault,

package/dist/esm/components/Slider/SliderInput.js

@@ -1,59 +1,57 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
 import { bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  entities: {
-    handle
-  },
-  states: {
-    disabled: _disabled
-  }
-} = slider;
-const track = css(["width:100%;height:100%;cursor:pointer;background:none;"]);
-const thumb = css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], bordersTemplate(handle.border), handle.height, handle.width, handle.background);
-const thumbHover = css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle.states.hover.background, handle.states.hover.border.type === 'border' && handle.states.hover.border.color);
-const thumbHoverAndDisabled = css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
-const thumbDisabled = css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.type === 'border' && _disabled.border.color);
-const StyledSliderInput = styled.input.attrs(() => ({
-  type: 'range'
-})).withConfig({
+var _excluded = ["value", "min", "max", "id", "step", "onChange", "onMouseUp", "onKeyUp", "disabled"];
+var handle = slider.entities.handle,
+    _disabled = slider.states.disabled;
+var track = css(["width:100%;height:100%;cursor:pointer;background:none;"]);
+var thumb = css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], bordersTemplate(handle.border), handle.height, handle.width, handle.background);
+var thumbHover = css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle.states.hover.background, handle.states.hover.border.color);
+var thumbHoverAndDisabled = css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
+var thumbDisabled = css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.color);
+var StyledSliderInput = styled.input.attrs(function () {
+  return {
+    type: 'range'
+  };
+}).withConfig({
   displayName: "SliderInput__StyledSliderInput",
   componentId: "sc-17orw4f-0"
 })(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track, track);
-const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref, ref) {
-  let {
-    value,
-    min,
-    max,
-    id,
-    step,
-    onChange,
-    onMouseUp,
-    onKeyUp,
-    disabled,
-    ...restProps
-  } = _ref;
-  return /*#__PURE__*/jsx(StyledSliderInput, { ...restProps,
+var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref, ref) {
+  var value = _ref.value,
+      min = _ref.min,
+      max = _ref.max,
+      id = _ref.id,
+      step = _ref.step,
+      _onChange = _ref.onChange,
+      _onMouseUp = _ref.onMouseUp,
+      _onKeyUp = _ref.onKeyUp,
+      disabled = _ref.disabled,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledSliderInput, _objectSpread(_objectSpread({}, restProps), {}, {
     value: value,
     ref: ref,
     min: min,
     max: max,
     id: id,
     step: step,
-    onChange: event => {
-      onChange(event);
+    onChange: function onChange(event) {
+      _onChange(event);
     },
-    onMouseUp: event => {
-      onMouseUp(event);
+    onMouseUp: function onMouseUp(event) {
+      _onMouseUp(event);
     },
-    onKeyUp: event => {
-      onKeyUp(event);
+    onKeyUp: function onKeyUp(event) {
+      _onKeyUp(event);
     },
     disabled: disabled
-  });
+  }));
 });
 SliderInput.displayName = 'SliderInput';