asma-ui-core 3.109.0 → 3.111.0

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

@@ -5,31 +5,32 @@ import { CloseIcon as pt } from "../../icons/close-icon/CloseIcon.js";
 import { CheckIcon as ft } from "../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as mt } from "../../icons/plus-icon-circle/PlusIconCircle.js";
 import { StyledChip as ht } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as de } from "../checkbox/base-ui/StyledCheckbox.js";
+import { StyledCheckbox as ue } from "../checkbox/base-ui/StyledCheckbox.js";
 import { useBackCloses as bt } from "../../../hooks/useBackCloses.hook.js";
-import { LoadingIcon as gt } from "../../../table/shared-components/LoadingIcon.js";
+import { fieldWidthStyle as gt } from "../field-styles.js";
+import { LoadingIcon as xt } from "../../../table/shared-components/LoadingIcon.js";
 import B from "./StyledSelectAutocomplete.module.js";
-import { useEffect as ue, useMemo as U, useRef as pe, useState as D } from "react";
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
-import { FloatingPortal as xt, autoUpdate as wt, flip as yt, offset as kt, shift as vt, size as Dt, useDismiss as It, useFloating as Nt, useInteractions as Ct, useMergeRefs as fe, useRole as At } from "@floating-ui/react";
-var St = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), Mt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, getOptionLabel: he, getOptionKey: A, isOptionEqualToValue: V, renderOption: T, renderValue: Y, filterOptions: O, loading: q, loadingText: be = "Loading…", noOptionsText: ge = "No options", disabled: S, readOnly: g, error: xe, helperText: we, size: ye = "small", rowSize: ke = "compact", disableClearable: ve, disableCloseOnSelect: De, popupIcon: Ie, autoHeight: Ne, multiple: Ce, allowSelectAll: M, selectAllLabel: Ae = "Select all", fullWidth: Se, classes: Me, inputValue: R, onInputChange: Re, open: G, onOpen: Pe, onClose: $e, className: _e, wrapperClassName: Le, getOptionDisabled: Ee, slotProps: J }) {
-  const s = Ce === !0, d = he ?? St, P = (e, t) => V ? V(e, t) : e === t, [Oe, Fe] = D(!1), n = G ?? Oe, c = (e) => {
-    e && (g || S) || (G === void 0 && Fe(e), e ? Pe?.() : (x(null), $e?.()));
-  }, [je, Q] = D(""), m = R ?? je, $ = (e, t, a) => {
-    R === void 0 && Q(t), Re?.(e, t, a);
-  }, [o, x] = D(null), X = `${l}-listbox`, Z = pe([]), K = pe(null), [ze, He] = D(null), [ee, We] = D(null), i = s ? Array.isArray(N) ? N : [] : [], w = s ? null : N ?? null, te = !s && w !== null ? d(w) : "";
-  ue(() => {
-    R !== void 0 || s || Q(te);
+import { useEffect as pe, useMemo as U, useRef as fe, useState as D } from "react";
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { FloatingPortal as yt, autoUpdate as wt, flip as kt, offset as vt, shift as Dt, size as It, useDismiss as Nt, useFloating as Ct, useInteractions as At, useMergeRefs as me, useRole as St } from "@floating-ui/react";
+var Mt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), Rt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
+function qt({ dataTest: l, options: b, renderInput: he, value: N, onChange: C, getOptionLabel: be, getOptionKey: A, isOptionEqualToValue: V, renderOption: T, renderValue: Y, filterOptions: O, loading: q, loadingText: ge = "Loading…", noOptionsText: xe = "No options", disabled: S, readOnly: g, error: ye, helperText: we, size: ke = "small", rowSize: ve = "compact", disableClearable: De, disableCloseOnSelect: Ie, popupIcon: Ne, autoHeight: Ce, multiple: Ae, allowSelectAll: M, selectAllLabel: Se = "Select all", width: G = "full", fullWidth: Pt, classes: Me, inputValue: R, onInputChange: Re, open: J, onOpen: Pe, onClose: _e, className: $e, wrapperClassName: Le, getOptionDisabled: Ee, slotProps: Q }) {
+  const s = Ae === !0, d = be ?? Mt, P = (e, t) => V ? V(e, t) : e === t, [Oe, We] = D(!1), n = J ?? Oe, c = (e) => {
+    e && (g || S) || (J === void 0 && We(e), e ? Pe?.() : (x(null), _e?.()));
+  }, [Fe, X] = D(""), m = R ?? Fe, _ = (e, t, a) => {
+    R === void 0 && X(t), Re?.(e, t, a);
+  }, [r, x] = D(null), Z = `${l}-listbox`, K = fe([]), ee = fe(null), [je, ze] = D(null), [te, He] = D(null), i = s ? Array.isArray(N) ? N : [] : [], y = s ? null : N ?? null, le = !s && y !== null ? d(y) : "";
+  pe(() => {
+    R !== void 0 || s || X(le);
   }, [
     R,
     s,
-    te
+    le
   ]);
-  const F = (e) => s ? i.some((t) => P(e, t)) : w !== null && P(e, w), _ = (e) => Ee?.(e) ?? Mt(e), le = U(() => {
+  const W = (e) => s ? i.some((t) => P(e, t)) : y !== null && P(e, y), $ = (e) => Ee?.(e) ?? Rt(e), se = U(() => {
     const e = [...b];
     if (O) return O(e, { inputValue: m });
-    const t = !s && w !== null ? d(w).toLowerCase() : null;
+    const t = !s && y !== null ? d(y).toLowerCase() : null;
     if (!m || m.toLowerCase() === t) return e;
     const a = m.toLowerCase();
     return e.filter((p) => d(p).toLowerCase().includes(a));
@@ -38,66 +39,66 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
     m,
     O,
     N
-  ]), u = U(() => le.slice(0, 100), [le]), se = u.flatMap((e, t) => _(e) ? [] : [t]), j = M && s ? [-1, ...se] : se, oe = u.map((e, t) => t), h = M && s ? [-1, ...oe] : oe, k = u.findIndex(F);
-  ue(() => {
+  ]), u = U(() => se.slice(0, 100), [se]), re = u.flatMap((e, t) => $(e) ? [] : [t]), F = M && s ? [-1, ...re] : re, oe = u.map((e, t) => t), h = M && s ? [-1, ...oe] : oe, k = u.findIndex(W);
+  pe(() => {
     if (!n) return;
-    const e = o ?? k;
+    const e = r ?? k;
     if (e < 0) return;
-    const t = requestAnimationFrame(() => Z.current[e]?.scrollIntoView({ block: "nearest" }));
+    const t = requestAnimationFrame(() => K.current[e]?.scrollIntoView({ block: "nearest" }));
     return () => cancelAnimationFrame(t);
   }, [
-    o,
+    r,
     n,
-    ee,
+    te,
     k
   ]);
-  const { refs: L, floatingStyles: Be, context: re } = Nt({
+  const { refs: L, floatingStyles: Be, context: ne } = Ct({
     open: n,
     onOpenChange: c,
     placement: "bottom-start",
     strategy: "fixed",
     whileElementsMounted: wt,
     middleware: [
-      kt(0),
-      yt({ padding: 8 }),
-      vt({ padding: 8 }),
-      Dt({ apply({ rects: e, availableHeight: t }) {
-        He(e.reference.width), We(Ne ? t - 8 : Math.min(t - 8, 320));
+      vt(0),
+      kt({ padding: 8 }),
+      Dt({ padding: 8 }),
+      It({ apply({ rects: e, availableHeight: t }) {
+        ze(e.reference.width), He(Ce ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: Ue, getFloatingProps: Ve, getItemProps: Te } = Ct([It(re), At(re, { role: "listbox" })]);
+  }), { getReferenceProps: Ue, getFloatingProps: Ve, getItemProps: Te } = At([Nt(ne), St(ne, { role: "listbox" })]);
   bt({
     active: n,
     requestClose: () => c(!1)
   });
-  const Ye = fe([L.setReference]), ne = U(() => n ? it(L.reference.current) : void 0, [n, L]), z = ct(ne), qe = fe([dt(L.setFloating, z)]), Ge = (e) => j.includes(k) ? k : j[e === 1 ? 0 : j.length - 1] ?? null, Je = (e) => {
+  const Ye = me([L.setReference]), ae = U(() => n ? it(L.reference.current) : void 0, [n, L]), j = ct(ae), qe = me([dt(L.setFloating, j)]), Ge = (e) => F.includes(k) ? k : F[e === 1 ? 0 : F.length - 1] ?? null, Je = (e) => {
     h.length !== 0 && x((t) => {
       const a = h.indexOf(t ?? k);
       return a === -1 ? h[e === 1 ? 0 : h.length - 1] ?? null : h[Math.min(Math.max(a + e, 0), h.length - 1)] ?? null;
     });
-  }, v = (e, t, a = !s || !De) => {
+  }, v = (e, t, a = !s || !Ie) => {
     if (s) {
-      const p = i.some((f) => P(t, f)), y = p ? i.filter((f) => !P(t, f)) : [...i, t];
-      C?.(e, y, p ? "removeOption" : "selectOption", { option: t }), $(e, "", "reset"), a && c(!1);
+      const p = i.some((f) => P(t, f)), w = p ? i.filter((f) => !P(t, f)) : [...i, t];
+      C?.(e, w, p ? "removeOption" : "selectOption", { option: t }), _(e, "", "reset"), a && c(!1);
     } else
-      C?.(e, t, "selectOption", { option: t }), $(e, d(t), "reset"), a && c(!1);
-  }, ae = (e) => {
-    C?.(e, s ? [] : null, "clear", void 0), $(e, "", "clear");
-  }, H = (e) => {
+      C?.(e, t, "selectOption", { option: t }), _(e, d(t), "reset"), a && c(!1);
+  }, ie = (e) => {
+    C?.(e, s ? [] : null, "clear", void 0), _(e, "", "clear");
+  }, z = (e) => {
     const t = b.length > 0 && i.length === b.length;
     C?.(e, t ? [] : b, t ? "clear" : "selectOption", void 0);
   }, Qe = (e) => {
-    if (e.key === "Backspace" && m === "" && ie) {
+    if (e.key === "Backspace" && m === "" && ce) {
       const t = i[i.length - 1];
-      s ? t !== void 0 && v(e, t, !1) : ae(e);
+      s ? t !== void 0 && v(e, t, !1) : ie(e);
     } else if (e.key === "Enter" && !n)
       e.preventDefault(), c(!0);
-    else if (e.key === "Enter" && o === -1)
-      e.preventDefault(), H(e);
-    else if (e.key === "Enter" && o != null && u[o] != null) {
+    else if (e.key === "Enter" && r === -1)
+      e.preventDefault(), z(e);
+    else if (e.key === "Enter" && r != null && u[r] != null) {
       e.preventDefault();
-      const t = u[o];
-      _(t) || v(e, t, !0);
+      const t = u[r];
+      $(t) || v(e, t, !0);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !n) {
         x(Ge(e.key === "ArrowDown" ? 1 : -1)), c(!0);
@@ -106,19 +107,19 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
       Je(e.key === "ArrowDown" ? 1 : -1);
     } else if (e.key === "Home" || e.key === "End")
       e.preventDefault(), x(h[e.key === "Home" ? 0 : h.length - 1] ?? null);
-    else if (e.key === " " && o === -1)
-      e.preventDefault(), H(e);
-    else if (e.key === " " && o != null && u[o] != null) {
+    else if (e.key === " " && r === -1)
+      e.preventDefault(), z(e);
+    else if (e.key === " " && r != null && u[r] != null) {
       e.preventDefault();
-      const t = u[o];
-      _(t) || v(e, t, !1);
+      const t = u[r];
+      $(t) || v(e, t, !1);
     } else e.key === "Escape" && n ? (e.preventDefault(), e.stopPropagation(), c(!1)) : e.key === "Tab" && c(!1);
-  }, ie = !ve && !g && !S && (s ? i.length > 0 : w !== null);
-  let ce;
-  n && o != null && (o === -1 || u[o] !== void 0) && (ce = o === -1 ? `${l}-select-all` : `${l}-option-${o}`);
+  }, ce = !De && !g && !S && (s ? i.length > 0 : y !== null);
+  let de;
+  n && r != null && (r === -1 || u[r] !== void 0) && (de = r === -1 ? `${l}-select-all` : `${l}-option-${r}`);
   const Xe = (e) => {
-    e.preventDefault(), !(S || g) && (K.current?.focus(), c(!n));
-  }, Ze = s ? Y ? Y(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ r(ht, {
+    e.preventDefault(), !(S || g) && (ee.current?.focus(), c(!n));
+  }, Ze = s ? Y ? Y(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ o(ht, {
     dataTest: `selected-chip-${d(e)}`,
     label: d(e),
     readOnly: g,
@@ -127,26 +128,26 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
   }, A ? A(e) : `${d(e)}-${t}`)) : void 0, Ke = /* @__PURE__ */ I("span", {
     className: "flex items-center gap-1",
     children: [
-      q && /* @__PURE__ */ r(gt, {
+      q && /* @__PURE__ */ o(xt, {
         width: 20,
         height: 20,
         className: "animate-spin"
       }),
-      ie && /* @__PURE__ */ r("button", {
+      ce && /* @__PURE__ */ o("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Clear",
         "data-testid": `${l}-clear`,
         className: "invisible flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-delta-50 group-focus-within:visible",
         onMouseDown: (e) => e.preventDefault(),
-        onClick: ae,
-        children: /* @__PURE__ */ r(pt, {
+        onClick: ie,
+        children: /* @__PURE__ */ o(pt, {
           width: 20,
           height: 20,
           className: "text-delta-700"
         })
       }),
-      g ? null : /* @__PURE__ */ r("button", {
+      g ? null : /* @__PURE__ */ o("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Toggle options",
@@ -155,11 +156,11 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: (e) => e.preventDefault(),
         onClick: Xe,
-        children: Ie ?? (s ? /* @__PURE__ */ r(mt, {
+        children: Ne ?? (s ? /* @__PURE__ */ o(mt, {
           width: 24,
           height: 24,
           className: "text-delta-700"
-        }) : /* @__PURE__ */ r(ut, {
+        }) : /* @__PURE__ */ o(ut, {
           width: 24,
           height: 24,
           className: E(B["select-custom-icon"], n && B["select-custom-icon-open"], "text-delta-700")
@@ -168,25 +169,25 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
     ]
   }), et = {
     disabled: S,
-    size: ye,
+    size: ke,
     fullWidth: !0,
-    error: xe,
+    error: ye,
     helperText: we,
     value: m,
     onChange: (e) => {
-      x(null), $(e, e.target.value, "input"), n || c(!0);
+      x(null), _(e, e.target.value, "input"), n || c(!0);
     },
     onKeyDown: Qe,
     slotProps: {
       htmlInput: {
         ...Ue(),
-        ref: K,
+        ref: ee,
         onClick: () => c(!0),
         role: "combobox",
         "aria-autocomplete": "list",
         "aria-expanded": n,
-        "aria-controls": n ? X : void 0,
-        "aria-activedescendant": ce,
+        "aria-controls": n ? Z : void 0,
+        "aria-activedescendant": de,
         autoComplete: "off",
         readOnly: g
       },
@@ -196,38 +197,38 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
         endAdornment: Ke
       }
     }
-  }, tt = E("asma-pressable", "relative box-border flex cursor-pointer items-center gap-x-3 px-3 py-2 text-base text-delta-800", ke === "regular" ? "min-h-12" : "min-h-10", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), lt = (e, t, a) => {
-    const { key: p, ...y } = e;
+  }, tt = E("asma-pressable", "relative box-border flex cursor-pointer items-center gap-x-3 px-3 py-2 text-base text-delta-800", ve === "regular" ? "min-h-12" : "min-h-10", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), lt = (e, t, a) => {
+    const { key: p, ...w } = e;
     return /* @__PURE__ */ I("li", {
-      ...y,
+      ...w,
       children: [
-        e["data-active"] !== void 0 && /* @__PURE__ */ r("span", {
+        e["data-active"] !== void 0 && /* @__PURE__ */ o("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
         }),
-        s ? /* @__PURE__ */ r(de, {
+        s ? /* @__PURE__ */ o(ue, {
           dataTest: `${l}-${d(t)}-checkbox`,
           checked: a.selected,
           size: "medium",
           checkboxClassName: "!h-4 !w-4",
           hideWrapper: !0,
           decorative: !0
-        }) : /* @__PURE__ */ r("span", {
+        }) : /* @__PURE__ */ o("span", {
           className: "w-5",
-          children: a.selected && /* @__PURE__ */ r(ft, {
+          children: a.selected && /* @__PURE__ */ o(ft, {
             width: 20,
             height: 20,
             className: "text-gama-500"
           })
         }),
-        /* @__PURE__ */ r("span", {
+        /* @__PURE__ */ o("span", {
           className: "line-clamp-2 min-w-0 flex-1 break-words",
           children: d(t)
         })
       ]
     }, p);
   }, st = (e, t) => {
-    const a = _(e), p = {
+    const a = $(e), p = {
       ...Te({
         onMouseDown: (f) => f.preventDefault(),
         onClick: (f) => {
@@ -237,83 +238,85 @@ function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, g
       }),
       key: A ? String(A(e)) : `${d(e)}-${t}`,
       ref: (f) => {
-        Z.current[t] = f;
+        K.current[t] = f;
       },
       role: "option",
       id: `${l}-option-${t}`,
-      "aria-selected": F(e),
+      "aria-selected": W(e),
       "aria-disabled": a || void 0,
-      "data-active": o === t ? "" : void 0,
+      "data-active": r === t ? "" : void 0,
       className: tt
-    }, y = {
-      selected: F(e),
+    }, w = {
+      selected: W(e),
       index: t,
       inputValue: m
     };
-    return T ? T(p, e, y) : lt(p, e, y);
-  }, ot = !!(M && s), W = b.length > 0 && i.length === b.length, rt = i.length > 0 && !W;
+    return T ? T(p, e, w) : lt(p, e, w);
+  }, rt = !!(M && s), H = b.length > 0 && i.length === b.length, ot = i.length > 0 && !H;
   return /* @__PURE__ */ I("div", {
-    className: E(B.styledSelectAutocompleteWrapper, !Se && "w-auto", Le, _e),
-    children: [me(et), n && /* @__PURE__ */ r(xt, {
-      root: ne,
+    className: E(B.styledSelectAutocompleteWrapper, Le, $e),
+    "data-field-width": G,
+    style: gt(G),
+    children: [he(et), n && /* @__PURE__ */ o(yt, {
+      root: ae,
       children: /* @__PURE__ */ I("ul", {
         ref: qe,
-        ...z ? nt : {},
+        ...j ? nt : {},
         style: {
-          ...z ? at : {},
+          ...j ? at : {},
           ...Be,
-          width: ze ?? void 0,
-          maxHeight: ee ?? void 0,
+          width: je ?? void 0,
+          maxHeight: te ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-          ...J?.popper?.style
+          ...Q?.popper?.style
         },
         ...Ve(),
-        id: X,
+        id: Z,
         role: "listbox",
         "aria-multiselectable": s ? !0 : void 0,
-        className: E("z-[1300] m-0 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ot && "py-0", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", Me?.listbox, J?.popper?.className),
+        className: E("z-[1300] m-0 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", rt && "py-0", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", Me?.listbox, Q?.popper?.className),
         children: [M && s && /* @__PURE__ */ I("li", {
           id: `${l}-select-all`,
           role: "option",
-          "aria-selected": W,
-          "data-active": o === -1 ? "" : void 0,
+          "aria-selected": H,
+          "data-active": r === -1 ? "" : void 0,
           tabIndex: -1,
           onMouseDown: (e) => e.preventDefault(),
-          onClick: H,
+          onClick: z,
           onMouseMove: () => x(null),
           className: "relative box-border flex h-8 cursor-pointer items-center gap-x-3 bg-[var(--colors-gray-10)] px-3 text-xs font-semibold uppercase tracking-[0.2px] text-delta-600 hover:bg-delta-50",
           children: [
-            o === -1 && /* @__PURE__ */ r("span", {
+            r === -1 && /* @__PURE__ */ o("span", {
               "aria-hidden": "true",
               className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
             }),
-            /* @__PURE__ */ r(de, {
+            /* @__PURE__ */ o(ue, {
               dataTest: `${l}-select-all`,
-              checked: W,
-              indeterminate: rt,
+              checked: H,
+              indeterminate: ot,
               size: "medium",
               checkboxClassName: "!h-4 !w-4",
               hideWrapper: !0,
               decorative: !0
             }),
-            /* @__PURE__ */ r("span", {
+            /* @__PURE__ */ o("span", {
               className: "flex-1 truncate",
-              children: Ae
+              children: Se
             })
           ]
-        }), q ? /* @__PURE__ */ r("li", {
+        }), q ? /* @__PURE__ */ o("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: be
-        }) : u.length === 0 ? /* @__PURE__ */ r("li", {
+          children: ge
+        }) : u.length === 0 ? /* @__PURE__ */ o("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: ge
+          children: xe
         }) : u.map(st)]
       })
     })]
   });
 }
 export {
-  Vt as StyledSelectAutocomplete
+  qt as StyledSelectAutocomplete
 };

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

@@ -18,7 +18,7 @@ function Bt({ dataTest: i, min: r = 0, max: a = 100, step: h = 1, value: T, defa
   if (U?.length && Ut(U)) return /* @__PURE__ */ c(Dt, {
     dataTest: i,
     disableClearable: !0,
-    className: u("min-w-[200px]", st),
+    className: st,
     size: "small",
     disabled: s,
     error: N,
@@ -103,7 +103,7 @@ function Bt({ dataTest: i, min: r = 0, max: a = 100, step: h = 1, value: T, defa
     onKeyUp: (e) => A(H, e, Number(e.currentTarget.value), t)
   }, t);
   return /* @__PURE__ */ x("div", {
-    className: u("flex max-w-[600px] flex-col gap-3", n && "h-full"),
+    className: u("flex max-w-form-column flex-col gap-3", n && "h-full"),
     children: [
       !n && (D ?? $) && /* @__PURE__ */ x("div", {
         className: "grid w-full grid-cols-2 gap-4",

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

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

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

@@ -1,11 +1,11 @@
-var a = "_textarea_dmh6s_1", e = "_active_dmh6s_1", _ = "_error_dmh6s_41", r = "_label_dmh6s_82", d = "_disabled_dmh6s_90", t = "_description_dmh6s_95", s = {
+var a = "_textarea_lhzo8_1", e = "_active_lhzo8_1", _ = "_error_lhzo8_41", r = "_label_lhzo8_82", l = "_disabled_lhzo8_90", t = "_description_lhzo8_95", o = {
   textarea: a,
   active: e,
   error: _,
   label: r,
-  disabled: d,
+  disabled: l,
   description: t
 };
 export {
-  s as default
+  o as default
 };