@jetbrains/ring-ui-built 7.0.79 → 7.0.80

package/components/slider/slider.js

@@ -5,6 +5,7 @@ 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 useEventCallback from '../global/use-event-callback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '../shortcuts/core.js';
 import 'combokeys';
@@ -14,12 +15,12 @@ import 'sniffr';
 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(154);
-  if ($[0] !== "7c00c25355ca34476232faa4b0d729160f0b7ed5ed726089246ce3288d3c8d5e") {
-    for (let $i = 0; $i < 154; $i += 1) {
+  const $ = c(122);
+  if ($[0] !== "8964b5418275bd38d0d46628f0c5c416a0eb127a555095f594f9e18fa28ba85a") {
+    for (let $i = 0; $i < 122; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "7c00c25355ca34476232faa4b0d729160f0b7ed5ed726089246ce3288d3c8d5e";
+    $[0] = "8964b5418275bd38d0d46628f0c5c416a0eb127a555095f594f9e18fa28ba85a";
   }
   const {
     defaultValue,
@@ -41,136 +42,80 @@ const Slider = t0 => {
   const ref = useRef(null);
   const previouslyDragged = useRef(false);
   const [values, setValues] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min);
-  const t4 = value !== null && value !== void 0 ? value : values;
-  let t5;
-  if ($[1] !== max || $[2] !== min || $[3] !== t4) {
-    t5 = toRange(t4, min, max);
-    $[1] = max;
-    $[2] = min;
-    $[3] = t4;
-    $[4] = t5;
-  } else {
-    t5 = $[4];
-  }
-  const validValues = t5;
+  const validValues = toRange(value !== null && value !== void 0 ? value : values, min, max);
   const validStep = step < 0 ? 0 : step;
-  const t6 = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-  let t7;
-  if ($[5] !== t6) {
-    t7 = isArray(t6);
-    $[5] = t6;
-    $[6] = t7;
+  const t4 = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+  let t5;
+  if ($[1] !== t4) {
+    t5 = isArray(t4);
+    $[1] = t4;
+    $[2] = t5;
   } else {
-    t7 = $[6];
+    t5 = $[2];
   }
-  const isRange = t7;
+  const isRange = t5;
   const [isDragging, setIsDragging] = useState(false);
   const [draggedIndex, setDraggedIndex] = useState(-1);
-  let t8;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = getUID("ring-slider-");
-    $[7] = t8;
+  let t6;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = getUID("ring-slider-");
+    $[3] = t6;
   } else {
-    t8 = $[7];
+    t6 = $[3];
   }
-  const [shortcutsScope] = useState(t8);
-  let t9;
+  const [shortcutsScope] = useState(t6);
+  let t7;
   bb0: {
     if (isArray(marks)) {
-      let t10;
-      if ($[8] !== marks || $[9] !== max || $[10] !== min) {
-        let t11;
-        if ($[12] !== max || $[13] !== min) {
-          t11 = mark => ({
-            ...mark,
-            value: validateValue(mark.value, min, max)
-          });
-          $[12] = max;
-          $[13] = min;
-          $[14] = t11;
-        } else {
-          t11 = $[14];
-        }
-        t10 = marks.map(t11);
-        $[8] = marks;
-        $[9] = max;
-        $[10] = min;
-        $[11] = t10;
+      let t8;
+      if ($[4] !== max || $[5] !== min) {
+        t8 = mark => ({
+          ...mark,
+          value: validateValue(mark.value, min, max)
+        });
+        $[4] = max;
+        $[5] = min;
+        $[6] = t8;
       } else {
-        t10 = $[11];
+        t8 = $[6];
       }
-      t9 = t10;
+      t7 = marks.map(t8);
       break bb0;
     }
     if (marks) {
-      let t10;
-      if ($[15] !== max || $[16] !== min || $[17] !== validStep) {
-        t10 = calculateMarks(min, max, validStep);
-        $[15] = max;
-        $[16] = min;
-        $[17] = validStep;
-        $[18] = t10;
-      } else {
-        t10 = $[18];
-      }
-      t9 = t10;
+      t7 = calculateMarks(min, max, validStep);
       break bb0;
     }
-    let t10;
-    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-      t10 = [];
-      $[19] = t10;
-    } else {
-      t10 = $[19];
-    }
-    t9 = t10;
+    t7 = [];
   }
-  const markValues = t9;
-  let t10;
+  const markValues = t7;
+  let t8;
   bb1: {
     if (showTicks) {
-      let t11;
-      if ($[20] !== markValues || $[21] !== max || $[22] !== min || $[23] !== validStep) {
-        t11 = markValues.length ? markValues : calculateMarks(min, max, validStep);
-        $[20] = markValues;
-        $[21] = max;
-        $[22] = min;
-        $[23] = validStep;
-        $[24] = t11;
-      } else {
-        t11 = $[24];
-      }
-      t10 = t11;
+      t8 = markValues.length ? markValues : calculateMarks(min, max, validStep);
       break bb1;
     }
-    let t11;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-      t11 = [];
-      $[25] = t11;
-    } else {
-      t11 = $[25];
-    }
-    t10 = t11;
+    t8 = [];
   }
-  const tickMarks = t10;
+  const tickMarks = t8;
   const trackStart = toPercent(isRange ? Math.min(...validValues) : min, min, max);
   const trackLength = toPercent(Math.max(...validValues), min, max) - trackStart;
-  let t11;
-  if ($[26] !== isRange || $[27] !== onChange) {
-    t11 = nextValues => {
+  let t9;
+  if ($[7] !== isRange || $[8] !== onChange) {
+    t9 = nextValues => {
       setValues(nextValues);
       onChange?.(isRange ? nextValues : nextValues[0]);
     };
-    $[26] = isRange;
-    $[27] = onChange;
-    $[28] = t11;
+    $[7] = isRange;
+    $[8] = onChange;
+    $[9] = t9;
   } else {
-    t11 = $[28];
+    t9 = $[9];
   }
-  const handleValueChange = t11;
-  let t12;
-  if ($[29] !== handleValueChange || $[30] !== validValues) {
-    t12 = (nextValue, index) => {
+  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]) {
@@ -181,101 +126,100 @@ const Slider = t0 => {
       }
       handleValueChange(nextValues_0);
     };
-    $[29] = handleValueChange;
-    $[30] = validValues;
-    $[31] = t12;
+    $[10] = handleValueChange;
+    $[11] = validValues;
+    $[12] = t10;
   } else {
-    t12 = $[31];
+    t10 = $[12];
   }
-  const setValueAndSwap = t12;
+  const setValueAndSwap = t10;
   const getIndex = _temp;
-  let map;
-  if ($[32] !== disabled || $[33] !== max || $[34] !== min || $[35] !== setValueAndSwap || $[36] !== validStep || $[37] !== validValues) {
-    map = {};
+  let shortcutsMap;
+  if ($[13] !== disabled || $[14] !== max || $[15] !== min || $[16] !== setValueAndSwap || $[17] !== validStep || $[18] !== validValues) {
+    shortcutsMap = {};
     if (!disabled) {
-      let t13;
-      if ($[39] !== min || $[40] !== setValueAndSwap || $[41] !== validStep || $[42] !== validValues) {
-        t13 = t14 => {
+      let t11;
+      if ($[20] !== min || $[21] !== setValueAndSwap || $[22] !== validStep || $[23] !== validValues) {
+        t11 = t12 => {
           const {
             target: target_0
-          } = t14;
+          } = t12;
           const index_0 = getIndex(target_0);
           setValueAndSwap(Math.max(min, validValues[index_0] - validStep), index_0);
         };
-        $[39] = min;
-        $[40] = setValueAndSwap;
-        $[41] = validStep;
-        $[42] = validValues;
-        $[43] = t13;
+        $[20] = min;
+        $[21] = setValueAndSwap;
+        $[22] = validStep;
+        $[23] = validValues;
+        $[24] = t11;
       } else {
-        t13 = $[43];
+        t11 = $[24];
       }
-      map.left = map.down = t13;
-      let t14;
-      if ($[44] !== max || $[45] !== setValueAndSwap || $[46] !== validStep || $[47] !== validValues) {
-        t14 = t15 => {
+      shortcutsMap.left = shortcutsMap.down = t11;
+      let t12;
+      if ($[25] !== max || $[26] !== setValueAndSwap || $[27] !== validStep || $[28] !== validValues) {
+        t12 = t13 => {
           const {
             target: target_1
-          } = t15;
+          } = t13;
           const index_1 = getIndex(target_1);
           setValueAndSwap(Math.min(max, validValues[index_1] + validStep), index_1);
         };
-        $[44] = max;
-        $[45] = setValueAndSwap;
-        $[46] = validStep;
-        $[47] = validValues;
-        $[48] = t14;
+        $[25] = max;
+        $[26] = setValueAndSwap;
+        $[27] = validStep;
+        $[28] = validValues;
+        $[29] = t12;
       } else {
-        t14 = $[48];
+        t12 = $[29];
       }
-      map.right = map.up = t14;
-      let t15;
-      if ($[49] !== min || $[50] !== setValueAndSwap) {
-        t15 = t16 => {
+      shortcutsMap.right = shortcutsMap.up = t12;
+      let t13;
+      if ($[30] !== min || $[31] !== setValueAndSwap) {
+        t13 = t14 => {
           const {
             target: target_2
-          } = t16;
+          } = t14;
           const index_2 = getIndex(target_2);
           setValueAndSwap(min, index_2);
         };
-        $[49] = min;
-        $[50] = setValueAndSwap;
-        $[51] = t15;
+        $[30] = min;
+        $[31] = setValueAndSwap;
+        $[32] = t13;
       } else {
-        t15 = $[51];
+        t13 = $[32];
       }
-      map.home = t15;
-      let t16;
-      if ($[52] !== max || $[53] !== setValueAndSwap) {
-        t16 = t17 => {
+      shortcutsMap.home = t13;
+      let t14;
+      if ($[33] !== max || $[34] !== setValueAndSwap) {
+        t14 = t15 => {
           const {
             target: target_3
-          } = t17;
+          } = t15;
           const index_3 = getIndex(target_3);
           setValueAndSwap(max, index_3);
         };
-        $[52] = max;
-        $[53] = setValueAndSwap;
-        $[54] = t16;
+        $[33] = max;
+        $[34] = setValueAndSwap;
+        $[35] = t14;
       } else {
-        t16 = $[54];
+        t14 = $[35];
       }
-      map.end = t16;
+      shortcutsMap.end = t14;
     }
-    $[32] = disabled;
-    $[33] = max;
-    $[34] = min;
-    $[35] = setValueAndSwap;
-    $[36] = validStep;
-    $[37] = validValues;
-    $[38] = map;
+    $[13] = disabled;
+    $[14] = max;
+    $[15] = min;
+    $[16] = setValueAndSwap;
+    $[17] = validStep;
+    $[18] = validValues;
+    $[19] = shortcutsMap;
   } else {
-    map = $[38];
+    shortcutsMap = $[19];
   }
-  const shortcutsMap = map;
-  let t13;
-  if ($[55] !== disabled || $[56] !== isRange || $[57] !== max || $[58] !== min || $[59] !== validStep || $[60] !== validValues[0] || $[61] !== validValues[1]) {
-    t13 = e => {
+  let t11;
+  if ($[36] !== disabled || $[37] !== isRange || $[38] !== max || $[39] !== min || $[40] !== validStep || $[41] !== validValues) {
+    t11 = e => {
       e.stopPropagation();
       if (disabled) {
         return;
@@ -291,24 +235,23 @@ const Slider = t0 => {
       setIsDragging(true);
       previouslyDragged.current = false;
     };
-    $[55] = disabled;
-    $[56] = isRange;
-    $[57] = max;
-    $[58] = min;
-    $[59] = validStep;
-    $[60] = validValues[0];
-    $[61] = validValues[1];
-    $[62] = t13;
+    $[36] = disabled;
+    $[37] = isRange;
+    $[38] = max;
+    $[39] = min;
+    $[40] = validStep;
+    $[41] = validValues;
+    $[42] = t11;
   } else {
-    t13 = $[62];
+    t11 = $[42];
   }
-  const handleMouseDown = t13;
-  let t14;
-  if ($[63] !== draggedIndex || $[64] !== handleValueChange || $[65] !== max || $[66] !== min || $[67] !== validStep || $[68] !== validValues) {
-    t14 = t15 => {
+  const handleMouseDown = t11;
+  let t12;
+  if ($[43] !== draggedIndex || $[44] !== handleValueChange || $[45] !== max || $[46] !== min || $[47] !== validStep || $[48] !== validValues) {
+    t12 = t13 => {
       const {
         pageX
-      } = t15;
+      } = t13;
       const nextValues_1 = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
       if (nextValues_1[0] > nextValues_1[1]) {
         nextValues_1.reverse();
@@ -318,23 +261,23 @@ const Slider = t0 => {
       setIsDragging(false);
       previouslyDragged.current = true;
     };
-    $[63] = draggedIndex;
-    $[64] = handleValueChange;
-    $[65] = max;
-    $[66] = min;
-    $[67] = validStep;
-    $[68] = validValues;
-    $[69] = t14;
+    $[43] = draggedIndex;
+    $[44] = handleValueChange;
+    $[45] = max;
+    $[46] = min;
+    $[47] = validStep;
+    $[48] = validValues;
+    $[49] = t12;
   } else {
-    t14 = $[69];
+    t12 = $[49];
   }
-  const handleMouseUp = t14;
-  let t15;
-  if ($[70] !== draggedIndex || $[71] !== handleValueChange || $[72] !== max || $[73] !== min || $[74] !== validStep || $[75] !== validValues) {
-    t15 = t16 => {
+  const handleMouseUp = useEventCallback(t12);
+  let t13;
+  if ($[50] !== draggedIndex || $[51] !== handleValueChange || $[52] !== max || $[53] !== min || $[54] !== validStep || $[55] !== validValues) {
+    t13 = t14 => {
       const {
         pageX: pageX_0
-      } = t16;
+      } = t14;
       const nextValues_2 = adjustValues(validValues, ref, draggedIndex, pageX_0, max, min, validStep);
       if (nextValues_2[0] > nextValues_2[1]) {
         nextValues_2.reverse();
@@ -342,21 +285,21 @@ const Slider = t0 => {
       }
       handleValueChange(nextValues_2);
     };
-    $[70] = draggedIndex;
-    $[71] = handleValueChange;
-    $[72] = max;
-    $[73] = min;
-    $[74] = validStep;
-    $[75] = validValues;
-    $[76] = t15;
+    $[50] = draggedIndex;
+    $[51] = handleValueChange;
+    $[52] = max;
+    $[53] = min;
+    $[54] = validStep;
+    $[55] = validValues;
+    $[56] = t13;
   } else {
-    t15 = $[76];
+    t13 = $[56];
   }
-  const handleMouseMove = t15;
-  let t16;
-  let t17;
-  if ($[77] !== disabled || $[78] !== handleMouseMove || $[79] !== handleMouseUp || $[80] !== isDragging) {
-    t16 = () => {
+  const handleMouseMove = useEventCallback(t13);
+  let t14;
+  let t15;
+  if ($[57] !== disabled || $[58] !== handleMouseMove || $[59] !== handleMouseUp || $[60] !== isDragging) {
+    t14 = () => {
       if (disabled) {
         return;
       }
@@ -374,110 +317,112 @@ const Slider = t0 => {
         window.removeEventListener("mouseup", handleMouseUp);
       };
     };
-    t17 = [isDragging, handleMouseMove, handleMouseUp, disabled];
-    $[77] = disabled;
-    $[78] = handleMouseMove;
-    $[79] = handleMouseUp;
-    $[80] = isDragging;
-    $[81] = t16;
-    $[82] = t17;
+    t15 = [isDragging, disabled, handleMouseMove, handleMouseUp];
+    $[57] = disabled;
+    $[58] = handleMouseMove;
+    $[59] = handleMouseUp;
+    $[60] = isDragging;
+    $[61] = t14;
+    $[62] = t15;
   } else {
-    t16 = $[81];
-    t17 = $[82];
+    t14 = $[61];
+    t15 = $[62];
   }
-  useEffect(t16, t17);
-  const t18 = !!marks || showTag;
-  let t19;
-  if ($[83] !== className || $[84] !== disabled || $[85] !== t18) {
-    t19 = classNames(styles.slider, className, {
+  useEffect(t14, t15);
+  const t16 = "presentation";
+  const t17 = !!marks || showTag;
+  let t18;
+  if ($[63] !== className || $[64] !== disabled || $[65] !== t17) {
+    t18 = classNames(styles.slider, className, {
       [styles.disabled]: disabled,
-      [styles.marked]: t18
+      [styles.marked]: t17
     });
-    $[83] = className;
-    $[84] = disabled;
-    $[85] = t18;
-    $[86] = t19;
+    $[63] = className;
+    $[64] = disabled;
+    $[65] = t17;
+    $[66] = t18;
   } else {
-    t19 = $[86];
+    t18 = $[66];
   }
+  const t19 = -1;
   let t20;
-  if ($[87] !== shortcutsMap || $[88] !== shortcutsScope) {
+  if ($[67] !== shortcutsMap || $[68] !== shortcutsScope) {
     t20 = /*#__PURE__*/jsx(Shortcuts, {
       map: shortcutsMap,
       scope: shortcutsScope
     });
-    $[87] = shortcutsMap;
-    $[88] = shortcutsScope;
-    $[89] = t20;
+    $[67] = shortcutsMap;
+    $[68] = shortcutsScope;
+    $[69] = t20;
   } else {
-    t20 = $[89];
+    t20 = $[69];
   }
   const t21 = !showTicks;
   let t22;
-  if ($[90] !== disabled || $[91] !== t21) {
+  if ($[70] !== disabled || $[71] !== t21) {
     t22 = classNames(styles.rail, {
       [styles.rounded]: t21,
       [styles.disabled]: disabled
     });
-    $[90] = disabled;
-    $[91] = t21;
-    $[92] = t22;
+    $[70] = disabled;
+    $[71] = t21;
+    $[72] = t22;
   } else {
-    t22 = $[92];
+    t22 = $[72];
   }
   let t23;
-  if ($[93] !== t22) {
+  if ($[73] !== t22) {
     t23 = /*#__PURE__*/jsx("div", {
       className: t22
     });
-    $[93] = t22;
-    $[94] = t23;
+    $[73] = t22;
+    $[74] = t23;
   } else {
-    t23 = $[94];
+    t23 = $[74];
   }
   const t24 = `${trackStart}%`;
   const t25 = `${trackLength}%`;
   let t26;
-  if ($[95] !== t24 || $[96] !== t25) {
+  if ($[75] !== t24 || $[76] !== t25) {
     t26 = {
       left: t24,
       width: t25
     };
-    $[95] = t24;
-    $[96] = t25;
-    $[97] = t26;
+    $[75] = t24;
+    $[76] = t25;
+    $[77] = t26;
   } else {
-    t26 = $[97];
+    t26 = $[77];
   }
   const t27 = !showTicks;
   let t28;
-  if ($[98] !== disabled || $[99] !== t27) {
+  if ($[78] !== disabled || $[79] !== t27) {
     t28 = classNames(styles.track, {
       [styles.rounded]: t27,
       [styles.disabled]: disabled
     });
-    $[98] = disabled;
-    $[99] = t27;
-    $[100] = t28;
+    $[78] = disabled;
+    $[79] = t27;
+    $[80] = t28;
   } else {
-    t28 = $[100];
+    t28 = $[80];
   }
   let t29;
-  if ($[101] !== t26 || $[102] !== t28) {
+  if ($[81] !== t26 || $[82] !== t28) {
     t29 = /*#__PURE__*/jsx("div", {
       style: t26,
       className: t28
     });
-    $[101] = t26;
-    $[102] = t28;
-    $[103] = t29;
+    $[81] = t26;
+    $[82] = t28;
+    $[83] = t29;
   } else {
-    t29 = $[103];
+    t29 = $[83];
   }
   let t30;
-  if ($[104] !== disabled || $[105] !== draggedIndex || $[106] !== handleMouseDown || $[107] !== isDragging || $[108] !== max || $[109] !== min || $[110] !== renderTag || $[111] !== showTag || $[112] !== validValues) {
+  if ($[84] !== disabled || $[85] !== draggedIndex || $[86] !== handleMouseDown || $[87] !== isDragging || $[88] !== max || $[89] !== min || $[90] !== renderTag || $[91] !== showTag || $[92] !== validValues) {
     let t31;
-    if ($[114] !== disabled || $[115] !== draggedIndex || $[116] !== handleMouseDown || $[117] !== isDragging || $[118] !== max || $[119] !== min || $[120] !== renderTag || $[121] !== showTag) {
+    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, {
@@ -509,131 +454,109 @@ const Slider = t0 => {
           })]
         }, index_5);
       };
-      $[114] = disabled;
-      $[115] = draggedIndex;
-      $[116] = handleMouseDown;
-      $[117] = isDragging;
-      $[118] = max;
-      $[119] = min;
-      $[120] = renderTag;
-      $[121] = showTag;
-      $[122] = t31;
+      $[94] = disabled;
+      $[95] = draggedIndex;
+      $[96] = handleMouseDown;
+      $[97] = isDragging;
+      $[98] = max;
+      $[99] = min;
+      $[100] = renderTag;
+      $[101] = showTag;
+      $[102] = t31;
     } else {
-      t31 = $[122];
+      t31 = $[102];
     }
     t30 = validValues.map(t31);
-    $[104] = disabled;
-    $[105] = draggedIndex;
-    $[106] = handleMouseDown;
-    $[107] = isDragging;
-    $[108] = max;
-    $[109] = min;
-    $[110] = renderTag;
-    $[111] = showTag;
-    $[112] = validValues;
-    $[113] = t30;
+    $[84] = disabled;
+    $[85] = draggedIndex;
+    $[86] = handleMouseDown;
+    $[87] = isDragging;
+    $[88] = max;
+    $[89] = min;
+    $[90] = renderTag;
+    $[91] = showTag;
+    $[92] = validValues;
+    $[93] = t30;
   } else {
-    t30 = $[113];
+    t30 = $[93];
   }
   let t31;
-  if ($[123] !== disabled || $[124] !== markValues || $[125] !== max || $[126] !== min) {
-    let t32;
-    if ($[128] !== disabled || $[129] !== max || $[130] !== min) {
-      t32 = (t33, index_6) => {
-        const {
-          value: markValue,
-          label
-        } = t33;
-        const percent_0 = toPercent(markValue, min, max);
-        return /*#__PURE__*/jsx("div", {
-          style: {
-            left: `${percent_0}%`
-          },
-          className: classNames(styles.markValue, {
-            [styles.disabled]: disabled
-          }),
-          children: label !== null && label !== void 0 ? label : markValue
-        }, index_6);
-      };
-      $[128] = disabled;
-      $[129] = max;
-      $[130] = min;
-      $[131] = t32;
-    } else {
-      t32 = $[131];
-    }
-    t31 = markValues.map(t32);
-    $[123] = disabled;
-    $[124] = markValues;
-    $[125] = max;
-    $[126] = min;
-    $[127] = t31;
+  if ($[103] !== disabled || $[104] !== max || $[105] !== min) {
+    t31 = (t32, index_6) => {
+      const {
+        value: markValue,
+        label
+      } = t32;
+      const percent_0 = toPercent(markValue, min, max);
+      return /*#__PURE__*/jsx("div", {
+        style: {
+          left: `${percent_0}%`
+        },
+        className: classNames(styles.markValue, {
+          [styles.disabled]: disabled
+        }),
+        children: label !== null && label !== void 0 ? label : markValue
+      }, index_6);
+    };
+    $[103] = disabled;
+    $[104] = max;
+    $[105] = min;
+    $[106] = t31;
   } else {
-    t31 = $[127];
+    t31 = $[106];
   }
-  let t32;
-  if ($[132] !== disabled || $[133] !== isRange || $[134] !== max || $[135] !== min || $[136] !== tickMarks || $[137] !== validValues) {
-    let t33;
-    if ($[139] !== disabled || $[140] !== isRange || $[141] !== max || $[142] !== min || $[143] !== validValues) {
-      t33 = (t34, index_7) => {
-        const {
-          value: tickValue
-        } = t34;
-        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", {
-          className: classNames(styles.tick, {
-            [styles.active]: isActive,
-            [styles.disabled]: disabled
-          }),
-          style: {
-            left: `${percent_1}%`
-          }
-        }, index_7);
-      };
-      $[139] = disabled;
-      $[140] = isRange;
-      $[141] = max;
-      $[142] = min;
-      $[143] = validValues;
-      $[144] = t33;
-    } else {
-      t33 = $[144];
-    }
-    t32 = tickMarks.map(t33);
-    $[132] = disabled;
-    $[133] = isRange;
-    $[134] = max;
-    $[135] = min;
-    $[136] = tickMarks;
-    $[137] = validValues;
-    $[138] = t32;
+  const t32 = markValues.map(t31);
+  let t33;
+  if ($[107] !== disabled || $[108] !== isRange || $[109] !== max || $[110] !== min || $[111] !== validValues) {
+    t33 = (t34, index_7) => {
+      const {
+        value: tickValue
+      } = t34;
+      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", {
+        className: classNames(styles.tick, {
+          [styles.active]: isActive,
+          [styles.disabled]: disabled
+        }),
+        style: {
+          left: `${percent_1}%`
+        }
+      }, index_7);
+    };
+    $[107] = disabled;
+    $[108] = isRange;
+    $[109] = max;
+    $[110] = min;
+    $[111] = validValues;
+    $[112] = t33;
   } else {
-    t32 = $[138];
+    t33 = $[112];
   }
-  let t33;
-  if ($[145] !== handleMouseDown || $[146] !== t19 || $[147] !== t20 || $[148] !== t23 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32) {
-    t33 = /*#__PURE__*/jsxs("div", {
+  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: "presentation",
-      className: t19,
-      tabIndex: -1,
+      role: t16,
+      className: t18,
+      tabIndex: t19,
       onMouseDown: handleMouseDown,
-      children: [t20, t23, t29, t30, t31, t32]
+      children: [t20, t23, t29, t30, t32, t34]
     });
-    $[145] = handleMouseDown;
-    $[146] = t19;
-    $[147] = t20;
-    $[148] = t23;
-    $[149] = t29;
-    $[150] = t30;
-    $[151] = t31;
-    $[152] = t32;
-    $[153] = t33;
+    $[113] = handleMouseDown;
+    $[114] = t18;
+    $[115] = t20;
+    $[116] = t23;
+    $[117] = t29;
+    $[118] = t30;
+    $[119] = t32;
+    $[120] = t34;
+    $[121] = t35;
   } else {
-    t33 = $[153];
+    t35 = $[121];
   }
-  return t33;
+  return t35;
 };
 function _temp(target) {
   return Number(target?.getAttribute("data-index"));