asma-ui-core 3.34.0 → 3.35.0

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

@@ -1,48 +1,127 @@
-import { ChevronDownIcon as u } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as d } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledFormHelperText as c } from "../../miscellaneous/StyledFormHelperText.js";
-import s from "clsx";
-import { Select as h } from "@mui/material";
-import { Fragment as p, jsx as o, jsxs as t } from "react/jsx-runtime";
-var I = ({ dataTest: i, allowClear: l, error: e, errorText: n, ...r }) => /* @__PURE__ */ t(p, { children: [/* @__PURE__ */ o(h, {
-  ...r,
-  "data-testid": i,
-  error: e,
-  value: r.value,
-  IconComponent: ({ className: a }) => /* @__PURE__ */ o(u, {
-    width: 24,
-    height: 24,
-    className: s(a, "-mt-[3.5px]")
-  }),
-  endAdornment: l && r.value ? /* @__PURE__ */ o("div", {
-    "data-testid": "select-clear-button",
-    className: "absolute right-8 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
-    onClick: () => {
-      r.onChange?.({ target: { value: "" } }, null);
+import { cn as a } from "../../../helpers/cn.js";
+import { resolveSx as oe } from "../../../helpers/sx.js";
+import { ChevronDownIcon as re } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as se } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as le } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { outlineClass as ne } from "../field-styles.js";
+import { useFormControlContext as ie } from "../../miscellaneous/FormControlContext.js";
+import { StyledFormHelperText as ae } from "../../miscellaneous/StyledFormHelperText.js";
+import { Children as D, cloneElement as ce, isValidElement as R, useEffect as F, useRef as de, useState as S } from "react";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { FloatingPortal as fe, autoUpdate as me, flip as ue, offset as pe, shift as xe, size as ge, useClick as he, useDismiss as be, useFloating as we, useInteractions as ye, useMergeRefs as E, useRole as ve } from "@floating-ui/react";
+var Ve = ({ dataTest: x, value: g, defaultValue: A, onChange: I, size: z, error: V, errorText: j, allowClear: P, disabled: _, readOnly: d, name: h, placeholder: f, displayEmpty: m, renderValue: b, fullWidth: U, className: q, style: B, sx: K, children: w, MenuProps: M }) => {
+  const r = ie(), $ = z ?? r?.size ?? "medium", y = V ?? r?.error ?? !1, l = _ ?? r?.disabled ?? !1, [s, v] = S(!1), [H, O] = S(A), C = g !== void 0, n = C ? g : H, i = n !== void 0 && n !== "" && n !== null, u = de(null), { refs: N, floatingStyles: W, context: p } = we({
+    open: s,
+    onOpenChange: v,
+    placement: "bottom-start",
+    whileElementsMounted: me,
+    middleware: [
+      pe(4),
+      ue({ padding: 8 }),
+      xe({ padding: 8 }),
+      ge({ apply({ rects: e, elements: t }) {
+        t.floating.style.minWidth = `${e.reference.width}px`;
+      } })
+    ]
+  }), { getReferenceProps: G, getFloatingProps: J } = ye([
+    he(p, { enabled: !l && !d }),
+    be(p),
+    ve(p, { role: "listbox" })
+  ]), L = E([N.setReference]), Q = E([N.setFloating, u]);
+  F(() => r?.setFocused(s), [s, r]), F(() => r?.setFilled(i || !!f || !!m), [
+    i,
+    f,
+    m,
+    r
+  ]);
+  const k = (e, t) => {
+    C || O(e), I?.({ target: {
+      value: e,
+      name: h
+    } }, t), v(!1);
+  }, T = D.map(w, (e) => {
+    if (!R(e)) return e;
+    const t = e.props.value;
+    return ce(e, {
+      selected: t === n,
+      onClick: () => k(t, e.props.children)
+    });
+  }), X = D.toArray(w).find((e) => R(e) && e.props.value === n), Y = b ? b(n) : X?.props.children, Z = (e) => {
+    const t = u.current ? Array.from(u.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
+    if (t.length === 0) return;
+    const ee = t.findIndex((te) => te === document.activeElement);
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(ee + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
+  };
+  return /* @__PURE__ */ c("div", {
+    className: a("group relative inline-flex flex-col", U && "w-full", q),
+    style: {
+      ...oe(K),
+      ...B
     },
-    children: /* @__PURE__ */ o(m, {
-      width: 18,
-      height: 18
-    })
-  }) : null,
-  sx: {
-    ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-delta-500) !important" },
-    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
-    "&.MuiFormLabel-root-MuiInputLabel-root .Mui-error": { color: "var(--colors-error-500) !important" },
-    "&.Mui-error .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-error-500) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
-    "&.Mui-focused::after": { borderColor: "var(--colors-gama-400) !important" },
-    "&:hover .MuiOutlinedInput-notchedOutline": { border: "2px solid var(--colors-gama-300) !important" },
-    ...r.sx
-  }
-}), e && /* @__PURE__ */ t(c, {
-  className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-  children: [/* @__PURE__ */ o(d, {
-    width: 20,
-    height: 20
-  }), n ?? "Required"]
-})] });
+    children: [
+      /* @__PURE__ */ c("button", {
+        ref: L,
+        type: "button",
+        "data-testid": x,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": s,
+        "aria-disabled": l ? !0 : void 0,
+        disabled: l,
+        ...G(),
+        className: a("relative flex w-full items-center justify-between rounded-lg bg-transparent px-3 text-left text-delta-800 outline-none", $ === "small" ? "h-9 text-sm" : "h-12 text-base", l && "cursor-not-allowed text-delta-300", d && "pointer-events-none"),
+        children: [
+          /* @__PURE__ */ o("span", {
+            className: a("min-w-0 flex-1 truncate", !i && "text-delta-500"),
+            children: i || m ? Y : f
+          }),
+          /* @__PURE__ */ c("span", {
+            className: "flex items-center gap-1",
+            children: [P && i && !l && /* @__PURE__ */ o("span", {
+              role: "button",
+              "data-testid": `${x}-clear`,
+              className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
+              onClick: (e) => {
+                e.stopPropagation(), k("", null);
+              },
+              children: /* @__PURE__ */ o(se, {
+                width: 18,
+                height: 18
+              })
+            }), /* @__PURE__ */ o(re, {
+              width: 24,
+              height: 24,
+              className: a("transition-transform", s && "rotate-180")
+            })]
+          }),
+          /* @__PURE__ */ o("div", { className: ne({
+            focused: s,
+            error: y,
+            disabled: l,
+            readOnly: d
+          }) })
+        ]
+      }),
+      s && /* @__PURE__ */ o(fe, { children: /* @__PURE__ */ o("ul", {
+        ref: Q,
+        role: "listbox",
+        "aria-label": h,
+        style: W,
+        ...J(),
+        onKeyDown: Z,
+        className: a("z-[1300] max-h-72 overflow-auto rounded-lg border border-delta-300 bg-white py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", M?.className),
+        children: T
+      }) }),
+      y && /* @__PURE__ */ c(ae, {
+        className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
+        children: [/* @__PURE__ */ o(le, {
+          width: 20,
+          height: 20
+        }), j ?? "Required"]
+      })
+    ]
+  });
+};
 export {
-  I as StyledSelect
+  Ve as StyledSelect
 };

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

