asma-ui-core 3.73.0 → 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/field-styles.js

@@ -22,7 +22,7 @@ var d = () => ({
 } : {
   top: "50%",
   transform: "translateY(-50%)"
-}, x = ({ focused: e, error: r, disabled: t, readOnly: o, borderless: a }) => n("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", a && !e ? "border-transparent" : t ? "border-delta-300" : o ? "border-delta-200" : r ? n("border-error-500", e && "border-2") : e ? "border-2 border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), s = ({ focused: e, error: r, disabled: t, readOnly: o, notched: a = !0 }) => n("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", a ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-2 border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), g = (e) => n("invisible block h-[11px] overflow-hidden p-0 text-xs leading-[23px] transition-[max-width] duration-150", e ? "max-w-full" : "max-w-[0.01px]"), p = ({ shrink: e, focused: r, error: t, disabled: o, readOnly: a }) => n("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", o ? "text-delta-300" : a ? "text-delta-800" : t ? "text-error-500" : r ? "text-gama-500" : e ? "text-delta-800" : "text-delta-500", e ? "bg-white px-1 text-xs leading-[16px] tracking-[0.24px]" : "text-base leading-[23px] tracking-[0.00938em]");
+}, x = ({ focused: e, error: r, disabled: t, readOnly: o, borderless: a }) => n("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", a && !e ? "border-transparent" : t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-[3px] border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), s = ({ focused: e, error: r, disabled: t, readOnly: o, notched: a = !0 }) => n("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", a ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-[3px] border-gama-400" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), g = (e) => n("invisible block h-[11px] overflow-hidden p-0 text-xs leading-[23px] transition-[max-width] duration-150", e ? "max-w-full" : "max-w-[0.01px]"), p = ({ shrink: e, focused: r, error: t, disabled: o, readOnly: a }) => n("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", o ? "text-delta-300" : a ? "text-delta-800" : t ? "text-error-500" : r ? "text-gama-500" : e ? "text-delta-800" : "text-delta-500", e ? "bg-white px-1 text-xs leading-[16px] tracking-[0.24px]" : "text-base leading-[23px] tracking-[0.00938em]");
 export {
   p as floatingLabelClass,
   b as floatingLabelLayoutStyle,

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