asma-ui-core 3.73.0 → 3.74.0

package/dist/components/inputs/select/StyledSelect.js

@@ -1,53 +1,50 @@
-import { cn as u } from "../../../helpers/cn.js";
-import { resolveSx as Ce } from "../../../helpers/sx.js";
+import { cn as p } from "../../../helpers/cn.js";
+import { resolveSx as Ee } from "../../../helpers/sx.js";
 import { ChevronDownIcon as Ne } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
 import { CloseIcon as Pe } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as _e } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { TOP_LAYER_PROPS as qe, TOP_LAYER_RESET_STYLE as Ie, getOpenModalDialogAncestor as Be, shouldUsePopoverTopLayer as Le, useTopLayerRef as Me } from "../../../hooks/useTopLayer.hook.js";
-import { useHelperAlertRole as Te } from "../../../helpers/useHelperAlertRole.js";
-import { useHelperRowBudget as Ue } from "../../../helpers/useHelperRowBudget.js";
-import { warnMissingErrorMessage as Ve } from "../../../helpers/warnMissingErrorMessage.js";
-import { outlineClass as je } from "../field-styles.js";
-import { useFormControlContext as He } from "../../miscellaneous/FormControlContext.js";
-import { Children as _, cloneElement as Ke, isValidElement as q, useEffect as I, useId as Oe, useMemo as Ye, useRef as $, useState as B } from "react";
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { FloatingPortal as ze, autoUpdate as We, flip as $e, offset as Ge, shift as Je, size as Qe, useClick as Xe, useDismiss as Ze, useFloating as et, useInteractions as tt, useMergeRefs as G, useRole as rt } from "@floating-ui/react";
-var ht = ({ dataTest: L, value: M, defaultValue: J, onChange: T, error: Q, errorText: X, helperText: U, reserveHelperText: Z = !0, expandHelperText: ee = !0, allowClear: V, disabled: te, readOnly: c, name: p, placeholder: A, displayEmpty: v, multiple: f, renderValue: j, fullWidth: re, className: oe, style: se, sx: ne, variant: le, children: R, MenuProps: ie, onFocus: ae, onBlur: ce, labelId: g }) => {
-  const d = He(), H = `${L}-listbox`, K = Oe(), y = le === "standard", l = Q ?? d?.error ?? !1, s = te ?? d?.disabled ?? !1, k = l ? X ?? U : U, S = !c && (Z || k != null || l);
-  Ve("StyledSelect", l, k);
-  const de = Te(l), { fieldRef: ue, rowRef: fe, rowStyle: me } = Ue(ee && S), [o, h] = B(!1), [b, D] = B(!1), [pe, O] = B(J), F = M !== void 0, r = F ? M : pe, i = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, a = $(null), Y = $(null), ge = (e) => {
-    if (h(e), e) return;
+import { TOP_LAYER_PROPS as _e, TOP_LAYER_RESET_STYLE as qe, getOpenModalDialogAncestor as Be, shouldUsePopoverTopLayer as He, useTopLayerRef as Ie } from "../../../hooks/useTopLayer.hook.js";
+import { HelperRow as Le } from "../../../helpers/HelperRow.js";
+import { useHelperRowBudget as Te } from "../../../helpers/useHelperRowBudget.js";
+import { useHelperSlot as Ue } from "../../../helpers/useHelperSlot.js";
+import { outlineClass as Ve } from "../field-styles.js";
+import { useFormControlContext as je } from "../../miscellaneous/FormControlContext.js";
+import { Children as N, cloneElement as Ke, isValidElement as P, useEffect as _, useId as Me, useMemo as Ye, useRef as $, useState as q } from "react";
+import { jsx as n, jsxs as B } from "react/jsx-runtime";
+import { FloatingPortal as ze, autoUpdate as Oe, flip as We, offset as $e, shift as Ge, size as Je, useClick as Qe, useDismiss as Xe, useFloating as Ze, useInteractions as et, useMergeRefs as G, useRole as tt } from "@floating-ui/react";
+var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, errorText: X, helperText: T, reserveHelperText: Z, expandHelperText: ee = !0, allowClear: U, disabled: te, readOnly: i, name: m, placeholder: w, displayEmpty: A, multiple: u, renderValue: V, fullWidth: re, className: oe, style: se, sx: ne, variant: le, children: v, MenuProps: ae, onFocus: ie, onBlur: ce, labelId: g }) => {
+  const c = je(), j = `${H}-listbox`, y = le === "standard", d = Q ?? c?.error ?? !1, s = te ?? c?.disabled ?? !1, K = d ? X ?? T : T, { show: R, role: ue } = Ue("StyledSelect", d, K, Z, i), M = Me(), { fieldRef: de, rowRef: fe, rowStyle: pe } = Te(ee && R), [o, b] = q(!1), [h, S] = q(!1), [me, Y] = q(J), k = I !== void 0, r = k ? I : me, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, a = $(null), z = $(null), ge = (e) => {
+    if (b(e), e) return;
     const t = document.activeElement;
-    t && t !== document.body && !a.current?.contains(t) || Y.current?.focus();
-  }, { refs: m, floatingStyles: ye, context: E } = et({
+    t && t !== document.body && !a.current?.contains(t) || z.current?.focus();
+  }, { refs: f, floatingStyles: ye, context: D } = Ze({
     open: o,
     onOpenChange: ge,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: We,
+    whileElementsMounted: Oe,
     middleware: [
-      Ge(4),
-      $e({ padding: 8 }),
-      Je({ padding: 8 }),
-      Qe({ apply({ rects: e, elements: t }) {
+      $e(4),
+      We({ padding: 8 }),
+      Ge({ padding: 8 }),
+      Je({ apply({ rects: e, elements: t }) {
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: he, getFloatingProps: be } = tt([
-    Xe(E, { enabled: !s && !c }),
-    Ze(E),
-    rt(E, { role: "listbox" })
-  ]), xe = G([m.setReference, Y]), z = Ye(() => o ? Be(m.reference.current) : void 0, [o, m]), C = Le(z), we = G([Me(m.setFloating, C), a]);
-  I(() => d?.setFocused(o || b), [
+  }), { getReferenceProps: be, getFloatingProps: he } = et([
+    Qe(D, { enabled: !s && !i }),
+    Xe(D),
+    tt(D, { role: "listbox" })
+  ]), xe = G([f.setReference, z]), O = Ye(() => o ? Be(f.reference.current) : void 0, [o, f]), F = He(O), we = G([Ie(f.setFloating, F), a]);
+  _(() => c?.setFocused(o || h), [
     o,
-    b,
-    d
-  ]), I(() => d?.setFilled(i || !!A || !!v), [
-    i,
+    h,
+    c
+  ]), _(() => c?.setFilled(l || !!w || !!A), [
+    l,
+    w,
     A,
-    v,
-    d
-  ]), I(() => {
+    c
+  ]), _(() => {
     if (!o) return;
     const e = requestAnimationFrame(() => {
       const t = a.current?.querySelector('[role="option"][aria-selected="true"]');
@@ -56,33 +53,33 @@ var ht = ({ dataTest: L, value: M, defaultValue: J, onChange: T, error: Q, error
     return () => cancelAnimationFrame(e);
   }, [o]);
   const Ae = (e, t) => {
-    const x = f ? Array.isArray(r) && r.includes(e) ? r.filter((P) => P !== e) : [...Array.isArray(r) ? r : [], e] : e;
-    F || O(x), T?.({ target: {
+    const x = u ? Array.isArray(r) && r.includes(e) ? r.filter((E) => E !== e) : [...Array.isArray(r) ? r : [], e] : e;
+    k || Y(x), L?.({ target: {
       value: x,
-      name: p
-    } }, t), f || (h(!1), requestAnimationFrame(() => m.domReference.current?.focus()));
+      name: m
+    } }, t), u || (b(!1), requestAnimationFrame(() => f.domReference.current?.focus()));
   }, W = () => {
-    const e = f ? [] : "";
-    F || O(e), T?.({ target: {
+    const e = u ? [] : "";
+    k || Y(e), L?.({ target: {
       value: e,
-      name: p
-    } }, null), h(!1), D(!1);
-  }, ve = _.map(R, (e) => {
-    if (!q(e)) return e;
+      name: m
+    } }, null), b(!1), S(!1);
+  }, ve = N.map(v, (e) => {
+    if (!P(e)) return e;
     const t = e.props.value;
     return Ke(e, {
-      selected: f ? Array.isArray(r) && r.includes(t) : t === r,
+      selected: u ? Array.isArray(r) && r.includes(t) : t === r,
       onClick: () => Ae(t, e.props.children)
     });
-  }), Re = _.toArray(R).find((e) => q(e) && e.props.value === r), ke = j ? j(r) : f && Array.isArray(r) ? _.toArray(R).filter((e) => q(e) && r.includes(e.props.value)).map((e) => {
+  }), Re = N.toArray(v).find((e) => P(e) && e.props.value === r), Se = V ? V(r) : u && Array.isArray(r) ? N.toArray(v).filter((e) => P(e) && r.includes(e.props.value)).map((e) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
-  }).join(", ") : Re?.props.children, Se = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && V && i && !s && !c) {
+  }).join(", ") : Re?.props.children, ke = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && U && l && !s && !i) {
       e.preventDefault(), W();
       return;
     }
-    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), h(!0), requestAnimationFrame(() => {
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || i || (e.preventDefault(), b(!0), requestAnimationFrame(() => {
       if (a.current?.querySelector('[role="option"][aria-selected="true"]')) return;
       const t = a.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
       t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
@@ -90,49 +87,49 @@ var ht = ({ dataTest: L, value: M, defaultValue: J, onChange: T, error: Q, error
   }, De = (e) => {
     const t = a.current ? Array.from(a.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
     if (t.length === 0) return;
-    const x = t.findIndex((P) => P === document.activeElement);
+    const x = t.findIndex((E) => E === document.activeElement);
     e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(x + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
-  }, N = y && (o || b), Fe = s ? "text-delta-300" : N ? "text-gama-500" : "text-delta-800", Ee = s ? "text-delta-300" : "text-delta-700";
-  return /* @__PURE__ */ w("div", {
-    ref: ue,
-    className: u("group relative inline-flex flex-col", re && "w-full", oe),
+  }, C = y && (o || h), Fe = s ? "text-delta-300" : C ? "text-gama-500" : "text-delta-800", Ce = s ? "text-delta-300" : "text-delta-700";
+  return /* @__PURE__ */ B("div", {
+    ref: de,
+    className: p("group relative inline-flex flex-col", re && "w-full", oe),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...Ce(ne),
+      ...Ee(ne),
       ...se
     },
     children: [
-      /* @__PURE__ */ w("button", {
+      /* @__PURE__ */ B("button", {
         ref: xe,
         type: "button",
-        "data-testid": L,
-        ...he({ onKeyDown: Se }),
+        "data-testid": H,
+        ...be({ onKeyDown: ke }),
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": o,
-        "aria-controls": H,
+        "aria-controls": j,
         "aria-labelledby": g,
-        "aria-label": g ? void 0 : p,
-        "aria-invalid": l ? !0 : void 0,
-        "aria-describedby": S ? K : void 0,
+        "aria-label": g ? void 0 : m,
+        "aria-invalid": d ? !0 : void 0,
+        "aria-describedby": R ? M : void 0,
         "aria-disabled": s ? !0 : void 0,
         disabled: s,
         onFocus: (e) => {
-          D(!0), ae?.(e);
+          S(!0), ie?.(e);
         },
         onBlur: (e) => {
-          D(!1), ce?.(e);
+          S(!1), ce?.(e);
         },
-        style: { minWidth: i && !y ? 105 : void 0 },
-        className: u("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", N ? "bg-gama-50" : "bg-transparent", Fe, y && "min-w-0", s && "cursor-not-allowed", c && "pointer-events-none"),
+        style: { minWidth: l && !y ? 105 : void 0 },
+        className: p("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", C ? "bg-gama-50" : "bg-transparent", Fe, y && "min-w-0", s && "cursor-not-allowed", i && "pointer-events-none"),
         children: [
           /* @__PURE__ */ n("span", {
-            className: u("min-w-0 flex-1 truncate", !i && "text-delta-500"),
-            children: i || v ? ke : A
+            className: p("min-w-0 flex-1 truncate", !l && "text-delta-500"),
+            children: l || A ? Se : w
           }),
-          /* @__PURE__ */ w("span", {
+          /* @__PURE__ */ B("span", {
             className: "flex items-center gap-1",
-            children: [V && i && !s && /* @__PURE__ */ n("span", {
+            children: [U && l && !s && /* @__PURE__ */ n("span", {
               "aria-hidden": "true",
               "data-testid": "select-clear-button",
               className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
@@ -146,53 +143,50 @@ var ht = ({ dataTest: L, value: M, defaultValue: J, onChange: T, error: Q, error
             }), /* @__PURE__ */ n(Ne, {
               width: 24,
               height: 24,
-              className: u("shrink-0 transition-transform", N ? "text-gama-500" : Ee, o && "rotate-180")
+              className: p("shrink-0 transition-transform", C ? "text-gama-500" : Ce, o && "rotate-180")
             })]
           }),
-          /* @__PURE__ */ n("div", { className: je({
-            focused: o || b,
-            error: l,
+          /* @__PURE__ */ n("div", { className: Ve({
+            focused: o || h,
+            error: d,
             disabled: s,
-            readOnly: c,
+            readOnly: i,
             borderless: y
           }) })
         ]
       }),
       o && /* @__PURE__ */ n(ze, {
-        root: z,
+        root: O,
         children: /* @__PURE__ */ n("ul", {
           ref: we,
-          id: H,
+          id: j,
           role: "listbox",
           "aria-labelledby": g,
-          "aria-label": g ? void 0 : p,
-          ...C ? qe : {},
+          "aria-label": g ? void 0 : m,
+          ...F ? _e : {},
           style: {
-            ...C ? Ie : {},
+            ...F ? qe : {},
             ...ye,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
-          ...be(),
+          ...he(),
           onKeyDown: De,
-          className: u("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ie?.className),
+          className: p("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ae?.className),
           children: ve
         })
       }),
-      S && /* @__PURE__ */ w("div", {
+      R && /* @__PURE__ */ n(Le, {
         ref: fe,
-        id: K,
-        role: de,
-        className: u("m-0 mr-[14px] box-border flex min-h-[24px] items-center gap-1 pt-1 text-sm leading-5 tracking-[0.03333em]", l ? "text-error-500" : "text-delta-600"),
-        style: me,
-        children: [l && /* @__PURE__ */ n(_e, {
-          width: 20,
-          height: 20,
-          className: "min-w-5 shrink-0"
-        }), /* @__PURE__ */ n("span", { children: k })]
+        id: M,
+        role: ue,
+        error: d,
+        message: K,
+        className: "m-0 mr-[14px] box-border items-center",
+        style: pe
       })
     ]
   });
 };
 export {
-  ht as StyledSelect
+  gt as StyledSelect
 };

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

@@ -1,61 +1,58 @@
-import { cn as n } from "../../../helpers/cn.js";
-import { ErrorOutlineIcon as et } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { useHelperAlertRole as lt } from "../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as at } from "../../../helpers/warnMissingErrorMessage.js";
-import y from "./StyledSlider.module.js";
-import { useId as rt, useState as ot } from "react";
-import { jsx as m, jsxs as M } from "react/jsx-runtime";
-var D = (c, e, o) => o === e ? 0 : Math.min(100, Math.max(0, (c - e) / (o - e) * 100)), nt = (c) => Array.isArray(c) ? [c[0] ?? 0, c[1] ?? 0] : null, mt = ({ dataTest: c, min: e = 0, max: o = 100, step: p = 1, value: H, defaultValue: X, disabled: v, size: L = "medium", orientation: U = "horizontal", marks: w, name: Y, className: q, classes: u, slotProps: S, error: b, errorText: G, helperText: _, reserveHelperText: J = !0, ariaLabel: x, ariaLabelledBy: Q, onChange: j, onChangeCommitted: B }) => {
-  const E = rt(), a = U === "vertical", d = L === "small" ? 6 : 8, [W, Z] = ot(X ?? e), A = H ?? W, i = nt(A), f = i !== null, $ = b ? G ?? _ : _, V = J || $ != null || !!b;
-  at("StyledSlider", b, $);
-  const C = lt(b), P = (w === !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(w) ? w : []).filter((t) => t.value >= e && t.value <= o), k = f ? Math.min(i[0], i[1]) : e, R = f ? Math.max(i[0], i[1]) : A, F = (t) => f ? t >= k && t <= R : t <= R, T = f ? D(k, e, o) : 0, K = D(R, e, o) - T, I = a ? {
-    bottom: `${T}%`,
-    height: `${K}%`
+import { cn as i } from "../../../helpers/cn.js";
+import { HelperRow as et } from "../../../helpers/HelperRow.js";
+import { useHelperSlot as lt } from "../../../helpers/useHelperSlot.js";
+import g from "./StyledSlider.module.js";
+import { useId as at, useState as rt } from "react";
+import { jsx as p, jsxs as H } from "react/jsx-runtime";
+var T = (c, e, o) => o === e ? 0 : Math.min(100, Math.max(0, (c - e) / (o - e) * 100)), ot = (c) => Array.isArray(c) ? [c[0] ?? 0, c[1] ?? 0] : null, ft = ({ dataTest: c, min: e = 0, max: o = 100, step: b = 1, value: z, defaultValue: E, disabled: v, size: D = "medium", orientation: L = "horizontal", marks: w, name: G, className: J, classes: u, slotProps: M, error: y, errorText: O, helperText: U, reserveHelperText: Q, ariaLabel: S, ariaLabelledBy: W, onChange: _, onChangeCommitted: j }) => {
+  const V = at(), a = L === "vertical", d = D === "small" ? 6 : 8, [Z, k] = rt(E ?? e), A = z ?? Z, n = ot(A), f = n !== null, B = y ? O ?? U : U, { show: F, role: C } = lt("StyledSlider", y, B, Q), $ = (w === !0 && Number.isFinite(b) && b > 0 && o > e ? Array.from({ length: Math.floor((o - e) / b) + 1 }, (t, l) => ({ value: e + b * l })) : Array.isArray(w) ? w : []).filter((t) => t.value >= e && t.value <= o), K = f ? Math.min(n[0], n[1]) : e, x = f ? Math.max(n[0], n[1]) : A, X = (t) => f ? t >= K && t <= x : t <= x, P = f ? T(K, e, o) : 0, Y = T(x, e, o) - P, I = a ? {
+    bottom: `${P}%`,
+    height: `${Y}%`
   } : {
-    left: `${T}%`,
-    width: `${K}%`
-  }, O = (t) => {
-    const l = D(t, e, o);
+    left: `${P}%`,
+    width: `${Y}%`
+  }, q = (t) => {
+    const l = T(t, e, o);
     return a ? { bottom: `${l}%` } : { left: `${l}%` };
   }, tt = (t) => {
     if (v) return;
-    const l = t.currentTarget.getBoundingClientRect(), r = a ? 1 - (t.clientY - l.top) / l.height : (t.clientX - l.left) / l.width, g = e + Math.round(Math.min(1, Math.max(0, r)) * ((o - e) / p)) * p, h = Math.min(o, Math.max(e, g));
-    N(j, t, h, f && Math.abs((i?.[1] ?? e) - h) < Math.abs((i?.[0] ?? e) - h) ? 1 : 0);
-  }, N = (t, l, r, g) => {
+    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) / b)) * b, h = Math.min(o, Math.max(e, m));
+    N(_, t, h, f && Math.abs((n?.[1] ?? e) - h) < Math.abs((n?.[0] ?? e) - h) ? 1 : 0);
+  }, N = (t, l, r, m) => {
     let h = r;
     if (!f) h = r;
     else {
-      const s = [i?.[0] ?? 0, i?.[1] ?? 0];
-      s[g] = r, g === 0 && s[0] > s[1] && (s[0] = s[1]), g === 1 && s[1] < s[0] && (s[1] = s[0]), h = s;
+      const s = [n?.[0] ?? 0, n?.[1] ?? 0];
+      s[m] = r, m === 0 && s[0] > s[1] && (s[0] = s[1]), m === 1 && s[1] < s[0] && (s[1] = s[0]), h = s;
     }
-    H === void 0 && Z(h), t && t(l, h, g);
-  }, z = (t, l) => /* @__PURE__ */ m("input", {
+    z === void 0 && k(h), t && t(l, h, m);
+  }, R = (t, l) => /* @__PURE__ */ p("input", {
     type: "range",
     "data-testid": f ? `${c}-thumb-${t}` : c,
-    name: Y,
+    name: G,
     min: e,
     max: o,
-    step: p,
+    step: b,
     value: l,
     disabled: v,
-    "aria-orientation": U,
-    "aria-label": typeof x == "function" ? x(t) : x,
-    "aria-labelledby": Q,
-    "aria-invalid": b ? !0 : void 0,
-    "aria-describedby": V ? E : void 0,
-    className: n(y.SliderInput, a ? y.Vertical : y.Horizontal, !a && "z-0", L === "small" && y.Small, v && y.Disabled, u?.thumb, S?.thumb?.className),
-    onChange: (r) => N(j, r, Number(r.currentTarget.value), t),
-    onPointerUp: (r) => N(B, r, Number(r.currentTarget.value), t),
-    onKeyUp: (r) => N(B, r, Number(r.currentTarget.value), t)
+    "aria-orientation": L,
+    "aria-label": typeof S == "function" ? S(t) : S,
+    "aria-labelledby": W,
+    "aria-invalid": y ? !0 : void 0,
+    "aria-describedby": F ? V : void 0,
+    className: i(g.SliderInput, a ? g.Vertical : g.Horizontal, !a && "z-0", D === "small" && g.Small, v && g.Disabled, u?.thumb, M?.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__ */ M("div", {
-    className: n("relative flex", a ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", u?.root, q),
+  return /* @__PURE__ */ H("div", {
+    className: i("relative flex", a ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", u?.root, J),
     children: [
-      /* @__PURE__ */ M("div", {
-        className: n("relative", a ? "h-full w-8" : "h-4 w-full"),
-        children: [/* @__PURE__ */ M("div", {
+      /* @__PURE__ */ H("div", {
+        className: i("relative", a ? "h-full w-8" : "h-4 w-full"),
+        children: [/* @__PURE__ */ H("div", {
           onPointerDown: tt,
-          className: n("absolute", a ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
+          className: i("absolute", a ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
           style: a ? {
             top: d,
             bottom: d
@@ -64,23 +61,23 @@ var D = (c, e, o) => o === e ? 0 : Math.min(100, Math.max(0, (c - e) / (o - e) *
             right: d
           },
           children: [
-            /* @__PURE__ */ m("div", { className: n("absolute inset-0 rounded-full bg-delta-100", u?.rail, S?.rail?.className) }),
-            /* @__PURE__ */ m("div", {
-              className: n("absolute rounded-full", a ? "left-0 w-full" : "top-0 h-full", v ? "bg-delta-200" : "bg-gama-500", u?.track),
+            /* @__PURE__ */ p("div", { className: i("absolute inset-0 rounded-full bg-delta-100", u?.rail, M?.rail?.className) }),
+            /* @__PURE__ */ p("div", {
+              className: i("absolute rounded-full", a ? "left-0 w-full" : "top-0 h-full", v ? "bg-delta-200" : "bg-gama-500", u?.track),
               style: I
             }),
-            P.map((t) => {
-              const l = F(t.value);
-              return /* @__PURE__ */ m("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: O(t.value)
+            $.map((t) => {
+              const l = X(t.value);
+              return /* @__PURE__ */ p("span", {
+                className: i("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 ? i(v ? "border-delta-200 bg-delta-200" : "border-gama-500 bg-gama-500", u?.markActive) : i("border-delta-300 bg-white", u?.mark)),
+                style: q(t.value)
               }, t.value);
             })
           ]
-        }), f ? [z(0, i[0]), z(1, i[1])] : z(0, A)]
+        }), f ? [R(0, n[0]), R(1, n[1])] : R(0, A)]
       }),
-      P.some((t) => t.label != null) && /* @__PURE__ */ m("div", {
-        className: n(a ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
+      $.some((t) => t.label != null) && /* @__PURE__ */ p("div", {
+        className: i(a ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
         style: a ? {
           top: d,
           bottom: d
@@ -88,25 +85,22 @@ var D = (c, e, o) => o === e ? 0 : Math.min(100, Math.max(0, (c - e) / (o - e) *
           marginLeft: d,
           marginRight: d
         },
-        children: P.map((t) => t.label == null ? null : /* @__PURE__ */ m("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, S?.markLabel?.className),
-          style: O(t.value),
+        children: $.map((t) => t.label == null ? null : /* @__PURE__ */ p("span", {
+          className: i("absolute text-base font-semibold text-delta-700", a ? "left-[37px] translate-y-1/2" : "-translate-x-1/2", X(t.value) && u?.markLabelActive, u?.markLabel, M?.markLabel?.className),
+          style: q(t.value),
           children: t.label
         }, t.value))
       }),
-      V && /* @__PURE__ */ M("div", {
-        id: E,
+      F && /* @__PURE__ */ p(et, {
+        id: V,
         role: C,
-        className: n("m-0 flex min-h-[24px] items-center gap-1 pt-1 text-sm leading-5 tracking-[0.03333em]", b ? "text-error-500" : "text-delta-600"),
-        children: [b && /* @__PURE__ */ m(et, {
-          width: 20,
-          height: 20,
-          className: "min-w-5 shrink-0"
-        }), /* @__PURE__ */ m("span", { children: $ })]
+        error: y,
+        message: B,
+        className: "m-0 items-center"
       })
     ]
   });
 };
 export {
-  mt as StyledSlider
+  ft as StyledSlider
 };

package/dist/components/inputs/textarea/StyledTextarea.js

@@ -1,77 +1,74 @@
-import { useHelperAlertRole as Q } from "../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as U } from "../../../helpers/warnMissingErrorMessage.js";
-import a from "./StyledTextarea.module.js";
-import { useEffect as V, useId as m, useRef as W } from "react";
-import { Fragment as X, jsx as o, jsxs as c } from "react/jsx-runtime";
-var at = ({ id: M, variant: x = "active", label: d = "", labelClassName: S = "", description: l = "", reserveHelperText: j = !0, value: e = "", minRows: r = 3, maxRows: i = 1 / 0, disabled: g, error: t, errorMessage: y, containerClassName: B = "", className: _ = "", maxLength: w = 1 / 0, counter: E, refLink: k, dataTest: C, counterLimit: p, ...b }) => {
-  const R = W(null), f = k ?? R, s = !!(E && p), u = m(), $ = m(), q = m(), v = M ?? q, N = t ? y : l, I = j || N != null || !!t;
-  U("StyledTextarea", t, y);
-  const z = Q(t);
-  V(() => {
-    const n = f.current;
-    if (!n) return;
-    const h = window.getComputedStyle(n), A = parseFloat(h.lineHeight) || 24, F = parseFloat(h.paddingTop), H = parseFloat(h.paddingBottom);
-    n.style.height = "auto";
-    const J = n.scrollHeight - F - H, K = Math.max(1, Math.ceil(J / A)), O = Math.min(Math.max(K, r), i);
-    n.style.height = `${O * A + F + H}px`;
+import { useHelperSlot as R } from "../../../helpers/useHelperSlot.js";
+import e from "./StyledTextarea.module.js";
+import { useEffect as U, useId as m, useRef as V } from "react";
+import { Fragment as W, jsx as n, jsxs as c } from "react/jsx-runtime";
+var tt = ({ id: H, variant: x = "active", label: d = "", labelClassName: A = "", description: l = "", reserveHelperText: M, value: t = "", minRows: r = 3, maxRows: i = 1 / 0, disabled: g, error: a, errorMessage: j, containerClassName: _ = "", className: w = "", maxLength: B = 1 / 0, counter: E, refLink: k, dataTest: C, counterLimit: p, ...y }) => {
+  const q = V(null), h = k ?? q, s = !!(E && p), b = m(), u = m(), z = m(), $ = H ?? z, v = a ? j : l, { show: N, role: D } = R("StyledTextarea", a, v, M);
+  U(() => {
+    const o = h.current;
+    if (!o) return;
+    const f = window.getComputedStyle(o), S = parseFloat(f.lineHeight) || 24, T = parseFloat(f.paddingTop), F = parseFloat(f.paddingBottom);
+    o.style.height = "auto";
+    const K = o.scrollHeight - T - F, O = Math.max(1, Math.ceil(K / S)), Q = Math.min(Math.max(O, r), i);
+    o.style.height = `${Q * S + T + F}px`;
   }, [
-    f,
-    e,
+    h,
+    t,
     r,
     i,
     s
   ]), i < r && (r = i);
-  const D = t ? "error" : "active", T = t ? "error" : g ? "disabled" : "active", G = typeof d != "string" || d.trim() !== "" ? void 0 : typeof l == "string" && l.trim() !== "" ? l : b.placeholder;
+  const G = a ? "error" : "active", I = a ? "error" : g ? "disabled" : "active", J = typeof d != "string" || d.trim() !== "" ? void 0 : typeof l == "string" && l.trim() !== "" ? l : y.placeholder;
   return /* @__PURE__ */ c("div", {
-    className: `relative flex flex-col gap-1 ${B}`,
+    className: `relative flex flex-col gap-1 ${_}`,
     "data-testid": C,
     children: [
-      /* @__PURE__ */ o("label", {
-        htmlFor: v,
-        className: `${a.label} ${a[T]} ${S}`,
+      /* @__PURE__ */ n("label", {
+        htmlFor: $,
+        className: `${e.label} ${e[I]} ${A}`,
         children: d
       }),
-      I && /* @__PURE__ */ o("span", {
-        id: u,
-        role: z,
-        className: `${a.description} ${a[T]} min-h-[24px]`,
-        children: N
+      N && /* @__PURE__ */ n("span", {
+        id: b,
+        role: D,
+        className: `${e.description} ${e[I]} min-h-[24px]`,
+        children: v
       }),
-      x === "view_only" ? /* @__PURE__ */ o("div", {
+      x === "view_only" ? /* @__PURE__ */ n("div", {
         className: "pt-3 font-roboto text-base font-normal text-delta-700",
-        children: e
-      }) : x === "not_editable" ? /* @__PURE__ */ o("div", {
+        children: t
+      }) : x === "not_editable" ? /* @__PURE__ */ n("div", {
         className: "rounded bg-delta-50 p-3 font-roboto text-base font-normal text-delta-700",
-        children: e
-      }) : /* @__PURE__ */ o("textarea", {
-        ...b,
-        "aria-describedby": [I ? u : null, s ? $ : null].filter(Boolean).join(" ") || void 0,
-        "aria-invalid": t,
-        "aria-label": G,
-        id: v,
-        ref: f,
-        className: `${a.textarea} ${a[D]} ${_} ${s ? "pb-[32px]" : ""}`,
+        children: t
+      }) : /* @__PURE__ */ n("textarea", {
+        ...y,
+        "aria-describedby": [N ? b : null, s ? u : null].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": a,
+        "aria-label": J,
+        id: $,
+        ref: h,
+        className: `${e.textarea} ${e[G]} ${w} ${s ? "pb-[32px]" : ""}`,
         wrap: "soft",
-        value: e,
+        value: t,
         disabled: g,
-        maxLength: w
+        maxLength: B
       }),
-      s && /* @__PURE__ */ c(X, { children: [/* @__PURE__ */ c("div", {
+      s && /* @__PURE__ */ c(W, { children: [/* @__PURE__ */ c("div", {
         className: "pointer-events-none absolute bottom-3 right-3 flex h-[15px] justify-end font-roboto text-[10px]",
         children: [
-          e.length,
+          t.length,
           "/",
           p
         ]
       }), /* @__PURE__ */ c("div", {
-        id: $,
+        id: u,
         "aria-live": "polite",
         className: "sr-only",
-        children: [p - e.length, " characters remaining"]
+        children: [p - t.length, " characters remaining"]
       })] })
     ]
   });
 };
 export {
-  at as StyledTextarea
+  tt as StyledTextarea
 };

package/dist/helpers/HelperRow.js

@@ -0,0 +1,19 @@
+import { cn as s } from "./cn.js";
+import { ErrorOutlineIcon as l } from "../components/icons/error-outline-icon/ErrorOutlineIcon.js";
+import { forwardRef as x } from "react";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+var w = x(({ id: t, role: i, error: r, message: m, hideErrorIcon: o, className: a, style: n }, p) => /* @__PURE__ */ c("div", {
+  ref: p,
+  id: t,
+  role: i,
+  className: s("flex min-h-[24px] gap-1 pt-1 text-sm leading-5 tracking-[0.03333em]", r ? "text-error-500" : "text-delta-600", a),
+  style: n,
+  children: [r && !o && /* @__PURE__ */ e(l, {
+    width: 20,
+    height: 20,
+    className: "min-w-5 shrink-0"
+  }), /* @__PURE__ */ e("span", { children: m })]
+}));
+export {
+  w as HelperRow
+};