asma-ui-core 3.73.1 → 3.74.0

package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js

@@ -1,20 +1,20 @@
-import { cn as $ } from "../../../../helpers/cn.js";
+import { cn as j } from "../../../../helpers/cn.js";
 import { LoadingIcon as Y } from "../../../icons/loading-icon/LoadingIcon.js";
 import { CheckIcon as Z } from "../../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as ee } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
+import { StyledChip as B } from "../../../data-display/chip/StyledChip.js";
 import { StyledCheckbox as te } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledTooltip as B } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledTooltip as L } from "../../../data-display/tooltip/StyledTooltip.js";
 import { StyledInputField as le } from "../../input-field/StyledInputField.js";
 import { StyledSelectAutocomplete as ae } from "../../select-autocomplete/StyledSelectAutocomplete.js";
 import { DynamicInteractiveChipGroup as re } from "./DynamicInteractiveChipGroup.js";
-import { createElement as L, forwardRef as oe, useCallback as b, useState as ne } from "react";
-import { Fragment as q, jsx as l, jsxs as O } from "react/jsx-runtime";
-var ye = oe((S, E) => {
-  const [F, k] = ne(!1), { options: f, dataTest: g, value: x, readOnly: u, multiple: o, required: z, onChange: y, size: H, title: v, noOptionsText: K, placeholder: _, disabled: I, helperText: R, disableHelperText: A, error: G, valueKey: N = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: P, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = S, C = f.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = b((e) => typeof e == "object" ? e?.[N] : e, [N]), V = b((e, t) => p(e) === p(t), [p]), w = (e) => {
+import { createElement as q, forwardRef as oe, useCallback as b, useState as ne } from "react";
+import { Fragment as E, jsx as l, jsxs as O } from "react/jsx-runtime";
+var ye = oe((S, F) => {
+  const [z, k] = ne(!1), { options: f, dataTest: g, value: x, readOnly: u, multiple: o, required: H, onChange: y, size: K, title: v, noOptionsText: _, placeholder: R, disabled: I, helperText: G, disableHelperText: A, error: N, valueKey: P = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: V, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = S, C = f.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = b((e) => typeof e == "object" ? e?.[P] : e, [P]), D = b((e, t) => p(e) === p(t), [p]), w = (e) => {
     const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
-  }, D = b((e) => {
+  }, $ = b((e) => {
     k(!0), n?.onOpen?.(e);
   }, [n]), X = b((e, t) => {
     k(!1), n?.onClose?.(e, t);
@@ -28,18 +28,18 @@ var ye = oe((S, E) => {
       className: "text-base font-semibold text-delta-800",
       children: v
     }), /* @__PURE__ */ l(ae, {
-      open: F,
-      onOpen: D,
+      open: z,
+      onOpen: $,
       onClose: X,
       disableCloseOnSelect: o,
       dataTest: g,
       disabled: !!I || !!m,
-      noOptionsText: K,
+      noOptionsText: _,
       loading: m,
       readOnly: u,
       value: x,
-      size: H,
-      disableClearable: z,
+      size: K,
+      disableClearable: H,
       options: f,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
@@ -48,13 +48,13 @@ var ye = oe((S, E) => {
         y(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: n?.isOptionEqualToValue ?? V,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? D,
       autoHeight: !0,
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
         const t = e, d = M ?? f.length, a = t.slice(0, d), c = t.length - d;
-        return [...a.map((r) => /* @__PURE__ */ l(j, {
+        return [...a.map((r) => /* @__PURE__ */ l(B, {
           dataTest: `${w(r)}-chip`,
           readOnly: u,
           variant: "outlined",
@@ -65,13 +65,13 @@ var ye = oe((S, E) => {
           },
           disabled: !!I || !!m,
           onDelete: () => {
-            Array.isArray(x) && y(x.filter((h) => !V(h, r)));
+            Array.isArray(x) && y(x.filter((h) => !D(h, r)));
           }
-        }, w(r))), c > 0 ? /* @__PURE__ */ l(j, {
+        }, w(r))), c > 0 ? /* @__PURE__ */ l(B, {
           dataTest: "remaining-count-tag-chip",
           label: `+${c}`,
           variant: "outlined",
-          onClick: D
+          onClick: $
         }, "remaining-count") : null];
       } : void 0,
       popupIcon: m ? /* @__PURE__ */ l(Y, {
@@ -82,21 +82,21 @@ var ye = oe((S, E) => {
         width: 24
       }) : void 0,
       renderOption: (e, t, d) => {
-        const a = typeof t == "object" ? !!t?.disabled : !1, c = P ? P(t) : null;
+        const a = typeof t == "object" ? !!t?.disabled : !1, c = V ? V(t) : null;
         if (o) {
           const h = d.selected;
-          return /* @__PURE__ */ L("li", {
+          return /* @__PURE__ */ q("li", {
             ...e,
             role: "option",
             "aria-selected": h,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
-            className: $("flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            className: j("flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
             "aria-disabled": a
-          }, /* @__PURE__ */ l(B, {
+          }, /* @__PURE__ */ l(L, {
             arrow: !0,
             title: c,
-            children: /* @__PURE__ */ O(q, { children: [/* @__PURE__ */ l(te, {
+            children: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ l(te, {
               disabled: a,
               dataTest: `${w(t)}-checkbox`,
               size: "small",
@@ -110,18 +110,18 @@ var ye = oe((S, E) => {
           }));
         }
         const r = d.selected;
-        return /* @__PURE__ */ L("li", {
+        return /* @__PURE__ */ q("li", {
           ...e,
           role: "option",
           "aria-selected": r,
           key: e.id,
-          className: $("flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          className: j("flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
           onClick: a ? void 0 : e.onClick,
           "aria-disabled": a
-        }, /* @__PURE__ */ l(B, {
+        }, /* @__PURE__ */ l(L, {
           arrow: !0,
           title: c,
-          children: /* @__PURE__ */ O(q, { children: [/* @__PURE__ */ l("span", {
+          children: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
             children: r && /* @__PURE__ */ l(Z, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
@@ -137,13 +137,13 @@ var ye = oe((S, E) => {
       renderInput: (e) => /* @__PURE__ */ l(le, {
         dataTest: `${g}-input-field`,
         ...e,
-        inputRef: E,
-        error: G,
-        helperText: A ? void 0 : R,
-        reserveHelperText: !A,
+        inputRef: F,
+        error: N,
+        helperText: A ? void 0 : G,
+        reserveHelperText: A ? !1 : N !== void 0,
         variant: "outlined",
         label: "",
-        placeholder: _,
+        placeholder: R,
         readOnly: u,
         onFocus: Q,
         onBlur: U,

package/dist/components/inputs/input-field/StyledInputField.js

@@ -1,125 +1,122 @@
-import { cn as s } from "../../../helpers/cn.js";
-import { resolveSx as E } from "../../../helpers/sx.js";
+import { cn as a } from "../../../helpers/cn.js";
+import { resolveSx as D } from "../../../helpers/sx.js";
 import { CloseIcon as Qe } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as Xe } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { useHelperAlertRole as Ze } from "../../../helpers/useHelperAlertRole.js";
-import { useHelperRowBudget as qe } from "../../../helpers/useHelperRowBudget.js";
-import { warnMissingErrorMessage as Oe } from "../../../helpers/warnMissingErrorMessage.js";
-import { floatingLabelClass as et, floatingLabelLayoutStyle as tt, notchedLegendClass as nt, notchedOutlineClass as X, singleLineInputLayoutStyle as ot, singleLineShellLayoutStyle as it } from "../field-styles.js";
-import S from "./StyledInputField.module.js";
-import { Children as lt, useCallback as at, useId as st, useLayoutEffect as Z, useRef as q, useState as k } from "react";
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import { useMergeRefs as O } from "@floating-ui/react";
-var Ft = ({ dataTest: h, label: a, value: u, defaultValue: b, onChange: ee, onBlur: te, onFocus: ne, error: o, helperText: I, reserveHelperText: D = !0, expandHelperText: oe = !0, disabled: r, readOnly: t, required: v, allowClear: ie, onClear: le, type: ae = "text", placeholder: se, name: re, id: de, autoComplete: ce, autoFocus: me, multiline: d, rows: R, minRows: L, maxRows: A, size: pe = "medium", fullWidth: he, className: ue, style: ge, sx: fe, inputRef: xe, slotProps: n, InputProps: P, onKeyDown: T, onClick: ye, variant: rt }) => {
-  const Se = st(), w = de ?? Se, $ = `${w}-helper-text`, j = q(null), z = q(null), [be, Ie] = k(void 0), [H, K] = k(!1), [Le, U] = k(b != null && b !== ""), C = u !== void 0, V = C ? u !== "" && u != null : Le, He = !!r || !!t, _ = n?.input?.startAdornment ?? P?.startAdornment, g = lt.count(_) > 0, c = g && Array.isArray(_), f = n?.input?.endAdornment ?? P?.endAdornment, M = !!(ie && V && !He), { ref: Ne, ...l } = n?.htmlInput ?? {}, ve = xe ?? Ne, { className: Re, style: B, ref: Ae } = n?.input ?? {}, we = O([Ae]), Ce = n?.input?.onMouseDown, _e = ce ?? l.autoComplete, Me = re ?? l.name, N = H || V || g, Be = (e) => {
-    t || (C || U(e.target.value !== ""), ee?.(e));
-  }, Fe = (e) => {
-    !r && !t && K(!0), ne?.(e);
-  }, Ee = (e) => {
-    !r && !t && K(!1), te?.(e);
+import { HelperRow as Xe } from "../../../helpers/HelperRow.js";
+import { useHelperRowBudget as Ze } from "../../../helpers/useHelperRowBudget.js";
+import { useHelperSlot as qe } from "../../../helpers/useHelperSlot.js";
+import { floatingLabelClass as Oe, floatingLabelLayoutStyle as et, notchedLegendClass as tt, notchedOutlineClass as Q, singleLineInputLayoutStyle as nt, singleLineShellLayoutStyle as ot } from "../field-styles.js";
+import y from "./StyledInputField.module.js";
+import { Children as it, useCallback as lt, useId as at, useLayoutEffect as X, useRef as Z, useState as E } from "react";
+import { jsx as o, jsxs as S } from "react/jsx-runtime";
+import { useMergeRefs as q } from "@floating-ui/react";
+var Bt = ({ dataTest: h, label: l, value: m, defaultValue: b, onChange: O, onBlur: ee, onFocus: te, error: c, helperText: P, reserveHelperText: ne, expandHelperText: oe = !0, disabled: s, readOnly: t, required: v, allowClear: ie, onClear: le, type: ae = "text", placeholder: se, name: re, id: de, autoComplete: ce, autoFocus: pe, multiline: r, rows: N, minRows: H, maxRows: R, size: he = "medium", fullWidth: me, className: ue, style: ge, sx: fe, inputRef: xe, slotProps: n, InputProps: T, onKeyDown: k, onClick: ye, variant: st }) => {
+  const Se = at(), A = de ?? Se, $ = `${A}-helper-text`, j = Z(null), z = Z(null), [be, He] = E(void 0), [L, K] = E(!1), [Le, U] = E(b != null && b !== ""), C = m !== void 0, V = C ? m !== "" && m != null : Le, Ie = !!s || !!t, w = n?.input?.startAdornment ?? T?.startAdornment, u = it.count(w) > 0, d = u && Array.isArray(w), g = n?.input?.endAdornment ?? T?.endAdornment, _ = !!(ie && V && !Ie), { ref: ve, ...i } = n?.htmlInput ?? {}, Ne = xe ?? ve, { className: Re, style: B, ref: Ae } = n?.input ?? {}, Ce = q([Ae]), we = n?.input?.onMouseDown, _e = ce ?? i.autoComplete, Be = re ?? i.name, I = L || V || u, Fe = (e) => {
+    t || (C || U(e.target.value !== ""), O?.(e));
+  }, Me = (e) => {
+    !s && !t && K(!0), te?.(e);
+  }, De = (e) => {
+    !s && !t && K(!1), ee?.(e);
   };
-  Z(() => {
+  X(() => {
     const e = j.current;
-    if (!d || R != null || !e) return;
+    if (!r || N != null || !e) return;
     e.style.height = "auto";
-    const m = getComputedStyle(e), y = Number.parseFloat(m.lineHeight) || 24, Q = Number.parseFloat(m.paddingTop) + Number.parseFloat(m.paddingBottom), Ge = L ? L * y + Q : 0, Je = A ? A * y + Q : Number.POSITIVE_INFINITY;
+    const p = getComputedStyle(e), x = Number.parseFloat(p.lineHeight) || 24, J = Number.parseFloat(p.paddingTop) + Number.parseFloat(p.paddingBottom), Ge = H ? H * x + J : 0, Je = R ? R * x + J : Number.POSITIVE_INFINITY;
     e.style.height = `${Math.min(Je, Math.max(Ge, e.scrollHeight))}px`;
   }, [
     b,
-    A,
-    L,
-    d,
     R,
-    u
+    H,
+    r,
+    N,
+    m
   ]);
-  const W = O([ve, at((e) => {
+  const W = q([Ne, lt((e) => {
     j.current = e instanceof HTMLTextAreaElement ? e : null;
-  }, [])]), { style: F, ...ke } = l, x = !d && !c, { height: dt, minHeight: ct, maxHeight: mt, paddingTop: pt, paddingBottom: ht, ...De } = B ?? {}, Pe = x ? {
-    ...De,
-    ...it()
-  } : c ? {
+  }, [])]), { style: F, ...Ee } = i, f = !r && !d, { height: rt, minHeight: dt, maxHeight: ct, paddingTop: pt, paddingBottom: ht, ...Pe } = B ?? {}, Te = f ? {
+    ...Pe,
+    ...ot()
+  } : d ? {
     boxSizing: "border-box",
     minHeight: 40,
     ...B
-  } : B, { height: ut, minHeight: gt, maxHeight: ft, paddingTop: xt, paddingBottom: yt, paddingLeft: St, paddingRight: Te, ...$e } = F ?? {}, je = x ? {
+  } : B, { height: mt, minHeight: ut, maxHeight: gt, paddingTop: ft, paddingBottom: xt, paddingLeft: yt, paddingRight: ke, ...$e } = F ?? {}, je = f ? {
     ...$e,
-    ...ot({
-      paddingLeft: g ? 40 : 14,
-      paddingRight: Te ?? be ?? (M || f ? 40 : 14)
+    ...nt({
+      paddingLeft: u ? 40 : 14,
+      paddingRight: ke ?? be ?? (_ || g ? 40 : 14)
     })
   } : F;
-  Z(() => {
-    if (!x) return;
-    const e = z.current, m = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
-    Ie((y) => y === m ? y : m);
+  X(() => {
+    if (!f) return;
+    const e = z.current, p = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
+    He((x) => x === p ? x : p);
   });
-  const ze = N || !a, Y = !t && (D || I != null || !!o);
-  Oe("StyledInputField", o, I);
-  const Ke = Ze(o), { fieldRef: Ue, rowRef: Ve, rowStyle: We } = qe(oe && Y), G = {
-    ...ke,
-    style: x ? je : F,
-    id: l.id ?? w,
-    name: Me,
+  const ze = I || !l, { show: M, role: Ke } = qe("StyledInputField", c, P, ne, t), { fieldRef: Ue, rowRef: Ve, rowStyle: We } = Ze(oe && M), Y = {
+    ...Ee,
+    style: f ? je : F,
+    id: i.id ?? A,
+    name: Be,
     placeholder: ze ? se : void 0,
-    disabled: r,
+    disabled: s,
     readOnly: t,
     required: v,
     autoComplete: _e,
-    autoFocus: me,
-    value: u,
+    autoFocus: pe,
+    value: m,
     defaultValue: b,
-    "aria-invalid": o ? !0 : void 0,
-    "aria-label": l["aria-label"] ?? (l["aria-labelledby"] ? void 0 : typeof a == "string" && a !== "" ? a : void 0),
-    "aria-describedby": !t && (D || I != null || o) ? $ : l["aria-describedby"],
-    onChange: Be,
-    onFocus: Fe,
-    onBlur: Ee,
-    onKeyDown: l.onKeyDown || T ? (e) => {
-      T?.(e), e.defaultPrevented || l.onKeyDown?.(e);
+    "aria-invalid": c ? !0 : void 0,
+    "aria-label": i["aria-label"] ?? (i["aria-labelledby"] ? void 0 : typeof l == "string" && l !== "" ? l : void 0),
+    "aria-describedby": M ? $ : i["aria-describedby"],
+    onChange: Fe,
+    onFocus: Me,
+    onBlur: De,
+    onKeyDown: i.onKeyDown || k ? (e) => {
+      k?.(e), e.defaultPrevented || i.onKeyDown?.(e);
     } : void 0
-  }, J = s(S.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", c ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : d ? "w-full resize-none overflow-hidden p-0 pl-0 pr-0 leading-[23px]" : s("w-full", S["Input--singleLine"]), "disabled:text-delta-300", t && "text-delta-800", Re), Ye = !d && !c ? {
-    "data-start-adornment": g ? "true" : void 0,
-    "data-end-adornment": M || f ? "true" : void 0
+  }, G = a(y.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", d ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : r ? "w-full resize-none overflow-hidden p-0 pl-0 pr-0 leading-[23px]" : a("w-full", y["Input--singleLine"]), "disabled:text-delta-300", t && "text-delta-800", Re), Ye = !r && !d ? {
+    "data-start-adornment": u ? "true" : void 0,
+    "data-end-adornment": _ || g ? "true" : void 0
   } : {};
-  return /* @__PURE__ */ p("div", {
+  return /* @__PURE__ */ S("div", {
     ref: Ue,
-    className: s("group relative inline-flex flex-col", ue),
+    className: a("group relative inline-flex flex-col", ue),
     onClick: ye,
     style: {
-      width: he ? "100%" : 235,
+      width: me ? "100%" : 235,
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
       letterSpacing: "0.00938em",
-      ...E(fe),
+      ...D(fe),
       ...ge
     },
-    children: [/* @__PURE__ */ p("div", {
+    children: [/* @__PURE__ */ S("div", {
       className: "relative overflow-visible",
-      children: [/* @__PURE__ */ p("div", {
-        className: s("relative flex", x && S.InputShell, d && "box-border items-center px-[14px] py-[16.5px]", c && s(S.AdornmentList, f && S["AdornmentList--endAdornment"]), t && "rounded bg-delta-50"),
-        ref: we,
-        onMouseDown: Ce,
-        style: Pe,
-        "data-testid": c ? `${h}-adornment-list` : `${h}-shell`,
+      children: [/* @__PURE__ */ S("div", {
+        className: a("relative flex", f && y.InputShell, r && "box-border items-center px-[14px] py-[16.5px]", d && a(y.AdornmentList, g && y["AdornmentList--endAdornment"]), t && "rounded bg-delta-50"),
+        ref: Ce,
+        onMouseDown: we,
+        style: Te,
+        "data-testid": d ? `${h}-adornment-list` : `${h}-shell`,
         children: [
-          g && /* @__PURE__ */ i("span", {
-            className: s("items-center text-delta-500", c ? "contents" : "absolute left-3 flex"),
-            children: _
+          u && /* @__PURE__ */ o("span", {
+            className: a("items-center text-delta-500", d ? "contents" : "absolute left-3 flex"),
+            children: w
           }),
-          d ? /* @__PURE__ */ i("textarea", {
-            ...G,
+          r ? /* @__PURE__ */ o("textarea", {
+            ...Y,
             ref: W,
             "data-testid": h,
-            rows: R ?? L ?? 2,
-            className: J
-          }) : /* @__PURE__ */ i("input", {
-            ...G,
+            rows: N ?? H ?? 2,
+            className: G
+          }) : /* @__PURE__ */ o("input", {
+            ...Y,
             ...Ye,
             ref: W,
             "data-testid": h,
             type: ae,
-            className: J
+            className: G
           }),
-          M ? /* @__PURE__ */ i("button", {
+          _ ? /* @__PURE__ */ o("button", {
             type: "button",
             "aria-label": "Clear",
             "data-testid": `${h}-clear`,
@@ -127,79 +124,74 @@ var Ft = ({ dataTest: h, label: a, value: u, defaultValue: b, onChange: ee, onBl
             onClick: (e) => {
               e.stopPropagation(), e.preventDefault(), C || U(!1), le?.();
             },
-            children: /* @__PURE__ */ i(Qe, {
+            children: /* @__PURE__ */ o(Qe, {
               width: 18,
               height: 18
             })
-          }) : f && /* @__PURE__ */ i("span", {
+          }) : g && /* @__PURE__ */ o("span", {
             ref: z,
             className: "absolute inset-y-0 right-[14px] flex max-w-[calc(100%-28px)] items-center gap-1",
-            children: f
+            children: g
           }),
-          a ? /* @__PURE__ */ i("fieldset", {
+          l ? /* @__PURE__ */ o("fieldset", {
             "aria-hidden": !0,
-            className: X({
-              focused: H,
-              error: o,
-              disabled: r,
+            className: Q({
+              focused: L,
+              error: c,
+              disabled: s,
               readOnly: t,
               notched: !0
             }),
-            children: /* @__PURE__ */ i("legend", {
-              className: nt(N),
-              children: /* @__PURE__ */ p("span", {
+            children: /* @__PURE__ */ o("legend", {
+              className: tt(I),
+              children: /* @__PURE__ */ S("span", {
                 className: "inline-block px-[5px]",
-                children: [a, v && " *"]
+                children: [l, v && " *"]
               })
             })
-          }) : /* @__PURE__ */ i("div", {
+          }) : /* @__PURE__ */ o("div", {
             "aria-hidden": !0,
-            className: X({
-              focused: H,
-              error: o,
-              disabled: r,
+            className: Q({
+              focused: L,
+              error: c,
+              disabled: s,
               readOnly: t,
               notched: !1
             })
           })
         ]
-      }), a && /* @__PURE__ */ p("label", {
-        htmlFor: w,
-        className: s(et({
-          shrink: N,
-          focused: H,
-          error: o,
-          disabled: r,
+      }), l && /* @__PURE__ */ S("label", {
+        htmlFor: A,
+        className: a(Oe({
+          shrink: I,
+          focused: L,
+          error: c,
+          disabled: s,
           readOnly: t,
-          size: pe
+          size: he
         }), n?.inputLabel?.className),
         style: {
-          ...E(n?.inputLabel?.sx),
+          ...D(n?.inputLabel?.sx),
           ...n?.inputLabel?.style,
-          ...tt(N)
+          ...et(I)
         },
-        children: [a, v && " *"]
+        children: [l, v && " *"]
       })]
-    }), !t && Y && /* @__PURE__ */ p("div", {
+    }), M && /* @__PURE__ */ o(Xe, {
       ref: Ve,
       id: $,
       role: Ke,
-      className: s("mr-[14px] box-border flex min-h-[24px] items-start gap-1 pt-1", o && !n?.formHelperText?.hideErrorIcon && "text-error-500", !o && "text-delta-600", n?.formHelperText?.className),
+      error: c,
+      message: P,
+      hideErrorIcon: n?.formHelperText?.hideErrorIcon,
+      className: a("mr-[14px] box-border items-start", n?.formHelperText?.className),
       style: {
         ...We,
-        ...E(n?.formHelperText?.sx)
-      },
-      children: [o && !n?.formHelperText?.hideErrorIcon && /* @__PURE__ */ i(Xe, {
-        width: 20,
-        height: 20,
-        className: "min-w-5 shrink-0"
-      }), /* @__PURE__ */ i("span", {
-        className: "text-sm leading-5 tracking-[0.03333em]",
-        children: I
-      })]
+        ...D(n?.formHelperText?.sx)
+      }
     })]
   });
 };
 export {
-  Ft as StyledInputField
+  Bt as StyledInputField
 };

package/dist/components/inputs/radio-button/base-ui/StyledRadioGroup.js

@@ -1,49 +1,43 @@
-import { ErrorOutlineIcon as H } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { RadioGroupContext as y } from "./RadioGroupContext.js";
-import { useHelperAlertRole as B } from "../../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as D } from "../../../../helpers/warnMissingErrorMessage.js";
-import u from "clsx";
-import { forwardRef as P, useId as f, useMemo as U, useState as V } from "react";
-import { jsx as x, jsxs as g } from "react/jsx-runtime";
-var W = P(({ value: i, defaultValue: h, onValueChange: v, disabled: r, readOnly: o, dataTest: N, error: e, errorText: R, helperText: n, reserveHelperText: w = !0, children: S, name: b, ...t }, G) => {
-  const l = f(), I = f(), a = b ?? I, c = i !== void 0, [M, j] = V(h ?? null), m = c ? i : M, k = (p) => {
-    o || (c || j(p), v?.(p));
-  }, A = U(() => ({
+import { cn as u } from "../../../../helpers/cn.js";
+import { RadioGroupContext as D } from "./RadioGroupContext.js";
+import { HelperRow as M } from "../../../../helpers/HelperRow.js";
+import { useHelperSlot as P } from "../../../../helpers/useHelperSlot.js";
+import { forwardRef as U, useId as f, useMemo as V, useState as k } from "react";
+import { jsx as v, jsxs as q } from "react/jsx-runtime";
+var Q = U(({ value: s, defaultValue: R, onValueChange: x, disabled: r, readOnly: e, dataTest: N, error: o, errorText: S, helperText: l, reserveHelperText: h, children: w, name: g, ...t }, b) => {
+  const i = f(), G = f(), a = g ?? G, n = s !== void 0, [H, j] = k(R ?? null), c = n ? s : H, C = (p) => {
+    e || (n || j(p), x?.(p));
+  }, I = V(() => ({
     name: a,
-    value: m,
+    value: c,
     disabled: r,
-    onSelect: k
+    onSelect: C
   }), [
     a,
-    m,
+    c,
     r
-  ]), s = e ? R ?? n : n, d = !o && (w || s != null || !!e);
-  D("StyledRadioGroup", e, s);
-  const C = B(e), E = /\bflex-(?:row|col)\b/.test(t.className ?? "");
-  return /* @__PURE__ */ g("div", {
+  ]), m = o ? S ?? l : l, { show: d, role: y } = P("StyledRadioGroup", o, m, h, e), A = /\bflex-(?:row|col)\b/.test(t.className ?? "");
+  return /* @__PURE__ */ q("div", {
     ...t,
-    ref: G,
+    ref: b,
     role: "radiogroup",
     "data-testid": N,
-    "aria-describedby": d ? l : void 0,
-    "aria-invalid": e,
-    "aria-readonly": o ? !0 : void 0,
-    className: u("flex items-start", !E && "flex-col", o && "pointer-events-none", t.className),
-    children: [/* @__PURE__ */ x(y.Provider, {
-      value: A,
-      children: S
-    }), d && /* @__PURE__ */ g("p", {
-      id: l,
-      role: C,
-      className: u("m-0 flex min-h-[24px] items-center gap-1 pt-1 text-sm leading-5 tracking-[0.03333em]", e ? "font-medium text-error-500" : "text-delta-600"),
-      children: [e && /* @__PURE__ */ x(H, {
-        width: 20,
-        height: 20,
-        className: "min-w-5 shrink-0"
-      }), s]
+    "aria-describedby": d ? i : void 0,
+    "aria-invalid": o,
+    "aria-readonly": e ? !0 : void 0,
+    className: u("flex items-start", !A && "flex-col", e && "pointer-events-none", t.className),
+    children: [/* @__PURE__ */ v(D.Provider, {
+      value: I,
+      children: w
+    }), d && /* @__PURE__ */ v(M, {
+      id: i,
+      role: y,
+      error: o,
+      message: m,
+      className: u("m-0 items-center", o && "font-medium")
     })]
   });
 });
 export {
-  W as StyledRadioGroup
+  Q as StyledRadioGroup
 };

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

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.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",