welcome-ui 8.1.0 → 8.1.2

package/dist/Slider.mjs

@@ -1,49 +1,48 @@
 "use client";
-import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { useState as D, useRef as S, useCallback as ie, useEffect as F } from "react";
-import { Box as m } from "./Box.mjs";
-import { Hint as ee } from "./Hint.mjs";
-import { InputText as W } from "./InputText.mjs";
+import r, { useState as D, useRef as S, useCallback as ne, useEffect as F } from "react";
+import R, { th as s, css as b } from "@xstyled/styled-components";
+import { Box as $ } from "./Box.mjs";
+import { Hint as X } from "./Hint.mjs";
+import { Text as re } from "./Text.mjs";
+import { InputText as O } from "./InputText.mjs";
 import { forwardRef as le } from "./System.mjs";
-import { Text as ae } from "./Text.mjs";
-import z, { th as l, css as $ } from "@xstyled/styled-components";
-const H = $`
+const W = b`
   appearance: none;
   cursor: pointer;
   height: 20;
   width: 20;
   transform: scale(1);
   transition:
-    background-color ${l.transition("medium")},
-    border-color ${l.transition("medium")},
+    background-color ${s.transition("medium")},
+    border-color ${s.transition("medium")},
     transform 100ms ease-in-out;
-`, _ = $`
-  ${l("sliders.focused")};
+`, j = b`
+  ${s("sliders.focused")};
   transform: scale(1.2);
-`, ce = $`
+`, oe = b`
   position: absolute;
   width: 100%;
-  height: ${l("space.xs")};
-`, he = z.input(
-  ({ borderSelectorColor: o, disabled: c }) => $`
-    ${l("sliders.default")};
+  height: ${s("space.xs")};
+`, me = R.input(
+  ({ borderSelectorColor: o, disabled: c }) => b`
+    ${s("sliders.default")};
     appearance: none;
     cursor: pointer;
     background-repeat: no-repeat;
     border-radius: 0;
     margin: auto 0;
     width: 100%;
-    height: ${l("space.xs")};
+    height: ${s("space.xs")};
 
     &::-webkit-slider-thumb {
-      ${l("sliders.selector")};
-      ${H};
+      ${s("sliders.selector")};
+      ${W};
       border-color: ${o || "transparent"};
     }
 
     &::-moz-range-thumb {
-      ${l("sliders.selector")};
-      ${H};
+      ${s("sliders.selector")};
+      ${W};
       border-color: ${o || "transparent"};
     }
 
