@jetbrains/ring-ui-built 7.0.127 → 7.0.128

package/components/slider/slider.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { isArray } from '../global/typescript-utils.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import getUID from '../global/get-uid.js';
-import { toRange, HUNDRED, calculateMarks, toPercent, validateValue, calculateValue, adjustValues } from './slider.utils.js';
+import { toRange, HUNDRED, calculateMarks, toPercent, calculateValue, adjustValues, validateValue } from './slider.utils.js';
 import useEventCallback from '../global/use-event-callback.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '../shortcuts/core.js';
 import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
@@ -17,12 +17,12 @@ import 'util-deprecate';
 var styles = {"slider":"ring-slider-slider","disabled":"ring-slider-disabled","marked":"ring-slider-marked","rail":"ring-slider-rail","rounded":"ring-slider-rounded","track":"ring-slider-track","thumb":"ring-slider-thumb ring-global-resetButton","dragged":"ring-slider-dragged","tick":"ring-slider-tick","active":"ring-slider-active","markValue":"ring-slider-markValue","tag":"ring-slider-tag"};
 
 const Slider = t0 => {
-  const $ = c(122);
-  if ($[0] !== "8964b5418275bd38d0d46628f0c5c416a0eb127a555095f594f9e18fa28ba85a") {
-    for (let $i = 0; $i < 122; $i += 1) {
+  const $ = c(53);
+  if ($[0] !== "646e0a4ba59e99bc170a0b0d50e8a904bc41135f208f44be7988b69caaccc2e6") {
+    for (let $i = 0; $i < 53; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "8964b5418275bd38d0d46628f0c5c416a0eb127a555095f594f9e18fa28ba85a";
+    $[0] = "646e0a4ba59e99bc170a0b0d50e8a904bc41135f208f44be7988b69caaccc2e6";
   }
   const {
     defaultValue,
@@ -42,7 +42,7 @@ const Slider = t0 => {
   const max = t2 === undefined ? HUNDRED : t2;
   const step = t3 === undefined ? 1 : t3;
   const ref = useRef(null);
-  const previouslyDragged = useRef(false);
+  const activePointer = useRef(null);
   const [values, setValues] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min);
   const validValues = toRange(value !== null && value !== void 0 ? value : values, min, max);
   const validStep = step < 0 ? 0 : step;
@@ -58,6 +58,7 @@ const Slider = t0 => {
   const isRange = t5;
   const [isDragging, setIsDragging] = useState(false);
   const [draggedIndex, setDraggedIndex] = useState(-1);
+  const [focused, setFocused] = useState(false);
   let t6;
   if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t6 = getUID("ring-slider-");
@@ -115,380 +116,263 @@ const Slider = t0 => {
     t9 = $[9];
   }
   const handleValueChange = t9;
-  let t10;
-  if ($[10] !== handleValueChange || $[11] !== validValues) {
-    t10 = (nextValue, index) => {
-      const nextValues_0 = [...validValues];
-      nextValues_0[index] = nextValue;
-      if (nextValues_0[0] > nextValues_0[1]) {
-        const previousValue = nextValues_0[index];
-        nextValues_0.reverse();
-        const thumb = ref.current?.querySelector(`[role="slider"][data-index="${nextValues_0.indexOf(previousValue)}"]`);
-        thumb?.focus();
-      }
-      handleValueChange(nextValues_0);
-    };
-    $[10] = handleValueChange;
-    $[11] = validValues;
-    $[12] = t10;
-  } else {
-    t10 = $[12];
-  }
-  const setValueAndSwap = t10;
-  const getIndex = _temp;
-  let shortcutsMap;
-  if ($[13] !== disabled || $[14] !== max || $[15] !== min || $[16] !== setValueAndSwap || $[17] !== validStep || $[18] !== validValues) {
-    shortcutsMap = {};
-    if (!disabled) {
-      let t11;
-      if ($[20] !== min || $[21] !== setValueAndSwap || $[22] !== validStep || $[23] !== validValues) {
-        t11 = t12 => {
-          const {
-            target: target_0
-          } = t12;
-          const index_0 = getIndex(target_0);
-          setValueAndSwap(Math.max(min, validValues[index_0] - validStep), index_0);
-        };
-        $[20] = min;
-        $[21] = setValueAndSwap;
-        $[22] = validStep;
-        $[23] = validValues;
-        $[24] = t11;
-      } else {
-        t11 = $[24];
-      }
-      shortcutsMap.left = shortcutsMap.down = t11;
-      let t12;
-      if ($[25] !== max || $[26] !== setValueAndSwap || $[27] !== validStep || $[28] !== validValues) {
-        t12 = t13 => {
-          const {
-            target: target_1
-          } = t13;
-          const index_1 = getIndex(target_1);
-          setValueAndSwap(Math.min(max, validValues[index_1] + validStep), index_1);
-        };
-        $[25] = max;
-        $[26] = setValueAndSwap;
-        $[27] = validStep;
-        $[28] = validValues;
-        $[29] = t12;
-      } else {
-        t12 = $[29];
-      }
-      shortcutsMap.right = shortcutsMap.up = t12;
-      let t13;
-      if ($[30] !== min || $[31] !== setValueAndSwap) {
-        t13 = t14 => {
-          const {
-            target: target_2
-          } = t14;
-          const index_2 = getIndex(target_2);
-          setValueAndSwap(min, index_2);
-        };
-        $[30] = min;
-        $[31] = setValueAndSwap;
-        $[32] = t13;
-      } else {
-        t13 = $[32];
-      }
-      shortcutsMap.home = t13;
-      let t14;
-      if ($[33] !== max || $[34] !== setValueAndSwap) {
-        t14 = t15 => {
-          const {
-            target: target_3
-          } = t15;
-          const index_3 = getIndex(target_3);
-          setValueAndSwap(max, index_3);
-        };
-        $[33] = max;
-        $[34] = setValueAndSwap;
-        $[35] = t14;
-      } else {
-        t14 = $[35];
-      }
-      shortcutsMap.end = t14;
+  const setValueAndSwap = (nextValue, index) => {
+    const nextValues_0 = [...validValues];
+    nextValues_0[index] = nextValue;
+    if (nextValues_0[0] > nextValues_0[1]) {
+      const previousValue = nextValues_0[index];
+      nextValues_0.reverse();
+      const thumb = ref.current?.querySelector(`[role="slider"][data-index="${nextValues_0.indexOf(previousValue)}"]`);
+      thumb?.focus();
     }
-    $[13] = disabled;
-    $[14] = max;
-    $[15] = min;
-    $[16] = setValueAndSwap;
-    $[17] = validStep;
-    $[18] = validValues;
-    $[19] = shortcutsMap;
-  } else {
-    shortcutsMap = $[19];
-  }
-  let t11;
-  if ($[36] !== disabled || $[37] !== isRange || $[38] !== max || $[39] !== min || $[40] !== validStep || $[41] !== validValues) {
-    t11 = e => {
-      e.stopPropagation();
-      if (disabled) {
-        return;
-      }
-      const index_4 = e.currentTarget.getAttribute("data-index");
-      const nextValue_0 = calculateValue(ref, e.pageX, min, max, validStep);
-      if (nextValue_0 !== null && !isNaN(nextValue_0) && !index_4) {
-        const rangeIndex = Number(Math.abs(validValues[0] - nextValue_0) > Math.abs(validValues[1] - nextValue_0));
-        setDraggedIndex(isRange ? rangeIndex : 0);
-      } else {
-        setDraggedIndex(Number(index_4));
-      }
-      setIsDragging(true);
-      previouslyDragged.current = false;
+    handleValueChange(nextValues_0);
+  };
+  const getIndex = _temp;
+  const shortcutsMap = {};
+  if (!disabled) {
+    shortcutsMap.left = shortcutsMap.down = t10 => {
+      const {
+        target: target_0
+      } = t10;
+      const index_0 = getIndex(target_0);
+      setValueAndSwap(Math.max(min, validValues[index_0] - validStep), index_0);
     };
-    $[36] = disabled;
-    $[37] = isRange;
-    $[38] = max;
-    $[39] = min;
-    $[40] = validStep;
-    $[41] = validValues;
-    $[42] = t11;
-  } else {
-    t11 = $[42];
-  }
-  const handleMouseDown = t11;
-  let t12;
-  if ($[43] !== draggedIndex || $[44] !== handleValueChange || $[45] !== max || $[46] !== min || $[47] !== validStep || $[48] !== validValues) {
-    t12 = t13 => {
+    shortcutsMap.right = shortcutsMap.up = t11 => {
       const {
-        pageX
-      } = t13;
-      const nextValues_1 = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
-      if (nextValues_1[0] > nextValues_1[1]) {
-        nextValues_1.reverse();
-      }
-      handleValueChange(nextValues_1);
-      setDraggedIndex(-1);
-      setIsDragging(false);
-      previouslyDragged.current = true;
+        target: target_1
+      } = t11;
+      const index_1 = getIndex(target_1);
+      setValueAndSwap(Math.min(max, validValues[index_1] + validStep), index_1);
     };
-    $[43] = draggedIndex;
-    $[44] = handleValueChange;
-    $[45] = max;
-    $[46] = min;
-    $[47] = validStep;
-    $[48] = validValues;
-    $[49] = t12;
-  } else {
-    t12 = $[49];
-  }
-  const handleMouseUp = useEventCallback(t12);
-  let t13;
-  if ($[50] !== draggedIndex || $[51] !== handleValueChange || $[52] !== max || $[53] !== min || $[54] !== validStep || $[55] !== validValues) {
-    t13 = t14 => {
+    shortcutsMap.home = t12 => {
       const {
-        pageX: pageX_0
-      } = t14;
-      const nextValues_2 = adjustValues(validValues, ref, draggedIndex, pageX_0, max, min, validStep);
-      if (nextValues_2[0] > nextValues_2[1]) {
-        nextValues_2.reverse();
-        setDraggedIndex(_temp2);
-      }
-      handleValueChange(nextValues_2);
+        target: target_2
+      } = t12;
+      const index_2 = getIndex(target_2);
+      setValueAndSwap(min, index_2);
+    };
+    shortcutsMap.end = t13 => {
+      const {
+        target: target_3
+      } = t13;
+      const index_3 = getIndex(target_3);
+      setValueAndSwap(max, index_3);
     };
-    $[50] = draggedIndex;
-    $[51] = handleValueChange;
-    $[52] = max;
-    $[53] = min;
-    $[54] = validStep;
-    $[55] = validValues;
-    $[56] = t13;
-  } else {
-    t13 = $[56];
   }
-  const handleMouseMove = useEventCallback(t13);
-  let t14;
-  let t15;
-  if ($[57] !== disabled || $[58] !== handleMouseMove || $[59] !== handleMouseUp || $[60] !== isDragging) {
-    t14 = () => {
+  const stopDragging = useEventCallback(() => {
+    const pointerId = activePointer.current;
+    activePointer.current = null;
+    setDraggedIndex(-1);
+    setIsDragging(false);
+    if (pointerId !== null && ref.current?.hasPointerCapture(pointerId)) {
+      ref.current.releasePointerCapture(pointerId);
+    }
+  });
+  const handlePointerDown = e => {
+    e.stopPropagation();
+    if (disabled || e.button !== 0 || !e.isPrimary || activePointer.current !== null) {
+      return;
+    }
+    const index_4 = e.currentTarget.getAttribute("data-index");
+    const nextValue_0 = calculateValue(ref, e.clientX, min, max, validStep);
+    if (nextValue_0 !== null && !isNaN(nextValue_0) && !index_4) {
+      const rangeIndex = Number(Math.abs(validValues[0] - nextValue_0) > Math.abs(validValues[1] - nextValue_0));
+      setDraggedIndex(isRange ? rangeIndex : 0);
+    } else {
+      setDraggedIndex(Number(index_4));
+    }
+    activePointer.current = e.pointerId;
+    ref.current?.setPointerCapture(e.pointerId);
+    setIsDragging(true);
+  };
+  const handlePointerUp = e_0 => {
+    if (disabled || activePointer.current !== e_0.pointerId) {
+      return;
+    }
+    const nextValues_1 = adjustValues(validValues, ref, draggedIndex, e_0.clientX, max, min, validStep);
+    if (nextValues_1[0] > nextValues_1[1]) {
+      nextValues_1.reverse();
+    }
+    handleValueChange(nextValues_1);
+    stopDragging();
+  };
+  const handlePointerMove = e_1 => {
+    if (disabled || activePointer.current !== e_1.pointerId) {
+      return;
+    }
+    const nextValues_2 = adjustValues(validValues, ref, draggedIndex, e_1.clientX, max, min, validStep);
+    if (nextValues_2[0] > nextValues_2[1]) {
+      nextValues_2.reverse();
+      setDraggedIndex(_temp2);
+    }
+    handleValueChange(nextValues_2);
+  };
+  const handlePointerCancel = e_2 => {
+    if (activePointer.current === e_2.pointerId) {
+      stopDragging();
+    }
+  };
+  let t10;
+  let t11;
+  if ($[10] !== disabled || $[11] !== stopDragging) {
+    t10 = () => {
       if (disabled) {
-        return;
-      }
-      if (isDragging && !previouslyDragged.current) {
-        window.addEventListener("mousemove", handleMouseMove);
-        window.addEventListener("mouseup", handleMouseUp);
-      } else {
-        if (!isDragging && previouslyDragged.current) {
-          window.removeEventListener("mousemove", handleMouseMove);
-          window.removeEventListener("mouseup", handleMouseUp);
-        }
+        stopDragging();
       }
-      return () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
-      };
     };
-    t15 = [isDragging, disabled, handleMouseMove, handleMouseUp];
-    $[57] = disabled;
-    $[58] = handleMouseMove;
-    $[59] = handleMouseUp;
-    $[60] = isDragging;
-    $[61] = t14;
-    $[62] = t15;
+    t11 = [disabled, stopDragging];
+    $[10] = disabled;
+    $[11] = stopDragging;
+    $[12] = t10;
+    $[13] = t11;
   } else {
-    t14 = $[61];
-    t15 = $[62];
+    t10 = $[12];
+    t11 = $[13];
   }
-  useEffect(t14, t15);
-  const t16 = "presentation";
-  const t17 = !!marks || showTag;
-  let t18;
-  if ($[63] !== className || $[64] !== disabled || $[65] !== t17) {
-    t18 = classNames(styles.slider, className, {
+  useEffect(t10, t11);
+  const t12 = !!marks || showTag;
+  let t13;
+  if ($[14] !== className || $[15] !== disabled || $[16] !== t12) {
+    t13 = classNames(styles.slider, className, {
       [styles.disabled]: disabled,
-      [styles.marked]: t17
+      [styles.marked]: t12
     });
-    $[63] = className;
-    $[64] = disabled;
-    $[65] = t17;
-    $[66] = t18;
+    $[14] = className;
+    $[15] = disabled;
+    $[16] = t12;
+    $[17] = t13;
   } else {
-    t18 = $[66];
+    t13 = $[17];
   }
-  const t19 = -1;
-  let t20;
-  if ($[67] !== shortcutsMap || $[68] !== shortcutsScope) {
-    t20 = /*#__PURE__*/jsx(Shortcuts, {
-      map: shortcutsMap,
-      scope: shortcutsScope
-    });
-    $[67] = shortcutsMap;
-    $[68] = shortcutsScope;
-    $[69] = t20;
+  let t14;
+  let t15;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => setFocused(true);
+    t15 = e_4 => {
+      if (!(e_4.relatedTarget instanceof Node) || !e_4.currentTarget.contains(e_4.relatedTarget)) {
+        setFocused(false);
+      }
+    };
+    $[18] = t14;
+    $[19] = t15;
   } else {
-    t20 = $[69];
+    t14 = $[18];
+    t15 = $[19];
   }
-  const t21 = !showTicks;
-  let t22;
-  if ($[70] !== disabled || $[71] !== t21) {
-    t22 = classNames(styles.rail, {
-      [styles.rounded]: t21,
+  const t16 = !showTicks;
+  let t17;
+  if ($[20] !== disabled || $[21] !== t16) {
+    t17 = classNames(styles.rail, {
+      [styles.rounded]: t16,
       [styles.disabled]: disabled
     });
-    $[70] = disabled;
-    $[71] = t21;
-    $[72] = t22;
+    $[20] = disabled;
+    $[21] = t16;
+    $[22] = t17;
   } else {
-    t22 = $[72];
+    t17 = $[22];
   }
-  let t23;
-  if ($[73] !== t22) {
-    t23 = /*#__PURE__*/jsx("div", {
-      className: t22
+  let t18;
+  if ($[23] !== t17) {
+    t18 = /*#__PURE__*/jsx("div", {
+      className: t17
     });
-    $[73] = t22;
-    $[74] = t23;
+    $[23] = t17;
+    $[24] = t18;
   } else {
-    t23 = $[74];
+    t18 = $[24];
   }
-  const t24 = `${trackStart}%`;
-  const t25 = `${trackLength}%`;
-  let t26;
-  if ($[75] !== t24 || $[76] !== t25) {
-    t26 = {
-      left: t24,
-      width: t25
+  const t19 = `${trackStart}%`;
+  const t20 = `${trackLength}%`;
+  let t21;
+  if ($[25] !== t19 || $[26] !== t20) {
+    t21 = {
+      left: t19,
+      width: t20
     };
-    $[75] = t24;
-    $[76] = t25;
-    $[77] = t26;
+    $[25] = t19;
+    $[26] = t20;
+    $[27] = t21;
   } else {
-    t26 = $[77];
+    t21 = $[27];
   }
-  const t27 = !showTicks;
-  let t28;
-  if ($[78] !== disabled || $[79] !== t27) {
-    t28 = classNames(styles.track, {
-      [styles.rounded]: t27,
+  const t22 = !showTicks;
+  let t23;
+  if ($[28] !== disabled || $[29] !== t22) {
+    t23 = classNames(styles.track, {
+      [styles.rounded]: t22,
       [styles.disabled]: disabled
     });
-    $[78] = disabled;
-    $[79] = t27;
-    $[80] = t28;
+    $[28] = disabled;
+    $[29] = t22;
+    $[30] = t23;
   } else {
-    t28 = $[80];
+    t23 = $[30];
   }
-  let t29;
-  if ($[81] !== t26 || $[82] !== t28) {
-    t29 = /*#__PURE__*/jsx("div", {
-      style: t26,
-      className: t28
+  let t24;
+  if ($[31] !== t21 || $[32] !== t23) {
+    t24 = /*#__PURE__*/jsx("div", {
+      style: t21,
+      className: t23
     });
-    $[81] = t26;
-    $[82] = t28;
-    $[83] = t29;
+    $[31] = t21;
+    $[32] = t23;
+    $[33] = t24;
   } else {
-    t29 = $[83];
+    t24 = $[33];
   }
-  let t30;
-  if ($[84] !== disabled || $[85] !== draggedIndex || $[86] !== handleMouseDown || $[87] !== isDragging || $[88] !== max || $[89] !== min || $[90] !== renderTag || $[91] !== showTag || $[92] !== validValues) {
-    let t31;
-    if ($[94] !== disabled || $[95] !== draggedIndex || $[96] !== handleMouseDown || $[97] !== isDragging || $[98] !== max || $[99] !== min || $[100] !== renderTag || $[101] !== showTag) {
-      t31 = (numValue, index_5) => {
-        const percent = toPercent(numValue, min, max);
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("div", {
-            tabIndex: 0,
-            "aria-label": "Pick value",
-            role: "slider",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": numValue,
-            "data-index": index_5,
-            style: {
-              left: `${percent}%`
-            },
-            className: classNames(styles.thumb, {
-              [styles.disabled]: disabled,
-              [styles.dragged]: isDragging && draggedIndex === index_5
-            }),
-            onMouseDown: handleMouseDown
-          }), showTag && /*#__PURE__*/jsx("div", {
-            style: {
-              left: `${percent}%`
-            },
-            className: classNames(styles.tag, {
-              [styles.disabled]: disabled
-            }),
-            role: "tooltip",
-            children: renderTag ? renderTag(numValue) : numValue
-          })]
-        }, index_5);
-      };
-      $[94] = disabled;
-      $[95] = draggedIndex;
-      $[96] = handleMouseDown;
-      $[97] = isDragging;
-      $[98] = max;
-      $[99] = min;
-      $[100] = renderTag;
-      $[101] = showTag;
-      $[102] = t31;
-    } else {
-      t31 = $[102];
-    }
-    t30 = validValues.map(t31);
-    $[84] = disabled;
-    $[85] = draggedIndex;
-    $[86] = handleMouseDown;
-    $[87] = isDragging;
-    $[88] = max;
-    $[89] = min;
-    $[90] = renderTag;
-    $[91] = showTag;
-    $[92] = validValues;
-    $[93] = t30;
+  let t25;
+  if ($[34] !== disabled || $[35] !== draggedIndex || $[36] !== handlePointerDown || $[37] !== isDragging || $[38] !== max || $[39] !== min || $[40] !== renderTag || $[41] !== showTag) {
+    t25 = (numValue, index_5) => {
+      const percent = toPercent(numValue, min, max);
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          tabIndex: 0,
+          "aria-label": "Pick value",
+          role: "slider",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": numValue,
+          "data-index": index_5,
+          style: {
+            left: `${percent}%`
+          },
+          className: classNames(styles.thumb, {
+            [styles.disabled]: disabled,
+            [styles.dragged]: isDragging && draggedIndex === index_5
+          }),
+          onPointerDown: handlePointerDown
+        }), showTag && /*#__PURE__*/jsx("div", {
+          style: {
+            left: `${percent}%`
+          },
+          className: classNames(styles.tag, {
+            [styles.disabled]: disabled
+          }),
+          role: "tooltip",
+          children: renderTag ? renderTag(numValue) : numValue
+        })]
+      }, index_5);
+    };
+    $[34] = disabled;
+    $[35] = draggedIndex;
+    $[36] = handlePointerDown;
+    $[37] = isDragging;
+    $[38] = max;
+    $[39] = min;
+    $[40] = renderTag;
+    $[41] = showTag;
+    $[42] = t25;
   } else {
-    t30 = $[93];
+    t25 = $[42];
   }
-  let t31;
-  if ($[103] !== disabled || $[104] !== max || $[105] !== min) {
-    t31 = (t32, index_6) => {
+  let t26;
+  if ($[43] !== disabled || $[44] !== max || $[45] !== min) {
+    t26 = (t27, index_6) => {
       const {
         value: markValue,
         label
-      } = t32;
+      } = t27;
       const percent_0 = toPercent(markValue, min, max);
       return /*#__PURE__*/jsx("div", {
         style: {
@@ -500,20 +384,19 @@ const Slider = t0 => {
         children: label !== null && label !== void 0 ? label : markValue
       }, index_6);
     };
-    $[103] = disabled;
-    $[104] = max;
-    $[105] = min;
-    $[106] = t31;
+    $[43] = disabled;
+    $[44] = max;
+    $[45] = min;
+    $[46] = t26;
   } else {
-    t31 = $[106];
+    t26 = $[46];
   }
-  const t32 = markValues.map(t31);
-  let t33;
-  if ($[107] !== disabled || $[108] !== isRange || $[109] !== max || $[110] !== min || $[111] !== validValues) {
-    t33 = (t34, index_7) => {
+  let t27;
+  if ($[47] !== disabled || $[48] !== isRange || $[49] !== max || $[50] !== min || $[51] !== validValues) {
+    t27 = (t28, index_7) => {
       const {
         value: tickValue
-      } = t34;
+      } = t28;
       const percent_1 = toPercent(tickValue, min, max);
       const isActive = isRange ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1] : tickValue <= validValues[0];
       return /*#__PURE__*/jsx("div", {
@@ -526,39 +409,34 @@ const Slider = t0 => {
         }
       }, index_7);
     };
-    $[107] = disabled;
-    $[108] = isRange;
-    $[109] = max;
-    $[110] = min;
-    $[111] = validValues;
-    $[112] = t33;
+    $[47] = disabled;
+    $[48] = isRange;
+    $[49] = max;
+    $[50] = min;
+    $[51] = validValues;
+    $[52] = t27;
   } else {
-    t33 = $[112];
+    t27 = $[52];
   }
-  const t34 = tickMarks.map(t33);
-  let t35;
-  if ($[113] !== handleMouseDown || $[114] !== t18 || $[115] !== t20 || $[116] !== t23 || $[117] !== t29 || $[118] !== t30 || $[119] !== t32 || $[120] !== t34) {
-    t35 = /*#__PURE__*/jsxs("div", {
-      ref: ref,
-      role: t16,
-      className: t18,
-      tabIndex: t19,
-      onMouseDown: handleMouseDown,
-      children: [t20, t23, t29, t30, t32, t34]
-    });
-    $[113] = handleMouseDown;
-    $[114] = t18;
-    $[115] = t20;
-    $[116] = t23;
-    $[117] = t29;
-    $[118] = t30;
-    $[119] = t32;
-    $[120] = t34;
-    $[121] = t35;
-  } else {
-    t35 = $[121];
-  }
-  return t35;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    role: "presentation",
+    className: t13,
+    tabIndex: -1,
+    onMouseDown: _temp3,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onLostPointerCapture: handlePointerCancel,
+    onFocus: t14,
+    onBlur: t15,
+    children: [/*#__PURE__*/jsx(Shortcuts, {
+      map: shortcutsMap,
+      scope: shortcutsScope,
+      disabled: disabled || !focused
+    }), t18, t24, validValues.map(t25), markValues.map(t26), tickMarks.map(t27)]
+  });
 };
 function _temp(target) {
   return Number(target?.getAttribute("data-index"));
@@ -566,5 +444,8 @@ function _temp(target) {
 function _temp2(prevState) {
   return prevState === 0 ? 1 : 0;
 }
+function _temp3(e_3) {
+  return e_3.stopPropagation();
+}
 
 export { Slider };