@basic-ui/core 0.0.53 → 0.0.56

package/build/esm/Slider/Slider.js

@@ -1,15 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["children"],
-    _excluded2 = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "innerAs", "defaultValue", "disabled", "value", "getAriaLabel", "getAriaValueText", "handleAlignment", "max", "min", "name", "onChange", "onKeyDown", "onMouseDown", "onMouseMove", "onMouseUp", "onPointerDown", "onPointerUp", "onTouchEnd", "onTouchMove", "onTouchStart", "orientation", "step", "children"],
-    _excluded3 = ["ref"],
-    _excluded4 = ["as", "innerAs", "children", "style"],
-    _excluded5 = ["as", "innerAs", "children", "style"],
-    _excluded6 = ["as", "innerAs", "onBlur", "onFocus", "style", "onKeyDown"],
-    _excluded7 = ["as", "innerAs", "children", "style", "value"];
-
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
 /**
@@ -33,6 +21,7 @@ var _excluded = ["children"],
  * @see Example  https://github.com/Stanko/aria-progress-range-slider
  * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
  */
+
 import { forwardRef, memo, useRef, useState, useCallback, useEffect, useLayoutEffect, useId } from 'react';
 import { createContext } from '../utils/context';
 import { isRightClick } from '../utils/is-right-click';
