@jetbrains/ring-ui-built 7.0.72 → 7.0.73

package/components/slider/slider.js

@@ -1,10 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useCallback, useEffect, Fragment } from 'react';
+import { c } from 'react-compiler-runtime';
+import { useRef, useState, useEffect, Fragment } from 'react';
 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, validateValue, calculateMarks, toPercent, calculateValue, adjustValues } from './slider.utils.js';
+import { toRange, HUNDRED, calculateMarks, toPercent, validateValue, calculateValue, adjustValues } from './slider.utils.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
@@ -12,239 +13,633 @@ 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 = ({
-  defaultValue,
-  value,
-  min = 0,
-  max = HUNDRED,
-  step = 1,
-  disabled,
-  marks,
-  showTicks,
-  showTag,
-  className,
-  renderTag,
-  onChange
-}) => {
+const Slider = t0 => {
+  const $ = c(154);
+  if ($[0] !== "7c00c25355ca34476232faa4b0d729160f0b7ed5ed726089246ce3288d3c8d5e") {
+    for (let $i = 0; $i < 154; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "7c00c25355ca34476232faa4b0d729160f0b7ed5ed726089246ce3288d3c8d5e";
+  }
+  const {
+    defaultValue,
+    value,
+    min: t1,
+    max: t2,
+    step: t3,
+    disabled,
+    marks,
+    showTicks,
+    showTag,
+    className,
+    renderTag,
+    onChange
+  } = t0;
+  const min = t1 === undefined ? 0 : t1;
+  const max = t2 === undefined ? HUNDRED : t2;
+  const step = t3 === undefined ? 1 : t3;
   const ref = useRef(null);
   const previouslyDragged = useRef(false);
   const [values, setValues] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min);
-  const validValues = useMemo(() => toRange(value !== null && value !== void 0 ? value : values, min, max), [max, min, value, values]);
+  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 validStep = step < 0 ? 0 : step;
-  const isRange = isArray(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value);
+  const t6 = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+  let t7;
+  if ($[5] !== t6) {
+    t7 = isArray(t6);
+    $[5] = t6;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  const isRange = t7;
   const [isDragging, setIsDragging] = useState(false);
   const [draggedIndex, setDraggedIndex] = useState(-1);
-  const [shortcutsScope] = useState(getUID('ring-slider-'));
-  const markValues = useMemo(() => {
+  let t8;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = getUID("ring-slider-");
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  const [shortcutsScope] = useState(t8);
+  let t9;
+  bb0: {
     if (isArray(marks)) {
-      return marks.map(mark => ({
-        ...mark,
-        value: validateValue(mark.value, min, max)
-      }));
+      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;
+      } else {
+        t10 = $[11];
+      }
+      t9 = t10;
+      break bb0;
     }
     if (marks) {
-      return calculateMarks(min, max, validStep);
+      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;
+      break bb0;
+    }
+    let t10;
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = [];
+      $[19] = t10;
+    } else {
+      t10 = $[19];
     }
-    return [];
-  }, [marks, max, min, validStep]);
-  const tickMarks = useMemo(() => {
+    t9 = t10;
+  }
+  const markValues = t9;
+  let t10;
+  bb1: {
     if (showTicks) {
-      return markValues.length ? markValues : calculateMarks(min, max, validStep);
+      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;
+      break bb1;
+    }
+    let t11;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = [];
+      $[25] = t11;
+    } else {
+      t11 = $[25];
     }
-    return [];
-  }, [max, min, markValues, showTicks, validStep]);
-  const trackStart = useMemo(() => toPercent(isRange ? Math.min(...validValues) : min, min, max), [isRange, max, min, validValues]);
-  const trackLength = useMemo(() => toPercent(Math.max(...validValues), min, max) - trackStart, [max, min, trackStart, validValues]);
-  const handleValueChange = useCallback(nextValues => {
-    setValues(nextValues);
-    onChange?.(isRange ? nextValues : nextValues[0]);
-  }, [isRange, onChange]);
-  const shortcutsMap = useMemo(() => {
-    const setValueAndSwap = (nextValue, index) => {
-      const nextValues = [...validValues];
-      nextValues[index] = nextValue;
-      if (nextValues[0] > nextValues[1]) {
-        const previousValue = nextValues[index];
-        nextValues.reverse();
-        const thumb = ref.current?.querySelector(`[role="slider"][data-index="${nextValues.indexOf(previousValue)}"]`);
+    t10 = t11;
+  }
+  const tickMarks = t10;
+  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 => {
+      setValues(nextValues);
+      onChange?.(isRange ? nextValues : nextValues[0]);
+    };
+    $[26] = isRange;
+    $[27] = onChange;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  const handleValueChange = t11;
+  let t12;
+  if ($[29] !== handleValueChange || $[30] !== validValues) {
+    t12 = (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);
+      handleValueChange(nextValues_0);
     };
-    const getIndex = target => Number(target?.getAttribute('data-index'));
-    const map = {};
+    $[29] = handleValueChange;
+    $[30] = validValues;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  const setValueAndSwap = t12;
+  const getIndex = _temp;
+  let map;
+  if ($[32] !== disabled || $[33] !== max || $[34] !== min || $[35] !== setValueAndSwap || $[36] !== validStep || $[37] !== validValues) {
+    map = {};
     if (!disabled) {
-      map.left = map.down = ({
-        target
-      }) => {
-        const index = getIndex(target);
-        setValueAndSwap(Math.max(min, validValues[index] - validStep), index);
-      };
-      map.right = map.up = ({
-        target
-      }) => {
-        const index = getIndex(target);
-        setValueAndSwap(Math.min(max, validValues[index] + validStep), index);
-      };
-      map.home = ({
-        target
-      }) => {
-        const index = getIndex(target);
-        setValueAndSwap(min, index);
-      };
-      map.end = ({
-        target
-      }) => {
-        const index = getIndex(target);
-        setValueAndSwap(max, index);
-      };
-    }
-    return map;
-  }, [disabled, handleValueChange, max, min, validStep, validValues]);
-  const handleMouseDown = useCallback(e => {
-    e.stopPropagation();
-    if (disabled) {
-      return;
-    }
-    const index = e.currentTarget.getAttribute('data-index');
-    const nextValue = calculateValue(ref, e.pageX, min, max, validStep);
-    if (nextValue !== null && !isNaN(nextValue) && !index) {
-      const rangeIndex = Number(Math.abs(validValues[0] - nextValue) > Math.abs(validValues[1] - nextValue));
-      setDraggedIndex(isRange ? rangeIndex : 0);
-    } else {
-      setDraggedIndex(Number(index));
-    }
-    setIsDragging(true);
-    previouslyDragged.current = false;
-  }, [disabled, isRange, max, min, validStep, validValues]);
-  const handleMouseUp = useCallback(({
-    pageX
-  }) => {
-    const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
-    if (nextValues[0] > nextValues[1]) {
-      nextValues.reverse();
-    }
-    handleValueChange(nextValues);
-    setDraggedIndex(-1);
-    setIsDragging(false);
-    previouslyDragged.current = true;
-  }, [validValues, draggedIndex, handleValueChange, max, min, validStep]);
-  const handleMouseMove = useCallback(({
-    pageX
-  }) => {
-    const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
-    if (nextValues[0] > nextValues[1]) {
-      nextValues.reverse();
-      setDraggedIndex(prevState => prevState === 0 ? 1 : 0);
-    }
-    handleValueChange(nextValues);
-  }, [validValues, draggedIndex, max, min, validStep, handleValueChange]);
-  useEffect(() => {
-    if (disabled) {
-      return undefined;
-    }
-    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);
+      let t13;
+      if ($[39] !== min || $[40] !== setValueAndSwap || $[41] !== validStep || $[42] !== validValues) {
+        t13 = t14 => {
+          const {
+            target: target_0
+          } = t14;
+          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;
+      } else {
+        t13 = $[43];
+      }
+      map.left = map.down = t13;
+      let t14;
+      if ($[44] !== max || $[45] !== setValueAndSwap || $[46] !== validStep || $[47] !== validValues) {
+        t14 = t15 => {
+          const {
+            target: target_1
+          } = t15;
+          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;
+      } else {
+        t14 = $[48];
+      }
+      map.right = map.up = t14;
+      let t15;
+      if ($[49] !== min || $[50] !== setValueAndSwap) {
+        t15 = t16 => {
+          const {
+            target: target_2
+          } = t16;
+          const index_2 = getIndex(target_2);
+          setValueAndSwap(min, index_2);
+        };
+        $[49] = min;
+        $[50] = setValueAndSwap;
+        $[51] = t15;
+      } else {
+        t15 = $[51];
+      }
+      map.home = t15;
+      let t16;
+      if ($[52] !== max || $[53] !== setValueAndSwap) {
+        t16 = t17 => {
+          const {
+            target: target_3
+          } = t17;
+          const index_3 = getIndex(target_3);
+          setValueAndSwap(max, index_3);
+        };
+        $[52] = max;
+        $[53] = setValueAndSwap;
+        $[54] = t16;
+      } else {
+        t16 = $[54];
+      }
+      map.end = t16;
     }
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
+    $[32] = disabled;
+    $[33] = max;
+    $[34] = min;
+    $[35] = setValueAndSwap;
+    $[36] = validStep;
+    $[37] = validValues;
+    $[38] = map;
+  } else {
+    map = $[38];
+  }
+  const shortcutsMap = map;
+  let t13;
+  if ($[55] !== disabled || $[56] !== isRange || $[57] !== max || $[58] !== min || $[59] !== validStep || $[60] !== validValues[0] || $[61] !== validValues[1]) {
+    t13 = 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;
+    };
+    $[55] = disabled;
+    $[56] = isRange;
+    $[57] = max;
+    $[58] = min;
+    $[59] = validStep;
+    $[60] = validValues[0];
+    $[61] = validValues[1];
+    $[62] = t13;
+  } else {
+    t13 = $[62];
+  }
+  const handleMouseDown = t13;
+  let t14;
+  if ($[63] !== draggedIndex || $[64] !== handleValueChange || $[65] !== max || $[66] !== min || $[67] !== validStep || $[68] !== validValues) {
+    t14 = t15 => {
+      const {
+        pageX
+      } = t15;
+      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;
+    };
+    $[63] = draggedIndex;
+    $[64] = handleValueChange;
+    $[65] = max;
+    $[66] = min;
+    $[67] = validStep;
+    $[68] = validValues;
+    $[69] = t14;
+  } else {
+    t14 = $[69];
+  }
+  const handleMouseUp = t14;
+  let t15;
+  if ($[70] !== draggedIndex || $[71] !== handleValueChange || $[72] !== max || $[73] !== min || $[74] !== validStep || $[75] !== validValues) {
+    t15 = t16 => {
+      const {
+        pageX: pageX_0
+      } = t16;
+      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);
+    };
+    $[70] = draggedIndex;
+    $[71] = handleValueChange;
+    $[72] = max;
+    $[73] = min;
+    $[74] = validStep;
+    $[75] = validValues;
+    $[76] = t15;
+  } else {
+    t15 = $[76];
+  }
+  const handleMouseMove = t15;
+  let t16;
+  let t17;
+  if ($[77] !== disabled || $[78] !== handleMouseMove || $[79] !== handleMouseUp || $[80] !== isDragging) {
+    t16 = () => {
+      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);
+        }
+      }
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
     };
