asma-ui-core 3.73.1 → 3.74.1

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

@@ -1,4 +1,4 @@
-import { cn as L } from "../../../helpers/cn.js";
+import { cn as k } from "../../../helpers/cn.js";
 import { ChevronDownIcon as Oe } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
 import { CloseIcon as Be } from "../../icons/close-icon/CloseIcon.js";
 import { CheckIcon as qe } from "../../icons/check-icon/CheckIcon.js";
@@ -8,17 +8,17 @@ import { StyledCheckbox as Q } from "../checkbox/base-ui/StyledCheckbox.js";
 import { TOP_LAYER_PROPS as Qe, TOP_LAYER_RESET_STYLE as Xe, getOpenModalDialogAncestor as Ze, shouldUsePopoverTopLayer as Ke, useTopLayerRef as et } from "../../../hooks/useTopLayer.hook.js";
 import { LoadingIcon as tt } from "../../../table/shared-components/LoadingIcon.js";
 import _ from "./StyledSelectAutocomplete.module.js";
-import { useEffect as rt, useMemo as E, useRef as X, useState as w } from "react";
+import { useEffect as lt, useMemo as E, useRef as X, useState as w } from "react";
 import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import { FloatingPortal as lt, autoUpdate as st, flip as ot, offset as at, shift as nt, size as ct, useDismiss as it, useFloating as dt, useInteractions as ut, useMergeRefs as Z, useRole as pt } from "@floating-ui/react";