@@ -40,37 +29,34 @@ import { getOwnerDocument } from '../utils/owner-document';
 import { useStableLayoutCallback } from '../utils/use-stable-callback';
 import { assignMultipleRefs, wrapEvent } from '../utils';
 import { useControlledState } from '../hooks';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-var noop = function noop() {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noop = () => {
   /* noop */
 };
+const [SliderProvider, useSliderContext] = createContext('Slider');
 
-var _createContext = createContext('Slider'),
-    _createContext2 = _slicedToArray(_createContext, 2),
-    SliderProvider = _createContext2[0],
-    useSliderContext = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Slider
  *
  * @see Docs https://reach.tech/slider#slider
  */
-
-
-var Slider = /*#__PURE__*/forwardRef(function Slider(_ref, forwardedRef) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_jsx(SliderInput, _extends(_extends({}, props), {}, {
+const Slider = /*#__PURE__*/forwardRef(function Slider(_ref, forwardedRef) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(SliderInput, {
+    ...props,
     ref: forwardedRef,
     "data-reach-slider": "",
     children: /*#__PURE__*/_jsxs(SliderTrack, {
       children: [/*#__PURE__*/_jsx(SliderRange, {}), /*#__PURE__*/_jsx(SliderHandle, {}), children]
     })
-  }));
+  });
 });
+
 /**
  * @see Docs https://reach.tech/slider#slider-props
  */
@@ -86,100 +72,82 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref, forwardedRef) {
  *
  * @see Docs https://reach.tech/slider#sliderinput
  */
-var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedRef) {
-  var ariaLabel = _ref2['aria-label'],
-      ariaLabelledBy = _ref2['aria-labelledby'],
-      ariaValueTextProp = _ref2['aria-valuetext'],
-      _ref2$as = _ref2.as,
-      Comp = _ref2$as === void 0 ? 'div' : _ref2$as,
-      innerAs = _ref2.innerAs,
-      defaultValue = _ref2.defaultValue,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      controlledValue = _ref2.value,
-      getAriaLabel = _ref2.getAriaLabel,
-      getAriaValueText = _ref2.getAriaValueText,
-      _ref2$handleAlignment = _ref2.handleAlignment,
-      handleAlignment = _ref2$handleAlignment === void 0 ? 'center' : _ref2$handleAlignment,
-      _ref2$max = _ref2.max,
-      max = _ref2$max === void 0 ? 100 : _ref2$max,
-      _ref2$min = _ref2.min,
-      min = _ref2$min === void 0 ? 0 : _ref2$min,
-      name = _ref2.name,
-      onChangeProp = _ref2.onChange,
-      onKeyDown = _ref2.onKeyDown,
-      onMouseDown = _ref2.onMouseDown,
-      onMouseMove = _ref2.onMouseMove,
-      onMouseUp = _ref2.onMouseUp,
-      onPointerDown = _ref2.onPointerDown,
-      onPointerUp = _ref2.onPointerUp,
-      onTouchEnd = _ref2.onTouchEnd,
-      onTouchMove = _ref2.onTouchMove,
-      onTouchStart = _ref2.onTouchStart,
-      _ref2$orientation = _ref2.orientation,
-      orientation = _ref2$orientation === void 0 ? 'horizontal' : _ref2$orientation,
-      _ref2$step = _ref2.step,
-      step = _ref2$step === void 0 ? 1 : _ref2$step,
-      children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
-  var touchId = useRef();
-  var fallbackId = useId();
-  var id = rest.id || fallbackId; // Track whether or not the pointer is down without updating the component
-
-  var pointerDownRef = useRef(false);
-  var trackRef = useRef(null);
-  var handleRef = useRef(null);
-  var sliderRef = useRef(null);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasFocus = _useState2[0],
-      setHasFocus = _useState2[1];
-
-  var _useDimensions = useDimensions(handleRef),
-      x = _useDimensions.ref,
-      handleDimensions = _objectWithoutProperties(_useDimensions, _excluded3);
-
-  var _useControlledState = useControlledState(controlledValue, onChangeProp, defaultValue || min, function (setValue) {
-    return function (e, v) {
-      return setValue(v);
-    };
-  }),
-      _useControlledState2 = _slicedToArray(_useControlledState, 2),
-      _value = _useControlledState2[0],
-      onChange = _useControlledState2[1];
-
-  var value = clamp(_value, min, max);
-  var trackPercent = valueToPercent(value, min, max);
-  var isVertical = orientation === 'vertical';
-  var handleSize = isVertical ? handleDimensions.height : handleDimensions.width; // TODO: Consider removing the `handleAlignment` prop
+const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedRef) {
+  let {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-valuetext': ariaValueTextProp,
+    as: Comp = 'div',
+    innerAs,
+    defaultValue,
+    disabled = false,
+    value: controlledValue,
+    getAriaLabel,
+    getAriaValueText,
+    handleAlignment = 'center',
+    max = 100,
+    min = 0,
+    name,
+    onChange: onChangeProp,
+    onKeyDown,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onPointerDown,
+    onPointerUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    orientation = 'horizontal',
+    step = 1,
+    children,
+    ...rest
+  } = _ref2;
+  const touchId = useRef(undefined);
+  const fallbackId = useId();
+  const id = rest.id || fallbackId;
+
+  // Track whether or not the pointer is down without updating the component
+  const pointerDownRef = useRef(false);
+  const trackRef = useRef(null);
+  const handleRef = useRef(null);
+  const sliderRef = useRef(null);
+  const [hasFocus, setHasFocus] = useState(false);
+  const {
+    ref: x,
+    ...handleDimensions
+  } = useDimensions(handleRef);
+  const [_value, onChange] = useControlledState(controlledValue, onChangeProp, defaultValue || min, setValue => (e, v) => setValue(v));
+  const value = clamp(_value, min, max);
+  const trackPercent = valueToPercent(value, min, max);
+  const isVertical = orientation === 'vertical';
+  const handleSize = isVertical ? handleDimensions.height : handleDimensions.width;
+
+  // TODO: Consider removing the `handleAlignment` prop
   // We may want to use accept a `handlePosition` prop instead and let apps
   // define their own positioning logic, similar to how we do for popovers.
-
-  var handlePosition = "calc(".concat(trackPercent, "% - ").concat(handleAlignment === 'center' ? "".concat(handleSize, "px / 2") : "".concat(handleSize, "px * ").concat(trackPercent * 0.01), ")");
-  var handlePositionRef = useRef(handlePosition);
-  useLayoutEffect(function () {
+  const handlePosition = `calc(${trackPercent}% - ${handleAlignment === 'center' ? `${handleSize}px / 2` : `${handleSize}px * ${trackPercent * 0.01}`})`;
+  const handlePositionRef = useRef(handlePosition);
+  useLayoutEffect(() => {
     handlePositionRef.current = handlePosition;
   }, [handlePosition]);
-  var getNewValueFromEvent = useCallback(function (event) {
+  const getNewValueFromEvent = useCallback(event => {
     return getNewValue(getPointerPosition(event, touchId), trackRef.current, {
-      step: step,
-      orientation: orientation,
-      min: min,
-      max: max
+      step,
+      orientation,
+      min,
+      max
     });
-  }, [max, min, orientation, step]); // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
+  }, [max, min, orientation, step]);
 
-  var handleKeyDown = useStableLayoutCallback(function (event) {
+  // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
+  const handleKeyDown = useStableLayoutCallback(event => {
     if (disabled) {
       return;
     }
-
-    var newValue;
-    var tenSteps = (max - min) / 10;
-    var keyStep = step || (max - min) / 100;
-
+    let newValue;
+    const tenSteps = (max - min) / 10;
+    const keyStep = step || (max - min) / 100;
     switch (event.key) {
       // Decrease the value of the slider by one step.
       case 'ArrowLeft':
@@ -187,66 +155,61 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
         newValue = value - keyStep;
         break;
       // Increase the value of the slider by one step
-
       case 'ArrowRight':
       case 'ArrowUp':
         newValue = value + keyStep;
         break;
       // Decrement the slider by an amount larger than the step change made by
       // `ArrowDown`.
-
       case 'PageDown':
         newValue = value - tenSteps;
         break;
       // Increment the slider by an amount larger than the step change made by
       // `ArrowUp`.
-
       case 'PageUp':
         newValue = value + tenSteps;
         break;
       // Set the slider to the first allowed value in its range.
-
       case 'Home':
         newValue = min;
         break;
       // Set the slider to the last allowed value in its range.
-
       case 'End':
         newValue = max;
         break;
-
       default:
         return;
     }
-
     newValue = clamp(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
     onChange(event, newValue);
   });
-  var ariaValueText = getAriaValueText ? getAriaValueText(value) : ariaValueTextProp;
+  const ariaValueText = getAriaValueText ? getAriaValueText(value) : ariaValueTextProp;
+  const rangeStyle = {
+    [isVertical ? 'height' : 'width']: `${trackPercent}%`
+  };
 
-  var rangeStyle = _defineProperty({}, isVertical ? 'height' : 'width', "".concat(trackPercent, "%")); // Slide events!
+  // Slide events!
   // We will try to use pointer events if they are supported to leverage
   // setPointerCapture and releasePointerCapture. We'll fall back to separate
   // mouse and touch events.
   // TODO: This could be more concise
+  const removeMoveEvents = useRef(noop);
+  const removeStartEvents = useRef(noop);
+  const removeEndEvents = useRef(noop);
 
-
-  var removeMoveEvents = useRef(noop);
-  var removeStartEvents = useRef(noop);
-  var removeEndEvents = useRef(noop); // Store our event handlers in refs so we aren't attaching/detaching events
+  // Store our event handlers in refs so we aren't attaching/detaching events
   // on every render if the user doesn't useCallback
-
-  var appEvents = useRef({
-    onMouseMove: onMouseMove,
-    onMouseDown: onMouseDown,
-    onMouseUp: onMouseUp,
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd,
-    onTouchMove: onTouchMove,
-    onPointerDown: onPointerDown,
-    onPointerUp: onPointerUp
+  const appEvents = useRef({
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    onPointerDown,
+    onPointerUp
   });
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     appEvents.current.onMouseMove = onMouseMove;
     appEvents.current.onMouseDown = onMouseDown;
     appEvents.current.onMouseUp = onMouseUp;
@@ -256,171 +219,135 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
     appEvents.current.onPointerDown = onPointerDown;
     appEvents.current.onPointerUp = onPointerUp;
   }, [onMouseMove, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchMove, onPointerDown, onPointerUp]);
-  var handleSlideStart = useStableLayoutCallback(function (event) {
+  const handleSlideStart = useStableLayoutCallback(event => {
     if (isRightClick(event)) return;
-
     if (disabled) {
       pointerDownRef.current = false;
       return;
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
-    var ownerDocument = getOwnerDocument(sliderRef.current);
-    var ownerWindow = ownerDocument.defaultView || window;
+    }
+    const ownerDocument = getOwnerDocument(sliderRef.current);
+    const ownerWindow = ownerDocument.defaultView || window;
     pointerDownRef.current = true;
-
     if (event.changedTouches) {
-      var _changedTouches;
-
       // Prevent scrolling for touch events
       event.preventDefault();
-      var touch = (_changedTouches = event.changedTouches) === null || _changedTouches === void 0 ? void 0 : _changedTouches[0];
-
+      const touch = event.changedTouches?.[0];
       if (touch != null) {
         touchId.current = touch.identifier;
       }
     }
-
-    var newValue = getNewValueFromEvent(event);
-
+    const newValue = getNewValueFromEvent(event);
     if (newValue == null) {
       return;
     }
-
-    ownerWindow.requestAnimationFrame(function () {
-      var _handleRef$current;
-
-      return (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.focus();
-    });
+    ownerWindow.requestAnimationFrame(() => handleRef.current?.focus());
     onChange(event, newValue);
     removeMoveEvents.current = addMoveListener();
     removeEndEvents.current = addEndListener();
   });
-  var setPointerCapture = useStableLayoutCallback(function (event) {
-    var _sliderRef$current;
-
+  const setPointerCapture = useStableLayoutCallback(event => {
     if (isRightClick(event)) return;
-
     if (disabled) {
       pointerDownRef.current = false;
       return;
     }
-
     pointerDownRef.current = true;
-    (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.setPointerCapture(event.pointerId);
+    sliderRef.current?.setPointerCapture(event.pointerId);
   });
-  var releasePointerCapture = useStableLayoutCallback(function (event) {
-    var _sliderRef$current2;
-
+  const releasePointerCapture = useStableLayoutCallback(event => {
     if (isRightClick(event)) return;
-    (_sliderRef$current2 = sliderRef.current) === null || _sliderRef$current2 === void 0 ? void 0 : _sliderRef$current2.releasePointerCapture(event.pointerId);
+    sliderRef.current?.releasePointerCapture(event.pointerId);
     pointerDownRef.current = false;
   });
-  var handlePointerMove = useStableLayoutCallback(function (event) {
+  const handlePointerMove = useStableLayoutCallback(event => {
     if (disabled || !pointerDownRef.current) {
       pointerDownRef.current = false;
       return;
     }
-
-    var newValue = getNewValueFromEvent(event);
-
+    const newValue = getNewValueFromEvent(event);
     if (newValue == null) {
       return;
     }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+    onChange?.(event, newValue);
   });
-  var handleSlideStop = useStableLayoutCallback(function (event) {
+  const handleSlideStop = useStableLayoutCallback(event => {
     if (isRightClick(event)) return;
     pointerDownRef.current = false;
-    var newValue = getNewValueFromEvent(event);
-
+    const newValue = getNewValueFromEvent(event);
     if (newValue == null) {
       return;
     }
-
     touchId.current = undefined;
     removeMoveEvents.current();
     removeEndEvents.current();
   });
-  var addMoveListener = useCallback(function () {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var ownerDocument = getOwnerDocument(sliderRef.current);
-    var touchListener = wrapEvent(appEvents.current.onTouchMove, handlePointerMove);
-    var mouseListener = wrapEvent(appEvents.current.onMouseMove, handlePointerMove);
+  const addMoveListener = useCallback(() => {
+    const ownerDocument = getOwnerDocument(sliderRef.current);
+    const touchListener = wrapEvent(appEvents.current.onTouchMove, handlePointerMove);
+    const mouseListener = wrapEvent(appEvents.current.onMouseMove, handlePointerMove);
     ownerDocument.addEventListener('touchmove', touchListener);
     ownerDocument.addEventListener('mousemove', mouseListener);
-    return function () {
+    return () => {
       ownerDocument.removeEventListener('touchmove', touchListener);
       ownerDocument.removeEventListener('mousemove', mouseListener);
     };
   }, [handlePointerMove]);
-  var addEndListener = useCallback(function () {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var ownerDocument = getOwnerDocument(sliderRef.current);
-    var ownerWindow = ownerDocument.defaultView || window;
-    var pointerListener = wrapEvent(appEvents.current.onPointerUp, releasePointerCapture);
-    var touchListener = wrapEvent(appEvents.current.onTouchEnd, handleSlideStop);
-    var mouseListener = wrapEvent(appEvents.current.onMouseUp, handleSlideStop);
-
+  const addEndListener = useCallback(() => {
+    const ownerDocument = getOwnerDocument(sliderRef.current);
+    const ownerWindow = ownerDocument.defaultView || window;
+    const pointerListener = wrapEvent(appEvents.current.onPointerUp, releasePointerCapture);
+    const touchListener = wrapEvent(appEvents.current.onTouchEnd, handleSlideStop);
+    const mouseListener = wrapEvent(appEvents.current.onMouseUp, handleSlideStop);
     if ('PointerEvent' in ownerWindow) {
       ownerDocument.addEventListener('pointerup', pointerListener);
     }
-
     ownerDocument.addEventListener('touchend', touchListener);
     ownerDocument.addEventListener('mouseup', mouseListener);
-    return function () {
+    return () => {
       if ('PointerEvent' in ownerWindow) {
         ownerDocument.removeEventListener('pointerup', pointerListener);
       }
-
       ownerDocument.removeEventListener('touchend', touchListener);
       ownerDocument.removeEventListener('mouseup', mouseListener);
     };
   }, [handleSlideStop, releasePointerCapture]);
-  var addStartListener = useCallback(function () {
+  const addStartListener = useCallback(() => {
     // e.preventDefault is ignored by React's synthetic touchStart event, so
     // we attach the listener directly to the DOM node
     // https://github.com/facebook/react/issues/9809#issuecomment-413978405
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var sliderElement = sliderRef.current;
 
+    const sliderElement = sliderRef.current;
     if (!sliderElement) {
       return noop;
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
-    var ownerDocument = getOwnerDocument(sliderElement);
-    var ownerWindow = ownerDocument.defaultView || window;
-    var touchListener = wrapEvent(appEvents.current.onTouchStart, handleSlideStart);
-    var mouseListener = wrapEvent(appEvents.current.onMouseDown, handleSlideStart);
-    var pointerListener = wrapEvent(appEvents.current.onPointerDown, setPointerCapture);
+    }
+    const ownerDocument = getOwnerDocument(sliderElement);
+    const ownerWindow = ownerDocument.defaultView || window;
+    const touchListener = wrapEvent(appEvents.current.onTouchStart, handleSlideStart);
+    const mouseListener = wrapEvent(appEvents.current.onMouseDown, handleSlideStart);
+    const pointerListener = wrapEvent(appEvents.current.onPointerDown, setPointerCapture);
     sliderElement.addEventListener('touchstart', touchListener);
     sliderElement.addEventListener('mousedown', mouseListener);
-
     if ('PointerEvent' in ownerWindow) {
       sliderElement.addEventListener('pointerdown', pointerListener);
     }
-
-    return function () {
+    return () => {
       sliderElement.removeEventListener('touchstart', touchListener);
       sliderElement.removeEventListener('mousedown', mouseListener);
-
       if ('PointerEvent' in ownerWindow) {
         sliderElement.removeEventListener('pointerdown', pointerListener);
       }
     };
   }, [setPointerCapture, handleSlideStart]);
-  useEffect(function () {
+  useEffect(() => {
     removeStartEvents.current = addStartListener();
-    return function () {
+    return () => {
       removeStartEvents.current();
       removeEndEvents.current();
       removeMoveEvents.current();
     };
   }, [addStartListener]);
-  var inputFallbackId = useId();
-  var inputId = id || inputFallbackId;
+  const inputFallbackId = useId();
+  const inputId = id || inputFallbackId;
   return /*#__PURE__*/_jsx(SliderProvider, {
     ariaLabel: getAriaLabel ? getAriaLabel(value) : ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
@@ -443,7 +370,8 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
     trackRef: trackRef,
     rangeStyle: rangeStyle,
     updateValue: onChange,
-    children: /*#__PURE__*/_jsxs(Comp, _extends(_extends({}, rest), {}, {
+    children: /*#__PURE__*/_jsxs(Comp, {
+      ...rest,
       // @ts-ignore
       as: innerAs,
       ref: assignMultipleRefs(sliderRef, forwardedRef),
@@ -452,12 +380,12 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
       "data-orientation": orientation,
       tabIndex: -1,
       children: [typeof children === 'function' ? children({
-        hasFocus: hasFocus,
-        id: id,
-        max: max,
-        min: min,
-        value: value,
-        ariaValueText: ariaValueText
+        hasFocus,
+        id,
+        max,
+        min,
+        value,
+        ariaValueText
       }) : children, name &&
       /*#__PURE__*/
       // If the slider is used in a form we'll need an input field to
@@ -470,9 +398,10 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
         name: name,
         id: inputId
       })]
-    }))
+    })
   });
 });
+
 /**
  * @see Docs https://reach.tech/slider#sliderinput-props
  */
@@ -484,35 +413,37 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
  *
  * @see Docs https://reach.tech/slider#slidertrack
  */
-var SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwardedRef) {
-  var _ref3$as = _ref3.as,
-      Comp = _ref3$as === void 0 ? 'div' : _ref3$as,
-      innerAs = _ref3.innerAs,
-      children = _ref3.children,
-      _ref3$style = _ref3.style,
-      style = _ref3$style === void 0 ? {} : _ref3$style,
-      props = _objectWithoutProperties(_ref3, _excluded4);
-
-  var _useSliderContext = useSliderContext('SliderTrack'),
-      disabled = _useSliderContext.disabled,
-      orientation = _useSliderContext.orientation,
-      trackRef = _useSliderContext.trackRef;
-
-  return /*#__PURE__*/_jsx(Comp, _extends(_extends({
-    ref: assignMultipleRefs(trackRef, forwardedRef) // @ts-ignore
+const SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwardedRef) {
+  let {
+    as: Comp = 'div',
+    innerAs,
+    children,
+    style = {},
+    ...props
+  } = _ref3;
+  const {
+    disabled,
+    orientation,
+    trackRef
+  } = useSliderContext('SliderTrack');
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: assignMultipleRefs(trackRef, forwardedRef)
+    // @ts-ignore
     ,
     as: innerAs,
-    style: _extends(_extends({}, style), {}, {
+    style: {
+      ...style,
       position: 'relative'
-    })
-  }, props), {}, {
+    },
+    ...props,
     "data-reach-slider-track": "",
     "data-disabled": disabled ? '' : undefined,
     "data-orientation": orientation,
     children: children
-  }));
+  });
 });
-var SliderTrack = /*#__PURE__*/memo(SliderTrackImpl);
+const SliderTrack = /*#__PURE__*/memo(SliderTrackImpl);
+
 /**
  * @see Docs https://reach.tech/slider#slidertrack-props
  */
@@ -527,41 +458,43 @@ var SliderTrack = /*#__PURE__*/memo(SliderTrackImpl);
  *
  * @see Docs https://reach.tech/slider#sliderrange
  */
-var SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forwardedRef) {
-  var _ref4$as = _ref4.as,
-      Comp = _ref4$as === void 0 ? 'div' : _ref4$as,
-      innerAs = _ref4.innerAs,
-      children = _ref4.children,
-      _ref4$style = _ref4.style,
-      style = _ref4$style === void 0 ? {} : _ref4$style,
-      props = _objectWithoutProperties(_ref4, _excluded5);
-
-  var _useSliderContext2 = useSliderContext('SliderRange'),
-      disabled = _useSliderContext2.disabled,
-      orientation = _useSliderContext2.orientation,
-      rangeStyle = _useSliderContext2.rangeStyle;
-
-  return /*#__PURE__*/_jsx(Comp, _extends(_extends({
-    ref: forwardedRef // @ts-ignore
+const SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forwardedRef) {
+  let {
+    as: Comp = 'div',
+    innerAs,
+    children,
+    style = {},
+    ...props
+  } = _ref4;
+  const {
+    disabled,
+    orientation,
+    rangeStyle
+  } = useSliderContext('SliderRange');
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: forwardedRef
+    // @ts-ignore
     ,
     as: innerAs,
-    style: _extends(_extends({
-      position: 'absolute'
-    }, rangeStyle), style)
-  }, props), {}, {
+    style: {
+      position: 'absolute',
+      ...rangeStyle,
+      ...style
+    },
+    ...props,
     "data-reach-slider-range": "",
     "data-disabled": disabled ? '' : undefined,
     "data-orientation": orientation
-  }));
+  });
 });
-var SliderRange = /*#__PURE__*/memo(SliderRangeImpl);
+const SliderRange = /*#__PURE__*/memo(SliderRangeImpl);
+
 /**
  * `SliderRange` accepts any props that a HTML div component accepts.
  * `SliderRange` will not accept or render any children.
  *
  * @see Docs https://reach.tech/slider#sliderrange-props
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -572,96 +505,107 @@ var SliderRange = /*#__PURE__*/memo(SliderRangeImpl);
  *
  * @see Docs https://reach.tech/slider#sliderhandle
  */
-var SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, forwardedRef) {
-  var _ref5$as = _ref5.as,
-      Comp = _ref5$as === void 0 ? 'div' : _ref5$as,
-      innerAs = _ref5.innerAs,
-      onBlur = _ref5.onBlur,
-      onFocus = _ref5.onFocus,
-      _ref5$style = _ref5.style,
-      style = _ref5$style === void 0 ? {} : _ref5$style,
-      onKeyDown = _ref5.onKeyDown,
-      props = _objectWithoutProperties(_ref5, _excluded6);
-
-  var _useSliderContext3 = useSliderContext('SliderHandle'),
-      ariaLabel = _useSliderContext3.ariaLabel,
-      ariaLabelledBy = _useSliderContext3.ariaLabelledBy,
-      ariaValueText = _useSliderContext3.ariaValueText,
-      disabled = _useSliderContext3.disabled,
-      handlePosition = _useSliderContext3.handlePosition,
-      handleRef = _useSliderContext3.handleRef,
-      isVertical = _useSliderContext3.isVertical,
-      handleKeyDown = _useSliderContext3.handleKeyDown,
-      orientation = _useSliderContext3.orientation,
-      setHasFocus = _useSliderContext3.setHasFocus,
-      sliderMin = _useSliderContext3.sliderMin,
-      sliderMax = _useSliderContext3.sliderMax,
-      value = _useSliderContext3.value;
-
-  return /*#__PURE__*/_jsx(Comp // @ts-ignore
-  , _extends(_extends({
+const SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, forwardedRef) {
+  let {
+    // min,
+    // max,
+    as: Comp = 'div',
+    innerAs,
+    onBlur,
+    onFocus,
+    style = {},
+    onKeyDown,
+    ...props
+  } = _ref5;
+  const {
+    ariaLabel,
+    ariaLabelledBy,
+    ariaValueText,
+    disabled,
+    handlePosition,
+    handleRef,
+    isVertical,
+    handleKeyDown,
+    orientation,
+    setHasFocus,
+    sliderMin,
+    sliderMax,
+    value
+  } = useSliderContext('SliderHandle');
+  return /*#__PURE__*/_jsx(Comp
+  // @ts-ignore
+  , {
     as: innerAs,
-    "aria-disabled": disabled || undefined // If the slider has a visible label, it is referenced by
+    "aria-disabled": disabled || undefined
+    // If the slider has a visible label, it is referenced by
     // `aria-labelledby` on the slider element. Otherwise, the slider
     // element has a label provided by `aria-label`.
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy // If the slider is vertically oriented, it has `aria-orientation` set
+    "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy
+    // If the slider is vertically oriented, it has `aria-orientation` set
     // to vertical. The default value of `aria-orientation` for a slider is
     // horizontal.
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
-    "aria-orientation": orientation // The slider element has the `aria-valuemax` property set to a decimal
+    "aria-orientation": orientation
+    // The slider element has the `aria-valuemax` property set to a decimal
     // value representing the maximum allowed value of the slider.
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
-    "aria-valuemax": sliderMax // The slider element has the `aria-valuemin` property set to a decimal
+    "aria-valuemax": sliderMax
+    // The slider element has the `aria-valuemin` property set to a decimal
     // value representing the minimum allowed value of the slider.
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
-    "aria-valuemin": sliderMin // The slider element has the `aria-valuenow` property set to a decimal
+    "aria-valuemin": sliderMin
+    // The slider element has the `aria-valuenow` property set to a decimal
     // value representing the current value of the slider.
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
-    "aria-valuenow": value // If the value of `aria-valuenow` is not user-friendly, e.g., the day
+    "aria-valuenow": value
+    // If the value of `aria-valuenow` is not user-friendly, e.g., the day
     // of the week is represented by a number, the `aria-valuetext` property
     // is set to a string that makes the slider value understandable, e.g.,
     // "Monday".
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
-    "aria-valuetext": ariaValueText // The element serving as the focusable slider control has role
+    "aria-valuetext": ariaValueText
+    // The element serving as the focusable slider control has role
     // `slider`.
     // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
     ,
     role: "slider",
-    tabIndex: disabled ? -1 : 0
-  }, props), {}, {
+    tabIndex: disabled ? -1 : 0,
+    ...props,
     "data-reach-slider-handle": "",
     ref: assignMultipleRefs(handleRef, forwardedRef),
-    onBlur: wrapEvent(onBlur, function () {
+    onBlur: wrapEvent(onBlur, () => {
       setHasFocus(false);
     }),
-    onFocus: wrapEvent(onFocus, function () {
+    onFocus: wrapEvent(onFocus, () => {
       setHasFocus(true);
     }),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    style: _extends(_extends({
-      position: 'absolute'
-    }, isVertical ? {
-      bottom: handlePosition
-    } : {
-      left: handlePosition
-    }), style)
-  }));
+    style: {
+      position: 'absolute',
+      ...(isVertical ? {
+        bottom: handlePosition
+      } : {
+        left: handlePosition
+      }),
+      ...style
+    }
+  });
 });
-var SliderHandle = /*#__PURE__*/memo(SliderHandleImpl);
+const SliderHandle = /*#__PURE__*/memo(SliderHandleImpl);
+
 /**
  * `SliderRange` accepts any props that a HTML div component accepts.
  *
  * @see Docs https://reach.tech/slider#sliderhandle-props
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -673,56 +617,61 @@ var SliderHandle = /*#__PURE__*/memo(SliderHandleImpl);
  *
  * @see Docs https://reach.tech/slider#slidermarker
  */
-var SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, forwardedRef) {
-  var _ref6$as = _ref6.as,
-      Comp = _ref6$as === void 0 ? 'div' : _ref6$as,
-      innerAs = _ref6.innerAs,
-      children = _ref6.children,
-      _ref6$style = _ref6.style,
-      style = _ref6$style === void 0 ? {} : _ref6$style,
-      value = _ref6.value,
-      props = _objectWithoutProperties(_ref6, _excluded7);
-
-  var _useSliderContext4 = useSliderContext('SliderMarker'),
-      disabled = _useSliderContext4.disabled,
-      isVertical = _useSliderContext4.isVertical,
-      orientation = _useSliderContext4.orientation,
-      sliderMin = _useSliderContext4.sliderMin,
-      sliderMax = _useSliderContext4.sliderMax,
-      sliderValue = _useSliderContext4.value;
-
-  var inRange = value >= sliderMin && value <= sliderMax;
-  var absoluteStartPosition = "".concat(valueToPercent(value, sliderMin, sliderMax), "%");
-  var state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
-  return inRange ? /*#__PURE__*/_jsx(Comp, _extends(_extends({
-    ref: forwardedRef // @ts-ignore
+const SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, forwardedRef) {
+  let {
+    as: Comp = 'div',
+    innerAs,
+    children,
+    style = {},
+    value,
+    ...props
+  } = _ref6;
+  const {
+    disabled,
+    isVertical,
+    orientation,
+    sliderMin,
+    sliderMax,
+    value: sliderValue
+  } = useSliderContext('SliderMarker');
+  const inRange = value >= sliderMin && value <= sliderMax;
+  const absoluteStartPosition = `${valueToPercent(value, sliderMin, sliderMax)}%`;
+  const state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
+  return inRange ? /*#__PURE__*/_jsx(Comp, {
+    ref: forwardedRef
+    // @ts-ignore
     ,
     as: innerAs,
-    style: _extends(_extends({
-      position: 'absolute'
-    }, isVertical ? {
-      bottom: absoluteStartPosition
-    } : {
-      left: absoluteStartPosition
-    }), style)
-  }, props), {}, {
+    style: {
+      position: 'absolute',
+      ...(isVertical ? {
+        bottom: absoluteStartPosition
+      } : {
+        left: absoluteStartPosition
+      }),
+      ...style
+    },
+    ...props,
     "data-reach-slider-marker": "",
     "data-disabled": disabled ? '' : undefined,
     "data-orientation": orientation,
     "data-state": state,
     "data-value": value,
     children: children
-  })) : null;
+  }) : null;
 });
-var SliderMarker = /*#__PURE__*/memo(SliderMarkerImpl);
+const SliderMarker = /*#__PURE__*/memo(SliderMarkerImpl);
+
 /**
  * @see Docs https://reach.tech/slider#slidermarker-props
  */
 
 ////////////////////////////////////////////////////////////////////////////////
+
 function clamp(val, min, max) {
   return val > max ? max : val < min ? min : val;
 }
+
 /**
  * This handles the case when num is very small (0.00000001), js will turn
  * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
@@ -731,33 +680,26 @@ function clamp(val, min, max) {
  * @param num
  * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
  */
-
-
 function getDecimalPrecision(num) {
   if (Math.abs(num) < 1) {
-    var parts = num.toExponential().split('e-');
-    var matissaDecimalPart = parts[0].split('.')[1];
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
     return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
   }
-
-  var decimalPart = num.toString().split('.')[1];
+  const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
 }
-
 function percentToValue(percent, min, max) {
   return (max - min) * percent + min;
 }
-
 function roundValueToStep(value, step, min) {
-  var nearest = Math.round((value - min) / step) * step + min;
+  const nearest = Math.round((value - min) / step) * step + min;
   return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
-
 function getPointerPosition(event, touchId) {
   if (touchId.current !== undefined && event.changedTouches) {
-    for (var i = 0; i < event.changedTouches.length; i += 1) {
-      var touch = event.changedTouches[i];
-
+    for (let i = 0; i < event.changedTouches.length; i += 1) {
+      const touch = event.changedTouches[i];
       if (touch.identifier === touchId.current) {
         return {
           x: touch.clientX,
@@ -765,72 +707,62 @@ function getPointerPosition(event, touchId) {
         };
       }
     }
-
     return false;
   }
-
   return {
     x: event.clientX,
     y: event.clientY
   };
 }
-
 function getNewValue(handlePosition, track, props) {
-  var orientation = props.orientation,
-      min = props.min,
-      max = props.max,
-      step = props.step;
-
+  const {
+    orientation,
+    min,
+    max,
+    step
+  } = props;
   if (!track || !handlePosition) {
     return null;
   }
-
-  var _track$getBoundingCli = track.getBoundingClientRect(),
-      left = _track$getBoundingCli.left,
-      width = _track$getBoundingCli.width,
-      bottom = _track$getBoundingCli.bottom,
-      height = _track$getBoundingCli.height;
-
-  var isVertical = orientation === 'vertical';
-  var diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
-  var percent = diff / (isVertical ? height : width);
-  var newValue = percentToValue(percent, min, max);
+  const {
+    left,
+    width,
+    bottom,
+    height
+  } = track.getBoundingClientRect();
+  const isVertical = orientation === 'vertical';
+  const diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
+  const percent = diff / (isVertical ? height : width);
+  const newValue = percentToValue(percent, min, max);
   return clamp(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
 }
-
 function useDimensions(ref) {
-  var _useState3 = useState({
+  const [{
+    width,
+    height
+  }, setDimensions] = useState({
     width: 0,
     height: 0
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      _useState4$ = _useState4[0],
-      width = _useState4$.width,
-      height = _useState4$.height,
-      setDimensions = _useState4[1]; // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
+  });
+  // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
   // getBoundingClientRect does not work here when borders are applied.
   // getComputedStyle is not as performant so we may want to create a utility to
   // check for any conflicts with box sizing first and only use
   // `getComputedStyle` if neccessary.
-
   /* const { width, height } = ref.current
     ? ref.current.getBoundingClientRect()
     : 0; */
 
-
-  useLayoutEffect(function () {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var ownerDocument = getOwnerDocument(ref.current);
-    var ownerWindow = ownerDocument.defaultView || window;
-
+  useLayoutEffect(() => {
+    const ownerDocument = getOwnerDocument(ref.current);
+    const ownerWindow = ownerDocument.defaultView || window;
     if (ref.current) {
-      var _ownerWindow$getCompu = ownerWindow.getComputedStyle(ref.current),
-          _newHeight = _ownerWindow$getCompu.height,
-          _newWidth = _ownerWindow$getCompu.width;
-
-      var newHeight = parseFloat(_newHeight);
-      var newWidth = parseFloat(_newWidth);
-
+      const {
+        height: _newHeight,
+        width: _newWidth
+      } = ownerWindow.getComputedStyle(ref.current);
+      const newHeight = parseFloat(_newHeight);
+      const newWidth = parseFloat(_newWidth);
       if (newHeight !== height || newWidth !== width) {
         setDimensions({
           height: newHeight,
@@ -840,20 +772,21 @@ function useDimensions(ref) {
     }
   }, [ref, width, height]);
   return {
-    ref: ref,
-    width: width,
-    height: height
+    ref,
+    width,
+    height
   };
 }
-
 function valueToPercent(value, min, max) {
   return (value - min) * 100 / (max - min);
-} ////////////////////////////////////////////////////////////////////////////////
-// Types
+}
 
+////////////////////////////////////////////////////////////////////////////////
+// Types
 
 ////////////////////////////////////////////////////////////////////////////////
 // Exports
+
 export default Slider;
 export { Slider, SliderHandle, SliderInput, SliderMarker, SliderTrack, SliderRange };
 //# sourceMappingURL=Slider.js.map