asma-ui-core 3.68.6 → 3.69.0

package/dist/components/inputs/select/StyledSelect.js

@@ -1,186 +1,198 @@
-import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as he } from "../../../helpers/sx.js";
-import { ChevronDownIcon as we } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as Ae } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as ve } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { TOP_LAYER_PROPS as Re, TOP_LAYER_RESET_STYLE as ke, getOpenModalDialogAncestor as Fe, shouldUsePopoverTopLayer as De, useTopLayerRef as Se } from "../../../hooks/useTopLayer.hook.js";
-import { outlineClass as Ce } from "../field-styles.js";
-import { useFormControlContext as Ee } from "../../miscellaneous/FormControlContext.js";
-import { StyledFormHelperText as Ne } from "../../miscellaneous/StyledFormHelperText.js";
-import { Children as E, cloneElement as Pe, isValidElement as N, useEffect as P, useMemo as _e, useRef as H, useState as _ } from "react";
-import { jsx as n, jsxs as h } from "react/jsx-runtime";
-import { FloatingPortal as qe, autoUpdate as Te, flip as Le, offset as Ue, shift as Ve, size as je, useClick as Be, useDismiss as Ie, useFloating as Ke, useInteractions as Me, useMergeRefs as Y, useRole as Oe } from "@floating-ui/react";
-var rt = ({ dataTest: q, value: T, defaultValue: z, onChange: L, error: W, errorText: $, allowClear: U, disabled: G, readOnly: c, name: m, placeholder: w, displayEmpty: A, multiple: u, renderValue: V, fullWidth: J, className: Q, style: X, sx: Z, variant: ee, children: v, MenuProps: te, onFocus: re, onBlur: oe, labelId: p }) => {
-  const i = Ee(), j = `${q}-listbox`, g = ee === "standard", B = W ?? i?.error ?? !1, s = G ?? i?.disabled ?? !1, [o, y] = _(!1), [x, R] = _(!1), [se, I] = _(z), k = T !== void 0, r = k ? T : se, a = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, l = H(null), K = H(null), ne = (e) => {
-    if (y(e), e) return;
+import { cn as u } from "../../../helpers/cn.js";
+import { resolveSx as Ce } 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;
     const t = document.activeElement;
-    t && t !== document.body && !l.current?.contains(t) || K.current?.focus();
-  }, { refs: d, floatingStyles: ae, context: F } = Ke({
+    t && t !== document.body && !a.current?.contains(t) || Y.current?.focus();
+  }, { refs: m, floatingStyles: ye, context: E } = et({
     open: o,
-    onOpenChange: ne,
+    onOpenChange: ge,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: Te,
+    whileElementsMounted: We,
     middleware: [
-      Ue(4),
-      Le({ padding: 8 }),
-      Ve({ padding: 8 }),
-      je({ apply({ rects: e, elements: t }) {
+      Ge(4),
+      $e({ padding: 8 }),
+      Je({ padding: 8 }),
+      Qe({ apply({ rects: e, elements: t }) {
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: le, getFloatingProps: ie } = Me([
-    Be(F, { enabled: !s && !c }),
-    Ie(F),
-    Oe(F, { role: "listbox" })
-  ]), ce = Y([d.setReference, K]), M = _e(() => o ? Fe(d.reference.current) : void 0, [o, d]), D = De(M), ue = Y([Se(d.setFloating, D), l]);
-  P(() => i?.setFocused(o || x), [
+  }), { 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), [
     o,
-    x,
-    i
-  ]), P(() => i?.setFilled(a || !!w || !!A), [
-    a,
-    w,
+    b,
+    d
+  ]), I(() => d?.setFilled(i || !!A || !!v), [
+    i,
     A,
-    i
-  ]), P(() => {
+    v,
+    d
+  ]), I(() => {
     if (!o) return;
     const e = requestAnimationFrame(() => {
-      const t = l.current?.querySelector('[role="option"][aria-selected="true"]');
+      const t = a.current?.querySelector('[role="option"][aria-selected="true"]');
       t && (t.scrollIntoView({ block: "nearest" }), t.focus());
     });
     return () => cancelAnimationFrame(e);
   }, [o]);
-  const de = (e, t) => {
-    const b = u ? Array.isArray(r) && r.includes(e) ? r.filter((C) => C !== e) : [...Array.isArray(r) ? r : [], e] : e;
-    k || I(b), L?.({ target: {
-      value: b,
-      name: m
-    } }, t), u || (y(!1), requestAnimationFrame(() => d.domReference.current?.focus()));
-  }, O = () => {
-    const e = u ? [] : "";
-    k || I(e), L?.({ target: {
+  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: {
+      value: x,
+      name: p
+    } }, t), f || (h(!1), requestAnimationFrame(() => m.domReference.current?.focus()));
+  }, W = () => {
+    const e = f ? [] : "";
+    F || O(e), T?.({ target: {
       value: e,
-      name: m
-    } }, null), y(!1), R(!1);
-  }, fe = E.map(v, (e) => {
-    if (!N(e)) return e;
+      name: p
+    } }, null), h(!1), D(!1);
+  }, ve = _.map(R, (e) => {
+    if (!q(e)) return e;
     const t = e.props.value;
-    return Pe(e, {
-      selected: u ? Array.isArray(r) && r.includes(t) : t === r,
-      onClick: () => de(t, e.props.children)
+    return Ke(e, {
+      selected: f ? Array.isArray(r) && r.includes(t) : t === r,
+      onClick: () => Ae(t, e.props.children)
     });
-  }), me = E.toArray(v).find((e) => N(e) && e.props.value === r), pe = V ? V(r) : u && Array.isArray(r) ? E.toArray(v).filter((e) => N(e) && r.includes(e.props.value)).map((e) => {
+  }), 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) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
-  }).join(", ") : me?.props.children, ge = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && U && a && !s && !c) {
-      e.preventDefault(), O();
+  }).join(", ") : Re?.props.children, Se = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && V && i && !s && !c) {
+      e.preventDefault(), W();
       return;
     }
-    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
-      if (l.current?.querySelector('[role="option"][aria-selected="true"]')) return;
-      const t = l.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), h(!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();
     }));
-  }, ye = (e) => {
-    const t = l.current ? Array.from(l.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
+  }, De = (e) => {
+    const t = a.current ? Array.from(a.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
     if (t.length === 0) return;
-    const b = t.findIndex((C) => C === document.activeElement);
-    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(b + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
-  }, S = g && (o || x), xe = s ? "text-delta-300" : S ? "text-gama-500" : "text-delta-800", be = s ? "text-delta-300" : "text-delta-700";
-  return /* @__PURE__ */ h("div", {
-    className: f("group relative inline-flex flex-col", J && "w-full", Q),
+    const x = t.findIndex((P) => P === 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),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...he(Z),
-      ...X
+      ...Ce(ne),
+      ...se
     },
     children: [
-      /* @__PURE__ */ h("button", {
-        ref: ce,
+      /* @__PURE__ */ w("button", {
+        ref: xe,
         type: "button",
-        "data-testid": q,
-        ...le({ onKeyDown: ge }),
+        "data-testid": L,
+        ...he({ onKeyDown: Se }),
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": o,
-        "aria-controls": j,
-        "aria-labelledby": p,
-        "aria-label": p ? void 0 : m,
+        "aria-controls": H,
+        "aria-labelledby": g,
+        "aria-label": g ? void 0 : p,
+        "aria-invalid": l ? !0 : void 0,
+        "aria-describedby": S ? K : void 0,
         "aria-disabled": s ? !0 : void 0,
         disabled: s,
         onFocus: (e) => {
-          R(!0), re?.(e);
+          D(!0), ae?.(e);
         },
         onBlur: (e) => {
-          R(!1), oe?.(e);
+          D(!1), ce?.(e);
         },
-        style: { minWidth: a && !g ? 105 : void 0 },
-        className: f("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", S ? "bg-gama-50" : "bg-transparent", xe, g && "min-w-0", s && "cursor-not-allowed", c && "pointer-events-none"),
+        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"),
         children: [
           /* @__PURE__ */ n("span", {
-            className: f("min-w-0 flex-1 truncate", !a && "text-delta-500"),
-            children: a || A ? pe : w
+            className: u("min-w-0 flex-1 truncate", !i && "text-delta-500"),
+            children: i || v ? ke : A
           }),
-          /* @__PURE__ */ h("span", {
+          /* @__PURE__ */ w("span", {
             className: "flex items-center gap-1",
-            children: [U && a && !s && /* @__PURE__ */ n("span", {
+            children: [V && i && !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",
               onClick: (e) => {
-                e.stopPropagation(), O();
+                e.stopPropagation(), W();
               },
-              children: /* @__PURE__ */ n(Ae, {
+              children: /* @__PURE__ */ n(Pe, {
                 width: 18,
                 height: 18
               })
-            }), /* @__PURE__ */ n(we, {
+            }), /* @__PURE__ */ n(Ne, {
               width: 24,
               height: 24,
-              className: f("shrink-0 transition-transform", S ? "text-gama-500" : be, o && "rotate-180")
+              className: u("shrink-0 transition-transform", N ? "text-gama-500" : Ee, o && "rotate-180")
             })]
           }),
-          /* @__PURE__ */ n("div", { className: Ce({
-            focused: o || x,
-            error: B,
+          /* @__PURE__ */ n("div", { className: je({
+            focused: o || b,
+            error: l,
             disabled: s,
             readOnly: c,
-            borderless: g
+            borderless: y
           }) })
         ]
       }),
-      o && /* @__PURE__ */ n(qe, {
-        root: M,
+      o && /* @__PURE__ */ n(ze, {
+        root: z,
         children: /* @__PURE__ */ n("ul", {
-          ref: ue,
-          id: j,
+          ref: we,
+          id: H,
           role: "listbox",
-          "aria-labelledby": p,
-          "aria-label": p ? void 0 : m,
-          ...D ? Re : {},
+          "aria-labelledby": g,
+          "aria-label": g ? void 0 : p,
+          ...C ? qe : {},
           style: {
-            ...D ? ke : {},
-            ...ae,
+            ...C ? Ie : {},
+            ...ye,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
-          ...ie(),
-          onKeyDown: ye,
-          className: f("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)]", te?.className),
-          children: fe
+          ...be(),
+          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),
+          children: ve
         })
       }),
-      B && /* @__PURE__ */ h(Ne, {
-        className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-        children: [/* @__PURE__ */ n(ve, {
+      S && /* @__PURE__ */ w("div", {
+        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
-        }), $ ?? "Required"]
+          height: 20,
+          className: "min-w-5 shrink-0"
+        }), /* @__PURE__ */ n("span", { children: k })]
       })
     ]
   });
 };
 export {
-  rt as StyledSelect
+  ht as StyledSelect
 };

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

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