-var mt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), K = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, getOptionLabel: te, getOptionKey: R, isOptionEqualToValue: j, renderOption: z, renderValue: F, filterOptions: $, loading: W, loadingText: re = "Loading…", noOptionsText: le = "No options", disabled: D, readOnly: m, error: se, helperText: oe, size: ae = "small", disableClearable: ne, disableCloseOnSelect: ce, popupIcon: ie, autoHeight: de, multiple: ue, allowSelectAll: pe, selectAllLabel: U = "Select all", fullWidth: me, classes: fe, inputValue: S, onInputChange: he, open: T, onOpen: ge, onClose: be, className: xe, wrapperClassName: we, getOptionDisabled: ye, slotProps: V }) {
+import { FloatingPortal as rt, autoUpdate as st, flip as ot, offset as at, shift as nt, size as ct, useDismiss as it, useFloating as dt, useInteractions as ut, useMergeRefs as Z, useRole as pt } from "@floating-ui/react";
+var mt = (r) => typeof r == "object" && r !== null && "label" in r ? String(r.label) : String(r), K = (r) => typeof r == "object" && r !== null && "disabled" in r && !!r.disabled;
+function Pt({ dataTest: r, options: p, renderInput: ee, value: v, onChange: N, getOptionLabel: te, getOptionKey: R, isOptionEqualToValue: j, renderOption: z, renderValue: F, filterOptions: L, loading: W, loadingText: le = "Loading…", noOptionsText: re = "No options", disabled: D, readOnly: m, error: se, helperText: oe, size: ae = "small", disableClearable: ne, disableCloseOnSelect: ce, popupIcon: ie, autoHeight: de, multiple: ue, allowSelectAll: pe, selectAllLabel: U = "Select all", fullWidth: me, classes: fe, inputValue: S, onInputChange: he, open: T, onOpen: ge, onClose: be, className: xe, wrapperClassName: we, getOptionDisabled: ye, slotProps: V }) {
   const o = ue === !0, n = te ?? mt, C = (e, t) => j ? j(e, t) : e === t, [ve, Ne] = w(!1), a = T ?? ve, f = (e) => {
     e && (m || D) || (T === void 0 && Ne(e), e ? ge?.() : be?.());
-  }, [Re, H] = w(""), h = S ?? Re, P = (e, t, r) => {
-    S === void 0 && H(t), he?.(e, t, r);
-  }, [b, k] = w(null), De = X([]), Y = X(null), [Se, Ce] = w(null), [Pe, Ae] = w(null), c = o ? Array.isArray(v) ? v : [] : [], g = o ? null : v ?? null, O = !o && g !== null ? n(g) : "";
-  rt(() => {
+  }, [Re, H] = w(""), h = S ?? Re, P = (e, t, l) => {
+    S === void 0 && H(t), he?.(e, t, l);
+  }, [b, $] = w(null), De = X([]), Y = X(null), [Se, Ce] = w(null), [Pe, Ae] = w(null), c = o ? Array.isArray(v) ? v : [] : [], g = o ? null : v ?? null, O = !o && g !== null ? n(g) : "";
+  lt(() => {
     S !== void 0 || o || H(O);
   }, [
     S,
@@ -27,17 +27,17 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
   ]);
   const B = (e) => o ? c.some((t) => C(e, t)) : g !== null && C(e, g), q = E(() => {
     const e = [...p];
-    if ($) return $(e, { inputValue: h });
+    if (L) return L(e, { inputValue: h });
     const t = !o && g !== null ? n(g).toLowerCase() : null;
     if (!h || h.toLowerCase() === t) return e;
-    const r = h.toLowerCase();
-    return e.filter((d) => n(d).toLowerCase().includes(r));
+    const l = h.toLowerCase();
+    return e.filter((d) => n(d).toLowerCase().includes(l));
   }, [
     p,
     h,
-    $,
+    L,
     v
-  ]), i = E(() => q.slice(0, 100), [q]), { refs: A, floatingStyles: Le, context: G } = dt({
+  ]), i = E(() => q.slice(0, 100), [q]), { refs: A, floatingStyles: ke, context: G } = dt({
     open: a,
     onOpenChange: f,
     placement: "bottom-start",
@@ -51,10 +51,10 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         Ce(e.reference.width), Ae(de ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: $e, getFloatingProps: ke, getItemProps: Ie } = ut([it(G), pt(G, { role: "listbox" })]), Me = Z([A.setReference]), J = E(() => a ? Ze(A.reference.current) : void 0, [a, A]), I = Ke(J), _e = Z([et(A.setFloating, I)]), M = (e, t) => {
+  }), { getReferenceProps: Le, getFloatingProps: $e, getItemProps: Ie } = ut([it(G), pt(G, { role: "listbox" })]), Me = Z([A.setReference]), J = E(() => a ? Ze(A.reference.current) : void 0, [a, A]), I = Ke(J), _e = Z([et(A.setFloating, I)]), M = (e, t) => {
     if (o) {
-      const r = c.some((u) => C(t, u)), d = r ? c.filter((u) => !C(t, u)) : [...c, t];
-      N?.(e, d, r ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), ce || f(!1);
+      const l = c.some((u) => C(t, u)), d = l ? c.filter((u) => !C(t, u)) : [...c, t];
+      N?.(e, d, l ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), ce || f(!1);
     } else
       N?.(e, t, "selectOption", { option: t }), P(e, n(t), "reset"), f(!1);
   }, Ee = (e) => {
@@ -66,12 +66,12 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
       K(t) || M(e, t);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !a) {
-        k(null), f(!0);
+        $(null), f(!0);
         return;
       }
       if (i.length === 0) return;
       const t = e.key === "ArrowDown" ? 1 : -1;
-      k((r) => r == null ? t > 0 ? 0 : i.length - 1 : (r + t + i.length) % i.length);
+      $((l) => l == null ? t > 0 ? 0 : i.length - 1 : (l + t + i.length) % i.length);
     }
   }, ze = !ne && !m && !D && (o ? c.length > 0 : g !== null), Fe = (e) => {
     e.preventDefault(), !(D || m) && (Y.current?.focus(), f(!a));
@@ -79,7 +79,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
     dataTest: `selected-chip-${n(e)}`,
     label: n(e),
     readOnly: m,
-    onDelete: m ? void 0 : (r) => M(r, e)
+    onDelete: m ? void 0 : (l) => M(l, e)
   }, R ? R(e) : `${n(e)}-${t}`)) : void 0, Ue = /* @__PURE__ */ y("span", {
     className: "flex items-center gap-1",
     children: [
@@ -91,7 +91,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
       ze && /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Clear",
-        "data-testid": `${l}-clear`,
+        "data-testid": `${r}-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(), Ee(e);
@@ -106,7 +106,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         type: "button",
         "aria-label": "Toggle options",
         "aria-expanded": a,
-        "data-testid": `${l}-popup-indicator`,
+        "data-testid": `${r}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: Fe,
         children: ie ?? (o ? /* @__PURE__ */ s(Ge, {
@@ -116,7 +116,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         }) : /* @__PURE__ */ s(Oe, {
           width: 24,
           height: 24,
-          className: L(_["select-custom-icon"], a && _["select-custom-icon-open"], "text-delta-700")
+          className: k(_["select-custom-icon"], a && _["select-custom-icon-open"], "text-delta-700")
         }))
       })
     ]
@@ -133,13 +133,13 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
     onKeyDown: je,
     slotProps: {
       htmlInput: {
-        ...$e(),
+        ...Le(),
         ref: Y,
         onClick: () => f(!0),
         role: "combobox",
         "aria-autocomplete": "list",
         "aria-expanded": a,
-        "aria-activedescendant": a && b != null ? `${l}-option-${b}` : void 0,
+        "aria-activedescendant": a && b != null ? `${r}-option-${b}` : void 0,
         autoComplete: "off",
         readOnly: m
       },
@@ -149,45 +149,45 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         endAdornment: Ue
       }
     }