@@ -1,29 +1,25 @@
-import { CheckIcon as t } from "../../icons/check-icon/CheckIcon.js";
-import { MenuItem as o } from "@mui/material";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-var c = (e) => /* @__PURE__ */ n(o, {
-  ...e,
-  sx: {
-    "&.MuiMenuItem-root": {
-      fontSize: "14px !important",
-      gap: "4px",
-      px: 1
-    },
-    "&.Mui-selected": { backgroundColor: "var(--colors-gama-50) !important" }
-  },
-  children: [/* @__PURE__ */ r("span", {
-    style: {
-      width: "24px",
-      justifyContent: "center",
-      display: "flex"
-    },
-    children: e.selected && /* @__PURE__ */ r(t, {
+import { cn as n } from "../../../helpers/cn.js";
+import { CheckIcon as l } from "../../icons/check-icon/CheckIcon.js";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+var x = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ m("li", {
+  role: "option",
+  "aria-selected": e ? !0 : void 0,
+  "aria-disabled": t ? !0 : void 0,
+  tabIndex: -1,
+  onClick: t ? void 0 : i,
+  className: n("flex items-center gap-1 px-2 py-2.5 text-sm outline-none", t ? "cursor-not-allowed text-delta-300" : "cursor-pointer hover:bg-delta-50", e && "bg-gama-50", o),
+  children: [/* @__PURE__ */ a("span", {
+    className: "flex w-6 justify-center",
+    children: e && /* @__PURE__ */ a(l, {
       width: 22,
       height: 22,
-      style: { color: "var(--colors-gama-500)" }
+      className: "text-gama-500"
     })
-  }), /* @__PURE__ */ r("span", { children: e.children })]
+  }), /* @__PURE__ */ a("span", {
+    className: "min-w-0 flex-1 truncate",
+    children: r
+  })]
 });
 export {
-  c as StyledSelectItem
+  x as StyledSelectItem
 };

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

@@ -1,162 +1,192 @@
-import { cn as v } from "../../../helpers/cn.js";
-import { ChevronDownIcon as le } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as ae } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as se } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as ne } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as ce } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as R } from "../checkbox/base-ui/StyledCheckbox.js";
-import H from "./StyledSelectAutocomplete.module.js";
-import B from "clsx";
-import { createElement as A, useLayoutEffect as ie, useRef as de, useState as D } from "react";
-import { Autocomplete as ue, Paper as me } from "@mui/material";
-import { jsx as o, jsxs as L } from "react/jsx-runtime";
-import { mergeSlotProps as pe } from "@mui/material/utils";
-function he(s, c) {
-  return pe(s, c);
-}
-function Ie({ dataTest: s, autoHeight: c, getOptionLabel: u, wrapperClassName: z, multiple: n, allowSelectAll: W, selectAllLabel: C, className: V, defaultValue: M, isOptionEqualToValue: p, onChange: _, options: h, popupIcon: F, readOnly: f, renderOption: G, renderValue: K, sx: O, value: x, ...T }) {
-  const { slots: U, slotProps: g, ...E } = T, [N, J] = D("auto"), b = de(null), l = n === !0 && W === !0 && !f, k = x !== void 0, S = (e) => Array.isArray(e) ? e : [], [Q, X] = D(() => S(M));
-  ie(() => {
-    if (!c) return;
-    const e = b.current?.getBoundingClientRect().height ?? 0, t = b.current?.getBoundingClientRect().top ?? 0, r = window.innerHeight - t - e - 40;
-    J(r > 0 ? r : "auto");
-  }, [c]);
-  const i = (e) => typeof e == "object" && e !== null && "label" in e ? e.label : String(e), Y = (e) => typeof e == "object" && e !== null && "disabled" in e && !!e.disabled, Z = {
-    padding: 0,
-    "& .MuiAutocomplete-option": { paddingLeft: n ? "12px !important" : "6px !important" }
-  }, w = c ? { maxHeight: N === "auto" ? "auto" : `${N}px` } : void 0, I = l ? S(k ? x : Q) : [], d = l ? h.filter((e) => !Y(e)) : h, q = (e, t) => {
-    const r = typeof e == "object" && e !== null;
-    return r !== (typeof t == "object" && t !== null) || !r && typeof e != typeof t ? !1 : p ? p(e, t) : e === t;
-  }, P = l ? d.filter((e) => I.some((t) => q(e, t))).length : 0, $ = l && d.length > 0 && P === d.length, ee = l && P > 0 && !$, j = (e, t, r, a) => {
-    l && !k && X(S(t)), _?.(e, t, r, a);
-  }, te = (e, t) => {
-    j(e, t ? [...d] : [], t ? "selectOption" : "clear", void 0);
-  }, re = (e, t) => Array.isArray(e) ? e.map((r, a) => {
-    const m = t({ index: a }), y = u?.(r) ?? i(r);
-    return /* @__PURE__ */ A(ce, {
-      ...m,
-      key: `selected-chip-${y}-${a}`,
-      dataTest: `selected-chip-${y}`,
-      label: y,
-      variant: "outlined"
-    });
-  }) : null, oe = {
-    sx: Z,
-    ...w ? { style: w } : {}
-  };
-  return /* @__PURE__ */ o("div", {
-    className: v(H.styledSelectAutocompleteWrapper, z),
-    ref: b,
-    children: /* @__PURE__ */ o(ue, {
-      ...E,
-      multiple: n,
-      defaultValue: l ? void 0 : M,
-      getOptionLabel: u,
-      isOptionEqualToValue: p,
-      className: B("!text-sm", V),
-      onChange: j,
-      options: h,
-      renderValue: K ?? (n ? re : void 0),
-      popupIcon: f ? null : F ?? n ? /* @__PURE__ */ o(ne, {
-        width: 24,
-        height: 24
-      }) : /* @__PURE__ */ o(le, {
-        width: 24,
-        height: 24,
-        className: B(H["select-custom-icon"])
-      }),
-      readOnly: f,
-      "data-testid": s,
-      value: l ? I : x,
-      slots: {
-        ...U,
-        paper: ({ children: e }) => /* @__PURE__ */ L(me, {
-          "data-testid": `paper-${s}`,
-          sx: {
-            padding: "0 !important",
-            marginTop: "0px !important",
-            "& .MuiAutocomplete-option.Mui-focused": { background: "var(--colors-delta-50) !important" },
-            "& li[aria-selected=true]": { background: "var(--colors-gama-50) !important" },
-            "& li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" },
-            "&:has([data-select-all-header]:hover) .MuiAutocomplete-option.Mui-focused": { background: "transparent !important" },
-            "&:has([data-select-all-header]:hover) li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" }
-          },
-          children: [l && d.length > 0 && /* @__PURE__ */ L("div", {
-            "data-select-all-header": !0,
-            className: "flex items-center gap-x-[10px] border-[1px] border-b border-solid border-delta-200 bg-delta-50 py-2 pl-3 text-xs",
-            onMouseDown: (t) => t.preventDefault(),
-            role: "presentation",
-            children: [/* @__PURE__ */ o(R, {
-              size: "small",
-              dataTest: `${s}-select-all`,
-              checked: $,
-              indeterminate: ee,
-              hideWrapper: !0,
-              onChange: te,
-              "aria-label": C ?? "Select all"
-            }), /* @__PURE__ */ o("span", {
-              className: "truncate text-[10px] font-semibold uppercase text-delta-600",
-              children: C ?? "Select all"
-            })]
-          }), e]
-        })
-      },
-      renderOption: G ?? ((e, t, { selected: r }) => {
-        const a = e, m = e.id ?? i(t);
-        return n ? /* @__PURE__ */ A("li", {
-          ...a,
-          key: m,
-          className: v(e.className, "flex items-center gap-x-[10px] border-0 border-b border-solid border-delta-200")
-        }, /* @__PURE__ */ o(R, {
-          dataTest: `${s}-${i(t)}-checkbox`,
-          checked: r,
-          size: "small",
-          hideWrapper: !0
-        }), /* @__PURE__ */ o("span", {
-          className: "flex-1 truncate py-2 text-sm text-delta-700",
-          children: u?.(t) ?? i(t)
-        })) : /* @__PURE__ */ A("li", {
-          ...a,
-          key: m,
-          className: v(e.className, "flex items-center gap-x-1")
-        }, /* @__PURE__ */ o("span", {
-          className: "w-5",
-          children: r && /* @__PURE__ */ o(se, {
-            width: 20,
-            height: 20,
-            style: { color: "var(--colors-gama-500)" }
-          })
-        }), /* @__PURE__ */ o("span", {
-          className: "flex-1 truncate py-2 text-sm text-delta-700",
-          children: u?.(t) ?? i(t)
-        }));
+import { cn as x } from "../../../helpers/cn.js";
+import { ChevronDownIcon as ve } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as Ie } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as Ce } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as Se } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as $e } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as De } from "../checkbox/base-ui/StyledCheckbox.js";
+import { LoadingIcon as Ae } from "../../../table/shared-components/LoadingIcon.js";
+import U from "./StyledSelectAutocomplete.module.js";
+import { useMemo as Re, useRef as Fe, useState as $ } from "react";
+import { jsx as s, jsxs as D } from "react/jsx-runtime";
+import { FloatingFocusManager as ke, FloatingPortal as je, autoUpdate as Le, flip as Me, offset as Pe, shift as _e, size as ze, useDismiss as We, useFloating as Ue, useInteractions as Ve, useListNavigation as Ee, useMergeRefs as V, useRole as Ke } from "@floating-ui/react";
+var Be = (r) => typeof r == "object" && r !== null && "label" in r ? String(r.label) : String(r), E = (r) => typeof r == "object" && r !== null && "disabled" in r && !!r.disabled;
+function lt({ dataTest: r, options: A, renderInput: K, value: w, onChange: y, getOptionLabel: B, isOptionEqualToValue: R, renderOption: F, renderValue: k, filterOptions: N, loading: j, loadingText: H = "Loading…", noOptionsText: O = "No options", disabled: L, readOnly: u, size: q = "small", disableClearable: G, popupIcon: J, multiple: Q, fullWidth: X, classes: Y, inputValue: M, onInputChange: Z, open: P, onOpen: T, onClose: ee, className: te, wrapperClassName: le }) {
+  const o = Q === !0, a = B ?? Be, p = (e, t) => R ? R(e, t) : e === t, [se, re] = $(!1), n = P ?? se, m = (e) => {
+    P === void 0 && re(e), e ? T?.() : ee?.();
+  }, [oe, ae] = $(""), c = M ?? oe, v = (e, t, l) => {
+    M === void 0 && ae(t), Z?.(e, t, l);
+  }, [f, ne] = $(null), _ = Fe([]), i = o ? Array.isArray(w) ? w : [] : [], I = o ? null : w ?? null, z = (e) => o ? i.some((t) => p(e, t)) : I !== null && p(e, I), h = Re(() => {
+    const e = [...A];
+    if (N) return N(e, { inputValue: c });
+    if (!c || o) return e;
+    const t = c.toLowerCase();
+    return e.filter((l) => a(l).toLowerCase().includes(t));
+  }, [
+    A,
+    c,
+    o,
+    N
+  ]), { refs: W, floatingStyles: ie, context: g } = Ue({
+    open: n,
+    onOpenChange: m,
+    placement: "bottom-start",
+    whileElementsMounted: Le,
+    middleware: [
+      Pe(4),
+      Me({ padding: 8 }),
+      _e({ padding: 8 }),
+      ze({ apply({ rects: e, elements: t, availableHeight: l }) {
+        t.floating.style.minWidth = `${e.reference.width}px`, t.floating.style.maxHeight = `${Math.min(l - 8, 320)}px`;
+      } })
+    ]
+  }), { getReferenceProps: ce, getFloatingProps: de, getItemProps: ue } = Ve([
+    We(g),
+    Ke(g, { role: "listbox" }),
+    Ee(g, {
+      listRef: _,
+      activeIndex: f,
+      onNavigate: ne,
+      virtual: !0,
+      loop: !0
+    })
+  ]), me = V([W.setReference]), fe = V([W.setFloating]), C = (e, t) => {
+    if (o) {
+      const l = i.some((d) => p(t, d)), b = l ? i.filter((d) => !p(t, d)) : [...i, t];
+      y?.(e, b, l ? "removeOption" : "selectOption", { option: t });
+    } else
+      y?.(e, t, "selectOption", { option: t }), v(e, a(t), "reset"), m(!1);
+  }, pe = (e) => {
+    y?.(e, o ? [] : null, "clear", void 0), v(e, "", "clear");
+  }, he = (e) => {
+    if (e.key === "Enter" && n && f != null && h[f] != null) {
+      e.preventDefault();
+      const t = h[f];
+      E(t) || C(e, t);
+    } else e.key === "ArrowDown" && !n && m(!0);
+  }, ge = !G && !u && !L && (o ? i.length > 0 : I !== null), be = o ? k ? k(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ s($e, {
+    dataTest: `selected-chip-${a(e)}`,
+    label: a(e),
+    readOnly: u,
+    onDelete: u ? void 0 : (l) => C(l, e)
+  }, `${a(e)}-${t}`)) : void 0, xe = /* @__PURE__ */ D("span", {
+    className: "flex items-center",
+    children: [
+      j && /* @__PURE__ */ s(Ae, {
+        width: 20,
+        height: 20,
+        className: "animate-spin"
       }),
-      sx: {
-        ...O,
-        "& .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
-        "& .select-custom-icon": { marginTop: "-0.5px !important" },
-        "& .MuiInputBase-inputSizeSmall": { minHeight: "23px !important" }
-      },
-      slotProps: {
-        ...g,
-        clearIndicator: {
-          disableRipple: !0,
-          disableFocusRipple: !0,
-          ...g?.clearIndicator ?? {}
-        },
-        listbox: he(g?.listbox, oe)
-      },
-      clearIcon: /* @__PURE__ */ o("span", {
+      ge && /* @__PURE__ */ s("span", {
+        role: "button",
+        "data-testid": `${r}-clear`,
         className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
-        children: /* @__PURE__ */ o(ae, {
+        onMouseDown: (e) => {
+          e.preventDefault(), pe(e);
+        },
+        children: /* @__PURE__ */ s(Ie, {
           width: 20,
           height: 20,
           className: "text-delta-700"
         })
+      }),
+      u ? null : J ?? (o ? /* @__PURE__ */ s(Se, {
+        width: 24,
+        height: 24
+      }) : /* @__PURE__ */ s(ve, {
+        width: 24,
+        height: 24,
+        className: x(U["select-custom-icon"], "transition-transform", n && "rotate-180")
+      }))
+    ]
+  }), we = {
+    disabled: L,
+    size: q,
+    fullWidth: !0,
+    value: c,
+    onChange: (e) => {
+      v(e, e.target.value, "input"), n || m(!0);
+    },
+    onFocus: () => m(!0),
+    onKeyDown: he,
+    slotProps: {
+      htmlInput: {
+        ...ce(),
+        ref: me,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": n,
+        autoComplete: "off",
+        readOnly: u
+      },
+      input: {
+        startAdornment: be,
+        endAdornment: xe
+      }
+    }
+  }, ye = (e, t, l) => /* @__PURE__ */ D("li", {
+    ...e,
+    className: x("flex cursor-pointer items-center gap-x-1 px-2 text-sm text-delta-700", "aria-selected:bg-gama-50 data-[active]:bg-delta-50", o && "border-0 border-b border-solid border-delta-200"),
+    children: [o ? /* @__PURE__ */ s(De, {
+      dataTest: `${r}-${a(t)}-checkbox`,
+      checked: l.selected,
+      size: "small",
+      hideWrapper: !0
+    }) : /* @__PURE__ */ s("span", {
+      className: "w-5",
+      children: l.selected && /* @__PURE__ */ s(Ce, {
+        width: 20,
+        height: 20,
+        className: "text-gama-500"
       })
-    })
+    }), /* @__PURE__ */ s("span", {
+      className: "flex-1 truncate py-2",
+      children: a(t)
+    })]
+  }), Ne = (e, t) => {
+    const l = E(e), b = {
+      ...ue({ onClick: (S) => {
+        l || C(S, e);
+      } }),
+      key: `${a(e)}-${t}`,
+      ref: (S) => {
+        _.current[t] = S;
+      },
+      role: "option",
+      id: `${r}-option-${t}`,
+      "aria-selected": z(e),
+      "aria-disabled": l || void 0,
+      "data-active": f === t ? "" : void 0
+    }, d = {
+      selected: z(e),
+      index: t,
+      inputValue: c
+    };
+    return F ? F(b, e, d) : ye(b, e, d);
+  };
+  return /* @__PURE__ */ D("div", {
+    className: x(U.styledSelectAutocompleteWrapper, !X && "w-auto", le, te),
+    children: [K(we), n && /* @__PURE__ */ s(je, { children: /* @__PURE__ */ s(ke, {
+      context: g,
+      modal: !1,
+      initialFocus: -1,
+      returnFocus: !1,
+      children: /* @__PURE__ */ s("ul", {
+        ref: fe,
+        style: ie,
+        ...de(),
+        className: x("z-[1300] m-0 list-none overflow-auto rounded-lg border border-delta-200 bg-white py-0 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", Y?.listbox),
+        children: j ? /* @__PURE__ */ s("li", {
+          className: "px-3 py-2 text-sm text-delta-600",
+          children: H
+        }) : h.length === 0 ? /* @__PURE__ */ s("li", {
+          className: "px-3 py-2 text-sm text-delta-600",
+          children: O
+        }) : h.map(Ne)
+      })
+    }) })]
   });
 }
 export {
-  Ie as StyledSelectAutocomplete
+  lt as StyledSelectAutocomplete
 };