welcome-ui 8.1.3 → 8.2.0-alpha.1

package/dist/Slider.mjs

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