welcome-ui 8.0.0 → 8.1.0-alpha.1

package/dist/Slider.mjs

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