asma-ui-core 3.41.0 → 3.42.1

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

@@ -1,127 +1,48 @@
-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 me, autoUpdate as fe, 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: m, displayEmpty: f, 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: fe,
-    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 || !!m || !!f), [
-    i,
-    m,
-    f,
-    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
+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);
     },
-    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 border-0 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 || f ? Y : m
-          }),
-          /* @__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(me, { children: /* @__PURE__ */ o("ul", {
-        ref: Q,
-        role: "listbox",
-        "aria-label": h,
-        style: W,
-        ...J(),
-        onKeyDown: Z,
-        className: a("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-delta-300 bg-white px-0 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"]
-      })
-    ]
-  });
-};
+    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"]
+})] });
 export {
-  Ve as StyledSelect
+  I as StyledSelect
 };

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

@@ -1,25 +1,29 @@
-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, {
+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, {
       width: 22,
       height: 22,
-      className: "text-gama-500"
+      style: { color: "var(--colors-gama-500)" }
     })
-  }), /* @__PURE__ */ a("span", {
-    className: "min-w-0 flex-1 truncate",
-    children: r
-  })]
+  }), /* @__PURE__ */ r("span", { children: e.children })]
 });
 export {
-  x as StyledSelectItem
+  c as StyledSelectItem
 };

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

@@ -1,192 +1,162 @@
-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"
-      }),
-      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",
-        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, {
+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__ */ s(ve, {
+      }) : /* @__PURE__ */ o(le, {
         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
+        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]
+        })
       },
-      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;
+      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)
+        }));
+      }),
+      sx: {
+        ...O,
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
+        "& .select-custom-icon": { marginTop: "-0.5px !important" },
+        "& .MuiInputBase-inputSizeSmall": { minHeight: "23px !important" }
       },
-      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)
+      slotProps: {
+        ...g,
+        clearIndicator: {
+          disableRipple: !0,
+          disableFocusRipple: !0,
+          ...g?.clearIndicator ?? {}
+        },
+        listbox: he(g?.listbox, oe)
+      },
+      clearIcon: /* @__PURE__ */ o("span", {
+        className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
+        children: /* @__PURE__ */ o(ae, {
+          width: 20,
+          height: 20,
+          className: "text-delta-700"
+        })
       })
-    }) })]
+    })
   });
 }
 export {
-  lt as StyledSelectAutocomplete
+  Ie as StyledSelectAutocomplete
 };