asma-ui-core 3.43.6 → 3.45.0

package/dist/components/inputs/checkbox/base-ui/StyledCheckbox.js

@@ -1,21 +1,22 @@
 import { cn as C } from "../../../../helpers/cn.js";
 import e from "./StyledCheckbox.module.js";
-import p, { useEffect as L } from "react";
-import { jsx as t, jsxs as k } from "react/jsx-runtime";
-import { Checkbox as f } from "@base-ui/react/checkbox";
-var H = (n) => /* @__PURE__ */ k("svg", {
+import B, { useEffect as x, useRef as v } from "react";
+import { Fragment as D, jsx as r, jsxs as b } from "react/jsx-runtime";
+var F = (n) => /* @__PURE__ */ r("svg", {
+  "aria-hidden": "true",
   viewBox: "0 0 24 24",
   width: "100%",
   height: "100%",
   fill: "none",
   ...n,
-  children: [/* @__PURE__ */ t("title", { children: "Indeterminate icon" }), /* @__PURE__ */ t("path", {
+  children: /* @__PURE__ */ r("path", {
     d: "M6 12H18",
     stroke: "currentColor",
     strokeWidth: n.strokeWidth ?? 3,
     strokeLinecap: "round"
-  })]
-}), j = (n) => /* @__PURE__ */ k("svg", {
+  })
+}), M = (n) => /* @__PURE__ */ r("svg", {
+  "aria-hidden": "true",
   viewBox: "0 0 24 24",
   width: "100%",
   height: "100%",
@@ -25,57 +26,62 @@ var H = (n) => /* @__PURE__ */ k("svg", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   ...n,
-  children: [/* @__PURE__ */ t("title", { children: "Check icon" }), /* @__PURE__ */ t("path", { d: "M4 12l5 5L20 6" })]
-}), _ = ({ dataTest: n, size: h = "medium", disabled: m, readOnly: c, indeterminate: a = !1, checked: x, disableRipple: b, hideWrapper: v, className: I, checkboxClassName: R, onChange: u, ...i }) => {
-  const s = !!v, l = !b && !s && !m && !c, g = C(e.CheckboxWrapper, !s && e[`size-${h}`], s && e.HideWrapper, a && e.Indeterminate, c && e.ReadOnly, l && e.CheckboxHover, I), w = C(e.Checkbox, e[`size-${h}`], a && e.Indeterminate, R), W = a ? H : j, d = p.useRef(null), N = p.useCallback((o) => {
-    if (o.stopPropagation(), !l) return;
-    const r = document.createElement("span");
-    e.CheckboxRipple && (r.className = e.CheckboxRipple), r.addEventListener("animationend", () => {
-      r.remove();
-    }, { once: !0 }), d.current?.appendChild(r);
-  }, [l]);
-  L(() => {
-    const o = d.current;
-    return () => {
-      o?.replaceChildren();
-    };
+  children: /* @__PURE__ */ r("path", { d: "M4 12l5 5L20 6" })
+}), z = ({ dataTest: n, size: l = "medium", disabled: d, readOnly: a, error: g, indeterminate: t = !1, checked: p, disableRipple: R, hideWrapper: N, className: w, checkboxClassName: I, onChange: W, onClick: E, decorative: L, ...H }) => {
+  const s = !!N, c = !R && !s && !d && !a, h = v(null), u = v(null);
+  x(() => {
+    h.current && (h.current.indeterminate = t);
+  }, [t]);
+  const k = C(e.CheckboxWrapper, !s && e[`size-${l}`], s && e.HideWrapper, t && e.Indeterminate, a && e.ReadOnly, g && e.Error, c && e.CheckboxHover, w), j = C(e.Checkbox, e[`size-${l}`], t && e.Indeterminate, I), P = t ? F : M, $ = B.useCallback((o) => {
+    if (o.stopPropagation(), !c) return;
+    const i = document.createElement("span");
+    e.CheckboxRipple && (i.className = e.CheckboxRipple), i.addEventListener("animationend", () => i.remove(), { once: !0 }), u.current?.appendChild(i);
+  }, [c]);
+  x(() => {
+    const o = u.current;
+    return () => o?.replaceChildren();
   }, []);
-  const E = p.useCallback((o) => {
-    if (c) return;
-    const r = { target: {
-      name: i.name,
-      value: i.value,
-      checked: o
-    } };
-    u?.(r, o);
-  }, [
-    u,
-    i.name,
-    i.value,
-    c
-  ]);
-  return /* @__PURE__ */ k(f.Root, {
-    className: g,
+  const y = (o) => {
+    a || W?.(o, o.target.checked);
+  }, m = {
+    "data-checked": p && !t ? "" : void 0,
+    "data-unchecked": !p && !t ? "" : void 0,
+    "data-indeterminate": t ? "" : void 0,
+    "data-disabled": d ? "" : void 0
+  }, f = /* @__PURE__ */ b(D, { children: [!s && c && /* @__PURE__ */ r("span", {
+    ref: u,
+    className: e.CheckboxRippleContainer
+  }), /* @__PURE__ */ r("span", {
+    className: j,
+    children: /* @__PURE__ */ r("span", {
+      className: e.Indicator,
+      children: /* @__PURE__ */ r(P, { strokeWidth: l === "small" ? 3 : 2 })
+    })
+  })] });
+  return L ? /* @__PURE__ */ r("span", {
+    "aria-hidden": "true",
+    className: k,
     "data-testid": n,
-    checked: x,
-    disabled: m,
-    readOnly: c,
-    indeterminate: a,
-    onPointerDown: N,
-    onCheckedChange: E,
-    ...i,
-    children: [!s && l && /* @__PURE__ */ t("span", {
-      ref: d,
-      className: e.CheckboxRippleContainer
-    }), /* @__PURE__ */ t("span", {
-      className: w,
-      children: /* @__PURE__ */ t(f.Indicator, {
-        className: e.Indicator,
-        children: /* @__PURE__ */ t(W, { strokeWidth: h === "small" ? 3 : 2 })
-      })
-    })]
+    ...m,
+    children: f
+  }) : /* @__PURE__ */ b("label", {
+    className: k,
+    "data-testid": n,
+    onPointerDown: $,
+    onClick: E,
+    ...m,
+    children: [/* @__PURE__ */ r("input", {
+      ref: h,
+      type: "checkbox",
+      className: "sr-only",
+      checked: p,
+      disabled: d,
+      readOnly: a,
+      onChange: y,
+      ...H
+    }), f]
   });
 };
 export {
-  _ as StyledCheckbox
+  z as StyledCheckbox
 };

package/dist/components/inputs/checkbox/base-ui/StyledCheckbox.module.js

@@ -1,15 +1,16 @@
-var e = "_CheckboxWrapper_g6yr1_1", r = "_Checkbox_g6yr1_1", _ = "_Indeterminate_g6yr1_28", a = "_ReadOnly_g6yr1_55", p = "_Indicator_g6yr1_64", i = "_HideWrapper_g6yr1_68", o = "_CheckboxHover_g6yr1_75", l = "_CheckboxRippleContainer_g6yr1_75", y = "_CheckboxRipple_g6yr1_75", d = "_ripple_g6yr1_1", c = {
+var e = "_CheckboxWrapper_1kkew_1", _ = "_Checkbox_1kkew_1", k = "_Indeterminate_1kkew_28", r = "_ReadOnly_1kkew_63", a = "_Indicator_1kkew_72", o = "_HideWrapper_1kkew_76", p = "_CheckboxHover_1kkew_83", i = "_CheckboxRippleContainer_1kkew_83", l = "_CheckboxRipple_1kkew_83", d = "_ripple_1kkew_1", c = {
   CheckboxWrapper: e,
-  "size-small": "_size-small_g6yr1_11",
-  "size-medium": "_size-medium_g6yr1_15",
-  Checkbox: r,
-  Indeterminate: _,
-  ReadOnly: a,
-  Indicator: p,
-  HideWrapper: i,
-  CheckboxHover: o,
-  CheckboxRippleContainer: l,
-  CheckboxRipple: y,
+  "size-small": "_size-small_1kkew_11",
+  "size-medium": "_size-medium_1kkew_15",
+  Checkbox: _,
+  Indeterminate: k,
+  Error: "_Error_1kkew_55",
+  ReadOnly: r,
+  Indicator: a,
+  HideWrapper: o,
+  CheckboxHover: p,
+  CheckboxRippleContainer: i,
+  CheckboxRipple: l,
   ripple: d
 };
 export {

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

@@ -1,19 +1,23 @@
-import { cn as w } from "../../../../helpers/cn.js";
-import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
+import { cn as y } from "../../../../helpers/cn.js";
+import { CloseIcon as O } from "../../../icons/close-icon/CloseIcon.js";
 import { ErrorOutlineIcon as W } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
 import { StyledChip as H } from "../../../data-display/chip/StyledChip.js";
-import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
+import { StyledInteractiveChip as S } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
 import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
 import { StyledButton as M } from "../../button/StyledButton.js";
 import { useWrap as P } from "../helpers/useWrap.js";
-import { Skeleton as y } from "../../../../index.js";
-import { forwardRef as Q } from "react";
-import { jsx as t, jsxs as v } from "react/jsx-runtime";
-var ie = Q((S, I) => {
-  const { options: d, dataTest: V, value: r, readOnly: n, multiple: i, title: N, disabled: T, onChange: f, required: R, error: h, helperText: $, valueKey: q = "value", labelKey: z = "label", renderLabel: o, getOptionTooltip: k, loading: A, size: x, locale: B = "en" } = S, { containerRef: D, wrapDisabled: b } = P({ dependencyList: [d, d.length] }), p = (e) => typeof e == "object" ? e?.[z]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[q] : e, c = (e) => {
-    const l = g(e);
-    return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : p(e);
-  }, s = (e, l) => g(e) === g(l), L = i ? Array.isArray(r) && r.length > 0 : r != null, E = (e) => {
+import { Skeleton as v } from "../../../mui-compat/Skeleton.js";
+import { forwardRef as Q, useEffect as U } from "react";
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
+var se = Q((I, V) => {
+  const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title: T, disabled: k, onChange: f, required: $, error: x, helperText: q, valueKey: z = "value", labelKey: A = "label", renderLabel: o, getOptionTooltip: C, loading: B, size: b, locale: D = "en" } = I, { containerRef: p, wrapDisabled: g } = P({ dependencyList: [d, d.length] });
+  U(() => {
+    p.current && (p.current.inert = !0);
+  }, [p]);
+  const u = (e) => typeof e == "object" ? e?.[A]?.toString() ?? "" : e?.toString() ?? "", w = (e) => typeof e == "object" ? e?.[z] : e, c = (e) => {
+    const l = w(e);
+    return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
+  }, s = (e, l) => w(e) === w(l), E = i ? Array.isArray(r) && r.length > 0 : r != null, L = (e) => {
     if (!i) {
       const a = s(e, r) ? null : e;
       if (a === null) return;
@@ -23,103 +27,103 @@ var ie = Q((S, I) => {
     const l = r ?? [];
     f(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
   }, m = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, K = m.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
-  return /* @__PURE__ */ v("div", {
-    "data-testid": `${V}-dynamic-radio-group`,
+  return /* @__PURE__ */ N("div", {
+    "data-testid": `${R}-dynamic-radio-group`,
     className: "relative flex flex-col gap-y-1",
     children: [
-      N && /* @__PURE__ */ t("span", {
+      T && /* @__PURE__ */ t("span", {
         className: "text-base font-semibold text-delta-800",
-        children: N
+        children: T
       }),
       /* @__PURE__ */ t("div", {
         "aria-hidden": !0,
-        ref: D,
-        className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 text-sm opacity-0",
+        ref: p,
+        className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 opacity-0",
         style: { width: "100%" },
-        children: m.map((e) => /* @__PURE__ */ t(O, {
+        children: m.map((e) => /* @__PURE__ */ t(S, {
           className: "w-fit",
           readOnly: n,
           type: i ? "checkbox" : "radio",
           dataTest: `ic-${c(e)}-hidden`,
-          label: o ? o(e) : p(e)
+          label: o ? o(e) : u(e)
         }, c(e)))
       }),
       /* @__PURE__ */ t("div", {
-        className: w("flex flex-wrap gap-2", b && "flex-col gap-1"),
-        children: A ? /* @__PURE__ */ v("div", {
+        className: y("flex flex-wrap gap-2", g && "flex-col gap-1"),
+        children: B ? /* @__PURE__ */ N("div", {
           className: "flex flex-wrap gap-2",
           children: [
-            /* @__PURE__ */ t(y, { className: "h-[32px] w-[60px]" }),
-            /* @__PURE__ */ t(y, { className: "h-[32px] w-[60px]" }),
-            /* @__PURE__ */ t(y, { className: "h-[32px] w-[60px]" })
+            /* @__PURE__ */ t(v, { className: "h-[32px] w-[60px]" }),
+            /* @__PURE__ */ t(v, { className: "h-[32px] w-[60px]" }),
+            /* @__PURE__ */ t(v, { className: "h-[32px] w-[60px]" })
           ]
         }) : m?.length ? m.map((e, l) => {
-          const a = !!(i ? r?.find((G) => s(G, e)) : s(r, e)), F = k ? k(e) : null;
+          const a = !!(i ? r?.find((G) => s(G, e)) : s(r, e)), F = C ? C(e) : null;
           if (n && !a) return null;
-          const u = typeof e == "object" ? !!e?.disabled : !1, C = !u && !n && l === K ? I : void 0;
+          const h = typeof e == "object" ? !!e?.disabled : !1, j = !h && !n && l === K ? V : void 0;
           return /* @__PURE__ */ t(J, {
             title: F,
             arrow: !0,
             children: /* @__PURE__ */ t("span", {
-              className: w(u && "cursor-not-allowed"),
-              children: n && !b ? /* @__PURE__ */ t(H, {
-                ref: C,
-                disabled: !!T || u,
+              className: y(h && "cursor-not-allowed"),
+              children: n && !g ? /* @__PURE__ */ t(H, {
+                ref: j,
+                disabled: !!k || h,
                 classes: { root: "min-h-[32px] h-full" },
-                className: "w-fit text-sm",
+                className: "w-fit",
                 dataTest: `ic-${c(e)}`,
-                label: o ? o(e) : p(e)
-              }) : /* @__PURE__ */ t(O, {
-                ref: C,
-                disabled: !!T || u,
-                classes: b ? {
+                label: o ? o(e) : u(e)
+              }) : /* @__PURE__ */ t(S, {
+                ref: j,
+                disabled: !!k || h,
+                classes: g ? {
                   root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
                   label: "block whitespace-normal break-words overflow-visible"
                 } : { root: "min-h-[32px] h-full" },
-                className: "w-fit text-sm",
+                className: "w-fit",
                 readOnly: n,
                 type: i ? "checkbox" : "radio",
                 dataTest: `ic-${c(e)}`,
                 checked: a,
-                size: x,
-                onClick: () => E(e),
-                label: o ? o(e) : p(e)
+                size: b,
+                onClick: () => L(e),
+                label: o ? o(e) : u(e)
               })
             })
           }, c(e));
         }) : /* @__PURE__ */ t("span", { children: "-" })
       }),
-      !R && L && !n && /* @__PURE__ */ t(M, {
+      !$ && E && !n && /* @__PURE__ */ t(M, {
         dataTest: "clear-selection-btn",
         variant: "text",
-        startIcon: x === "medium" ? /* @__PURE__ */ t(j, {
+        startIcon: b === "medium" ? /* @__PURE__ */ t(O, {
           height: 24,
           width: 24,
           className: "size-6"
-        }) : /* @__PURE__ */ t(j, {
+        }) : /* @__PURE__ */ t(O, {
           height: 20,
           width: 20,
           className: "size-5"
         }),
         className: "w-fit",
-        size: x,
+        size: b,
         onClick: () => f(i ? [] : null),
-        children: B === "en" ? "Clear selection" : "Fjern valget"
+        children: D === "en" ? "Clear selection" : "Fjern valget"
       }),
-      /* @__PURE__ */ v("div", {
-        className: w("flex items-center gap-1 text-sm/5 text-delta-600", h && "text-error-500"),
-        children: [h && /* @__PURE__ */ t(W, {
+      /* @__PURE__ */ N("div", {
+        className: y("flex items-center gap-1 text-sm/5 text-delta-600", x && "text-error-500"),
+        children: [x && /* @__PURE__ */ t(W, {
           width: 20,
           height: 20,
           className: "min-w-5"
         }), /* @__PURE__ */ t("span", {
           className: "line-clamp-1",
-          children: $ ?? (h ? "Required" : void 0)
+          children: q ?? (x ? "Required" : void 0)
         })]
       })
     ]
   });
 });
 export {
-  ie as DynamicInteractiveChipGroup
+  se as DynamicInteractiveChipGroup
 };

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

@@ -1,155 +1,163 @@
-import { cn as V } from "../../../../helpers/cn.js";
-import { LoadingIcon as Q } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as U } from "../../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as X } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as D } from "../../../data-display/chip/StyledChip.js";
+import { cn as D } from "../../../../helpers/cn.js";
+import { LoadingIcon as Y } from "../../../icons/loading-icon/LoadingIcon.js";
+import { CheckIcon as Z } from "../../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as ee } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as $ } from "../../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as te } from "../../checkbox/base-ui/StyledCheckbox.js";
 import { StyledTooltip as j } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledCheckbox as Y } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledInputField as Z } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as ee } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicInteractiveChipGroup as te } from "./DynamicInteractiveChipGroup.js";
-import { createElement as L, forwardRef as le, useCallback as g, useState as re } from "react";
-import { Fragment as $, jsx as l, jsxs as x } from "react/jsx-runtime";
-var be = le((O, q) => {
-  const [B, T] = re(!1), { options: y, dataTest: S, value: i, readOnly: d, multiple: a, required: E, onChange: C, size: z, title: k, noOptionsText: F, placeholder: K, disabled: N, helperText: H, disableHelperText: R, error: G, valueKey: A = "value", labelKey: W = "label", renderLabel: s, getOptionTooltip: I, startAdornment: _, autocompleteProps: n, loading: u, maxTags: J } = O, p = y.length < 11, c = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", m = g((e) => typeof e == "object" ? e?.[A] : e, [A]), f = g((e, t) => typeof t == "string" ? !1 : m(e) === m(t), [m]), v = (e) => {
-    const t = m(e);
-    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : c(e);
-  }, P = g((e) => {
-    T(!0), n?.onOpen?.(e);
-  }, [n]), M = g((e, t) => {
-    T(!1), n?.onClose?.(e, t);
+import { StyledInputField as le } from "../../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as ae } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicInteractiveChipGroup as re } from "./DynamicInteractiveChipGroup.js";
+import { createElement as B, forwardRef as oe, useCallback as f, useState as ne } from "react";
+import { Fragment as L, jsx as l, jsxs as T } from "react/jsx-runtime";
+var ye = oe((S, q) => {
+  const [E, k] = ne(!1), { options: g, dataTest: x, value: y, readOnly: u, multiple: o, required: F, onChange: C, size: z, title: v, noOptionsText: K, placeholder: _, disabled: I, helperText: H, disableHelperText: R, error: G, valueKey: A = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: N, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = S, p = g.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", h = f((e) => typeof e == "object" ? e?.[A] : e, [A]), P = f((e, t) => h(e) === h(t), [h]), w = (e) => {
+    const t = h(e);
+    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
+  }, V = f((e) => {
+    k(!0), n?.onOpen?.(e);
+  }, [n]), X = f((e, t) => {
+    k(!1), n?.onClose?.(e, t);
   }, [n]);
-  return a && d ? /* @__PURE__ */ l(te, { ...O }) : /* @__PURE__ */ x("div", {
+  if (o && u) return /* @__PURE__ */ l(re, { ...S });
+  const O = v ? `${x}-title` : void 0;
+  return /* @__PURE__ */ T("div", {
     className: "flex w-full flex-col gap-y-1",
-    children: [k && /* @__PURE__ */ l("span", {
+    children: [v && /* @__PURE__ */ l("span", {
+      id: O,
       className: "text-base font-semibold text-delta-800",
-      children: k
-    }), /* @__PURE__ */ l(ee, {
-      open: B,
-      onOpen: P,
-      onClose: M,
-      disableCloseOnSelect: a,
-      dataTest: S,
-      disabled: !!N || !!u,
-      noOptionsText: F,
-      loading: u,
-      readOnly: d,
-      value: i,
+      children: v
+    }), /* @__PURE__ */ l(ae, {
+      open: E,
+      onOpen: V,
+      onClose: X,
+      disableCloseOnSelect: o,
+      dataTest: x,
+      disabled: !!I || !!m,
+      noOptionsText: K,
+      loading: m,
+      readOnly: u,
+      value: y,
       size: z,
-      disableClearable: E,
-      options: y,
+      disableClearable: F,
+      options: g,
       fullWidth: !0,
-      classes: { listbox: "h-full max-h-[300px]" },
-      getOptionLabel: n?.getOptionLabel ?? c,
+      classes: { listbox: "max-h-[300px]" },
+      getOptionLabel: n?.getOptionLabel ?? s,
       onChange: (e, t) => {
         C(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: n?.isOptionEqualToValue ?? f,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? P,
       autoHeight: !0,
-      multiple: a,
-      renderValue: a ? (e) => {
+      multiple: o,
+      renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, r = J ?? y.length, h = t.slice(0, r), b = t.length - r;
-        return /* @__PURE__ */ x("div", {
-          className: "flex flex-wrap gap-2",
-          children: [h.map((o) => /* @__PURE__ */ l(D, {
-            dataTest: `${v(o)}-chip`,
-            readOnly: d,
-            variant: "outlined",
-            label: s ? s(o) : c(o),
-            classes: {
-              root: "h-fit w-fit min-h-[32px]",
-              label: "block whitespace-normal"
-            },
-            disabled: !!N || !!u,
-            onDelete: () => {
-              Array.isArray(i) && C(i.filter((w) => !f(w, o)));
-            }
-          }, v(o))), b > 0 && /* @__PURE__ */ l(D, {
-            dataTest: "remaining-count-tag-chip",
-            label: `+${b}`,
-            variant: "outlined",
-            onClick: P
-          })]
-        });
+        const t = e, c = M ?? g.length, a = t.slice(0, c), d = t.length - c;
+        return [...a.map((r) => /* @__PURE__ */ l($, {
+          dataTest: `${w(r)}-chip`,
+          readOnly: u,
+          variant: "outlined",
+          label: i ? i(r) : s(r),
+          classes: {
+            root: "h-fit w-fit min-h-[32px]",
+            label: "block whitespace-normal"
+          },
+          disabled: !!I || !!m,
+          onDelete: () => {
+            Array.isArray(y) && C(y.filter((b) => !P(b, r)));
+          }
+        }, w(r))), d > 0 ? /* @__PURE__ */ l($, {
+          dataTest: "remaining-count-tag-chip",
+          label: `+${d}`,
+          variant: "outlined",
+          onClick: V
+        }, "remaining-count") : null];
       } : void 0,
-      popupIcon: u ? /* @__PURE__ */ l(Q, {
+      popupIcon: m ? /* @__PURE__ */ l(Y, {
         height: 24,
         width: 24
-      }) : a ? /* @__PURE__ */ l(X, {
+      }) : o ? /* @__PURE__ */ l(ee, {
         height: 24,
         width: 24
       }) : void 0,
-      renderOption: (e, t) => {
-        const r = typeof t == "object" ? !!t?.disabled : !1, h = I ? I(t) : null;
-        if (a) {
-          const o = !!i?.find((w) => f(w, t));
-          return /* @__PURE__ */ L("li", {
+      renderOption: (e, t, c) => {
+        const a = typeof t == "object" ? !!t?.disabled : !1, d = N ? N(t) : null;
+        if (o) {
+          const b = c.selected;
+          return /* @__PURE__ */ B("li", {
             ...e,
+            role: "option",
+            "aria-selected": b,
             key: e.id,
-            onClick: r ? void 0 : e.onClick,
-            className: V("flex h-full cursor-pointer gap-x-1 bg-white text-sm/5 hover:bg-gama-50", r && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
-            "aria-disabled": r
+            onClick: a ? void 0 : e.onClick,
+            className: D("flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            "aria-disabled": a
           }, /* @__PURE__ */ l(j, {
             arrow: !0,
-            title: h,
-            children: /* @__PURE__ */ x($, { children: [/* @__PURE__ */ l(Y, {
-              disabled: r,
-              dataTest: `${v(t)}-checkbox`,
+            title: d,
+            children: /* @__PURE__ */ T(L, { children: [/* @__PURE__ */ l(te, {
+              disabled: a,
+              dataTest: `${w(t)}-checkbox`,
               size: "small",
+              decorative: !0,
               className: "min-w-[36px]",
-              checked: o
-            }), s ? s(t) : /* @__PURE__ */ l("span", {
-              className: "h-fit py-[10px] text-base text-delta-700",
-              children: c(t)
+              checked: b
+            }), i ? i(t) : /* @__PURE__ */ l("span", {
+              className: "h-fit text-base text-delta-700",
+              children: s(t)
             })] })
           }));
         }
-        const b = i != null && f(i, t);
-        return /* @__PURE__ */ L("li", {
+        const r = c.selected;
+        return /* @__PURE__ */ B("li", {
           ...e,
+          role: "option",
+          "aria-selected": r,
           key: e.id,
-          className: V("flex h-full cursor-pointer gap-x-1 px-2 text-sm/5 hover:bg-gama-50", r && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
-          onClick: r ? void 0 : e.onClick,
-          "aria-disabled": r
+          className: D("flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          onClick: a ? void 0 : e.onClick,
+          "aria-disabled": a
         }, /* @__PURE__ */ l(j, {
           arrow: !0,
-          title: h,
-          children: /* @__PURE__ */ x($, { children: [/* @__PURE__ */ l("span", {
-            className: "h-full w-5 min-w-5 py-[10px]",
-            children: b && /* @__PURE__ */ l(U, {
+          title: d,
+          children: /* @__PURE__ */ T(L, { children: [/* @__PURE__ */ l("span", {
+            className: "w-5 min-w-5",
+            children: r && /* @__PURE__ */ l(Z, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
             })
-          }), s ? s(t) : /* @__PURE__ */ l("span", {
-            className: "py-[10px] text-base text-delta-700",
-            children: c(t)
+          }), i ? i(t) : /* @__PURE__ */ l("span", {
+            className: "text-base text-delta-700",
+            children: s(t)
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(Z, {
-        dataTest: `${S}-input-field`,
+      renderInput: (e) => /* @__PURE__ */ l(le, {
+        dataTest: `${x}-input-field`,
         ...e,
         inputRef: q,
         error: G,
         helperText: R ? "" : H ?? " ",
         variant: "outlined",
         label: "",
-        placeholder: K,
-        readOnly: d,
+        placeholder: _,
+        readOnly: u,
+        onFocus: Q,
+        onBlur: U,
         onKeyDown: p ? (t) => t.preventDefault() : void 0,
         autoComplete: p ? "off" : "on",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: _ ?? e.slotProps?.input?.startAdornment,
+            startAdornment: J ?? e.slotProps?.input?.startAdornment,
             style: p ? { caretColor: "transparent" } : {}
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
+            ...O ? { "aria-labelledby": O } : {},
             style: p ? { caretColor: "transparent" } : {}
           }
         }
@@ -159,5 +167,5 @@ var be = le((O, q) => {
   });
 });
 export {
-  be as DynamicSelectAutocomplete
+  ye as DynamicSelectAutocomplete
 };