asma-ui-core 3.95.1 → 3.97.0

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

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

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

@@ -1,7 +1,7 @@
-var e = "_styledSelectAutocompleteWrapper_nxep5_1", t = {
+var e = "_styledSelectAutocompleteWrapper_f4sqa_1", t = {
   styledSelectAutocompleteWrapper: e,
-  "select-custom-icon": "_select-custom-icon_nxep5_5",
-  "select-custom-icon-open": "_select-custom-icon-open_nxep5_13"
+  "select-custom-icon": "_select-custom-icon_f4sqa_6",
+  "select-custom-icon-open": "_select-custom-icon-open_f4sqa_14"
 };
 export {
   t as default

package/dist/components/utils/popover/PopoverSheet.js

@@ -1,57 +1,57 @@
-import { cn as oe } from "../../../helpers/cn.js";
-import { firstTabbable as re } from "../../../helpers/focusable.js";
-import { TOP_LAYER_PROPS as ne, TOP_LAYER_RESET_STYLE as ie, getOpenModalDialogAncestor as se, shouldUsePopoverTopLayer as ae, useTopLayerRef as ce } from "../../../hooks/useTopLayer.hook.js";
-import { StyledButton as le } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as ue } from "../../../hooks/useMediaQuery.hook.js";
-import { useDebouncedValue as de } from "../../../hooks/useDebouncedValue.hook.js";
-import { useFocusTrap as fe } from "../../../hooks/useFocusTrap.hook.js";
-import { formatResultsLabel as pe } from "../bottom-sheet/formatResultsLabel.js";
-import { StyledBottomSheet as me } from "../bottom-sheet/StyledBottomSheet.js";
-import { PopoverAnatomy as ge } from "./PopoverAnatomy.js";
-import { useCallback as m, useEffect as b, useId as ve, useRef as y, useState as g } from "react";
+import { cn as re } from "../../../helpers/cn.js";
+import { firstTabbable as ne } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as ie, TOP_LAYER_RESET_STYLE as se, getOpenModalDialogAncestor as ae, shouldUsePopoverTopLayer as ce, useTopLayerRef as le } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as ue } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as de } from "../../../hooks/useMediaQuery.hook.js";
+import { useDebouncedValue as fe } from "../../../hooks/useDebouncedValue.hook.js";
+import { useFocusTrap as pe } from "../../../hooks/useFocusTrap.hook.js";
+import { formatResultsLabel as me } from "../bottom-sheet/formatResultsLabel.js";
+import { StyledBottomSheet as ge } from "../bottom-sheet/StyledBottomSheet.js";
+import { PopoverAnatomy as ve } from "./PopoverAnatomy.js";
+import { useCallback as m, useEffect as b, useId as he, useRef as y, useState as g } from "react";
 import { Fragment as N, jsx as c, jsxs as W } from "react/jsx-runtime";