-  }, [isDragging, handleMouseMove, handleMouseUp, disabled]);
-  return jsxs("div", {
-    ref: ref,
-    role: 'presentation' // contains interactive elements
-    ,
-    className: classNames(styles.slider, className, {
+    t17 = [isDragging, handleMouseMove, handleMouseUp, disabled];
+    $[77] = disabled;
+    $[78] = handleMouseMove;
+    $[79] = handleMouseUp;
+    $[80] = isDragging;
+    $[81] = t16;
+    $[82] = t17;
+  } else {
+    t16 = $[81];
+    t17 = $[82];
+  }
+  useEffect(t16, t17);
+  const t18 = !!marks || showTag;
+  let t19;
+  if ($[83] !== className || $[84] !== disabled || $[85] !== t18) {
+    t19 = classNames(styles.slider, className, {
       [styles.disabled]: disabled,
-      [styles.marked]: !!marks || showTag
-    }),
-    tabIndex: -1,
-    onMouseDown: handleMouseDown,
-    children: [jsx(Shortcuts, {
+      [styles.marked]: t18
+    });
+    $[83] = className;
+    $[84] = disabled;
+    $[85] = t18;
+    $[86] = t19;
+  } else {
+    t19 = $[86];
+  }
+  let t20;
+  if ($[87] !== shortcutsMap || $[88] !== shortcutsScope) {
+    t20 = /*#__PURE__*/jsx(Shortcuts, {
       map: shortcutsMap,
       scope: shortcutsScope
-    }), jsx("div", {
-      className: classNames(styles.rail, {
-        [styles.rounded]: !showTicks,
-        [styles.disabled]: disabled
-      })
-    }), jsx("div", {
-      style: {
-        left: `${trackStart}%`,
-        width: `${trackLength}%`
-      },
-      className: classNames(styles.track, {
-        [styles.rounded]: !showTicks,
-        [styles.disabled]: disabled
-      })
-    }), validValues.map((numValue, index) => {
-      const percent = toPercent(numValue, min, max);
-      return (
-        // eslint-disable-next-line react/no-array-index-key
-        jsxs(Fragment, {
-          children: [jsx("div", {
+    });
+    $[87] = shortcutsMap;
+    $[88] = shortcutsScope;
+    $[89] = t20;
+  } else {
+    t20 = $[89];
+  }
+  const t21 = !showTicks;
+  let t22;
+  if ($[90] !== disabled || $[91] !== t21) {
+    t22 = classNames(styles.rail, {
+      [styles.rounded]: t21,
+      [styles.disabled]: disabled
+    });
+    $[90] = disabled;
+    $[91] = t21;
+    $[92] = t22;
+  } else {
+    t22 = $[92];
+  }
+  let t23;
+  if ($[93] !== t22) {
+    t23 = /*#__PURE__*/jsx("div", {
+      className: t22
+    });
+    $[93] = t22;
+    $[94] = t23;
+  } else {
+    t23 = $[94];
+  }
+  const t24 = `${trackStart}%`;
+  const t25 = `${trackLength}%`;
+  let t26;
+  if ($[95] !== t24 || $[96] !== t25) {
+    t26 = {
+      left: t24,
+      width: t25
+    };
+    $[95] = t24;
+    $[96] = t25;
+    $[97] = t26;
+  } else {
+    t26 = $[97];
+  }
+  const t27 = !showTicks;
+  let t28;
+  if ($[98] !== disabled || $[99] !== t27) {
+    t28 = classNames(styles.track, {
+      [styles.rounded]: t27,
+      [styles.disabled]: disabled
+    });
+    $[98] = disabled;
+    $[99] = t27;
+    $[100] = t28;
+  } else {
+    t28 = $[100];
+  }
+  let t29;
+  if ($[101] !== t26 || $[102] !== t28) {
+    t29 = /*#__PURE__*/jsx("div", {
+      style: t26,
+      className: t28
+    });
+    $[101] = t26;
+    $[102] = t28;
+    $[103] = t29;
+  } else {
+    t29 = $[103];
+  }
+  let t30;
+  if ($[104] !== disabled || $[105] !== draggedIndex || $[106] !== handleMouseDown || $[107] !== isDragging || $[108] !== max || $[109] !== min || $[110] !== renderTag || $[111] !== showTag || $[112] !== validValues) {
+    let t31;
+    if ($[114] !== disabled || $[115] !== draggedIndex || $[116] !== handleMouseDown || $[117] !== isDragging || $[118] !== max || $[119] !== min || $[120] !== renderTag || $[121] !== 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-label": "Pick value",
+            role: "slider",
             "aria-valuemin": min,
             "aria-valuemax": max,
             "aria-valuenow": numValue,
-            "data-index": index,
+            "data-index": index_5,
             style: {
               left: `${percent}%`
             },
             className: classNames(styles.thumb, {
               [styles.disabled]: disabled,
-              [styles.dragged]: isDragging && draggedIndex === index
+              [styles.dragged]: isDragging && draggedIndex === index_5
             }),
             onMouseDown: handleMouseDown
-          }), showTag && jsx("div", {
+          }), showTag && /*#__PURE__*/jsx("div", {
             style: {
               left: `${percent}%`
             },
             className: classNames(styles.tag, {
               [styles.disabled]: disabled
             }),
-            role: 'tooltip',
+            role: "tooltip",
             children: renderTag ? renderTag(numValue) : numValue
           })]
-        }, index)
-      );
-    }), markValues.map(({
-      value: markValue,
-      label
-    }, index) => {
-      const percent = toPercent(markValue, min, max);
-      return jsx("div", {
-        style: {
-          left: `${percent}%`
-        },
-        className: classNames(styles.markValue, {
-          [styles.disabled]: disabled
-        }),
-        children: label !== null && label !== void 0 ? label : markValue
-      }, index);
-    }), tickMarks.map(({
-      value: tickValue
-    }, index) => {
-      const percent = toPercent(tickValue, min, max);
-      const isActive = isRange ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1] : tickValue <= validValues[0];
-      return jsx("div", {
-        className: classNames(styles.tick, {
-          [styles.active]: isActive,
-          [styles.disabled]: disabled
-        }),
-        style: {
-          left: `${percent}%`
-        }
-      }, index);
-    })]
-  });
+        }, index_5);
+      };
+      $[114] = disabled;
+      $[115] = draggedIndex;
+      $[116] = handleMouseDown;
+      $[117] = isDragging;
+      $[118] = max;
+      $[119] = min;
+      $[120] = renderTag;
+      $[121] = showTag;
+      $[122] = t31;
+    } else {
+      t31 = $[122];
+    }
+    t30 = validValues.map(t31);
+    $[104] = disabled;
+    $[105] = draggedIndex;
+    $[106] = handleMouseDown;
+    $[107] = isDragging;
+    $[108] = max;
+    $[109] = min;
+    $[110] = renderTag;
+    $[111] = showTag;
+    $[112] = validValues;
+    $[113] = t30;
+  } else {
+    t30 = $[113];
+  }
+  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;
+  } else {
+    t31 = $[127];
+  }
+  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;
+  } else {
+    t32 = $[138];
+  }
+  let t33;
+  if ($[145] !== handleMouseDown || $[146] !== t19 || $[147] !== t20 || $[148] !== t23 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32) {
+    t33 = /*#__PURE__*/jsxs("div", {
+      ref: ref,
+      role: "presentation",
+      className: t19,
+      tabIndex: -1,
+      onMouseDown: handleMouseDown,
+      children: [t20, t23, t29, t30, t31, t32]
+    });
+    $[145] = handleMouseDown;
+    $[146] = t19;
+    $[147] = t20;
+    $[148] = t23;
+    $[149] = t29;
+    $[150] = t30;
+    $[151] = t31;
+    $[152] = t32;
+    $[153] = t33;
+  } else {
+    t33 = $[153];
+  }
+  return t33;
 };
+function _temp(target) {
+  return Number(target?.getAttribute("data-index"));
+}
+function _temp2(prevState) {
+  return prevState === 0 ? 1 : 0;
+}
 
 export { Slider };