-  }, Ve = L("box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800 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"), He = (e, t, r) => {
+  }, Ve = k("box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800", "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", "border-0 border-b border-solid border-delta-200 last:border-b-0"), He = (e, t, l) => {
     const { key: d, ...u } = e;
     return /* @__PURE__ */ y("li", {
       ...u,
       children: [o ? /* @__PURE__ */ s(Q, {
-        dataTest: `${l}-${n(t)}-checkbox`,
-        checked: r.selected,
+        dataTest: `${r}-${n(t)}-checkbox`,
+        checked: l.selected,
         size: "small",
         hideWrapper: !0,
         decorative: !0
       }) : /* @__PURE__ */ s("span", {
         className: "w-5",
-        children: r.selected && /* @__PURE__ */ s(qe, {
+        children: l.selected && /* @__PURE__ */ s(qe, {
           width: 20,
           height: 20,
           className: "text-gama-500"
         })
       }), /* @__PURE__ */ s("span", {
-        className: "flex-1 truncate",
+        className: "line-clamp-2 min-w-0 flex-1 break-words",
         children: n(t)
       })]
     }, d);
   }, Ye = (e, t) => {
-    const r = ye?.(e) ?? K(e), d = {
+    const l = ye?.(e) ?? K(e), d = {
       ...Ie({
         onMouseDown: (x) => x.preventDefault(),
         onClick: (x) => {
-          r || M(x, e);
+          l || M(x, e);
         },
-        onMouseMove: () => k(r ? null : t)
+        onMouseMove: () => $(l ? null : t)
       }),
       key: R ? String(R(e)) : `${n(e)}-${t}`,
       ref: (x) => {
         De.current[t] = x;
       },
       role: "option",
-      id: `${l}-option-${t}`,
+      id: `${r}-option-${t}`,
       "aria-selected": B(e),
-      "aria-disabled": r || void 0,
+      "aria-disabled": l || void 0,
       "data-active": b === t ? "" : void 0,
       className: Ve
     }, u = {
@@ -198,27 +198,27 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
     return z ? z(d, e, u) : He(d, e, u);
   };
   return /* @__PURE__ */ y("div", {
-    className: L(_.styledSelectAutocompleteWrapper, !me && "w-auto", we, xe),
-    children: [ee(Te), a && /* @__PURE__ */ s(lt, {
+    className: k(_.styledSelectAutocompleteWrapper, !me && "w-auto", we, xe),
+    children: [ee(Te), a && /* @__PURE__ */ s(rt, {
       root: J,
       children: /* @__PURE__ */ y("ul", {
         ref: _e,
         ...I ? Qe : {},
         style: {
           ...I ? Xe : {},
-          ...Le,
+          ...ke,
           width: Se ?? void 0,
           maxHeight: Pe ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
           ...V?.popper?.style
         },
-        ...ke(),
-        className: L("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)]", fe?.listbox, V?.popper?.className),
+        ...$e(),
+        className: k("z-[1300] m-0 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", fe?.listbox, V?.popper?.className),
         children: [pe && 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(Q, {
-            dataTest: `${l}-select-all`,
+            dataTest: `${r}-select-all`,
             "aria-label": U,
             checked: p.length > 0 && c.length === p.length,
             size: "small",
@@ -235,11 +235,11 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         }), W ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: re
+          children: le
         }) : i.length === 0 ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: le
+          children: re
         }) : i.map(Ye)]
       })
     })]

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
+};

package/dist/helpers/useHelperSlot.js

@@ -0,0 +1,12 @@
+import { useHelperAlertRole as u } from "./useHelperAlertRole.js";
+import { warnMissingErrorMessage as s } from "./warnMissingErrorMessage.js";
+function f(r, e, o, t, l) {
+  const n = l !== !0 && (t === !0 || o != null || !!e);
+  return s(r, e, o), {
+    show: n,
+    role: u(e)
+  };
+}
+export {
+  f as useHelperSlot
+};

package/dist/src/helpers/HelperRow.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface HelperRowProps {
+    id: string;
+    role: 'alert' | 'status';
+    error?: boolean;
+    message?: ReactNode;
+    hideErrorIcon?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Shared helper-text row rendered beneath input components (Figma "Helper text" row,
+ * 24 px min-height, pt 4 px, gap 4 px). Renders error icon + message text with proper
+ * ARIA role. Consumers add layout tweaks (margin, alignment) via `className`.
+ */
+export declare const HelperRow: import('react').ForwardRefExoticComponent<HelperRowProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/helpers/useHelperSlot.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface UseHelperSlotResult {
+    show: boolean;
+    role: 'alert' | 'status';
+}
+/**
+ * Shared logic for the helper-text row beneath input components.
+ * Returns `show` (whether the slot should render) and `role` (ARIA live-region role).
+ * Emits a dev-mode warning when `error` is set but `message` is empty.
+ */
+export declare function useHelperSlot(component: string, error: boolean | undefined, message: ReactNode, reserveHelperText?: boolean, readOnly?: boolean): UseHelperSlotResult;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.73.1",
+    "version": "3.74.1",
     "type": "module",
     "sideEffects": [
         "**/*.css",