asma-ui-core 3.61.3 → 3.62.0

package/dist/components/data-display/tooltip/StyledTooltip.js

@@ -1,62 +1,62 @@
-import { cn as P } from "../../../helpers/cn.js";
-import { resolveSx as L } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as M, TOP_LAYER_RESET_STYLE as Y, getOpenModalDialogAncestor as j, useTopLayerRef as k } from "../../../hooks/useTopLayer.hook.js";
-import { cloneElement as C, useRef as D, useState as H } from "react";
-import { Fragment as I, jsx as a, jsxs as d } from "react/jsx-runtime";
-import { FloatingArrow as N, FloatingPortal as U, arrow as z, autoUpdate as B, flip as G, offset as W, shift as q, useDismiss as J, useFloating as K, useFocus as Q, useHover as V, useInteractions as X, useMergeRefs as Z, useRole as $ } from "@floating-ui/react";
-var ee = "#363E4A", ae = (e) => !e.title && e.title !== 0 ? e.children : /* @__PURE__ */ a(te, { ...e }), te = ({ title: e, children: o, placement: m = "top", arrow: n = !1, enterDelay: g = 500, leaveDelay: u = 0, open: f, onOpen: x, onClose: R, disableHoverListener: v, disableFocusListener: F, offsetDistance: _, className: h, slotProps: r }) => {
-  const [w, y] = H(!1), l = f !== void 0, s = f ?? w, p = D(null), E = (c) => {
-    l || y(c), c ? x?.() : R?.();
-  }, { refs: i, floatingStyles: O, context: t } = K({
-    open: s,
-    onOpenChange: E,
-    placement: m,
+import { cn as S } from "../../../helpers/cn.js";
+import { resolveSx as M } from "../../../helpers/sx.js";
+import { TOP_LAYER_PROPS as U, TOP_LAYER_RESET_STYLE as Y, getOpenModalDialogAncestor as j, shouldUsePopoverTopLayer as k, useTopLayerRef as C } from "../../../hooks/useTopLayer.hook.js";
+import { cloneElement as D, useRef as H, useState as I } from "react";
+import { Fragment as N, jsx as f, jsxs as g } from "react/jsx-runtime";
+import { FloatingArrow as z, FloatingPortal as B, arrow as G, autoUpdate as W, flip as q, offset as J, shift as K, useDismiss as Q, useFloating as V, useFocus as X, useHover as Z, useInteractions as $, useMergeRefs as ee, useRole as oe } from "@floating-ui/react";
+var te = "#363E4A", pe = (e) => !e.title && e.title !== 0 ? e.children : /* @__PURE__ */ f(re, { ...e }), re = ({ title: e, children: t, placement: u = "top", arrow: r = !1, enterDelay: x = 500, leaveDelay: R = 0, open: p, onOpen: v, onClose: y, disableHoverListener: h, disableFocusListener: F, offsetDistance: T, className: _, slotProps: n }) => {
+  const [w, E] = I(!1), s = p !== void 0, l = p ?? w, c = H(null), O = (m) => {
+    s || E(m), m ? v?.() : y?.();
+  }, { refs: a, floatingStyles: P, context: o } = V({
+    open: l,
+    onOpenChange: O,
+    placement: u,
     strategy: "fixed",
-    whileElementsMounted: B,
+    whileElementsMounted: W,
     middleware: [
-      W(_ ?? (n ? 8 : 6)),
-      G({ padding: 8 }),
+      J(T ?? (r ? 8 : 6)),
       q({ padding: 8 }),
-      ...n ? [z({ element: p })] : []
+      K({ padding: 8 }),
+      ...r ? [G({ element: c })] : []
     ]
-  }), { getReferenceProps: T, getFloatingProps: b } = X([
-    V(t, {
-      enabled: !l && !v,
+  }), { getReferenceProps: b, getFloatingProps: A } = $([
+    Z(o, {
+      enabled: !s && !h,
       delay: {
-        open: g,
-        close: u
+        open: x,
+        close: R
       },
       move: !1
     }),
-    Q(t, { enabled: !l && !F }),
-    J(t),
-    $(t, { role: "tooltip" })
-  ]), A = k(i.setFloating), S = s ? j(i.reference.current) : void 0;
-  return /* @__PURE__ */ d(I, { children: [C(o, T({
-    ref: Z([i.setReference, o.ref]),
-    ...o.props
-  })), s && /* @__PURE__ */ a(U, {
-    root: S,
-    children: /* @__PURE__ */ d("div", {
-      ref: A,
-      ...M,
-      ...b(),
+    X(o, { enabled: !s && !F }),
+    Q(o),
+    oe(o, { role: "tooltip" })
+  ]), d = l ? j(a.reference.current) : void 0, i = k(d), L = C(a.setFloating, i);
+  return /* @__PURE__ */ g(N, { children: [D(t, b({
+    ref: ee([a.setReference, t.ref]),
+    ...t.props
+  })), l && /* @__PURE__ */ f(B, {
+    root: d,
+    children: /* @__PURE__ */ g("div", {
+      ref: L,
+      ...i ? U : {},
+      ...A(),
       style: {
-        ...Y,
-        ...O,
+        ...i ? Y : {},
+        ...P,
         fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-        ...r?.tooltip?.style,
-        ...L(r?.tooltip?.sx)
+        ...n?.tooltip?.style,
+        ...M(n?.tooltip?.sx)
       },
-      className: P("z-[1500] block max-w-[320px] whitespace-normal break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-sm leading-5 text-white shadow-[0px_1px_6px_0px_rgba(0,0,0,0.15)]", h, r?.tooltip?.className),
-      children: [e, n && /* @__PURE__ */ a(N, {
-        ref: p,
-        context: t,
-        fill: ee
+      className: S("z-[1500] block max-w-[320px] whitespace-normal break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-sm leading-5 text-white shadow-[0px_1px_6px_0px_rgba(0,0,0,0.15)]", _, n?.tooltip?.className),
+      children: [e, r && /* @__PURE__ */ f(z, {
+        ref: c,
+        context: o,
+        fill: te
       })]
     })
   })] });
 };
 export {
-  ae as StyledTooltip
+  pe as StyledTooltip
 };

package/dist/components/feedback/dialog/StyledDialog.js

@@ -13,7 +13,7 @@ var $ = {
   lg: 1200,
   xl: 1536
 }, te = ({ open: t, onClose: a, children: _, dataTest: i, maxWidth: x = "sm", fullWidth: C, fullScreen: E, scroll: p = "paper", disableEscapeKeyDown: h, className: H, style: j, sx: M, classes: y, PaperProps: R, slotProps: o, onCloseText: w, showCloseIcon: v = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: W }) => {
-  const I = G(), b = u(null), c = u(!1), g = u(t), n = I ? !0 : E;
+  const I = G(), b = u(null), c = u(!1), g = u(t), n = E ?? I;
   D(() => {
     g.current && !t && o?.transition?.onExited?.(), g.current = t;
   }, [t, o]), Q(() => {

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

@@ -1,186 +1,186 @@
 import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as be } from "../../../helpers/sx.js";
-import { ChevronDownIcon as he } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as we } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as Ae } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { TOP_LAYER_PROPS as ve, TOP_LAYER_RESET_STYLE as Re, getOpenModalDialogAncestor as ke, useTopLayerRef as Fe } from "../../../hooks/useTopLayer.hook.js";
-import { outlineClass as De } from "../field-styles.js";
-import { useFormControlContext as Se } from "../../miscellaneous/FormControlContext.js";
-import { StyledFormHelperText as Ce } from "../../miscellaneous/StyledFormHelperText.js";
-import { Children as C, cloneElement as Ee, isValidElement as E, useEffect as N, useMemo as Ne, useRef as M, useState as _ } from "react";
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-import { FloatingPortal as _e, autoUpdate as qe, flip as Pe, offset as Te, shift as Ve, size as je, useClick as Be, useDismiss as Ie, useFloating as Ue, useInteractions as Ke, useMergeRefs as O, useRole as Le } from "@floating-ui/react";
-var et = ({ dataTest: q, value: P, defaultValue: H, onChange: T, error: Y, errorText: z, allowClear: V, disabled: W, readOnly: c, name: m, placeholder: w, displayEmpty: A, multiple: u, renderValue: j, fullWidth: $, className: G, style: J, sx: Q, variant: X, children: v, MenuProps: Z, onFocus: ee, onBlur: te, labelId: p }) => {
-  const i = Se(), B = `${q}-listbox`, g = X === "standard", I = Y ?? i?.error ?? !1, n = W ?? i?.disabled ?? !1, [o, y] = _(!1), [x, R] = _(!1), [re, U] = _(H), k = P !== void 0, r = k ? P : re, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, a = M(null), K = M(null), oe = (e) => {
+import { resolveSx as he } from "../../../helpers/sx.js";
+import { ChevronDownIcon as we } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as Ae } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as ve } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { TOP_LAYER_PROPS as Re, TOP_LAYER_RESET_STYLE as ke, getOpenModalDialogAncestor as Fe, shouldUsePopoverTopLayer as De, useTopLayerRef as Se } from "../../../hooks/useTopLayer.hook.js";
+import { outlineClass as Ce } from "../field-styles.js";
+import { useFormControlContext as Ee } from "../../miscellaneous/FormControlContext.js";
+import { StyledFormHelperText as Ne } from "../../miscellaneous/StyledFormHelperText.js";
+import { Children as E, cloneElement as Pe, isValidElement as N, useEffect as P, useMemo as _e, useRef as H, useState as _ } from "react";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { FloatingPortal as qe, autoUpdate as Te, flip as Le, offset as Ue, shift as Ve, size as je, useClick as Be, useDismiss as Ie, useFloating as Ke, useInteractions as Me, useMergeRefs as Y, useRole as Oe } from "@floating-ui/react";
+var rt = ({ dataTest: q, value: T, defaultValue: z, onChange: L, error: W, errorText: $, allowClear: U, disabled: G, readOnly: c, name: m, placeholder: w, displayEmpty: A, multiple: u, renderValue: V, fullWidth: J, className: Q, style: X, sx: Z, variant: ee, children: v, MenuProps: te, onFocus: re, onBlur: oe, labelId: p }) => {
+  const i = Ee(), j = `${q}-listbox`, g = ee === "standard", B = W ?? i?.error ?? !1, s = G ?? i?.disabled ?? !1, [o, y] = _(!1), [x, R] = _(!1), [se, I] = _(z), k = T !== void 0, r = k ? T : se, a = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, l = H(null), K = H(null), ne = (e) => {
     if (y(e), e) return;
     const t = document.activeElement;
-    t && t !== document.body && !a.current?.contains(t) || K.current?.focus();
-  }, { refs: d, floatingStyles: ne, context: F } = Ue({
+    t && t !== document.body && !l.current?.contains(t) || K.current?.focus();
+  }, { refs: d, floatingStyles: ae, context: F } = Ke({
     open: o,
-    onOpenChange: oe,
+    onOpenChange: ne,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: qe,
+    whileElementsMounted: Te,
     middleware: [
-      Te(4),
-      Pe({ padding: 8 }),
+      Ue(4),
+      Le({ padding: 8 }),
       Ve({ padding: 8 }),
       je({ apply({ rects: e, elements: t }) {
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: se, getFloatingProps: le } = Ke([
-    Be(F, { enabled: !n && !c }),
+  }), { getReferenceProps: le, getFloatingProps: ie } = Me([
+    Be(F, { enabled: !s && !c }),
     Ie(F),
-    Le(F, { role: "listbox" })
-  ]), ae = O([d.setReference, K]), ie = O([Fe(d.setFloating), a]), ce = Ne(() => o ? ke(d.reference.current) : void 0, [o, d]);
-  N(() => i?.setFocused(o || x), [
+    Oe(F, { role: "listbox" })
+  ]), ce = Y([d.setReference, K]), M = _e(() => o ? Fe(d.reference.current) : void 0, [o, d]), D = De(M), ue = Y([Se(d.setFloating, D), l]);
+  P(() => i?.setFocused(o || x), [
     o,
     x,
     i
-  ]), N(() => i?.setFilled(l || !!w || !!A), [
-    l,
+  ]), P(() => i?.setFilled(a || !!w || !!A), [
+    a,
     w,
     A,
     i
-  ]), N(() => {
+  ]), P(() => {
     if (!o) return;
     const e = requestAnimationFrame(() => {
-      const t = a.current?.querySelector('[role="option"][aria-selected="true"]');
+      const t = l.current?.querySelector('[role="option"][aria-selected="true"]');
       t && (t.scrollIntoView({ block: "nearest" }), t.focus());
     });
     return () => cancelAnimationFrame(e);
   }, [o]);
-  const ue = (e, t) => {
-    const b = u ? Array.isArray(r) && r.includes(e) ? r.filter((S) => S !== e) : [...Array.isArray(r) ? r : [], e] : e;
-    k || U(b), T?.({ target: {
+  const de = (e, t) => {
+    const b = u ? Array.isArray(r) && r.includes(e) ? r.filter((C) => C !== e) : [...Array.isArray(r) ? r : [], e] : e;
+    k || I(b), L?.({ target: {
       value: b,
       name: m
     } }, t), u || (y(!1), requestAnimationFrame(() => d.domReference.current?.focus()));
-  }, L = () => {
+  }, O = () => {
     const e = u ? [] : "";
-    k || U(e), T?.({ target: {
+    k || I(e), L?.({ target: {
       value: e,
       name: m
     } }, null), y(!1), R(!1);
-  }, de = C.map(v, (e) => {
-    if (!E(e)) return e;
+  }, fe = E.map(v, (e) => {
+    if (!N(e)) return e;
     const t = e.props.value;
-    return Ee(e, {
+    return Pe(e, {
       selected: u ? Array.isArray(r) && r.includes(t) : t === r,
-      onClick: () => ue(t, e.props.children)
+      onClick: () => de(t, e.props.children)
     });
-  }), fe = C.toArray(v).find((e) => E(e) && e.props.value === r), me = j ? j(r) : u && Array.isArray(r) ? C.toArray(v).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
+  }), me = E.toArray(v).find((e) => N(e) && e.props.value === r), pe = V ? V(r) : u && Array.isArray(r) ? E.toArray(v).filter((e) => N(e) && r.includes(e.props.value)).map((e) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
-  }).join(", ") : fe?.props.children, pe = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && V && l && !n && !c) {
-      e.preventDefault(), L();
+  }).join(", ") : me?.props.children, ge = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && U && a && !s && !c) {
+      e.preventDefault(), O();
       return;
     }
-    e.key !== "ArrowDown" && e.key !== "ArrowUp" || n || c || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
-      if (a.current?.querySelector('[role="option"][aria-selected="true"]')) return;
-      const t = a.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
+      if (l.current?.querySelector('[role="option"][aria-selected="true"]')) return;
+      const t = l.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
       t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
     }));
-  }, ge = (e) => {
-    const t = a.current ? Array.from(a.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
+  }, ye = (e) => {
+    const t = l.current ? Array.from(l.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
     if (t.length === 0) return;
-    const b = t.findIndex((S) => S === document.activeElement);
+    const b = t.findIndex((C) => C === document.activeElement);
     e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(b + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
-  }, D = g && (o || x), ye = n ? "text-delta-300" : D ? "text-gama-500" : "text-delta-800", xe = n ? "text-delta-300" : "text-delta-700";
+  }, S = g && (o || x), xe = s ? "text-delta-300" : S ? "text-gama-500" : "text-delta-800", be = s ? "text-delta-300" : "text-delta-700";
   return /* @__PURE__ */ h("div", {
-    className: f("group relative inline-flex flex-col", $ && "w-full", G),
+    className: f("group relative inline-flex flex-col", J && "w-full", Q),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...be(Q),
-      ...J
+      ...he(Z),
+      ...X
     },
     children: [
       /* @__PURE__ */ h("button", {
-        ref: ae,
+        ref: ce,
         type: "button",
         "data-testid": q,
-        ...se({ onKeyDown: pe }),
+        ...le({ onKeyDown: ge }),
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": o,
-        "aria-controls": B,
+        "aria-controls": j,
         "aria-labelledby": p,
         "aria-label": p ? void 0 : m,
-        "aria-disabled": n ? !0 : void 0,
-        disabled: n,
+        "aria-disabled": s ? !0 : void 0,
+        disabled: s,
         onFocus: (e) => {
-          R(!0), ee?.(e);
+          R(!0), re?.(e);
         },
         onBlur: (e) => {
-          R(!1), te?.(e);
+          R(!1), oe?.(e);
         },
-        style: { minWidth: l && !g ? 105 : void 0 },
-        className: f("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", D ? "bg-gama-50" : "bg-transparent", ye, g && "min-w-0", n && "cursor-not-allowed", c && "pointer-events-none"),
+        style: { minWidth: a && !g ? 105 : void 0 },
+        className: f("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", S ? "bg-gama-50" : "bg-transparent", xe, g && "min-w-0", s && "cursor-not-allowed", c && "pointer-events-none"),
         children: [
-          /* @__PURE__ */ s("span", {
-            className: f("min-w-0 flex-1 truncate", !l && "text-delta-500"),
-            children: l || A ? me : w
+          /* @__PURE__ */ n("span", {
+            className: f("min-w-0 flex-1 truncate", !a && "text-delta-500"),
+            children: a || A ? pe : w
           }),
           /* @__PURE__ */ h("span", {
             className: "flex items-center gap-1",
-            children: [V && l && !n && /* @__PURE__ */ s("span", {
+            children: [U && a && !s && /* @__PURE__ */ n("span", {
               "aria-hidden": "true",
               "data-testid": "select-clear-button",
               className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
               onClick: (e) => {
-                e.stopPropagation(), L();
+                e.stopPropagation(), O();
               },
-              children: /* @__PURE__ */ s(we, {
+              children: /* @__PURE__ */ n(Ae, {
                 width: 18,
                 height: 18
               })
-            }), /* @__PURE__ */ s(he, {
+            }), /* @__PURE__ */ n(we, {
               width: 24,
               height: 24,
-              className: f("shrink-0 transition-transform", D ? "text-gama-500" : xe, o && "rotate-180")
+              className: f("shrink-0 transition-transform", S ? "text-gama-500" : be, o && "rotate-180")
             })]
           }),
-          /* @__PURE__ */ s("div", { className: De({
+          /* @__PURE__ */ n("div", { className: Ce({
             focused: o || x,
-            error: I,
-            disabled: n,
+            error: B,
+            disabled: s,
             readOnly: c,
             borderless: g
           }) })
         ]
       }),
-      o && /* @__PURE__ */ s(_e, {
-        root: ce,
-        children: /* @__PURE__ */ s("ul", {
-          ref: ie,
-          id: B,
+      o && /* @__PURE__ */ n(qe, {
+        root: M,
+        children: /* @__PURE__ */ n("ul", {
+          ref: ue,
+          id: j,
           role: "listbox",
           "aria-labelledby": p,
           "aria-label": p ? void 0 : m,
-          ...ve,
+          ...D ? Re : {},
           style: {
-            ...Re,
-            ...ne,
+            ...D ? ke : {},
+            ...ae,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
-          ...le(),
-          onKeyDown: ge,
-          className: f("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)]", Z?.className),
-          children: de
+          ...ie(),
+          onKeyDown: ye,
+          className: f("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)]", te?.className),
+          children: fe
         })
       }),
-      I && /* @__PURE__ */ h(Ce, {
+      B && /* @__PURE__ */ h(Ne, {
         className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-        children: [/* @__PURE__ */ s(Ae, {
+        children: [/* @__PURE__ */ n(ve, {
           width: 20,
           height: 20
-        }), z ?? "Required"]
+        }), $ ?? "Required"]
       })
     ]
   });
 };
 export {
-  et as StyledSelect
+  rt as StyledSelect
 };

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

@@ -1,33 +1,33 @@
-import { cn as $ } from "../../../helpers/cn.js";
+import { cn as L } from "../../../helpers/cn.js";
 import { ChevronDownIcon as He } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as Te } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as Ye } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as Oe } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as Be } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as q } from "../checkbox/base-ui/StyledCheckbox.js";
-import { TOP_LAYER_PROPS as qe, TOP_LAYER_RESET_STYLE as Ge, getOpenModalDialogAncestor as Je, useTopLayerRef as Qe } from "../../../hooks/useTopLayer.hook.js";
-import { LoadingIcon as Xe } from "../../../table/shared-components/LoadingIcon.js";
-import G from "./StyledSelectAutocomplete.module.js";
-import { useEffect as Ze, useMemo as L, useRef as J, useState as w } from "react";
+import { CloseIcon as Ye } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as Oe } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as Be } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as qe } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as J } from "../checkbox/base-ui/StyledCheckbox.js";
+import { TOP_LAYER_PROPS as Ge, TOP_LAYER_RESET_STYLE as Je, getOpenModalDialogAncestor as Qe, shouldUsePopoverTopLayer as Xe, useTopLayerRef as Ze } from "../../../hooks/useTopLayer.hook.js";
+import { LoadingIcon as Ke } from "../../../table/shared-components/LoadingIcon.js";
+import Q from "./StyledSelectAutocomplete.module.js";
+import { useEffect as et, useMemo as _, useRef as X, useState as w } from "react";
 import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import { FloatingPortal as Ke, autoUpdate as et, flip as tt, offset as rt, shift as lt, size as st, useDismiss as ot, useFloating as at, useInteractions as nt, useMergeRefs as Q, useRole as ct } from "@floating-ui/react";
-var it = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), X = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, getOptionLabel: K, getOptionKey: R, isOptionEqualToValue: _, renderOption: E, renderValue: j, filterOptions: k, loading: z, loadingText: ee = "Loading…", noOptionsText: te = "No options", disabled: D, readOnly: m, size: re = "small", disableClearable: le, disableCloseOnSelect: se, popupIcon: oe, autoHeight: ae, multiple: ne, allowSelectAll: ce, selectAllLabel: F = "Select all", fullWidth: ie, classes: de, inputValue: S, onInputChange: ue, open: W, onOpen: pe, onClose: me, className: fe, wrapperClassName: he, getOptionDisabled: ge, slotProps: U }) {
-  const o = ne === !0, n = K ?? it, C = (e, t) => _ ? _(e, t) : e === t, [be, xe] = w(!1), a = W ?? be, f = (e) => {
-    e && (m || D) || (W === void 0 && xe(e), e ? pe?.() : me?.());
-  }, [we, V] = w(""), h = S ?? we, A = (e, t, r) => {
-    S === void 0 && V(t), ue?.(e, t, r);
-  }, [b, I] = w(null), ye = J([]), H = J(null), [ve, Ne] = w(null), [Re, De] = w(null), c = o ? Array.isArray(v) ? v : [] : [], g = o ? null : v ?? null, T = !o && g !== null ? n(g) : "";
-  Ze(() => {
-    S !== void 0 || o || V(T);
+import { FloatingPortal as tt, autoUpdate as rt, flip as lt, offset as st, shift as ot, size as at, useDismiss as nt, useFloating as ct, useInteractions as it, useMergeRefs as Z, useRole as dt } from "@floating-ui/react";
+var ut = (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 St({ dataTest: l, options: p, renderInput: ee, value: v, onChange: N, getOptionLabel: te, getOptionKey: R, isOptionEqualToValue: E, renderOption: j, renderValue: z, filterOptions: $, loading: F, loadingText: re = "Loading…", noOptionsText: le = "No options", disabled: D, readOnly: m, size: se = "small", disableClearable: oe, disableCloseOnSelect: ae, popupIcon: ne, autoHeight: ce, multiple: ie, allowSelectAll: de, selectAllLabel: W = "Select all", fullWidth: ue, classes: pe, inputValue: S, onInputChange: me, open: U, onOpen: fe, onClose: he, className: ge, wrapperClassName: be, getOptionDisabled: xe, slotProps: T }) {
+  const o = ie === !0, n = te ?? ut, C = (e, t) => E ? E(e, t) : e === t, [we, ye] = w(!1), a = U ?? we, f = (e) => {
+    e && (m || D) || (U === void 0 && ye(e), e ? fe?.() : he?.());
+  }, [ve, V] = w(""), h = S ?? ve, P = (e, t, r) => {
+    S === void 0 && V(t), me?.(e, t, r);
+  }, [b, k] = w(null), Ne = X([]), H = X(null), [Re, De] = w(null), [Se, Ce] = w(null), c = o ? Array.isArray(v) ? v : [] : [], g = o ? null : v ?? null, Y = !o && g !== null ? n(g) : "";
+  et(() => {
+    S !== void 0 || o || V(Y);
   }, [
     S,
     o,
-    T
+    Y
   ]);
-  const Y = (e) => o ? c.some((t) => C(e, t)) : g !== null && C(e, g), O = L(() => {
+  const O = (e) => o ? c.some((t) => C(e, t)) : g !== null && C(e, g), B = _(() => {
     const e = [...p];
-    if (k) return k(e, { inputValue: h });
+    if ($) return $(e, { inputValue: h });
     const t = !o && g !== null ? n(g).toLowerCase() : null;
     if (!h || h.toLowerCase() === t) return e;
     const r = h.toLowerCase();
@@ -35,60 +35,60 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
   }, [
     p,
     h,
-    k,
+    $,
     v
-  ]), i = L(() => O.slice(0, 100), [O]), { refs: P, floatingStyles: Se, context: B } = at({
+  ]), i = _(() => B.slice(0, 100), [B]), { refs: A, floatingStyles: Pe, context: q } = ct({
     open: a,
     onOpenChange: f,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: et,
+    whileElementsMounted: rt,
     middleware: [
-      rt(4),
-      tt({ padding: 8 }),
+      st(4),
       lt({ padding: 8 }),
-      st({ apply({ rects: e, availableHeight: t }) {
-        Ne(e.reference.width), De(ae ? t - 8 : Math.min(t - 8, 320));
+      ot({ padding: 8 }),
+      at({ apply({ rects: e, availableHeight: t }) {
+        De(e.reference.width), Ce(ce ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: Ce, getFloatingProps: Ae, getItemProps: Pe } = nt([ot(B), ct(B, { role: "listbox" })]), $e = Q([P.setReference]), ke = Q([Qe(P.setFloating)]), Ie = L(() => a ? Je(P.reference.current) : void 0, [a, P]), M = (e, t) => {
+  }), { getReferenceProps: Ae, getFloatingProps: Le, getItemProps: $e } = it([nt(q), dt(q, { role: "listbox" })]), ke = Z([A.setReference]), G = _(() => a ? Qe(A.reference.current) : void 0, [a, A]), I = Xe(G), Ie = Z([Ze(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 }), A(e, "", "reset"), se || f(!1);
+      N?.(e, d, r ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), ae || f(!1);
     } else
-      N?.(e, t, "selectOption", { option: t }), A(e, n(t), "reset"), f(!1);
+      N?.(e, t, "selectOption", { option: t }), P(e, n(t), "reset"), f(!1);
   }, Me = (e) => {
-    N?.(e, o ? [] : null, "clear", void 0), A(e, "", "clear");
-  }, Le = (e) => {
+    N?.(e, o ? [] : null, "clear", void 0), P(e, "", "clear");
+  }, _e = (e) => {
     if (e.key === "Enter" && a && b != null && i[b] != null) {
       e.preventDefault();
       const t = i[b];
-      X(t) || M(e, t);
+      K(t) || M(e, t);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !a) {
-        I(null), f(!0);
+        k(null), f(!0);
         return;
       }
       if (i.length === 0) return;
       const t = e.key === "ArrowDown" ? 1 : -1;
-      I((r) => r == null ? t > 0 ? 0 : i.length - 1 : (r + t + i.length) % i.length);
+      k((r) => r == null ? t > 0 ? 0 : i.length - 1 : (r + t + i.length) % i.length);
     }
-  }, _e = !le && !m && !D && (o ? c.length > 0 : g !== null), Ee = (e) => {
+  }, Ee = !oe && !m && !D && (o ? c.length > 0 : g !== null), je = (e) => {
     e.preventDefault(), !(D || m) && (H.current?.focus(), f(!a));
-  }, je = o ? j ? j(c, ({ index: e }) => ({ "data-index": e })) : c.map((e, t) => /* @__PURE__ */ s(Be, {
+  }, ze = o ? z ? z(c, ({ index: e }) => ({ "data-index": e })) : c.map((e, t) => /* @__PURE__ */ s(qe, {
     dataTest: `selected-chip-${n(e)}`,
     label: n(e),
     readOnly: m,
     onDelete: m ? void 0 : (r) => M(r, e)
-  }, R ? R(e) : `${n(e)}-${t}`)) : void 0, ze = /* @__PURE__ */ y("span", {
+  }, R ? R(e) : `${n(e)}-${t}`)) : void 0, Fe = /* @__PURE__ */ y("span", {
     className: "flex items-center gap-1",
     children: [
-      z && /* @__PURE__ */ s(Xe, {
+      F && /* @__PURE__ */ s(Ke, {
         width: 20,
         height: 20,
         className: "animate-spin"
       }),
-      _e && /* @__PURE__ */ s("button", {
+      Ee && /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Clear",
         "data-testid": `${l}-clear`,
@@ -96,7 +96,7 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         onMouseDown: (e) => {
           e.preventDefault(), Me(e);
         },
-        children: /* @__PURE__ */ s(Te, {
+        children: /* @__PURE__ */ s(Ye, {
           width: 20,
           height: 20,
           className: "text-delta-700"
@@ -108,30 +108,30 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         "aria-expanded": a,
         "data-testid": `${l}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
-        onMouseDown: Ee,
-        children: oe ?? (o ? /* @__PURE__ */ s(Oe, {
+        onMouseDown: je,
+        children: ne ?? (o ? /* @__PURE__ */ s(Be, {
           width: 24,
           height: 24,
           className: "text-delta-700"
         }) : /* @__PURE__ */ s(He, {
           width: 24,
           height: 24,
-          className: $(G["select-custom-icon"], "text-delta-700 transition-transform", a && "rotate-180")
+          className: L(Q["select-custom-icon"], "text-delta-700 transition-transform", a && "rotate-180")
         }))
       })
     ]
-  }), Fe = {
+  }), We = {
     disabled: D,
-    size: re,
+    size: se,
     fullWidth: !0,
     value: h,
     onChange: (e) => {
-      A(e, e.target.value, "input"), a || f(!0);
+      P(e, e.target.value, "input"), a || f(!0);
     },
-    onKeyDown: Le,
+    onKeyDown: _e,
     slotProps: {
       htmlInput: {
-        ...Ce(),
+        ...Ae(),
         ref: H,
         onClick: () => f(!0),
         role: "combobox",
@@ -142,16 +142,16 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         readOnly: m
       },
       input: {
-        ref: $e,
-        startAdornment: je,
-        endAdornment: ze
+        ref: ke,
+        startAdornment: ze,
+        endAdornment: Fe
       }
     }
-  }, We = $("box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-700 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"), Ue = (e, t, r) => {
+  }, Ue = L("box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-700 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"), Te = (e, t, r) => {
     const { key: d, ...u } = e;
     return /* @__PURE__ */ y("li", {
       ...u,
-      children: [o ? /* @__PURE__ */ s(q, {
+      children: [o ? /* @__PURE__ */ s(J, {
         dataTest: `${l}-${n(t)}-checkbox`,
         checked: r.selected,
         size: "small",
@@ -159,7 +159,7 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         decorative: !0
       }) : /* @__PURE__ */ s("span", {
         className: "w-5",
-        children: r.selected && /* @__PURE__ */ s(Ye, {
+        children: r.selected && /* @__PURE__ */ s(Oe, {
           width: 20,
           height: 20,
           className: "text-gama-500"
@@ -170,54 +170,54 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
       })]
     }, d);
   }, Ve = (e, t) => {
-    const r = ge?.(e) ?? X(e), d = {
-      ...Pe({
+    const r = xe?.(e) ?? K(e), d = {
+      ...$e({
         onMouseDown: (x) => x.preventDefault(),
         onClick: (x) => {
           r || M(x, e);
         },
-        onMouseMove: () => I(r ? null : t)
+        onMouseMove: () => k(r ? null : t)
       }),
       key: R ? String(R(e)) : `${n(e)}-${t}`,
       ref: (x) => {
-        ye.current[t] = x;
+        Ne.current[t] = x;
       },
       role: "option",
       id: `${l}-option-${t}`,
-      "aria-selected": Y(e),
+      "aria-selected": O(e),
       "aria-disabled": r || void 0,
       "data-active": b === t ? "" : void 0,
-      className: We
+      className: Ue
     }, u = {
-      selected: Y(e),
+      selected: O(e),
       index: t,
       inputValue: h
     };
-    return E ? E(d, e, u) : Ue(d, e, u);
+    return j ? j(d, e, u) : Te(d, e, u);
   };
   return /* @__PURE__ */ y("div", {
-    className: $(G.styledSelectAutocompleteWrapper, !ie && "w-auto", he, fe),
-    children: [Z(Fe), a && /* @__PURE__ */ s(Ke, {
-      root: Ie,
+    className: L(Q.styledSelectAutocompleteWrapper, !ue && "w-auto", be, ge),
+    children: [ee(We), a && /* @__PURE__ */ s(tt, {
+      root: G,
       children: /* @__PURE__ */ y("ul", {
-        ref: ke,
-        ...qe,
+        ref: Ie,
+        ...I ? Ge : {},
         style: {
-          ...Ge,
-          ...Se,
-          width: ve ?? void 0,
-          maxHeight: Re ?? void 0,
+          ...I ? Je : {},
+          ...Pe,
+          width: Re ?? void 0,
+          maxHeight: Se ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-          ...U?.popper?.style
+          ...T?.popper?.style
         },
-        ...Ae(),
-        className: $("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)]", de?.listbox, U?.popper?.className),
-        children: [ce && o && /* @__PURE__ */ y("div", {
+        ...Le(),
+        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)]", pe?.listbox, T?.popper?.className),
+        children: [de && 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, {
+          children: [/* @__PURE__ */ s(J, {
             dataTest: `${l}-select-all`,
-            "aria-label": F,
+            "aria-label": W,
             checked: p.length > 0 && c.length === p.length,
             size: "small",
             hideWrapper: !0,
@@ -228,21 +228,21 @@ function Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
             }
           }), /* @__PURE__ */ s("span", {
             className: "flex-1 truncate py-2",
-            children: F
+            children: W
           })]
-        }), z ? /* @__PURE__ */ s("li", {
+        }), F ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: ee
+          children: re
         }) : i.length === 0 ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: te
+          children: le
         }) : i.map(Ve)]
       })
     })]
   });
 }
 export {
-  Rt as StyledSelectAutocomplete
+  St as StyledSelectAutocomplete
 };

package/dist/components/mui-compat/Popper.js

@@ -1,46 +1,46 @@
-import { TOP_LAYER_PROPS as _, TOP_LAYER_RESET_STYLE as v, getOpenModalDialogAncestor as x, useTopLayerRef as y } from "../../hooks/useTopLayer.hook.js";
-import { useState as L } from "react";
+import { TOP_LAYER_PROPS as T, TOP_LAYER_RESET_STYLE as _, getOpenModalDialogAncestor as y, shouldUsePopoverTopLayer as L, useTopLayerRef as x } from "../../hooks/useTopLayer.hook.js";
+import { useState as S } from "react";
 import { jsx as l } from "react/jsx-runtime";
-import { FloatingPortal as S, autoUpdate as b, flip as A, shift as O, useFloating as F, useMergeRefs as Y } from "@floating-ui/react";
-var w = {
-  ...v,
+import { FloatingPortal as A, autoUpdate as O, flip as b, shift as Y, useFloating as w, useMergeRefs as F } from "@floating-ui/react";
+var M = {
+  ..._,
   background: "transparent",
   border: 0,
   overflow: "visible",
   padding: 0
-}, k = ({ open: t = !1, anchorEl: r, id: f, placement: d = "bottom", transition: p, disablePortal: m, className: g, style: c, children: o }) => {
-  const [n, a] = L(!0);
-  t && n && a(!1);
-  const e = x(r), { refs: i, floatingStyles: u, placement: R } = F({
-    open: t,
-    placement: d,
-    strategy: e ? "fixed" : "absolute",
-    whileElementsMounted: b,
+}, k = ({ open: e = !1, anchorEl: r, id: d, placement: f = "bottom", transition: p, disablePortal: m, className: u, style: c, children: t }) => {
+  const [n, s] = S(!0);
+  e && n && s(!1);
+  const a = y(r), o = L(a), { refs: g, floatingStyles: P, placement: E } = w({
+    open: e,
+    placement: f,
+    strategy: "fixed",
+    whileElementsMounted: O,
     elements: { reference: r ?? void 0 },
-    middleware: [A({ padding: 8 }), O({ padding: 8 })]
-  }), E = y(i.setFloating), P = Y([e ? E : i.setFloating]);
-  if (!(t || p && !n)) return null;
-  const T = typeof o == "function" ? o({
+    middleware: [b({ padding: 8 }), Y({ padding: 8 })]
+  }), R = F([x(g.setFloating, o)]);
+  if (!(e || p && !n)) return null;
+  const v = typeof t == "function" ? t({
     TransitionProps: {
-      in: t,
-      onExited: () => a(!0)
+      in: e,
+      onExited: () => s(!0)
     },
-    placement: R
-  }) : o, s = /* @__PURE__ */ l("div", {
-    ref: P,
-    id: f,
-    ...e ? _ : {},
+    placement: E
+  }) : t, i = /* @__PURE__ */ l("div", {
+    ref: R,
+    id: d,
+    ...o ? T : {},
     style: {
-      ...e ? w : {},
-      ...u,
+      ...o ? M : {},
+      ...P,
       ...c
     },
-    className: g,
-    children: T
+    className: u,
+    children: v
   });
-  return m ? s : /* @__PURE__ */ l(S, {
-    root: e,
-    children: s
+  return m ? i : /* @__PURE__ */ l(A, {
+    root: a,
+    children: i
   });
 };
 export {

package/dist/components/navigation/drawer/StyledDrawer.js

@@ -1,65 +1,51 @@
-import { cn as u } from "../../../helpers/cn.js";
-import { resolveSx as c } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as _, TOP_LAYER_RESET_STYLE as L, getOpenModalDialogAncestor as S, useTopLayerRef as T } from "../../../hooks/useTopLayer.hook.js";
-import { useFocusTrap as b } from "../../../hooks/useFocusTrap.hook.js";
-import { useEffect as m, useRef as k } from "react";
-import { jsx as d, jsxs as D } from "react/jsx-runtime";
-import { FloatingPortal as P } from "@floating-ui/react";
-var O = {
+import { cn as n } from "../../../helpers/cn.js";
+import { resolveSx as f } from "../../../helpers/sx.js";
+import { getOpenModalDialogAncestor as w } from "../../../hooks/useTopLayer.hook.js";
+import { useFocusTrap as h } from "../../../hooks/useFocusTrap.hook.js";
+import { useEffect as b, useRef as k } from "react";
+import { jsx as m, jsxs as E } from "react/jsx-runtime";
+import { FloatingPortal as S } from "@floating-ui/react";
+var _ = {
   left: "inset-y-0 left-0 h-full",
   right: "inset-y-0 right-0 h-full",
   top: "inset-x-0 top-0 w-full",
   bottom: "inset-x-0 bottom-0 w-full"
-}, A = {
+}, D = {
   left: "-translate-x-full",
   right: "translate-x-full",
   top: "-translate-y-full",
   bottom: "translate-y-full"
-}, K = ({ open: e = !1, onClose: n, anchor: a = "left", variant: p = "temporary", hideBackdrop: v, className: y, sx: x, PaperProps: i, ModalProps: E, anchorEl: h, children: R }) => {
-  const r = p === "temporary", s = S(h), o = s !== void 0, l = k(null), g = T((t) => {
-    l.current = t instanceof HTMLDivElement ? t : null;
-  }), w = o ? g : (t) => {
-    l.current = t;
-  };
-  return m(() => {
-    if (!e || !r) return;
-    const t = (f) => {
-      f.key === "Escape" && n?.(f, "escapeKeyDown");
+}, T = ({ open: t = !1, onClose: o, anchor: l = "left", variant: u = "temporary", hideBackdrop: d, className: c, sx: p, PaperProps: a, ModalProps: x, anchorEl: y, children: v }) => {
+  const e = u === "temporary", g = w(y), i = k(null);
+  return b(() => {
+    if (!t || !e) return;
+    const r = (s) => {
+      s.key === "Escape" && o?.(s, "escapeKeyDown");
     };
-    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
   }, [
+    t,
     e,
-    r,
-    n
-  ]), b(e && r, l), m(() => {
-    if (!e || !o) return;
-    const t = l.current;
-    if (!(!t || typeof t.showPopover != "function"))
-      try {
-        t.matches(":popover-open") || t.showPopover();
-      } catch {
-      }
-  }, [e, o]), r && !e && !E?.keepMounted ? null : /* @__PURE__ */ D(P, {
-    root: s,
-    children: [r && !v && e && /* @__PURE__ */ d("div", {
+    o
+  ]), h(t && e, i), e && !t && !x?.keepMounted ? null : /* @__PURE__ */ E(S, {
+    root: g,
+    children: [e && !d && t && /* @__PURE__ */ m("div", {
       className: "fixed inset-0 z-[1200] bg-[#626e7eb2]",
-      onClick: (t) => n?.(t, "backdropClick")
-    }), /* @__PURE__ */ d("div", {
-      ref: w,
-      ...o ? _ : {},
-      role: r ? "dialog" : void 0,
-      "aria-modal": r && e ? !0 : void 0,
-      "aria-hidden": !e,
-      className: u("fixed z-[1200] overflow-auto bg-white transition-transform duration-300", e && "shadow-[0px_4px_40px_0px_#22213366]", O[a], !e && u(A[a], "pointer-events-none"), y, i?.className),
+      onClick: (r) => o?.(r, "backdropClick")
+    }), /* @__PURE__ */ m("div", {
+      ref: i,
+      role: e ? "dialog" : void 0,
+      "aria-modal": e && t ? !0 : void 0,
+      "aria-hidden": !t,
+      className: n("fixed z-[1200] overflow-auto bg-white transition-transform duration-300", t && "shadow-[0px_4px_40px_0px_#22213366]", _[l], !t && n(D[l], "pointer-events-none"), c, a?.className),
       style: {
-        ...o ? L : {},
-        ...c(x),
-        ...c(i?.sx)
+        ...f(p),
+        ...f(a?.sx)
       },
-      children: R
+      children: v
     })]
   });
 };
 export {
-  K as StyledDrawer
+  T as StyledDrawer
 };

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

@@ -1,41 +1,44 @@
-import { cn as O } from "../../../helpers/cn.js";
-import { resolveSx as c } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as L, TOP_LAYER_RESET_STYLE as M, getOpenModalDialogAncestor as z, useTopLayerRef as D } from "../../../hooks/useTopLayer.hook.js";
-import { useEffect as N, useMemo as k, useState as d } from "react";
-import { jsx as u } from "react/jsx-runtime";
-import { FloatingPortal as C, autoUpdate as U, flip as Y, offset as H, shift as K, useDismiss as $, useFloating as j, useInteractions as I, useMergeRefs as q } from "@floating-ui/react";
-var B = {
+import { cn as E } from "../../../helpers/cn.js";
+import { resolveSx as d } from "../../../helpers/sx.js";
+import { TOP_LAYER_PROPS as M, TOP_LAYER_RESET_STYLE as z, getOpenModalDialogAncestor as D, shouldUsePopoverTopLayer as N, useTopLayerRef as U } from "../../../hooks/useTopLayer.hook.js";
+import { useEffect as k, useMemo as C, useState as m } from "react";
+import { jsx as v } from "react/jsx-runtime";
+import { FloatingPortal as Y, autoUpdate as H, flip as K, offset as $, shift as j, useDismiss as I, useFloating as q, useInteractions as B, useMergeRefs as G } from "@floating-ui/react";
+var J = {
   vertical: "bottom",
   horizontal: "left"
-}, G = {
+}, Q = {
   vertical: "top",
   horizontal: "left"
-}, J = (e, o) => `${o.vertical === "bottom" ? "top" : o.vertical === "top" ? "bottom" : e.vertical === "top" ? "top" : "bottom"}${e.horizontal === "left" ? "-start" : e.horizontal === "right" ? "-end" : ""}`, te = ({ open: e, anchorEl: o, onClose: m, anchorOrigin: l = B, transformOrigin: n = G, id: v, className: g, sx: h, slotProps: r, onClick: y, children: R, keepMounted: P = !1 }) => {
-  const _ = k(() => J(l, n), [l, n]), [p, x] = d(e);
-  e && !p && x(!0);
-  const a = e || P && p, s = z(o), [f, w] = d(s);
-  o && f !== s && w(s);
-  const { refs: i, floatingStyles: S, context: T } = j({
+}, V = (e, o) => `${o.vertical === "bottom" ? "top" : o.vertical === "top" ? "bottom" : e.vertical === "top" ? "top" : "bottom"}${e.horizontal === "left" ? "-start" : e.horizontal === "right" ? "-end" : ""}`, re = ({ open: e, anchorEl: o, onClose: g, anchorOrigin: f = J, transformOrigin: c = Q, id: y, className: h, sx: P, slotProps: a, onClick: R, children: _, keepMounted: x = !1 }) => {
+  const T = C(() => V(f, c), [f, c]), [u, w] = m(e);
+  e && !u && w(!0);
+  const i = e || x && u, n = D(o), [l, L] = m(n);
+  o && l !== n && L(n);
+  const { refs: p, floatingStyles: S, context: b } = q({
     open: e,
-    placement: _,
+    placement: T,
     strategy: "fixed",
-    whileElementsMounted: U,
+    whileElementsMounted: H,
     elements: { reference: o ?? void 0 },
     middleware: [
-      H(4),
-      Y({ padding: 8 }),
-      K({ padding: 8 })
+      $(4),
+      K({ padding: 8 }),
+      j({ padding: 8 })
     ],
-    onOpenChange: (t, E, F) => {
-      t || m?.(E ?? {}, F === "escape-key" ? "escapeKeyDown" : "backdropClick");
+    onOpenChange: (t, s, O) => {
+      t || g?.(s ?? {}, O === "escape-key" ? "escapeKeyDown" : "backdropClick");
     }
-  }), { getFloatingProps: b } = I([$(T, {
-    outsidePress: !0,
+  }), { getFloatingProps: A } = B([I(b, {
+    outsidePress: (t) => {
+      const s = t.target;
+      return !(o instanceof Element && s instanceof Node && o.contains(s));
+    },
     escapeKey: !0
-  })]), A = q([D(i.setFloating)]);
-  return N(() => {
-    if (!a) return;
-    const t = i.floating.current;
+  })]), r = N(l), F = G([U(p.setFloating, r)]);
+  return k(() => {
+    if (!i || !r) return;
+    const t = p.floating.current;
     if (!(!t || typeof t.showPopover != "function"))
       try {
         e && !t.matches(":popover-open") && t.showPopover(), !e && t.matches(":popover-open") && t.hidePopover();
@@ -43,28 +46,29 @@ var B = {
       }
   }, [
     e,
-    a,
-    i.floating
-  ]), a ? /* @__PURE__ */ u(C, {
-    root: f,
-    children: /* @__PURE__ */ u("div", {
-      ref: A,
-      id: v,
-      ...L,
+    i,
+    r,
+    p.floating
+  ]), i ? /* @__PURE__ */ v(Y, {
+    root: l,
+    children: /* @__PURE__ */ v("div", {
+      ref: F,
+      id: y,
+      ...r ? M : {},
       style: {
-        ...M,
+        ...r ? z : {},
         ...e ? S : {},
-        ...c(h),
-        ...c(r?.paper?.sx),
-        ...r?.paper?.style,
+        ...d(P),
+        ...d(a?.paper?.sx),
+        ...a?.paper?.style,
         ...e ? null : { display: "none" }
       },
-      ...e ? b({ onClick: y }) : {},
-      className: O("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", g ?? "my-1", r?.paper?.className),
-      children: R
+      ...e ? A({ onClick: R }) : {},
+      className: E("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", h ?? "my-1", a?.paper?.className),
+      children: _
     })
   }) : null;
 };
 export {
-  te as StyledPopover
+  re as StyledPopover
 };

package/dist/hooks/useTopLayer.hook.js

@@ -1,25 +1,29 @@
-import { useCallback as r } from "react";
-var n = { popover: "manual" }, a = {
+import { useCallback as t } from "react";
+var a = { popover: "manual" }, i = {
   margin: 0,
   inset: "auto"
 };
-function i(e) {
-  if (!(e instanceof Element)) return;
-  const o = e.closest("dialog");
-  return o instanceof HTMLDialogElement && o.open ? o : void 0;
+function u(o) {
+  if (!(o instanceof Element)) return;
+  const r = o.closest("dialog");
+  return r instanceof HTMLDialogElement && r.open ? r : void 0;
 }
-function p(e) {
-  return r((o) => {
-    if (e(o), !!o)
+function p(o) {
+  return o == null;
+}
+function c(o, r = !0) {
+  return t((e) => {
+    if (o(e), !(!e || !r))
       try {
-        typeof o.showPopover == "function" && !o.matches(":popover-open") && o.showPopover();
+        typeof e.showPopover == "function" && !e.matches(":popover-open") && e.showPopover();
       } catch {
       }
-  }, [e]);
+  }, [o, r]);
 }
 export {
-  n as TOP_LAYER_PROPS,
-  a as TOP_LAYER_RESET_STYLE,
-  i as getOpenModalDialogAncestor,
-  p as useTopLayerRef
+  a as TOP_LAYER_PROPS,
+  i as TOP_LAYER_RESET_STYLE,
+  u as getOpenModalDialogAncestor,
+  p as shouldUsePopoverTopLayer,
+  c as useTopLayerRef
 };

package/dist/src/components/data-display/tooltip/StyledTooltip.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { Placement } from '@floating-ui/react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
 interface TooltipSlotProps {
     tooltip?: {
         sx?: unknown;

package/dist/src/components/feedback/dialog/StyledDialog.d.ts

@@ -20,6 +20,7 @@ export interface IStyledDialogProps {
     dataTest: string;
     maxWidth?: DialogMaxWidth;
     fullWidth?: boolean;
+    /** Defaults to `true` on mobile (≤743px); pass `false` to keep the windowed paper there too. */
     fullScreen?: boolean;
     scroll?: 'paper' | 'body';
     disableEscapeKeyDown?: boolean;

package/dist/src/components/mui-compat/Popper.d.ts

@@ -25,9 +25,9 @@ export interface PopperProps {
  * `TransitionProps` (`in`/`onExited`) so a child `Fade` can animate and unmount. Public props
  * preserved (DEC-003). TASK-403.
  *
- * When `anchorEl` sits inside an open modal `<dialog>` the popper portals into that dialog and joins
- * the top layer instead of the default `document.body` portal — a body portal is both occluded by
- * the dialog and `inert`, so the popper looks dead on click. See `useTopLayer.hook`.
+ * Body-portalled instances join the browser **top layer** (nested under a filter `StyledPopover`
+ * otherwise paints under it). When `anchorEl` sits inside an open modal `<dialog>`, portal into
+ * that dialog and skip the Popover API — see `shouldUsePopoverTopLayer`.
  */
 export declare const Popper: ({ open, anchorEl, id, placement, transition, disablePortal, className, style, children, }: PopperProps) => JSX.Element | null;
 export {};

package/dist/src/components/navigation/drawer/StyledDrawer.d.ts

@@ -28,6 +28,9 @@ export interface DrawerProps {
  * Sliding edge panel (replaces MUI `Drawer`). Portalled, slides from `anchor`, temporary variant
  * shows a backdrop and closes on backdrop-click / Escape. Public props preserved (DEC-003). TASK-304.
  *
+ * When the trigger is inside a modal `<dialog>`, portals into that dialog (inertness) and stacks with
+ * z-index — no nested Popover API (mobile Safari stacks nested `showPopover` under the dialog).
+ *
  * @figmaNode none — no dedicated Figma drawer/side-sheet. As a modal edge-panel it reuses the DS
  * **modal family** tokens established by `StyledDialog`: overlay `bg/modal` #626e7eb2 (delta-600 @70%)
  * + Dialogue-popup elevation (#22213366, 0 4 40). Edge panels are flush (no radius); content is

package/dist/src/components/utils/popover/StyledPopover.d.ts

@@ -35,8 +35,10 @@ export interface StyledPopoverProps {
  * so the base paper uses the DS floating-surface defaults: white, radius **4** (Figma `menus`/
  * `text-field` radius token), and the **Float** elevation (drop-shadow `0 1 12 rgba(0,0,0,.15)`).
  * Styled consumers override the paper — `StyledMenu` adds the delta-300 border + Menus shadow
- * (`0 2 4 rgba(34,33,51,.15)`), the date-picker calendar keeps this base. Rendered in the browser
- * **top layer** (see `useTopLayerRef`) so it paints above a modal `<dialog>`.
+ * (`0 2 4 rgba(34,33,51,.15)`), the date-picker calendar keeps this base. Body-portalled instances
+ * join the browser **top layer** (see `useTopLayerRef`); when the anchor is inside a modal
+ * `<dialog>`, we portal into that dialog and skip the Popover API (mobile Safari nested top-layer
+ * bug — see `shouldUsePopoverTopLayer`).
  *
  * Positions against `anchorEl`, flips/shifts on collision, portalled, closes on outside-press/escape
  * mapping to MUI's `onClose(event, reason)`. `anchorOrigin`/`transformOrigin`/`slotProps.paper`

package/dist/src/hooks/useTopLayer.hook.d.ts

@@ -1,21 +1,25 @@
 import { CSSProperties } from 'react';
 /**
  * Promote a Floating UI element into the browser **top layer** so it paints above a native modal
- * `<dialog>`.
+ * `<dialog>` — but **only when the floating node is NOT already portalled into that dialog**.
  *
  * `StyledDialog` opens via `<dialog>.showModal()`, which puts the dialog in the top layer. The top
  * layer sits above the entire normal stacking context, so a popover/menu/listbox portalled to
  * `document.body` is occluded by the dialog **no matter how high its `z-index`** (and is `inert`
- * while the modal is open). The only way to render above it is to also join the top layer — which
- * the native Popover API does. We give the floating element `popover="manual"` (manual = we drive
- * open/close ourselves, no light-dismiss) and call `showPopover()` the moment it mounts; the top
- * layer stacks by call order, so a popover shown after the dialog lands on top.
+ * while the modal is open).
  *
- * Usage: spread {@link TOP_LAYER_PROPS} on the floating element, put {@link TOP_LAYER_RESET_STYLE}
- * before `...floatingStyles` in its `style`, use `strategy: 'fixed'` on `useFloating`, and pass
- * `refs.setFloating` to {@link useTopLayerRef} — attach the returned callback as the element `ref`
- * (merge with any others). Promoting on the ref callback (not a `useEffect`) guarantees it runs the
- * instant the node is connected, before paint.
+ * Two complementary fixes:
+ * 1. **Portal into the open modal `<dialog>`** (see {@link getOpenModalDialogAncestor}) — escapes
+ *    `inert` and paints inside the dialog's own top-layer entry via normal z-index.
+ * 2. **Popover API** (`popover="manual"` + `showPopover()`) — only when portalling to `document.body`
+ *    (e.g. nested under another top-layer `StyledPopover`). Nested `showPopover()` *inside* a modal
+ *    dialog is unreliable on mobile Safari: it either no-ops (UA keeps
+ *    `[popover]:not(:popover-open){display:none!important}` → looks like it never opened) or stacks
+ *    the popover *under* the dialog. Use {@link shouldUsePopoverTopLayer} to gate (1) vs (2).
+ *
+ * Usage when body-portalled: spread {@link TOP_LAYER_PROPS}, put {@link TOP_LAYER_RESET_STYLE} before
+ * `...floatingStyles`, `strategy: 'fixed'`, and pass `refs.setFloating` to {@link useTopLayerRef}.
+ * Promoting on the ref callback (not a `useEffect`) runs the instant the node is connected.
  */
 export declare const TOP_LAYER_PROPS: {
     readonly popover: "manual";
@@ -33,17 +37,23 @@ export declare const TOP_LAYER_RESET_STYLE: CSSProperties;
  * fine, even on top), but it is skipped by hit-testing: pointer clicks fall through to the dialog
  * behind it and options can't be selected. Promoting to the top layer only fixes painting/z-order,
  * NOT inertness. The one place a popover is both unclipped *and* interactive is **inside the modal
- * dialog's own subtree** (top layer → escapes the dialog's `overflow:hidden`; descendant of the
- * dialog → not inert). So when the trigger lives inside a modal dialog, the floating element must
- * portal into that dialog rather than `document.body`. Returns `undefined` for the non-dialog case
- * (and for non-modal containers like `MinimizableDialog`, which are plain z-indexed `<div>`s), so
- * the caller falls back to the default body portal.
+ * dialog's own subtree** (descendant of the dialog → not inert; dialog is already fullscreen
+ * `inset-0`, so in-dialog `position:fixed` + z-index clears the paper without a nested Popover API
+ * entry). Returns `undefined` for the non-dialog case (and for non-modal containers like
+ * `MinimizableDialog`, which are plain z-indexed `<div>`s), so the caller falls back to the default
+ * body portal.
  */
 export declare function getOpenModalDialogAncestor(node: unknown): HTMLElement | undefined;
+/**
+ * `true` when the floating node should join the top layer via the Popover API.
+ * `false` when it is (or will be) portalled into an open modal `<dialog>` — see hook docs.
+ */
+export declare function shouldUsePopoverTopLayer(portalRoot: HTMLElement | undefined | null): boolean;
 type RefSetter = (node: HTMLElement | null) => void;
 /**
- * Returns a ref callback that wires the node into Floating UI (`setFloating`) and, on mount,
- * promotes it to the top layer via the Popover API. Degrades to plain z-index if unsupported.
+ * Returns a ref callback that wires the node into Floating UI (`setFloating`) and, when `enabled`,
+ * promotes it to the top layer via the Popover API. Pass `enabled: false` inside a modal dialog
+ * (see {@link shouldUsePopoverTopLayer}). Degrades to plain z-index if unsupported.
  */
-export declare function useTopLayerRef(setFloating: RefSetter): RefSetter;
+export declare function useTopLayerRef(setFloating: RefSetter, enabled?: boolean): RefSetter;
 export {};

package/package.json

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