asma-ui-core 3.74.0 → 3.74.1

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

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

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

@@ -171,7 +171,7 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
           },
           ...he(),
           onKeyDown: De,
-          className: p("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)]", ae?.className),
+          className: p("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ae?.className),
           children: ve
         })
       }),

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

@@ -1,23 +1,23 @@
-import { cn as l } from "../../../helpers/cn.js";
-import { CheckIcon as n } from "../../icons/check-icon/CheckIcon.js";
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-var p = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ s("li", {
+import { cn as i } from "../../../helpers/cn.js";
+import { CheckIcon as s } from "../../icons/check-icon/CheckIcon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+var p = ({ children: o, selected: e, disabled: r, className: a, onClick: l }) => /* @__PURE__ */ n("li", {
   role: "option",
   "aria-selected": e ? !0 : void 0,
-  "aria-disabled": t ? !0 : void 0,
+  "aria-disabled": r ? !0 : void 0,
   tabIndex: -1,
-  onClick: t ? void 0 : i,
-  className: l("flex items-center gap-1 px-2 py-2.5 text-base outline-none", t ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800 hover:bg-delta-50", e && "bg-gama-50", o),
-  children: [/* @__PURE__ */ a("span", {
+  onClick: r ? void 0 : l,
+  className: i("flex items-center gap-1 px-2 py-2.5 text-base outline-none", "border-0 border-b border-solid border-delta-200 last:border-b-0", r ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800 hover:bg-delta-50", e && "bg-gama-50", a),
+  children: [/* @__PURE__ */ t("span", {
     className: "flex w-6 justify-center",
-    children: e && /* @__PURE__ */ a(n, {
+    children: e && /* @__PURE__ */ t(s, {
       width: 22,
       height: 22,
       className: "text-gama-500"
     })
-  }), /* @__PURE__ */ a("span", {
-    className: "min-w-0 flex-1 truncate",
-    children: r
+  }), /* @__PURE__ */ t("span", {
+    className: "line-clamp-2 min-w-0 flex-1 break-words",
+    children: o
   })]
 });
 export {

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

@@ -1,4 +1,4 @@
-import { cn as L } from "../../../helpers/cn.js";
+import { cn as k } from "../../../helpers/cn.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";
@@ -8,17 +8,17 @@ import { StyledCheckbox as Q } from "../checkbox/base-ui/StyledCheckbox.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 rt, useMemo as E, useRef as X, useState as w } from "react";
+import { useEffect as lt, 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 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 }) {
+import { FloatingPortal as rt, 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 = (r) => typeof r == "object" && r !== null && "label" in r ? String(r.label) : String(r), K = (r) => typeof r == "object" && r !== null && "disabled" in r && !!r.disabled;
+function Pt({ dataTest: r, options: p, renderInput: ee, value: v, onChange: N, getOptionLabel: te, getOptionKey: R, isOptionEqualToValue: j, renderOption: z, renderValue: F, filterOptions: L, loading: W, loadingText: le = "Loading…", noOptionsText: re = "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(() => {
+  }, [Re, H] = w(""), h = S ?? Re, P = (e, t, l) => {
+    S === void 0 && H(t), he?.(e, t, l);
+  }, [b, $] = 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) : "";
+  lt(() => {
     S !== void 0 || o || H(O);
   }, [
     S,
@@ -27,17 +27,17 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
   ]);
   const B = (e) => o ? c.some((t) => C(e, t)) : g !== null && C(e, g), q = E(() => {
     const e = [...p];
-    if ($) return $(e, { inputValue: h });
+    if (L) return L(e, { inputValue: h });
     const t = !o && g !== null ? n(g).toLowerCase() : null;
     if (!h || h.toLowerCase() === t) return e;
-    const r = h.toLowerCase();
-    return e.filter((d) => n(d).toLowerCase().includes(r));
+    const l = h.toLowerCase();
+    return e.filter((d) => n(d).toLowerCase().includes(l));
   }, [
     p,
     h,
-    $,
+    L,
     v
-  ]), i = E(() => q.slice(0, 100), [q]), { refs: A, floatingStyles: Le, context: G } = dt({
+  ]), i = E(() => q.slice(0, 100), [q]), { refs: A, floatingStyles: ke, context: G } = dt({
     open: a,
     onOpenChange: f,
     placement: "bottom-start",
@@ -51,10 +51,10 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         Ce(e.reference.width), Ae(de ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { 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) => {
+  }), { getReferenceProps: Le, getFloatingProps: $e, 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"), ce || f(!1);
+      const l = c.some((u) => C(t, u)), d = l ? c.filter((u) => !C(t, u)) : [...c, t];
+      N?.(e, d, l ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), ce || f(!1);
     } else
       N?.(e, t, "selectOption", { option: t }), P(e, n(t), "reset"), f(!1);
   }, Ee = (e) => {
@@ -66,12 +66,12 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
       K(t) || M(e, t);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !a) {
-        k(null), f(!0);
+        $(null), f(!0);
         return;
       }
       if (i.length === 0) return;
       const t = e.key === "ArrowDown" ? 1 : -1;
-      k((r) => r == null ? t > 0 ? 0 : i.length - 1 : (r + t + i.length) % i.length);
+      $((l) => l == null ? t > 0 ? 0 : i.length - 1 : (l + t + i.length) % i.length);
     }
   }, ze = !ne && !m && !D && (o ? c.length > 0 : g !== null), Fe = (e) => {
     e.preventDefault(), !(D || m) && (Y.current?.focus(), f(!a));
@@ -79,7 +79,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
     dataTest: `selected-chip-${n(e)}`,
     label: n(e),
     readOnly: m,
-    onDelete: m ? void 0 : (r) => M(r, e)
+    onDelete: m ? void 0 : (l) => M(l, e)
   }, R ? R(e) : `${n(e)}-${t}`)) : void 0, Ue = /* @__PURE__ */ y("span", {
     className: "flex items-center gap-1",
     children: [
@@ -91,7 +91,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
       ze && /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Clear",
-        "data-testid": `${l}-clear`,
+        "data-testid": `${r}-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(), Ee(e);
@@ -106,7 +106,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         type: "button",
         "aria-label": "Toggle options",
         "aria-expanded": a,
-        "data-testid": `${l}-popup-indicator`,
+        "data-testid": `${r}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: Fe,
         children: ie ?? (o ? /* @__PURE__ */ s(Ge, {
@@ -116,7 +116,7 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         }) : /* @__PURE__ */ s(Oe, {
           width: 24,
           height: 24,
-          className: L(_["select-custom-icon"], a && _["select-custom-icon-open"], "text-delta-700")
+          className: k(_["select-custom-icon"], a && _["select-custom-icon-open"], "text-delta-700")
         }))
       })
     ]
@@ -133,13 +133,13 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
     onKeyDown: je,
     slotProps: {
       htmlInput: {
-        ...$e(),
+        ...Le(),
         ref: Y,
         onClick: () => f(!0),
         role: "combobox",
         "aria-autocomplete": "list",
         "aria-expanded": a,
-        "aria-activedescendant": a && b != null ? `${l}-option-${b}` : void 0,
+        "aria-activedescendant": a && b != null ? `${r}-option-${b}` : void 0,
         autoComplete: "off",
         readOnly: m
       },
@@ -149,45 +149,45 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         endAdornment: Ue
       }
     }
-  }, 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) => {
+  }, Ve = k("box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800", "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", "border-0 border-b border-solid border-delta-200 last:border-b-0"), He = (e, t, l) => {
     const { key: d, ...u } = e;
     return /* @__PURE__ */ y("li", {
       ...u,
       children: [o ? /* @__PURE__ */ s(Q, {
-        dataTest: `${l}-${n(t)}-checkbox`,
-        checked: r.selected,
+        dataTest: `${r}-${n(t)}-checkbox`,
+        checked: l.selected,
         size: "small",
         hideWrapper: !0,
         decorative: !0
       }) : /* @__PURE__ */ s("span", {
         className: "w-5",
-        children: r.selected && /* @__PURE__ */ s(qe, {
+        children: l.selected && /* @__PURE__ */ s(qe, {
           width: 20,
           height: 20,
           className: "text-gama-500"
         })
       }), /* @__PURE__ */ s("span", {
-        className: "flex-1 truncate",
+        className: "line-clamp-2 min-w-0 flex-1 break-words",
         children: n(t)
       })]
     }, d);
   }, Ye = (e, t) => {
-    const r = ye?.(e) ?? K(e), d = {
+    const l = ye?.(e) ?? K(e), d = {
       ...Ie({
         onMouseDown: (x) => x.preventDefault(),
         onClick: (x) => {
-          r || M(x, e);
+          l || M(x, e);
         },
-        onMouseMove: () => k(r ? null : t)
+        onMouseMove: () => $(l ? null : t)
       }),
       key: R ? String(R(e)) : `${n(e)}-${t}`,
       ref: (x) => {
         De.current[t] = x;
       },
       role: "option",
-      id: `${l}-option-${t}`,
+      id: `${r}-option-${t}`,
       "aria-selected": B(e),
-      "aria-disabled": r || void 0,
+      "aria-disabled": l || void 0,
       "data-active": b === t ? "" : void 0,
       className: Ve
     }, u = {
@@ -198,27 +198,27 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
     return z ? z(d, e, u) : He(d, e, u);
   };
   return /* @__PURE__ */ y("div", {
-    className: L(_.styledSelectAutocompleteWrapper, !me && "w-auto", we, xe),
-    children: [ee(Te), a && /* @__PURE__ */ s(lt, {
+    className: k(_.styledSelectAutocompleteWrapper, !me && "w-auto", we, xe),
+    children: [ee(Te), a && /* @__PURE__ */ s(rt, {
       root: J,
       children: /* @__PURE__ */ y("ul", {
         ref: _e,
         ...I ? Qe : {},
         style: {
           ...I ? Xe : {},
-          ...Le,
+          ...ke,
           width: Se ?? void 0,
           maxHeight: Pe ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
           ...V?.popper?.style
         },
-        ...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),
+        ...$e(),
+        className: k("z-[1300] m-0 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-2 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, {
-            dataTest: `${l}-select-all`,
+            dataTest: `${r}-select-all`,
             "aria-label": U,
             checked: p.length > 0 && c.length === p.length,
             size: "small",
@@ -235,11 +235,11 @@ function Pt({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, g
         }), W ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: re
+          children: le
         }) : i.length === 0 ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: le
+          children: re
         }) : i.map(Ye)]
       })
     })]

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.74.0",
+    "version": "3.74.1",
     "type": "module",
     "sideEffects": [
         "**/*.css",