asma-ui-core 3.44.0 → 3.45.1

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -1,162 +1,240 @@
-import { cn as v } from "../../../helpers/cn.js";
-import { ChevronDownIcon as le } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as ae } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as se } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as ne } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as ce } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as R } from "../checkbox/base-ui/StyledCheckbox.js";
-import H from "./StyledSelectAutocomplete.module.js";
-import B from "clsx";
-import { createElement as A, useLayoutEffect as ie, useRef as de, useState as D } from "react";
-import { Autocomplete as ue, Paper as me } from "@mui/material";
-import { jsx as o, jsxs as L } from "react/jsx-runtime";
-import { mergeSlotProps as pe } from "@mui/material/utils";
-function he(s, c) {
-  return pe(s, c);
-}
-function Ie({ dataTest: s, autoHeight: c, getOptionLabel: u, wrapperClassName: z, multiple: n, allowSelectAll: W, selectAllLabel: C, className: V, defaultValue: M, isOptionEqualToValue: p, onChange: _, options: h, popupIcon: F, readOnly: f, renderOption: G, renderValue: K, sx: O, value: x, ...T }) {
-  const { slots: U, slotProps: g, ...E } = T, [N, J] = D("auto"), b = de(null), l = n === !0 && W === !0 && !f, k = x !== void 0, S = (e) => Array.isArray(e) ? e : [], [Q, X] = D(() => S(M));
-  ie(() => {
-    if (!c) return;
-    const e = b.current?.getBoundingClientRect().height ?? 0, t = b.current?.getBoundingClientRect().top ?? 0, r = window.innerHeight - t - e - 40;
-    J(r > 0 ? r : "auto");
-  }, [c]);
-  const i = (e) => typeof e == "object" && e !== null && "label" in e ? e.label : String(e), Y = (e) => typeof e == "object" && e !== null && "disabled" in e && !!e.disabled, Z = {
-    padding: 0,
-    "& .MuiAutocomplete-option": { paddingLeft: n ? "12px !important" : "6px !important" }
-  }, w = c ? { maxHeight: N === "auto" ? "auto" : `${N}px` } : void 0, I = l ? S(k ? x : Q) : [], d = l ? h.filter((e) => !Y(e)) : h, q = (e, t) => {
-    const r = typeof e == "object" && e !== null;
-    return r !== (typeof t == "object" && t !== null) || !r && typeof e != typeof t ? !1 : p ? p(e, t) : e === t;
-  }, P = l ? d.filter((e) => I.some((t) => q(e, t))).length : 0, $ = l && d.length > 0 && P === d.length, ee = l && P > 0 && !$, j = (e, t, r, a) => {
-    l && !k && X(S(t)), _?.(e, t, r, a);
-  }, te = (e, t) => {
-    j(e, t ? [...d] : [], t ? "selectOption" : "clear", void 0);
-  }, re = (e, t) => Array.isArray(e) ? e.map((r, a) => {
-    const m = t({ index: a }), y = u?.(r) ?? i(r);
-    return /* @__PURE__ */ A(ce, {
-      ...m,
-      key: `selected-chip-${y}-${a}`,
-      dataTest: `selected-chip-${y}`,
-      label: y,
-      variant: "outlined"
-    });
-  }) : null, oe = {
-    sx: Z,
-    ...w ? { style: w } : {}
-  };
-  return /* @__PURE__ */ o("div", {
-    className: v(H.styledSelectAutocompleteWrapper, z),
-    ref: b,
-    children: /* @__PURE__ */ o(ue, {
-      ...E,
-      multiple: n,
-      defaultValue: l ? void 0 : M,
-      getOptionLabel: u,
-      isOptionEqualToValue: p,
-      className: B("!text-sm", V),
-      onChange: j,
-      options: h,
-      renderValue: K ?? (n ? re : void 0),
-      popupIcon: f ? null : F ?? n ? /* @__PURE__ */ o(ne, {
-        width: 24,
-        height: 24
-      }) : /* @__PURE__ */ o(le, {
-        width: 24,
-        height: 24,
-        className: B(H["select-custom-icon"])
+import { cn as P } from "../../../helpers/cn.js";
+import { ChevronDownIcon as Ue } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as He } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as Te } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as Ve } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as Ye } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as O } from "../checkbox/base-ui/StyledCheckbox.js";
+import { TOP_LAYER_PROPS as Oe, TOP_LAYER_RESET_STYLE as Be, getOpenModalDialogAncestor as qe, useTopLayerRef as Ge } from "../../../hooks/useTopLayer.hook.js";
+import { LoadingIcon as Je } from "../../../table/shared-components/LoadingIcon.js";
+import B from "./StyledSelectAutocomplete.module.js";
+import { useMemo as M, useRef as q, useState as w } from "react";
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { FloatingPortal as Qe, autoUpdate as Xe, flip as Ze, offset as Ke, shift as et, size as tt, useDismiss as rt, useFloating as lt, useInteractions as st, useMergeRefs as G, useRole as ot } from "@floating-ui/react";
+var at = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), J = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
+function yt({ dataTest: l, options: p, renderInput: Q, value: v, onChange: N, getOptionLabel: X, getOptionKey: D, isOptionEqualToValue: L, renderOption: _, renderValue: j, filterOptions: I, loading: E, loadingText: Z = "Loading…", noOptionsText: K = "No options", disabled: R, readOnly: m, size: ee = "small", disableClearable: te, disableCloseOnSelect: re, popupIcon: le, autoHeight: se, multiple: oe, allowSelectAll: ae, selectAllLabel: z = "Select all", fullWidth: ne, classes: ce, inputValue: F, onInputChange: ie, open: W, onOpen: de, onClose: ue, className: pe, wrapperClassName: me, getOptionDisabled: fe, slotProps: U }) {
+  const o = oe === !0, n = X ?? at, S = (e, t) => L ? L(e, t) : e === t, [he, ge] = w(!1), a = W ?? he, f = (e) => {
+    e && (m || R) || (W === void 0 && ge(e), e ? de?.() : ue?.());
+  }, [be, xe] = w(""), h = F ?? be, C = (e, t, r) => {
+    F === void 0 && xe(t), ie?.(e, t, r);
+  }, [g, $] = w(null), we = q([]), H = q(null), [ye, ve] = w(null), [Ne, De] = w(null), c = o ? Array.isArray(v) ? v : [] : [], b = o ? null : v ?? null, T = (e) => o ? c.some((t) => S(e, t)) : b !== null && S(e, b), V = M(() => {
+    const e = [...p];
+    if (I) return I(e, { inputValue: h });
+    const t = !o && b !== null ? n(b).toLowerCase() : null;
+    if (!h || h.toLowerCase() === t) return e;
+    const r = h.toLowerCase();
+    return e.filter((d) => n(d).toLowerCase().includes(r));
+  }, [
+    p,
+    h,
+    I,
+    v
+  ]), i = M(() => V.slice(0, 100), [V]), { refs: A, floatingStyles: Re, context: Y } = lt({
+    open: a,
+    onOpenChange: f,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: Xe,
+    middleware: [
+      Ke(4),
+      Ze({ padding: 8 }),
+      et({ padding: 8 }),
+      tt({ apply({ rects: e, availableHeight: t }) {
+        ve(e.reference.width), De(se ? t - 8 : Math.min(t - 8, 320));
+      } })
+    ]
+  }), { getReferenceProps: Se, getFloatingProps: Ce, getItemProps: Ae } = st([rt(Y), ot(Y, { role: "listbox" })]), Pe = G([A.setReference]), Ie = G([Ge(A.setFloating)]), $e = M(() => a ? qe(A.reference.current) : void 0, [a, A]), k = (e, t) => {
+    if (o) {
+      const r = c.some((u) => S(t, u)), d = r ? c.filter((u) => !S(t, u)) : [...c, t];
+      N?.(e, d, r ? "removeOption" : "selectOption", { option: t }), C(e, "", "reset"), re || f(!1);
+    } else
+      N?.(e, t, "selectOption", { option: t }), C(e, n(t), "reset"), f(!1);
+  }, ke = (e) => {
+    N?.(e, o ? [] : null, "clear", void 0), C(e, "", "clear");
+  }, Me = (e) => {
+    if (e.key === "Enter" && a && g != null && i[g] != null) {
+      e.preventDefault();
+      const t = i[g];
+      J(t) || k(e, t);
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (e.preventDefault(), !a) {
+        $(null), f(!0);
+        return;
+      }
+      if (i.length === 0) return;
+      const t = e.key === "ArrowDown" ? 1 : -1;
+      $((r) => r == null ? t > 0 ? 0 : i.length - 1 : (r + t + i.length) % i.length);
+    }
+  }, Le = !te && !m && !R && (o ? c.length > 0 : b !== null), _e = (e) => {
+    e.preventDefault(), !(R || m) && (H.current?.focus(), f(!a));
+  }, je = o ? j ? j(c, ({ index: e }) => ({ "data-index": e })) : c.map((e, t) => /* @__PURE__ */ s(Ye, {
+    dataTest: `selected-chip-${n(e)}`,
+    label: n(e),
+    readOnly: m,
+    onDelete: m ? void 0 : (r) => k(r, e)
+  }, D ? D(e) : `${n(e)}-${t}`)) : void 0, Ee = /* @__PURE__ */ y("span", {
+    className: "flex items-center gap-1",
+    children: [
+      E && /* @__PURE__ */ s(Je, {
+        width: 20,
+        height: 20,
+        className: "animate-spin"
       }),
-      readOnly: f,
-      "data-testid": s,
-      value: l ? I : x,
-      slots: {
-        ...U,
-        paper: ({ children: e }) => /* @__PURE__ */ L(me, {
-          "data-testid": `paper-${s}`,
-          sx: {
-            padding: "0 !important",
-            marginTop: "0px !important",
-            "& .MuiAutocomplete-option.Mui-focused": { background: "var(--colors-delta-50) !important" },
-            "& li[aria-selected=true]": { background: "var(--colors-gama-50) !important" },
-            "& li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" },
-            "&:has([data-select-all-header]:hover) .MuiAutocomplete-option.Mui-focused": { background: "transparent !important" },
-            "&:has([data-select-all-header]:hover) li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" }
-          },
-          children: [l && d.length > 0 && /* @__PURE__ */ L("div", {
-            "data-select-all-header": !0,
-            className: "flex items-center gap-x-[10px] border-[1px] border-b border-solid border-delta-200 bg-delta-50 py-2 pl-3 text-xs",
-            onMouseDown: (t) => t.preventDefault(),
-            role: "presentation",
-            children: [/* @__PURE__ */ o(R, {
-              size: "small",
-              dataTest: `${s}-select-all`,
-              checked: $,
-              indeterminate: ee,
-              hideWrapper: !0,
-              onChange: te,
-              "aria-label": C ?? "Select all"
-            }), /* @__PURE__ */ o("span", {
-              className: "truncate text-[10px] font-semibold uppercase text-delta-600",
-              children: C ?? "Select all"
-            })]
-          }), e]
+      Le && /* @__PURE__ */ s("button", {
+        type: "button",
+        "aria-label": "Clear",
+        "data-testid": `${l}-clear`,
+        className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-delta-50",
+        onMouseDown: (e) => {
+          e.preventDefault(), ke(e);
+        },
+        children: /* @__PURE__ */ s(He, {
+          width: 20,
+          height: 20,
+          className: "text-delta-700"
         })
-      },
-      renderOption: G ?? ((e, t, { selected: r }) => {
-        const a = e, m = e.id ?? i(t);
-        return n ? /* @__PURE__ */ A("li", {
-          ...a,
-          key: m,
-          className: v(e.className, "flex items-center gap-x-[10px] border-0 border-b border-solid border-delta-200")
-        }, /* @__PURE__ */ o(R, {
-          dataTest: `${s}-${i(t)}-checkbox`,
-          checked: r,
-          size: "small",
-          hideWrapper: !0
-        }), /* @__PURE__ */ o("span", {
-          className: "flex-1 truncate py-2 text-sm text-delta-700",
-          children: u?.(t) ?? i(t)
-        })) : /* @__PURE__ */ A("li", {
-          ...a,
-          key: m,
-          className: v(e.className, "flex items-center gap-x-1")
-        }, /* @__PURE__ */ o("span", {
-          className: "w-5",
-          children: r && /* @__PURE__ */ o(se, {
-            width: 20,
-            height: 20,
-            style: { color: "var(--colors-gama-500)" }
-          })
-        }), /* @__PURE__ */ o("span", {
-          className: "flex-1 truncate py-2 text-sm text-delta-700",
-          children: u?.(t) ?? i(t)
-        }));
       }),
-      sx: {
-        ...O,
-        "& .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
-        "& .select-custom-icon": { marginTop: "-0.5px !important" },
-        "& .MuiInputBase-inputSizeSmall": { minHeight: "23px !important" }
-      },
-      slotProps: {
-        ...g,
-        clearIndicator: {
-          disableRipple: !0,
-          disableFocusRipple: !0,
-          ...g?.clearIndicator ?? {}
-        },
-        listbox: he(g?.listbox, oe)
+      m ? null : /* @__PURE__ */ s("button", {
+        type: "button",
+        "aria-label": "Toggle options",
+        "aria-expanded": a,
+        "data-testid": `${l}-popup-indicator`,
+        className: "flex cursor-pointer items-center border-0 bg-transparent",
+        onMouseDown: _e,
+        children: le ?? (o ? /* @__PURE__ */ s(Ve, {
+          width: 24,
+          height: 24,
+          className: "text-delta-700"
+        }) : /* @__PURE__ */ s(Ue, {
+          width: 24,
+          height: 24,
+          className: P(B["select-custom-icon"], "text-delta-700 transition-transform", a && "rotate-180")
+        }))
+      })
+    ]
+  }), ze = {
+    disabled: R,
+    size: ee,
+    fullWidth: !0,
+    value: h,
+    onChange: (e) => {
+      C(e, e.target.value, "input"), a || f(!0);
+    },
+    onKeyDown: Me,
+    slotProps: {
+      htmlInput: {
+        ...Se(),
+        ref: H,
+        onClick: () => f(!0),
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": a,
+        "aria-activedescendant": a && g != null ? `${l}-option-${g}` : void 0,
+        autoComplete: "off",
+        readOnly: m
       },
-      clearIcon: /* @__PURE__ */ o("span", {
-        className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
-        children: /* @__PURE__ */ o(ae, {
+      input: {
+        ref: Pe,
+        startAdornment: je,
+        endAdornment: Ee
+      }
+    }
+  }, Fe = (e, t, r) => {
+    const { key: d, ...u } = e;
+    return /* @__PURE__ */ y("li", {
+      ...u,
+      className: P("box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-700 first:-mt-1", "aria-selected:bg-gama-50 data-[active]:bg-gama-50 data-[active]:text-delta-800", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300", o && "border-0 border-b border-solid border-delta-200"),
+      children: [o ? /* @__PURE__ */ s(O, {
+        dataTest: `${l}-${n(t)}-checkbox`,
+        checked: r.selected,
+        size: "small",
+        hideWrapper: !0,
+        decorative: !0
+      }) : /* @__PURE__ */ s("span", {
+        className: "w-5",
+        children: r.selected && /* @__PURE__ */ s(Te, {
           width: 20,
           height: 20,
-          className: "text-delta-700"
+          className: "text-gama-500"
         })
+      }), /* @__PURE__ */ s("span", {
+        className: "flex-1 truncate",
+        children: n(t)
+      })]
+    }, d);
+  }, We = (e, t) => {
+    const r = fe?.(e) ?? J(e), d = {
+      ...Ae({
+        onMouseDown: (x) => x.preventDefault(),
+        onClick: (x) => {
+          r || k(x, e);
+        },
+        onMouseMove: () => $(r ? null : t)
+      }),
+      key: D ? String(D(e)) : `${n(e)}-${t}`,
+      ref: (x) => {
+        we.current[t] = x;
+      },
+      role: "option",
+      id: `${l}-option-${t}`,
+      "aria-selected": T(e),
+      "aria-disabled": r || void 0,
+      "data-active": g === t ? "" : void 0
+    }, u = {
+      selected: T(e),
+      index: t,
+      inputValue: h
+    };
+    return _ ? _(d, e, u) : Fe(d, e, u);
+  };
+  return /* @__PURE__ */ y("div", {
+    className: P(B.styledSelectAutocompleteWrapper, !ne && "w-auto", me, pe),
+    children: [Q(ze), a && /* @__PURE__ */ s(Qe, {
+      root: $e,
+      children: /* @__PURE__ */ y("ul", {
+        ref: Ie,
+        ...Oe,
+        style: {
+          ...Be,
+          ...Re,
+          width: ye ?? void 0,
+          maxHeight: Ne ?? void 0,
+          fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+          ...U?.popper?.style
+        },
+        ...Ce(),
+        className: P("z-[1300] m-0 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white p-0 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ce?.listbox, U?.popper?.className),
+        children: [ae && o && /* @__PURE__ */ y("div", {
+          role: "group",
+          className: "flex min-h-12 items-center gap-x-1 border-0 border-b border-solid border-delta-200 px-4 text-sm text-delta-700",
+          children: [/* @__PURE__ */ s(O, {
+            dataTest: `${l}-select-all`,
+            "aria-label": z,
+            checked: p.length > 0 && c.length === p.length,
+            size: "small",
+            hideWrapper: !0,
+            onChange: (e) => {
+              e.stopPropagation();
+              const t = p.length > 0 && c.length === p.length;
+              N?.(e, t ? [] : p, t ? "clear" : "selectOption", void 0);
+            }
+          }), /* @__PURE__ */ s("span", {
+            className: "flex-1 truncate py-2",
+            children: z
+          })]
+        }), E ? /* @__PURE__ */ s("li", {
+          role: "presentation",
+          className: "px-3 py-2 text-sm text-delta-600",
+          children: Z
+        }) : i.length === 0 ? /* @__PURE__ */ s("li", {
+          role: "presentation",
+          className: "px-3 py-2 text-sm text-delta-600",
+          children: K
+        }) : i.map(We)]
       })
-    })
+    })]
   });
 }
 export {
-  Ie as StyledSelectAutocomplete
+  yt as StyledSelectAutocomplete
 };

package/dist/components/inputs/slider/StyledSlider.js

@@ -1,56 +1,104 @@
-import { ErrorOutlineIcon as c } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledFormHelperText as b } from "../../miscellaneous/StyledFormHelperText.js";
-import e from "clsx";
-import { Slider as n } from "@mui/material";
-import { Fragment as g, jsx as t, jsxs as l } from "react/jsx-runtime";
-var k = ({ dataTest: i, error: r, errorText: d, helperText: o, ...a }) => {
-  const s = (r ?? !1) || (o ?? !1), m = r ? d ?? "Required" : o;
-  return /* @__PURE__ */ l(g, { children: [/* @__PURE__ */ t(n, {
-    ...a,
-    "data-testid": i,
-    slotProps: {
-      ...a.slotProps,
-      thumb: {
-        className: e("h-4 w-4", "before:shadow-none", 'after:h-8 after:w-8 after:content-[""]', a.orientation === "vertical" ? "mb-1 ml-0" : "ml-1", a.disabled ? "bg-delta-200" : "bg-gama-500"),
-        ...a.slotProps?.thumb
-      },
-      rail: {
-        className: "bg-delta-200",
-        ...a.slotProps?.rail
-      },
-      markLabel: {
-        className: e("ml-1 text-base font-semibold text-delta-600", a.orientation === "vertical" && "mb-1"),
-        ...a.slotProps?.markLabel
-      }
-    },
-    sx: {
-      ...a.sx,
-      "& .MuiSlider-track": {
-        backgroundColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
-        borderColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)"
-      },
-      "& .MuiSlider-mark": {
-        backgroundColor: "white",
-        border: "1px solid var(--colors-delta-300)",
-        borderRadius: "50%",
-        height: "8px",
-        width: "8px",
-        "&.MuiSlider-markActive": {
-          backgroundColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
-          border: "1px solid",
-          borderColor: a.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
-          opacity: 1
-        }
-      }
+import { cn as n } from "../../../helpers/cn.js";
+import { ErrorOutlineIcon as C } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as I } from "../../miscellaneous/StyledFormHelperText.js";
+import g from "./StyledSlider.module.js";
+import { useState as tt } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+var R = (s, e, o) => o === e ? 0 : Math.min(100, Math.max(0, (s - e) / (o - e) * 100)), et = (s) => Array.isArray(s) ? [s[0] ?? 0, s[1] ?? 0] : null, ct = ({ dataTest: s, min: e = 0, max: o = 100, step: p = 1, value: z, defaultValue: E, disabled: v, size: H = "medium", orientation: L = "horizontal", marks: M, name: K, className: O, classes: u, slotProps: w, error: y, errorText: X, helperText: U, ariaLabel: S, ariaLabelledBy: Y, onChange: _, onChangeCommitted: j }) => {
+  const a = L === "vertical", f = H === "small" ? 6 : 8, [G, J] = tt(E ?? e), A = z ?? G, i = et(A), d = i !== null, Q = (y ?? !1) || !!U, W = y ? X ?? "Required" : U, T = (M === !0 && Number.isFinite(p) && p > 0 && o > e ? Array.from({ length: Math.floor((o - e) / p) + 1 }, (t, l) => ({ value: e + p * l })) : Array.isArray(M) ? M : []).filter((t) => t.value >= e && t.value <= o), B = d ? Math.min(i[0], i[1]) : e, $ = d ? Math.max(i[0], i[1]) : A, F = (t) => d ? t >= B && t <= $ : t <= $, P = d ? R(B, e, o) : 0, V = R($, e, o) - P, Z = a ? {
+    bottom: `${P}%`,
+    height: `${V}%`
+  } : {
+    left: `${P}%`,
+    width: `${V}%`
+  }, q = (t) => {
+    const l = R(t, e, o);
+    return a ? { bottom: `${l}%` } : { left: `${l}%` };
+  }, k = (t) => {
+    if (v) return;
+    const l = t.currentTarget.getBoundingClientRect(), r = a ? 1 - (t.clientY - l.top) / l.height : (t.clientX - l.left) / l.width, m = e + Math.round(Math.min(1, Math.max(0, r)) * ((o - e) / p)) * p, h = Math.min(o, Math.max(e, m));
+    N(_, t, h, d && Math.abs((i?.[1] ?? e) - h) < Math.abs((i?.[0] ?? e) - h) ? 1 : 0);
+  }, N = (t, l, r, m) => {
+    let h = r;
+    if (!d) h = r;
+    else {
+      const c = [i?.[0] ?? 0, i?.[1] ?? 0];
+      c[m] = r, m === 0 && c[0] > c[1] && (c[0] = c[1]), m === 1 && c[1] < c[0] && (c[1] = c[0]), h = c;
     }
-  }), s && /* @__PURE__ */ l(b, {
-    className: e("m-0 flex items-center gap-1 pt-1 text-base", r ? "text-error-500" : "text-delta-600"),
-    children: [r && /* @__PURE__ */ t(c, {
-      width: 20,
-      height: 20
-    }), m]
-  })] });
+    z === void 0 && J(h), t && t(l, h, m);
+  }, D = (t, l) => /* @__PURE__ */ b("input", {
+    type: "range",
+    "data-testid": d ? `${s}-thumb-${t}` : s,
+    name: K,
+    min: e,
+    max: o,
+    step: p,
+    value: l,
+    disabled: v,
+    "aria-orientation": L,
+    "aria-label": typeof S == "function" ? S(t) : S,
+    "aria-labelledby": Y,
+    className: n(g.SliderInput, a ? g.Vertical : g.Horizontal, !a && "z-0", H === "small" && g.Small, v && g.Disabled, u?.thumb, w?.thumb?.className),
+    onChange: (r) => N(_, r, Number(r.currentTarget.value), t),
+    onPointerUp: (r) => N(j, r, Number(r.currentTarget.value), t),
+    onKeyUp: (r) => N(j, r, Number(r.currentTarget.value), t)
+  }, t);
+  return /* @__PURE__ */ x("div", {
+    className: n("relative flex", a ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", u?.root, O),
+    children: [
+      /* @__PURE__ */ x("div", {
+        className: n("relative", a ? "h-full w-8" : "h-4 w-full"),
+        children: [/* @__PURE__ */ x("div", {
+          onPointerDown: k,
+          className: n("absolute", a ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
+          style: a ? {
+            top: f,
+            bottom: f
+          } : {
+            left: f,
+            right: f
+          },
+          children: [
+            /* @__PURE__ */ b("div", { className: n("absolute inset-0 rounded-full bg-delta-100", u?.rail, w?.rail?.className) }),
+            /* @__PURE__ */ b("div", {
+              className: n("absolute rounded-full", a ? "left-0 w-full" : "top-0 h-full", v ? "bg-delta-200" : "bg-gama-500", u?.track),
+              style: Z
+            }),
+            T.map((t) => {
+              const l = F(t.value);
+              return /* @__PURE__ */ b("span", {
+                className: n("absolute z-10 box-border h-2 w-2 -translate-x-1/2 rounded-full border border-solid", a ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", l ? n(v ? "border-delta-200 bg-delta-200" : "border-gama-500 bg-gama-500", u?.markActive) : n("border-delta-300 bg-white", u?.mark)),
+                style: q(t.value)
+              }, t.value);
+            })
+          ]
+        }), d ? [D(0, i[0]), D(1, i[1])] : D(0, A)]
+      }),
+      T.some((t) => t.label != null) && /* @__PURE__ */ b("div", {
+        className: n(a ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
+        style: a ? {
+          top: f,
+          bottom: f
+        } : {
+          marginLeft: f,
+          marginRight: f
+        },
+        children: T.map((t) => t.label == null ? null : /* @__PURE__ */ b("span", {
+          className: n("absolute text-base font-semibold text-delta-700", a ? "left-[37px] translate-y-1/2" : "-translate-x-1/2", F(t.value) && u?.markLabelActive, u?.markLabel, w?.markLabel?.className),
+          style: q(t.value),
+          children: t.label
+        }, t.value))
+      }),
+      Q && /* @__PURE__ */ x(I, {
+        className: n("m-0 flex items-center gap-1 pt-1 text-sm", y ? "text-error-500" : "text-delta-600"),
+        children: [y && /* @__PURE__ */ b(C, {
+          width: 20,
+          height: 20
+        }), W]
+      })
+    ]
+  });
 };
 export {
-  k as StyledSlider
+  ct as StyledSlider
 };

package/dist/components/inputs/slider/StyledSlider.module.js

@@ -0,0 +1,10 @@
+var a = "_SliderInput_1f963_1", l = "_Horizontal_1f963_15", _ = "_Vertical_1f963_24", r = "_Small_1f963_83", e = "_Disabled_1f963_92", t = {
+  SliderInput: a,
+  Horizontal: l,
+  Vertical: _,
+  Small: r,
+  Disabled: e
+};
+export {
+  t as default
+};