asma-ui-core 3.95.1 → 3.97.0

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

@@ -1,44 +1,45 @@
-import { cn as $ } from "../../../../helpers/cn.js";
-import { LoadingIcon as X } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as Y } from "../../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as Z } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as ee } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledTooltip as D } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledInputField as te } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as le } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicInteractiveChipGroup as ae } from "./DynamicInteractiveChipGroup.js";
-import { createElement as L, forwardRef as re, useCallback as f, useState as oe } from "react";
-import { Fragment as q, jsx as l, jsxs as C } from "react/jsx-runtime";
-var xe = re((T, E) => {
-  const [F, O] = oe(!1), { options: k, dataTest: h, value: g, readOnly: u, multiple: o, required: K, onChange: x, size: z, title: v, noOptionsText: H, placeholder: _, disabled: S, helperText: R, disableHelperText: I, error: N, valueKey: A = "value", labelKey: G = "label", renderLabel: i, getOptionTooltip: P, startAdornment: W, autocompleteProps: n, loading: m, maxTags: J, onFocus: M, onBlur: Q } = T, s = (e) => typeof e == "object" ? e?.[G]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[A] : e, [A]), V = f((e, t) => p(e) === p(t), [p]), y = (e) => {
+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 D } from "../../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as te } from "../../checkbox/base-ui/StyledCheckbox.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 q, forwardRef as oe, useCallback as f, useState as ne } from "react";
+import { Fragment as z, jsx as l, jsxs as T } from "react/jsx-runtime";
+var ve = oe((O, E) => {
+  const [F, S] = ne(!1), { options: k, dataTest: h, value: g, readOnly: u, multiple: o, required: K, onChange: x, size: H, rowSize: v = "compact", title: y, noOptionsText: _, placeholder: R, disabled: I, helperText: G, disableHelperText: N, error: A, valueKey: P = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: V, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = O, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[P] : e, [P]), B = f((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);
-  }, B = f((e) => {
-    O(!0), n?.onOpen?.(e);
-  }, [n]), U = f((e, t) => {
-    O(!1), n?.onClose?.(e, t);
+  }, $ = f((e) => {
+    S(!0), n?.onOpen?.(e);
+  }, [n]), X = f((e, t) => {
+    S(!1), n?.onClose?.(e, t);
   }, [n]);
-  if (o && u) return /* @__PURE__ */ l(ae, { ...T });
-  const w = v ? `${h}-title` : void 0;
-  return /* @__PURE__ */ C("div", {
+  if (o && u) return /* @__PURE__ */ l(re, { ...O });
+  const C = y ? `${h}-title` : void 0;
+  return /* @__PURE__ */ T("div", {
     className: "flex w-full flex-col gap-y-1",
-    children: [v && /* @__PURE__ */ l("span", {
-      id: w,
+    children: [y && /* @__PURE__ */ l("span", {
+      id: C,
       className: "text-base font-semibold text-delta-800",
-      children: v
-    }), /* @__PURE__ */ l(le, {
+      children: y
+    }), /* @__PURE__ */ l(ae, {
       open: F,
-      onOpen: B,
-      onClose: U,
+      onOpen: $,
+      onClose: X,
       disableCloseOnSelect: o,
       dataTest: h,
-      disabled: !!S || !!m,
-      noOptionsText: H,
+      disabled: !!I || !!m,
+      noOptionsText: _,
       loading: m,
       readOnly: u,
       value: g,
-      size: z,
+      size: H,
+      rowSize: v,
       disableClearable: K,
       options: k,
       fullWidth: !0,
@@ -48,14 +49,14 @@ var xe = re((T, E) => {
         x(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: n?.isOptionEqualToValue ?? V,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? B,
       autoHeight: !0,
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, d = J ?? k.length, a = t.slice(0, d), c = t.length - d;
-        return [...a.map((r) => /* @__PURE__ */ l(j, {
-          dataTest: `${y(r)}-chip`,
+        const t = e, d = M ?? k.length, a = t.slice(0, d), c = t.length - d;
+        return [...a.map((r) => /* @__PURE__ */ l(D, {
+          dataTest: `${w(r)}-chip`,
           readOnly: u,
           variant: "outlined",
           label: i ? i(r) : s(r),
@@ -63,47 +64,47 @@ var xe = re((T, E) => {
             root: "h-fit w-fit min-h-[32px]",
             label: "block whitespace-normal"
           },
-          disabled: !!S || !!m,
+          disabled: !!I || !!m,
           deleteButtonTabIndex: -1,
           onDelete: () => {
-            Array.isArray(g) && x(g.filter((b) => !V(b, r)));
+            Array.isArray(g) && x(g.filter((b) => !B(b, r)));
           }
-        }, y(r))), c > 0 ? /* @__PURE__ */ l(j, {
+        }, w(r))), c > 0 ? /* @__PURE__ */ l(D, {
           dataTest: "remaining-count-tag-chip",
           label: `+${c}`,
           variant: "outlined",
           tabIndex: -1,
-          onClick: B
+          onClick: $
         }, "remaining-count") : null];
       } : void 0,
-      popupIcon: m ? /* @__PURE__ */ l(X, {
+      popupIcon: m ? /* @__PURE__ */ l(Y, {
         height: 24,
         width: 24
-      }) : o ? /* @__PURE__ */ l(Z, {
+      }) : o ? /* @__PURE__ */ l(ee, {
         height: 24,
         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 b = d.selected;
-          return /* @__PURE__ */ L("li", {
+          return /* @__PURE__ */ q("li", {
             ...e,
             role: "option",
             "aria-selected": b,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
-            className: $("relative flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            className: j("relative flex cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", v === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
             "aria-disabled": a
           }, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
             "aria-hidden": "true",
             className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-          }), /* @__PURE__ */ l(D, {
+          }), /* @__PURE__ */ l(L, {
             arrow: !0,
             title: c,
-            children: /* @__PURE__ */ C(q, { children: [/* @__PURE__ */ l(ee, {
+            children: /* @__PURE__ */ T(z, { children: [/* @__PURE__ */ l(te, {
               disabled: a,
-              dataTest: `${y(t)}-checkbox`,
+              dataTest: `${w(t)}-checkbox`,
               size: "small",
               decorative: !0,
               className: "min-w-[36px]",
@@ -115,23 +116,23 @@ var xe = re((T, E) => {
           }));
         }
         const r = d.selected;
-        return /* @__PURE__ */ L("li", {
+        return /* @__PURE__ */ q("li", {
           ...e,
           role: "option",
           "aria-selected": r,
           key: e.id,
-          className: $("relative flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          className: j("relative flex cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", v === "regular" ? "min-h-12" : "min-h-10", 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
         }, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-        }), /* @__PURE__ */ l(D, {
+        }), /* @__PURE__ */ l(L, {
           arrow: !0,
           title: c,
-          children: /* @__PURE__ */ C(q, { children: [/* @__PURE__ */ l("span", {
+          children: /* @__PURE__ */ T(z, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
-            children: r && /* @__PURE__ */ l(Y, {
+            children: r && /* @__PURE__ */ l(Z, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
@@ -142,30 +143,30 @@ var xe = re((T, E) => {
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(te, {
+      renderInput: (e) => /* @__PURE__ */ l(le, {
         dataTest: `${h}-input-field`,
         ...e,
         inputRef: E,
-        error: N,
-        helperText: I ? void 0 : R,
-        reserveHelperText: I ? !1 : N !== void 0,
+        error: A,
+        helperText: N ? void 0 : G,
+        reserveHelperText: N ? !1 : A !== void 0,
         variant: "outlined",
         label: "",
-        placeholder: _,
+        placeholder: R,
         readOnly: u,
-        onFocus: M,
-        onBlur: Q,
+        onFocus: Q,
+        onBlur: U,
         onKeyDown: e.onKeyDown,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: W ?? e.slotProps?.input?.startAdornment
+            startAdornment: J ?? e.slotProps?.input?.startAdornment
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...w ? { "aria-labelledby": w } : {}
+            ...C ? { "aria-labelledby": C } : {}
           }
         }
       }),
@@ -174,5 +175,5 @@ var xe = re((T, E) => {
   });
 });
 export {
-  xe as DynamicSelectAutocomplete
+  ve as DynamicSelectAutocomplete
 };

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

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

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

@@ -1,9 +1,9 @@
-var n = "_Input_1sz1p_1", t = "_InputShell_1sz1p_8", e = "_AdornmentList_1sz1p_36", _ = {
+var n = "_Input_1focb_1", t = "_InputShell_1focb_8", e = "_AdornmentList_1focb_36", _ = {
   Input: n,
   InputShell: t,
-  "Input--singleLine": "_Input--singleLine_1sz1p_17",
+  "Input--singleLine": "_Input--singleLine_1focb_17",
   AdornmentList: e,
-  "AdornmentList--endAdornment": "_AdornmentList--endAdornment_1sz1p_45"
+  "AdornmentList--endAdornment": "_AdornmentList--endAdornment_1focb_46"
 };
 export {
   _ as default