-import { FloatingPortal as he, autoUpdate as xe, flip as _e, offset as Pe, shift as be, size as ye, useDismiss as Re, useFloating as Ee, useInteractions as Se, useMergeRefs as Te } from "@floating-ui/react";
-var Ae = 240, Me = {
+import { FloatingPortal as xe, autoUpdate as _e, flip as Pe, offset as be, shift as ye, size as Re, useDismiss as Ee, useFloating as Se, useInteractions as Te, useMergeRefs as Ae } from "@floating-ui/react";
+var Me = 240, we = {
   info: 472,
   action: 472
-}, we = 0.6, B = "calc(100vw - 32px)", je = ({ dataTest: s, renderTrigger: R, variant: E = "info", title: l, children: S, viewResultsAction: T, resetAction: A, footerActions: M, resultCount: v, closeLabel: w = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
-  const a = ve(), L = `${a}-title`, [o, X] = g(!1), [H, U] = g(), [Y, $] = g(), u = ue(), t = E === "action", j = u && !t, k = u && t, d = m((e) => {
+}, Fe = 0.6, B = "calc(100vw - 32px)", qe = ({ dataTest: s, renderTrigger: R, variant: E = "info", title: l, children: S, viewResultsAction: T, resetAction: A, footerActions: M, resultCount: v, closeLabel: w = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
+  const a = he(), L = `${a}-title`, [o, X] = g(!1), [H, U] = g(), [Y, $] = g(), u = de(), t = E === "action", j = u && !t, k = u && t, d = m((e) => {
     X(e), I?.(e);
-  }, [I]), { refs: h, floatingStyles: q, context: z } = Ee({
+  }, [I]), { refs: h, floatingStyles: q, context: z } = Se({
     open: o,
     onOpenChange: d,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: xe,
+    whileElementsMounted: _e,
     middleware: [
-      Pe(8),
-      ...j ? [] : [_e({ padding: 8 })],
-      be({ padding: 8 }),
-      ye({
+      be(8),
+      ...j ? [] : [Pe({ padding: 8 })],
+      ye({ padding: 8 }),
+      Re({
         padding: 8,
         apply({ availableHeight: e }) {
-          $(Math.min(e, Math.round(window.innerHeight * we)));
+          $(Math.min(e, Math.round(window.innerHeight * Fe)));
         }
       })
     ]
-  }), { getFloatingProps: V } = Se([Re(z, {
+  }), { getFloatingProps: V } = Te([Ee(z, {
     enabled: !k,
     escapeKey: !0,
     outsidePress: (e) => {
       const i = f.current;
       return !(i && e.target instanceof Node && i.contains(e.target));
     }
-  })]), x = ae(H), C = y(null), [r, G] = g(null), K = m((e) => {
+  })]), x = ce(H), C = y(null), [r, G] = g(null), K = m((e) => {
     C.current = e, G(e);
-  }, []), Q = Te([ce(h.setFloating, x), K]), f = y(null), J = m((e) => {
+  }, []), Q = Ae([le(h.setFloating, x), K]), f = y(null), J = m((e) => {
     f.current = e, h.setReference(e);
   }, [h]), n = m(() => {
     d(!1);
   }, [d]);
-  fe(o && t && r !== null, C), b(() => {
+  pe(o && t && r !== null, C), b(() => {
     if (!r) return;
     const e = requestAnimationFrame(() => {
-      (t ? re(r) : r)?.focus({ preventScroll: !0 });
+      (t ? ne(r) : r)?.focus({ preventScroll: !0 });
     });
     return () => {
       cancelAnimationFrame(e);
@@ -96,21 +96,21 @@ var Ae = 240, Me = {
           n();
           return;
         }
-        U(se(e.currentTarget)), d(!0);
+        U(ae(e.currentTarget)), d(!0);
       },
       "aria-expanded": o,
       "aria-controls": o ? a : void 0,
       "aria-haspopup": t ? "dialog" : void 0,
       "aria-describedby": !t && o ? a : void 0
     }
-  }, p = (e) => typeof e == "function" ? e({ close: n }) : e, Z = de(v, 500), ee = T ?? (v === void 0 ? void 0 : /* @__PURE__ */ c(le, {
+  }, p = (e) => typeof e == "function" ? e({ close: n }) : e, Z = fe(v, 500), ee = T ?? (v === void 0 ? void 0 : /* @__PURE__ */ c(ue, {
     dataTest: `${s}-view-results`,
     type: "button",
     variant: "text",
     onClick: n,
-    children: pe(Z)
-  })), te = u ? B : Me[E];
-  return k ? /* @__PURE__ */ W(N, { children: [R(D), /* @__PURE__ */ c(me, {
+    children: me(Z)
+  })), te = u ? B : we[E], oe = u ? B : void 0;
+  return k ? /* @__PURE__ */ W(N, { children: [R(D), /* @__PURE__ */ c(ge, {
     id: a,
     dataTest: s,
     open: o,
@@ -124,7 +124,7 @@ var Ae = 240, Me = {
     closeLabel: w,
     className: O,
     children: S
-  })] }) : /* @__PURE__ */ W(N, { children: [R(D), o && /* @__PURE__ */ c(he, {
+  })] }) : /* @__PURE__ */ W(N, { children: [R(D), o && /* @__PURE__ */ c(xe, {
     root: H,
     children: /* @__PURE__ */ c("div", {
       ...V(),
@@ -136,17 +136,17 @@ var Ae = 240, Me = {
       "aria-labelledby": t && l ? L : void 0,
       "aria-label": t && !l ? F : void 0,
       tabIndex: t ? void 0 : -1,
-      ...x ? ne : {},
+      ...x ? ie : {},
       style: {
-        ...x ? ie : {},
+        ...x ? se : {},
         ...q,
-        minWidth: Ae,
-        width: u ? B : void 0,
+        minWidth: Me,
+        width: oe,
         maxWidth: te,
         maxHeight: Y
       },
-      className: oe("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", O),
-      children: /* @__PURE__ */ c(ge, {
+      className: re("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", O),
+      children: /* @__PURE__ */ c(ve, {
         dataTest: s,
         title: l,
         titleId: L,
@@ -161,5 +161,5 @@ var Ae = 240, Me = {
   })] });
 };
 export {
-  je as PopoverSheet
+  qe as PopoverSheet
 };

package/dist/src/components/inputs/dynamic-select/types.d.ts

@@ -34,6 +34,12 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
     title?: string;
     /** @figmaProp none — app size (chips/buttons). Defaults to `'medium'`. */
     size?: 'small' | 'medium';
+    /**
+     * Option-row density in the autocomplete dropdown. `'compact'` (default) matches the Figma Menus
+     * item at 40px; `'regular'` gives a roomier 48px row. Rows still grow taller when a label wraps.
+     * No effect on the chip-group variant (≤5 options).
+     */
+    rowSize?: 'compact' | 'regular';
     /** Placeholder text shown in the autocomplete input when no value is selected. */
     placeholder?: string;
     /** @figmaProp State = true→"Disabled" */

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -82,6 +82,13 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
     helperText?: ReactNode;
     /** @figmaProp none — FieldSize (both render the 40px field) */
     size?: 'small' | 'medium';
+    /**
+     * Option-row density in the popover. `'compact'` (default) matches the Figma Menus item at 40px
+     * (`min-h-10`); `'regular'` gives a roomier 48px row (`min-h-12`). Rows still grow taller when a
+     * label wraps to a second line — this only sets the minimum. Does not affect the 32px select-all
+     * header, the input field, or single-select rows' left check column.
+     */
+    rowSize?: 'compact' | 'regular';
     /** @figmaProp Clear (trigger clear button) */
     disableClearable?: boolean;
     freeSolo?: boolean;
@@ -125,5 +132,5 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
  * ponytail: `freeSolo` is accepted (arbitrary input is emitted via onInputChange) but not turned
  * into option values; exact keyboard-parity edge cases are Chromatic/axe-gated.
  */
-export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
+export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, rowSize, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
 export {};

package/package.json

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