@@ -52,42 +51,42 @@ const H = $`
       outline: none;
 
       &::-webkit-slider-thumb {
-        ${_};
+        ${j};
       }
 
       &::-moz-range-thumb {
-        ${_};
+        ${j};
       }
     }
 
-    ${c && $`
-      ${l("sliders.disabled")}
+    ${c && b`
+      ${s("sliders.disabled")}
       cursor: not-allowed;
 
       &::-webkit-slider-thumb {
-        ${l("sliders.selector.disabled")};
+        ${s("sliders.selector.disabled")};
         cursor: not-allowed;
       }
 
       &::-moz-range-thumb {
-        ${l("sliders.selector.disabled")};
+        ${s("sliders.selector.disabled")};
         cursor: not-allowed;
       }
 
       &:active {
         &::-webkit-slider-thumb {
-          ${l("sliders.focused.disabled")};
+          ${s("sliders.focused.disabled")};
         }
 
         &::-moz-range-thumb {
-          ${l("sliders.focused.disabled")};
+          ${s("sliders.focused.disabled")};
         }
       }
     `};
   `
-), re = z.input(
-  ({ borderSelectorColor: o, disabled: c }) => $`
-    ${l("sliders.rangeInput")}
+), ee = R.input(
+  ({ borderSelectorColor: o, disabled: c }) => b`
+    ${s("sliders.rangeInput")}
     appearance: none;
     pointer-events: none;
     position: absolute;
@@ -95,24 +94,24 @@ const H = $`
     width: 100%;
     outline: none;
     z-index: 1;
-    top: ${l("space.xxs")};
+    top: ${s("space.xxs")};
 
     &::-webkit-slider-thumb {
-      ${l("sliders.selector")};
-      ${H};
+      ${s("sliders.selector")};
+      ${W};
 
       border-color: ${o || "transparent"};
-      top: ${l("space.sm")};
+      top: ${s("space.sm")};
       pointer-events: all;
       position: relative;
     }
 
     &::-moz-range-thumb {
-      ${l("sliders.selector")};
-      ${H};
+      ${s("sliders.selector")};
+      ${W};
 
       border-color: ${o || "transparent"};
-      top: ${l("space.sm")};
+      top: ${s("space.sm")};
       pointer-events: all;
       position: relative;
     }
@@ -120,53 +119,53 @@ const H = $`
     &:active,
     &:focus-visible {
       &::-webkit-slider-thumb {
-        ${_};
+        ${j};
       }
 
       &::-moz-range-thumb {
-        ${_};
+        ${j};
       }
     }
 
-    ${c && $`
+    ${c && b`
       &::-webkit-slider-thumb {
-        ${l("sliders.selector.disabled")};
+        ${s("sliders.selector.disabled")};
         cursor: not-allowed;
       }
 
       &::-moz-range-thumb {
-        ${l("sliders.selector.disabled")};
+        ${s("sliders.selector.disabled")};
         cursor: not-allowed;
       }
 
       &:active {
         &::-webkit-slider-thumb {
-          ${l("sliders.focused.disabled")};
+          ${s("sliders.focused.disabled")};
         }
 
         &::-moz-range-thumb {
-          ${l("sliders.focused.disabled")};
+          ${s("sliders.focused.disabled")};
         }
       }
     `};
   `
-), pe = z(m)(
-  () => $`
-    ${ce};
+), fe = R($)(
+  () => b`
+    ${oe};
     background-color: beige-40;
   `
-), me = z(m)(
-  ({ disabled: o }) => $`
-    ${ce};
+), de = R($)(
+  ({ disabled: o }) => b`
+    ${oe};
     background-color: primary-40;
 
-    ${o && $`
-      ${l("sliders.disabled")}
+    ${o && b`
+      ${s("sliders.disabled")}
       cursor: not-allowed;
     `};
   `
-), ue = z(m)(
-  () => $`
+), ae = R($)(
+  () => b`
     position: absolute;
 
     :before {
@@ -178,16 +177,16 @@ const H = $`
       transform: translate(-50%);
     }
   `
-), de = z(ee)(
-  () => $`
+), se = R(X)(
+  () => b`
     position: absolute;
     color: neutral-50;
     top: 0;
     transform: translate(-50%);
     white-space: nowrap;
   `
-), Y = z.outputBox(
-  ({ isVisible: o }) => $`
+), J = R.outputBox(
+  ({ isVisible: o }) => b`
     opacity: 0;
     visibility: hidden;
     transition:
@@ -196,359 +195,337 @@ const H = $`
       transform 150ms ease-in-out;
     position: absolute;
     text-align: center;
-    transform: translate(-50%, calc(-100% + -${l("space.xs")}));
+    transform: translate(-50%, calc(-100% + -${s("space.xs")}));
 
-    ${o && $`
+    ${o && b`
       opacity: 100;
       visibility: visible;
-      transform: translate(-50%, calc(-100% + -${l("space.sm")}));
+      transform: translate(-50%, calc(-100% + -${s("space.sm")}));
     `}
   `
-), Z = z(m)(
-  () => $`
-    ${l("sliders.output.tooltip")};
+), Q = R($)(
+  () => b`
+    ${s("sliders.output.tooltip")};
     flex: 1 1 auto;
     margin: auto;
-    min-width: ${l("space.xxs")};
-    padding: ${l("space.xs")} ${l("space.sm")};
+    min-width: ${s("space.xxs")};
+    padding: ${s("space.xs")} ${s("space.sm")};
   `
-), oe = 20, B = ({
+), te = 20, C = ({
   min: o,
   step: c,
-  toCompare: x,
-  value: v
+  toCompare: g,
+  value: y
 }) => {
-  let n = Math.min(v, x - 1 * c);
-  return n = Math.max(n, o), q(n, c);
+  let n = Math.min(y, g - 1 * c);
+  return n = Math.max(n, o), H(n, c);
 }, L = ({
   max: o,
   step: c,
-  toCompare: x,
-  value: v
+  toCompare: g,
+  value: y
 }) => {
-  let n = Math.max(v, x + 1 * c);
-  return n = Math.min(n, o), q(n, c);
-}, $e = le(
+  let n = Math.max(y, g + 1 * c);
+  return n = Math.min(n, o), H(n, c);
+}, pe = le(
   ({
     borderSelectorColor: o = "neutral-10",
     disabled: c,
-    hint: x,
-    label: v,
+    hint: g,
+    label: y,
     max: n,
-    min: i,
-    onChange: j,
-    step: a = 1,
-    tooltip: R,
-    type: b,
+    min: a,
+    onChange: w,
+    step: i = 1,
+    tooltip: M,
+    type: h,
     value: p,
-    values: E,
+    values: P,
     ...G
-  }, J) => {
-    const [u, M] = D(i), [d, I] = D(n), [N, g] = D(n), [w, y] = D(n), T = S(null), P = S(null), k = S(null), K = S(null), C = S(null), [A, Q] = D(!1), [O, X] = D(!1), r = (e) => {
-      const t = B({
-        min: i,
-        step: a,
-        toCompare: d,
-        value: parseInt(e.target.value, 10)
+  }, q) => {
+    const [u, V] = D(a), [m, z] = D(n), [N, v] = D(n), [E, k] = D(n), A = S(null), U = S(null), x = S(null), K = S(null), B = S(null), [T, l] = D(!1), [f, Y] = D(!1), ce = (e) => {
+      const t = C({
+        value: parseInt(e.target.value, 10),
+        toCompare: m,
+        step: i,
+        min: a
       });
-      g(t), M(t), e.target.value = t.toString();
-    }, f = (e) => {
+      v(t), V(t), e.target.value = t.toString();
+    }, ue = (e) => {
       const t = L({
-        max: n,
-        step: a,
+        value: parseInt(e.target.value, 10),
         toCompare: u,
-        value: parseInt(e.target.value, 10)
+        step: i,
+        max: n
       });
-      y(t), I(t), e.target.value = t.toString();
-    }, te = (e, t) => {
+      k(t), z(t), e.target.value = t.toString();
+    }, Z = (e, t) => {
       if (e.preventDefault(), t === "min") {
-        let h = u;
-        e.key === "ArrowRight" && (h = B({ min: i, step: a, toCompare: d, value: h + a })), e.key === "ArrowLeft" && (h = B({ min: i, step: a, toCompare: d, value: h - a })), g(h), M(h), j({ max: d, min: h });
+        let d = u;
+        e.key === "ArrowRight" && (d = C({ value: d + i, toCompare: m, step: i, min: a })), e.key === "ArrowLeft" && (d = C({ value: d - i, toCompare: m, step: i, min: a })), v(d), V(d), w({ min: d, max: m });
       }
       if (t === "max") {
-        let h = d;
-        e.key === "ArrowRight" && (h = L({ max: n, step: a, toCompare: u, value: h + a })), e.key === "ArrowLeft" && (h = L({ max: n, step: a, toCompare: u, value: h - a })), y(h), I(h), j({ max: h, min: u });
+        let d = m;
+        e.key === "ArrowRight" && (d = L({ value: d + i, toCompare: u, step: i, max: n })), e.key === "ArrowLeft" && (d = L({ value: d - i, toCompare: u, step: i, max: n })), k(d), z(d), w({ min: u, max: d });
       }
-    }, V = ie(
+    }, I = ne(
       (e) => {
-        const t = Math.round((e - i) / (n - i) * 100);
+        const t = Math.round((e - a) / (n - a) * 100);
         return t < 0 ? 0 : t > 100 ? 100 : t;
       },
-      [i, n]
-    ), ne = () => {
-      R && O === !1 && X(!0);
-    }, se = () => {
-      j({ max: d, min: u }), R && Q(!1);
-    };
+      [a, n]
+    );
     return F(() => {
-      if (P.current) {
-        const e = V(u), t = V(parseInt(P.current.value, 10));
-        k.current && (k.current.style.left = `${e}%`, k.current.style.width = `${t - e}%`);
+      if (U.current) {
+        const e = I(u), t = I(parseInt(U.current.value, 10));
+        x.current && (x.current.style.left = `${e}%`, x.current.style.width = `${t - e}%`);
       }
-    }, [u, V]), F(() => {
-      if (T.current) {
-        const e = V(parseInt(T.current.value, 10)), t = V(d);
-        if (k.current && (k.current.style.width = `${t - e}%`), K.current) {
-          const h = V(u) / 100;
-          K.current.style.left = `calc(${h * 100}% + ${(0.5 - h) * oe}px)`;
+    }, [u, I]), F(() => {
+      if (A.current) {
+        const e = I(parseInt(A.current.value, 10)), t = I(m);
+        if (x.current && (x.current.style.width = `${t - e}%`), K.current) {
+          const d = I(u) / 100;
+          K.current.style.left = `calc(${d * 100}% + ${(0.5 - d) * te}px)`;
         }
-        if (C.current) {
-          const h = V(d) / 100;
-          C.current.style.left = `calc(${h * 100}% + ${(0.5 - h) * oe}px)`;
+        if (B.current) {
+          const d = I(m) / 100;
+          B.current.style.left = `calc(${d * 100}% + ${(0.5 - d) * te}px)`;
         }
       }
-    }, [u, d, V]), F(() => {
+    }, [u, m, I]), F(() => {
       if (p) {
         if (!isNaN(p.min) && p.min !== u) {
-          const e = B({ min: i, step: a, toCompare: d, value: p.min || i });
-          M(e), g(e);
+          const e = C({ value: p.min || a, toCompare: m, step: i, min: a });
+          V(e), v(e);
         }
-        if (!isNaN(p.max) && p.max !== d) {
-          const e = L({ max: n, step: a, toCompare: u, value: p.max || n });
-          I(e), y(e);
+        if (!isNaN(p.max) && p.max !== m) {
+          const e = L({ value: p.max || n, toCompare: u, step: i, max: n });
+          z(e), k(e);
         }
       }
-    }, [p]), /* @__PURE__ */ s.jsxs(m, { position: "relative", ref: J, w: "100%", children: [
-      v ? /* @__PURE__ */ s.jsx(ae, { as: "label", variant: "sm", children: v }) : null,
-      /* @__PURE__ */ s.jsxs(m, { alignItems: "center", display: "flex", gap: "sm", children: [
-        (b === "inline" || b === "fields") && (b === "fields" ? /* @__PURE__ */ s.jsx(
-          W,
-          {
-            disabled: c,
-            max: d,
-            min: i,
-            onBlur: () => {
-              const e = B({
-                min: i,
-                step: a,
-                toCompare: d,
-                value: N
-              });
-              g(e), M(e), j({ max: d, min: e });
-            },
-            onChange: (e) => {
-              let t = parseInt(e.target.value, 10);
-              isNaN(t) && (t = 0), g(t);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                const t = B({
-                  min: i,
-                  step: a,
-                  toCompare: d,
-                  value: N
-                });
-                g(t), M(t), j({ max: d, min: t });
-              }
-            },
-            size: "sm",
-            type: "number",
-            value: N.toString(),
-            w: 72
+    }, [p]), /* @__PURE__ */ r.createElement($, { position: "relative", ref: q, w: "100%" }, y && /* @__PURE__ */ r.createElement(re, { as: "label", variant: "sm" }, y), /* @__PURE__ */ r.createElement($, { alignItems: "center", display: "flex", gap: "sm" }, (h === "inline" || h === "fields") && (h === "fields" ? /* @__PURE__ */ r.createElement(
+      O,
+      {
+        disabled: c,
+        max: m,
+        min: a,
+        onBlur: () => {
+          const e = C({
+            value: N,
+            toCompare: m,
+            step: i,
+            min: a
+          });
+          v(e), V(e), w({ min: e, max: m });
+        },
+        onChange: (e) => {
+          let t = parseInt(e.target.value, 10);
+          isNaN(t) && (t = 0), v(t);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            const t = C({
+              value: N,
+              toCompare: m,
+              step: i,
+              min: a
+            });
+            v(t), V(t), w({ min: t, max: m });
           }
-        ) : /* @__PURE__ */ s.jsx(m, { children: i })),
-        /* @__PURE__ */ s.jsxs(m, { flexGrow: "1", position: "relative", children: [
-          R ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-            /* @__PURE__ */ s.jsx(Y, { isVisible: A, ref: K, children: /* @__PURE__ */ s.jsx(Z, { children: u }) }),
-            /* @__PURE__ */ s.jsx(Y, { isVisible: O, ref: C, children: /* @__PURE__ */ s.jsx(Z, { children: d }) })
-          ] }) : null,
-          /* @__PURE__ */ s.jsxs(m, { h: 20, pb: "sm", position: "relative", pt: "sm", w: "100%", children: [
-            /* @__PURE__ */ s.jsx(
-              re,
-              {
-                ...G,
-                borderSelectorColor: o,
-                disabled: c,
-                max: n,
-                min: i,
-                onChange: r,
-                onKeyDown: (e) => te(e, "min"),
-                onMouseDown: ne,
-                onMouseUp: se,
-                ref: T,
-                step: a,
-                type: "range",
-                value: u
-              }
-            ),
-            /* @__PURE__ */ s.jsx(
-              re,
-              {
-                ...G,
-                borderSelectorColor: o,
-                disabled: c,
-                max: n,
-                min: i,
-                onChange: f,
-                onKeyDown: (e) => te(e, "max"),
-                onMouseDown: ne,
-                onMouseUp: se,
-                ref: P,
-                step: a,
-                type: "range",
-                value: d
-              }
-            ),
-            /* @__PURE__ */ s.jsx(pe, {}),
-            /* @__PURE__ */ s.jsx(me, { disabled: c, ref: k })
-          ] }),
-          E ? /* @__PURE__ */ s.jsx(m, { h: 24, ml: 10, mr: 10, position: "relative", children: E.reduce((e, t) => e.includes(t) ? e : [...e, t], []).filter((e) => e >= i && e <= n).map((e, t) => /* @__PURE__ */ s.jsx(ue, { left: `${V(e)}%`, children: /* @__PURE__ */ s.jsx(de, { children: e }) }, `${e}-${t}`)) }) : null
-        ] }),
-        (b === "inline" || b === "fields") && (b === "fields" ? /* @__PURE__ */ s.jsx(
-          W,
-          {
-            disabled: c,
-            max: n,
-            min: u + 1,
-            onBlur: () => {
-              const e = L({
-                max: n,
-                step: a,
-                toCompare: u,
-                value: w
-              });
-              y(e), I(e), j({ max: e, min: u });
-            },
-            onChange: (e) => {
-              let t = parseInt(e.target.value, 10);
-              isNaN(t) && (t = 0), y(t);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                const t = L({
-                  max: n,
-                  step: a,
-                  toCompare: u,
-                  value: w
-                });
-                y(t), I(t), j({ max: t, min: u });
-              }
-            },
-            size: "sm",
-            type: "number",
-            value: w.toString(),
-            w: 72
+        },
+        size: "sm",
+        type: "number",
+        value: N.toString(),
+        w: 72
+      }
+    ) : /* @__PURE__ */ r.createElement($, null, a)), /* @__PURE__ */ r.createElement($, { flexGrow: "1", position: "relative" }, M && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(J, { isVisible: T, ref: K }, /* @__PURE__ */ r.createElement(Q, null, u)), /* @__PURE__ */ r.createElement(J, { isVisible: f, ref: B }, /* @__PURE__ */ r.createElement(Q, null, m))), /* @__PURE__ */ r.createElement($, { h: 20, pb: "sm", position: "relative", pt: "sm", w: "100%" }, /* @__PURE__ */ r.createElement(
+      ee,
+      {
+        ...G,
+        borderSelectorColor: o,
+        disabled: c,
+        max: n,
+        min: a,
+        onChange: ce,
+        onKeyDown: (e) => Z(e, "min"),
+        onMouseDown: () => {
+          M && T === !1 && l(!0);
+        },
+        onMouseUp: () => {
+          w({ min: u, max: m }), M && l(!1);
+        },
+        ref: A,
+        step: i,
+        type: "range",
+        value: u
+      }
+    ), /* @__PURE__ */ r.createElement(
+      ee,
+      {
+        ...G,
+        borderSelectorColor: o,
+        disabled: c,
+        max: n,
+        min: a,
+        onChange: ue,
+        onKeyDown: (e) => Z(e, "max"),
+        onMouseDown: () => {
+          M && f === !1 && Y(!0);
+        },
+        onMouseUp: () => {
+          w({ min: u, max: m }), M && Y(!1);
+        },
+        ref: U,
+        step: i,
+        type: "range",
+        value: m
+      }
+    ), /* @__PURE__ */ r.createElement(fe, null), /* @__PURE__ */ r.createElement(de, { disabled: c, ref: x })), P && /* @__PURE__ */ r.createElement($, { h: 24, ml: 10, mr: 10, position: "relative" }, P.reduce((e, t) => e.includes(t) ? e : [...e, t], []).filter((e) => e >= a && e <= n).map((e, t) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ r.createElement(ae, { key: `${e}-${t}`, left: `${I(e)}%` }, /* @__PURE__ */ r.createElement(se, null, e))
+    )))), (h === "inline" || h === "fields") && (h === "fields" ? /* @__PURE__ */ r.createElement(
+      O,
+      {
+        disabled: c,
+        max: n,
+        min: u + 1,
+        onBlur: () => {
+          const e = L({
+            value: E,
+            toCompare: u,
+            step: i,
+            max: n
+          });
+          k(e), z(e), w({ min: u, max: e });
+        },
+        onChange: (e) => {
+          let t = parseInt(e.target.value, 10);
+          isNaN(t) && (t = 0), k(t);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            const t = L({
+              value: E,
+              toCompare: u,
+              step: i,
+              max: n
+            });
+            k(t), z(t), w({ min: u, max: t });
           }
-        ) : /* @__PURE__ */ s.jsx(m, { children: n }))
-      ] }),
-      x ? /* @__PURE__ */ s.jsx(ee, { color: "neutral-50", mt: 0, children: x }) : null
-    ] });
+        },
+        size: "sm",
+        type: "number",
+        value: E.toString(),
+        w: 72
+      }
+    ) : /* @__PURE__ */ r.createElement($, null, n))), g && /* @__PURE__ */ r.createElement(X, { color: "neutral-50", mt: 0 }, g));
   }
-), be = 20, q = (o, c) => Math.round(o / c) * c, U = (o, c, x, v) => (o = q(o, v), o < c ? c : o > x ? x : o), fe = le(
+), $e = 20, H = (o, c) => Math.round(o / c) * c, _ = (o, c, g, y) => (o = H(o, y), o < c ? c : o > g ? g : o), ie = le(
   ({
     borderSelectorColor: o = "neutral-10",
     disabled: c,
-    hint: x,
-    label: v,
+    hint: g,
+    label: y,
     max: n,
-    min: i,
-    onChange: j,
-    step: a = 1,
-    tooltip: R,
-    type: b,
+    min: a,
+    onChange: w,
+    step: i = 1,
+    tooltip: M,
+    type: h,
     value: p,
-    values: E,
+    values: P,
     ...G
-  }, J) => {
-    const u = S(null), M = S(null), [d, I] = D(!1), [N, g] = D(U(p, i, n, a)), [w, y] = D(U(p, i, n, a)), T = (r) => {
-      r = q(r, a), y(r);
-    }, P = (r) => {
-      r.preventDefault();
-      let f = w;
-      r.key === "ArrowRight" && (f = U(f + a, i, n, a)), r.key === "ArrowLeft" && (f = U(f - a, i, n, a)), y(f), g(f), j(f);
-    }, k = (r) => {
-      let f = parseInt(r.target.value, 10);
-      isNaN(f) && (f = 0), g(f);
+  }, q) => {
+    const u = S(null), V = S(null), [m, z] = D(!1), [N, v] = D(_(p, a, n, i)), [E, k] = D(_(p, a, n, i)), A = (l) => {
+      l = H(l, i), k(l);
+    }, U = (l) => {
+      l.preventDefault();
+      let f = E;
+      l.key === "ArrowRight" && (f = _(f + i, a, n, i)), l.key === "ArrowLeft" && (f = _(f - i, a, n, i)), k(f), v(f), w(f);
+    }, x = (l) => {
+      let f = parseInt(l.target.value, 10);
+      isNaN(f) && (f = 0), v(f);
     }, K = () => {
-      const r = U(N, i, n, a);
-      g(r), y(r), j(r);
-    }, C = (r) => {
-      r.key === "Enter" && K();
-    }, A = ie(
-      (r) => Math.round((r - i) / (n - i) * 100),
-      [i, n]
-    ), Q = (r) => {
-      const f = parseInt(r.target.value, 10);
-      T(f), g(f);
-    }, O = () => {
-      R && d === !1 && I(!0);
-    }, X = () => {
-      j(w), R && I(!1);
-    };
+      const l = _(N, a, n, i);
+      v(l), k(l), w(l);
+    }, B = (l) => {
+      l.key === "Enter" && K();
+    }, T = ne(
+      (l) => Math.round((l - a) / (n - a) * 100),
+      [a, n]
+    );
     return F(() => {
-      if (u.current && (u.current.style.backgroundSize = `${A(w)}% 100%`), M.current) {
-        const r = A(w) / 100;
-        M.current.style.left = `calc(${r * 100}% + ${(0.5 - r) * be}px)`;
+      if (u.current && (u.current.style.backgroundSize = `${T(E)}% 100%`), V.current) {
+        const l = T(E) / 100;
+        V.current.style.left = `calc(${l * 100}% + ${(0.5 - l) * $e}px)`;
       }
-    }, [w, A]), F(() => {
-      !isNaN(p) && p !== w && p && (T(p), g(p));
-    }, [p]), /* @__PURE__ */ s.jsxs(m, { display: "flex", flexDirection: "column", position: "relative", ref: J, children: [
-      v ? /* @__PURE__ */ s.jsx(ae, { as: "label", variant: "sm", children: v }) : null,
-      /* @__PURE__ */ s.jsxs(m, { alignItems: "center", display: "flex", gap: "sm", children: [
-        (b === "inline" || b === "left-field") && (b === "left-field" ? /* @__PURE__ */ s.jsx(
-          W,
-          {
-            disabled: c,
-            max: n,
-            min: i,
-            onBlur: K,
-            onChange: k,
-            onKeyDown: C,
-            size: "sm",
-            type: "number",
-            value: N.toString(),
-            w: 72
-          }
-        ) : /* @__PURE__ */ s.jsx(m, { children: i })),
-        /* @__PURE__ */ s.jsxs(m, { display: "flex", flexDirection: "column", flexGrow: "1", h: 20, position: "relative", children: [
-          /* @__PURE__ */ s.jsx(
-            he,
-            {
-              borderSelectorColor: o,
-              disabled: c,
-              list: "tickmarks",
-              max: n,
-              min: i,
-              onChange: Q,
-              onKeyDown: P,
-              onMouseDown: O,
-              onMouseUp: X,
-              ref: u,
-              step: a,
-              type: "range",
-              value: w,
-              ...G
-            }
-          ),
-          R ? /* @__PURE__ */ s.jsx(Y, { isVisible: d, ref: M, children: /* @__PURE__ */ s.jsx(Z, { children: w }) }) : null,
-          E ? /* @__PURE__ */ s.jsx(m, { h: 24, ml: 10, mr: 10, mt: 5, position: "relative", children: E.reduce((r, f) => r.includes(f) ? r : [...r, f], []).filter((r) => r >= i && r <= n).map((r, f) => /* @__PURE__ */ s.jsx(ue, { left: `${A(r)}%`, children: /* @__PURE__ */ s.jsx(de, { children: r }) }, `${r}-${f}`)) }) : null
-        ] }),
-        (b === "inline" || b === "right-field") && (b === "right-field" ? /* @__PURE__ */ s.jsx(
-          W,
-          {
-            disabled: c,
-            max: n,
-            min: i,
-            onBlur: K,
-            onChange: k,
-            onKeyDown: C,
-            size: "sm",
-            type: "number",
-            value: N.toString(),
-            w: 72
-          }
-        ) : /* @__PURE__ */ s.jsx(m, { children: n }))
-      ] }),
-      x ? /* @__PURE__ */ s.jsx(ee, { color: "neutral-50", mt: 0, children: x }) : null
-    ] });
+    }, [E, T]), F(() => {
+      !isNaN(p) && p !== E && p && (A(p), v(p));
+    }, [p]), /* @__PURE__ */ r.createElement($, { display: "flex", flexDirection: "column", position: "relative", ref: q }, y && /* @__PURE__ */ r.createElement(re, { as: "label", variant: "sm" }, y), /* @__PURE__ */ r.createElement($, { alignItems: "center", display: "flex", gap: "sm" }, (h === "inline" || h === "left-field") && (h === "left-field" ? /* @__PURE__ */ r.createElement(
+      O,
+      {
+        disabled: c,
+        max: n,
+        min: a,
+        onBlur: K,
+        onChange: x,
+        onKeyDown: B,
+        size: "sm",
+        type: "number",
+        value: N.toString(),
+        w: 72
+      }
+    ) : /* @__PURE__ */ r.createElement($, null, a)), /* @__PURE__ */ r.createElement($, { display: "flex", flexDirection: "column", flexGrow: "1", h: 20, position: "relative" }, /* @__PURE__ */ r.createElement(
+      me,
+      {
+        borderSelectorColor: o,
+        disabled: c,
+        list: "tickmarks",
+        max: n,
+        min: a,
+        onChange: (l) => {
+          const f = parseInt(l.target.value, 10);
+          A(f), v(f);
+        },
+        onKeyDown: U,
+        onMouseDown: () => {
+          M && m === !1 && z(!0);
+        },
+        onMouseUp: () => {
+          w(E), M && z(!1);
+        },
+        ref: u,
+        step: i,
+        type: "range",
+        value: E,
+        ...G
+      }
+    ), M && /* @__PURE__ */ r.createElement(J, { isVisible: m, ref: V }, /* @__PURE__ */ r.createElement(Q, null, E)), P && /* @__PURE__ */ r.createElement($, { h: 24, ml: 10, mr: 10, mt: 5, position: "relative" }, P.reduce((l, f) => l.includes(f) ? l : [...l, f], []).filter((l) => l >= a && l <= n).map((l, f) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ r.createElement(ae, { key: `${l}-${f}`, left: `${T(l)}%` }, /* @__PURE__ */ r.createElement(se, null, l))
+    )))), (h === "inline" || h === "right-field") && (h === "right-field" ? /* @__PURE__ */ r.createElement(
+      O,
+      {
+        disabled: c,
+        max: n,
+        min: a,
+        onBlur: K,
+        onChange: x,
+        onKeyDown: B,
+        size: "sm",
+        type: "number",
+        value: N.toString(),
+        w: 72
+      }
+    ) : /* @__PURE__ */ r.createElement($, null, n))), g && /* @__PURE__ */ r.createElement(X, { color: "neutral-50", mt: 0 }, g));
   }
 );
-fe.displayName = "Slider";
-const Ve = Object.assign(fe, { Range: $e });
+ie.displayName = "Slider";
+const ke = Object.assign(ie, { Range: pe });
 export {
-  Ve as Slider,
-  fe as SliderComponent,
-  U as ensureMinMax,
-  q as round,
-  be as thumbWidth
+  ke as Slider,
+  ie as SliderComponent,
+  _ as ensureMinMax,
+  H as round,
+  $e as thumbWidth
 };