asma-ui-core 3.86.1 → 3.87.0

package/dist/components/custom/pathfinder-card/PathfinderCard.js

@@ -1,4 +1,4 @@
-import { cn as C } from "../../../helpers/cn.js";
+import { cn as b } from "../../../helpers/cn.js";
 import { ChevronDownIcon as j } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
 import { ChevronUpIcon as z } from "../../icons/chevron-up-icon/ChevronUpIcon.js";
 import h from "./Pathfinder.module.js";
@@ -6,32 +6,32 @@ import { useCallback as R, useEffect as M, useLayoutEffect as O, useMemo as y, u
 import { Fragment as D, jsx as e, jsxs as I } from "react/jsx-runtime";
 var _ = typeof window < "u" ? O : M;
 function q() {
-  const [i, n] = x(null), d = R((t) => {
+  const [i, n] = x(null), a = R((t) => {
     n(t);
   }, []), s = R(() => i ? Math.floor(i.getBoundingClientRect().width) : 0, [i]);
   return {
-    ref: d,
+    ref: a,
     width: P(R((t) => {
       if (!i || typeof ResizeObserver > "u") return () => {
       };
-      let a = 0;
+      let d = 0;
       const o = new ResizeObserver(() => {
-        cancelAnimationFrame(a), a = requestAnimationFrame(t);
+        cancelAnimationFrame(d), d = requestAnimationFrame(t);
       });
       return o.observe(i), () => {
-        cancelAnimationFrame(a), o.disconnect();
+        cancelAnimationFrame(d), o.disconnect();
       };
     }, [i]), s, () => 0)
   };
 }
 function A(i) {
-  return [...i].sort((n, d) => {
-    const s = n.order ?? 0, t = d.order ?? 0;
-    return s !== t ? s - t : n.id.localeCompare(d.id);
+  return [...i].sort((n, a) => {
+    const s = n.order ?? 0, t = a.order ?? 0;
+    return s !== t ? s - t : n.id.localeCompare(a.id);
   });
 }
 function K(i) {
-  const { items: n, leadSlot: d, actionSlot: s } = i, t = k({}), a = k(null), o = k(null), [l, v] = x({
+  const { items: n, leadSlot: a, actionSlot: s } = i, t = k({}), d = k(null), o = k(null), [l, v] = x({
     itemWidths: {},
     leadWidth: 0,
     actionWidth: 0
@@ -48,7 +48,7 @@ function K(i) {
       const w = t.current[u.id], N = Math.ceil(w?.getBoundingClientRect().width ?? u.estimatedWidth ?? 0);
       r[u.id] = N;
     }
-    const m = d ? Math.ceil(a.current?.getBoundingClientRect().width ?? 0) : 0, g = s ? Math.ceil(o.current?.getBoundingClientRect().width ?? 0) : 0, W = f.current;
+    const m = a ? Math.ceil(d.current?.getBoundingClientRect().width ?? 0) : 0, g = s ? Math.ceil(o.current?.getBoundingClientRect().width ?? 0) : 0, W = f.current;
     (!(Object.keys(W.itemWidths).length === Object.keys(r).length && n.every((u) => W.itemWidths[u.id] === r[u.id])) || W.leadWidth !== m || W.actionWidth !== g) && v({
       itemWidths: r,
       leadWidth: m,
@@ -56,29 +56,29 @@ function K(i) {
     });
   }, [
     n,
-    d,
+    a,
     s
   ]), {
     measurements: l,
     registerItemRef: p,
-    leadRef: a,
+    leadRef: d,
     actionRef: o
   };
 }
 function U(i) {
-  const { items: n, availableWidth: d, gapPx: s, itemWidths: t } = i, a = [];
+  const { items: n, availableWidth: a, gapPx: s, itemWidths: t } = i, d = [];
   let o = 0;
   for (const l of A(n)) {
-    const v = Math.max(0, t[l.id] ?? l.estimatedWidth ?? 0), f = a.length === 0 ? v : o + s + v;
-    if (f > d) break;
-    a.push(l), o = f;
+    const v = Math.max(0, t[l.id] ?? l.estimatedWidth ?? 0), f = d.length === 0 ? v : o + s + v;
+    if (f > a) break;
+    d.push(l), o = f;
   }
-  return a;
+  return d;
 }
-function b({ item: i, compact: n }) {
+function C({ item: i, compact: n }) {
   return /* @__PURE__ */ e(D, { children: i.render({ compact: n }) });
 }
-function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot: t, className: a, leadReservePx: o = 140, actionReservePx: l = 44 }) {
+function Y({ items: i, expanded: n, onToggleExpanded: a, leadSlot: s, actionSlot: t, className: d, leadReservePx: o = 140, actionReservePx: l = 44 }) {
   const { ref: v, width: f } = q(), p = !n, r = y(() => A(i), [i]), { measurements: m, registerItemRef: g, leadRef: W, actionRef: u } = K({
     items: r,
     leadSlot: s,
@@ -104,27 +104,27 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
   ]), N = p && w.length < Math.min(2, r.length), E = N ? r.slice(0, 2) : w;
   return /* @__PURE__ */ I("div", {
     ref: v,
-    className: C(h.root, p ? "overflow-hidden" : "overflow-visible", a),
+    className: b(h.root, "asma-pressable", p ? "overflow-hidden" : "overflow-visible", d),
     "aria-expanded": n,
     role: "button",
     tabIndex: 0,
-    onClick: d,
+    onClick: a,
     onKeyDown: (c) => {
-      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), d());
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), a());
     },
     children: [
       /* @__PURE__ */ I("div", {
-        className: C(h.shell, p ? h.shellCompact : h.shellExpanded),
+        className: b(h.shell, p ? h.shellCompact : h.shellExpanded),
         children: [s ? /* @__PURE__ */ e("div", {
           className: "shrink-0",
           children: s
         }) : null, /* @__PURE__ */ e("div", {
           className: h.content,
           children: p ? /* @__PURE__ */ e("div", {
-            className: C(h.compactItems, N && h.compactItemsStacked),
+            className: b(h.compactItems, N && h.compactItemsStacked),
             children: E.map((c) => /* @__PURE__ */ e("div", {
               className: "shrink-0 whitespace-nowrap",
-              children: /* @__PURE__ */ e(b, {
+              children: /* @__PURE__ */ e(C, {
                 item: c,
                 compact: p
               })
@@ -133,7 +133,7 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
             className: h.expandedItems,
             children: [r.map((c) => /* @__PURE__ */ e("div", {
               className: "shrink-0 whitespace-nowrap",
-              children: /* @__PURE__ */ e(b, {
+              children: /* @__PURE__ */ e(C, {
                 item: c,
                 compact: p
               })
@@ -168,7 +168,7 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
             r.map((c) => /* @__PURE__ */ e("div", {
               ref: g(c.id),
               className: "shrink-0 whitespace-nowrap",
-              children: /* @__PURE__ */ e(b, {
+              children: /* @__PURE__ */ e(C, {
                 item: c,
                 compact: !0
               })

package/dist/components/data-display/chip/StyledChip.js

@@ -1,58 +1,59 @@
 import { cn as i } from "../../../helpers/cn.js";
-import { resolveSx as $ } from "../../../helpers/sx.js";
-import { CloseIcon as E } from "../../icons/close-icon/CloseIcon.js";
+import { resolveSx as E } from "../../../helpers/sx.js";
+import { CloseIcon as L } from "../../icons/close-icon/CloseIcon.js";
 import { consumerOverrides as x } from "../../../helpers/classOverride.js";
-import { getChipPadding as L } from "./chipPadding.js";
-import U from "./StyledChip.module.js";
-import { forwardRef as q } from "react";
-import { jsx as m, jsxs as A } from "react/jsx-runtime";
-var z = q(({ dataTest: g, label: l, size: r = "medium", disabled: t, readOnly: o, clickable: b, icon: w, avatar: u, deleteIcon: _, onDelete: c, onClick: p, onMouseDown: k, onMouseUp: y, className: h, classes: a, sx: S, tabIndex: v, "aria-label": j, role: s, "aria-checked": C, "aria-readonly": R, "data-hovered": B, "data-focus": D, variant: F, color: G }, M) => {
-  const n = !o && !t && (!!b || !!p), f = u ?? w, d = L(r, !!f, !!(c && !o)), N = {
+import { getChipPadding as U } from "./chipPadding.js";
+import q from "./StyledChip.module.js";
+import { forwardRef as A } from "react";
+import { jsx as m, jsxs as F } from "react/jsx-runtime";
+var O = A(({ dataTest: u, label: c, size: r = "medium", disabled: t, readOnly: o, clickable: b, icon: w, avatar: g, deleteIcon: y, onDelete: l, onClick: p, onMouseDown: _, onMouseUp: k, className: h, classes: a, sx: S, tabIndex: v, deleteButtonTabIndex: j, "aria-label": C, role: s, "aria-checked": R, "aria-readonly": B, "data-hovered": D, "data-focus": I, variant: G, color: H }, M) => {
+  const n = !o && !t && (!!b || !!p), f = g ?? w, d = U(r, !!f, !!(l && !o)), N = {
     paddingTop: d.top,
     paddingRight: d.right,
     paddingBottom: d.bottom,
     paddingLeft: d.left
-  }, I = (e) => {
-    e.stopPropagation(), c?.(e);
   }, K = (e) => {
+    e.stopPropagation(), l?.(e);
+  }, P = (e) => {
     n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p?.(e));
-  }, P = x(h, "width"), W = x(h, "max-width");
-  return /* @__PURE__ */ A("div", {
+  }, W = x(h, "width"), $ = x(h, "max-width");
+  return /* @__PURE__ */ F("div", {
     ref: M,
-    "data-testid": g,
-    "aria-label": j,
-    "data-hovered": B,
-    "data-focus": D,
+    "data-testid": u,
+    "aria-label": C,
+    "data-hovered": D,
+    "data-focus": I,
     role: s ?? (n ? "button" : void 0),
-    "aria-checked": s ? C : void 0,
-    "aria-readonly": s ? R : void 0,
-    tabIndex: o ? void 0 : n ? v ?? 0 : v,
+    "aria-checked": s ? R : void 0,
+    "aria-readonly": s ? B : void 0,
+    tabIndex: o || t ? void 0 : n ? v ?? 0 : v,
     onClick: t || o ? void 0 : p,
-    onKeyDown: t || o ? void 0 : K,
-    onMouseDown: t || o ? void 0 : k,
-    onMouseUp: t || o ? void 0 : y,
-    className: i("box-border inline-flex items-center gap-1 rounded-[25px] border border-solid border-delta-300 bg-white text-base text-delta-700", !P && "w-fit", !W && "max-w-full", r === "small" ? "h-6" : "h-8", o && "pointer-events-none", t && "pointer-events-none opacity-[0.38]", n && i("cursor-pointer outline-none", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-25 hover:border-gama-200 hover:bg-gama-25", "active:!border-gama-400 active:bg-gama-25 active:shadow-[0_0_0_2px_var(--colors-gama-400)]"), U["focus-ring"], a?.root, h),
+    onKeyDown: t || o ? void 0 : P,
+    onMouseDown: t || o ? void 0 : _,
+    onMouseUp: t || o ? void 0 : k,
+    className: i("box-border inline-flex items-center gap-1 rounded-[25px] border border-solid border-delta-300 bg-white text-base text-delta-700", !W && "w-fit", !$ && "max-w-full", r === "small" ? "h-6" : "h-8", o && "pointer-events-none", t && "pointer-events-none opacity-[0.38]", n && i("cursor-pointer outline-none", "asma-touch-ready", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-25 hover:border-gama-200 hover:bg-gama-25", "active:!border-gama-400 active:bg-gama-25 active:shadow-[0_0_0_2px_var(--colors-gama-400)]"), q["focus-ring"], a?.root, h),
     style: {
       ...N,
-      ...$(S)
+      ...E(S)
     },
     children: [
       f && /* @__PURE__ */ m("span", {
-        className: i("flex shrink-0 items-center justify-center", r === "small" ? "h-[18px] w-[18px]" : "h-6 w-6", u ? a?.avatar : a?.icon),
+        className: i("flex shrink-0 items-center justify-center", r === "small" ? "h-[18px] w-[18px]" : "h-6 w-6", g ? a?.avatar : a?.icon),
         children: f
       }),
       /* @__PURE__ */ m("span", {
         className: i("min-w-0 truncate", a?.label),
-        children: l
+        children: c
       }),
-      c && !o && /* @__PURE__ */ m("button", {
+      l && !o && /* @__PURE__ */ m("button", {
         type: "button",
-        "data-testid": `${g}-delete`,
-        "aria-label": typeof l == "string" ? `Remove ${l}` : "Remove",
-        onClick: I,
+        tabIndex: j,
+        "data-testid": `${u}-delete`,
+        "aria-label": typeof c == "string" ? `Remove ${c}` : "Remove",
+        onClick: K,
         disabled: t,
         className: i("flex shrink-0 items-center justify-center rounded-full border border-solid border-delta-100 bg-delta-50 p-0 text-delta-700 [outline:none]", r === "small" ? "h-[18px] w-[18px]" : "h-5 w-5", a?.deleteIcon),
-        children: _ ?? /* @__PURE__ */ m(E, {
+        children: y ?? /* @__PURE__ */ m(L, {
           height: r === "small" ? 14 : 16,
           width: r === "small" ? 14 : 16,
           className: "min-w-0 shrink-0"
@@ -62,5 +63,5 @@ var z = q(({ dataTest: g, label: l, size: r = "medium", disabled: t, readOnly: o
   });
 });
 export {
-  z as StyledChip
+  O as StyledChip
 };

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

@@ -1,63 +1,92 @@
-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: v = 0, open: p, onOpen: R, onClose: y, disableHoverListener: h, disableFocusListener: w, offsetDistance: F, className: T, slotProps: s }) => {
-  const [_, E] = I(!1), l = p !== void 0, n = p ?? _, c = H(null), O = (m) => {
-    l || E(m), m ? R?.() : y?.();
-  }, { refs: i, floatingStyles: b, context: o } = V({
-    open: n,
-    onOpenChange: O,
-    placement: u,
+import { cn as N } from "../../../helpers/cn.js";
+import { resolveSx as U } from "../../../helpers/sx.js";
+import { firstTabbable as Y } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as j, TOP_LAYER_RESET_STYLE as k, getOpenModalDialogAncestor as D, shouldUsePopoverTopLayer as z, useTopLayerRef as G } from "../../../hooks/useTopLayer.hook.js";
+import { Fragment as W, cloneElement as $, useEffect as q, useLayoutEffect as J, useRef as K, useState as Q } from "react";
+import { Fragment as V, jsx as c, jsxs as v } from "react/jsx-runtime";
+import { FloatingArrow as X, FloatingPortal as Z, arrow as ee, autoUpdate as te, flip as oe, offset as ne, safePolygon as re, shift as se, useDismiss as ie, useFloating as ae, useFocus as le, useHover as ce, useInteractions as fe, useMergeRefs as de, useRole as pe } from "@floating-ui/react";
+var ue = "#363E4A", me = (t) => {
+  const n = document.createRange();
+  return n.selectNodeContents(t), n.getBoundingClientRect();
+}, Te = (t) => !t.title && t.title !== 0 ? t.children : /* @__PURE__ */ c(ge, { ...t }), ge = ({ title: t, children: n, placement: x = "top", arrow: f = !1, enterDelay: h = 500, leaveDelay: E = 0, open: b, onOpen: F, onClose: T, disableHoverListener: A, disableFocusListener: P, offsetDistance: _, className: w, slotProps: d }) => {
+  const [L, O] = Q(!1), p = b !== void 0, s = b ?? L, R = K(null), S = (e) => {
+    p || O(e), e ? F?.() : T?.();
+  }, { refs: o, floatingStyles: C, context: r } = ae({
+    open: s,
+    onOpenChange: S,
+    placement: x,
     strategy: "fixed",
-    whileElementsMounted: W,
+    whileElementsMounted: te,
     middleware: [
-      J(F ?? (r ? 8 : 6)),
-      q({ padding: 8 }),
-      K({ padding: 8 }),
-      ...r ? [G({ element: c })] : []
+      ne(_ ?? (f ? 8 : 6)),
+      oe({ padding: 8 }),
+      se({ padding: 8 }),
+      ...f ? [ee({ element: R })] : []
     ]
-  }), { getReferenceProps: P, getFloatingProps: A } = $([
-    Z(o, {
-      enabled: !l && !h,
+  }), { getReferenceProps: M, getFloatingProps: B } = fe([
+    ce(r, {
+      enabled: !p && !A,
       delay: {
-        open: x,
-        close: v
+        open: h,
+        close: E
       },
-      move: !1
+      move: !1,
+      handleClose: re()
     }),
-    X(o, { enabled: !l && !w }),
-    Q(o),
-    oe(o, { role: "tooltip" })
-  ]), d = n ? j(i.reference.current) : void 0, a = k(d), L = C(i.setFloating, a);
-  return /* @__PURE__ */ g(N, { children: [D(t, P({
-    ref: ee([i.setReference, t.ref]),
-    ...t.props
-  })), n && /* @__PURE__ */ f(B, {
-    root: d,
-    children: /* @__PURE__ */ g("div", {
-      ref: L,
-      ...a ? U : {},
-      ...A(),
+    le(r, { enabled: !p && !P }),
+    ie(r),
+    pe(r, { role: "tooltip" })
+  ]), y = s ? D(o.domReference.current) : void 0, u = z(y), H = G(o.setFloating, u), { floatingId: i } = r;
+  q(() => {
+    const e = o.domReference.current;
+    if (!s || !i || !(e instanceof HTMLElement)) return;
+    const a = Y(e) ?? e, l = a.getAttribute("aria-describedby");
+    return a.setAttribute("aria-describedby", l ? `${l} ${i}` : i), () => {
+      l === null ? a.removeAttribute("aria-describedby") : a.setAttribute("aria-describedby", l);
+    };
+  }, [
+    s,
+    o.domReference,
+    i
+  ]);
+  const m = n.type === W, g = m ? /* @__PURE__ */ c("span", {
+    style: { display: "contents" },
+    children: n
+  }) : n;
+  J(() => {
+    const e = o.domReference.current;
+    !m || !e || o.setPositionReference({
+      contextElement: e,
+      getBoundingClientRect: () => me(e)
+    });
+  }, [m, o]);
+  const { ["aria-describedby"]: be, ...I } = M({
+    ref: de([o.setReference, g.ref]),
+    ...g.props
+  });
+  return /* @__PURE__ */ v(V, { children: [$(g, I), s && /* @__PURE__ */ c(Z, {
+    root: y,
+    children: /* @__PURE__ */ v("div", {
+      ref: H,
+      ...u ? j : {},
+      ...B(),
       style: {
-        ...a ? Y : {},
-        ...b,
+        ...u ? k : {},
+        ...C,
         fontFamily: "Roboto, Helvetica, Arial, sans-serif",
         overflow: "visible",
-        ...s?.tooltip?.style,
-        ...M(s?.tooltip?.sx)
+        ...d?.tooltip?.style,
+        ...U(d?.tooltip?.sx)
       },
-      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)]", T, s?.tooltip?.className),
-      children: [e, r && /* @__PURE__ */ f(z, {
-        ref: c,
-        context: o,
-        fill: te
+      className: N("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)]", w, d?.tooltip?.className),
+      children: [t, f && /* @__PURE__ */ c(X, {
+        ref: R,
+        context: r,
+        fill: ue
       })]
     })
   })] });
 };
 export {
-  pe as StyledTooltip
+  Te as StyledTooltip
 };

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

@@ -1,108 +1,112 @@
-import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as N } from "../../../helpers/sx.js";
-import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
-import { registerOpenModalDialog as B } from "../../../hooks/useTopLayer.hook.js";
-import { StyledButton as G } from "../../inputs/button/StyledButton.js";
+import { cn as p } from "../../../helpers/cn.js";
+import { resolveSx as S } from "../../../helpers/sx.js";
+import { CloseIcon as B } from "../../icons/close-icon/CloseIcon.js";
+import { registerOpenModalDialog as G } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as L } from "../../inputs/button/StyledButton.js";
 import { useMobileMediaQuery as P } from "../../../hooks/useMediaQuery.hook.js";
 import Q from "./StyledDialog.module.js";
-import { useEffect as D, useLayoutEffect as $, useRef as u } from "react";
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
+import { useEffect as D, useLayoutEffect as $, useRef as i } from "react";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
 var J = {
   xs: 444,
   sm: 600,
   md: 900,
   lg: 1200,
   xl: 1536
-}, re = ({ open: t, onClose: a, children: S, dataTest: i, maxWidth: x = "sm", fullWidth: _, fullScreen: C, scroll: E = "paper", disableEscapeKeyDown: p, className: H, style: j, sx: M, classes: h, PaperProps: O, slotProps: o, onCloseText: y, showCloseIcon: w = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: R }) => {
-  const W = P(), v = u(null), c = u(!1), b = u(t), n = C ?? W;
+}, ne = ({ open: t, onClose: a, children: C, dataTest: c, maxWidth: h = "sm", fullWidth: H, fullScreen: _, scroll: M = "paper", disableEscapeKeyDown: y, className: j, style: R, sx: O, classes: w, PaperProps: W, slotProps: n, onCloseText: v, showCloseIcon: b = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: I }) => {
+  const z = P(), g = i(null), m = i(null), f = i(!1), k = i(t), o = _ ?? z;
   D(() => {
-    b.current && !t && o?.transition?.onExited?.(), b.current = t;
-  }, [t, o]), $(() => {
-    const e = v.current;
-    if (!(!e || !t))
-      return e.open || (e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 }))), B(e);
+    k.current && !t && n?.transition?.onExited?.(), k.current = t;
+  }, [t, n]), $(() => {
+    const e = g.current;
+    if (!e || !t) return;
+    e.open || (m.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
+    const x = G(e);
+    return () => {
+      x(), m.current?.isConnected && m.current.focus({ preventScroll: !0 });
+    };
   }, [t]), D(() => {
     if (!t) return;
-    const e = document.body.style.overflow, K = document.documentElement.style.overflow;
+    const e = document.body.style.overflow, x = document.documentElement.style.overflow;
     return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
-      document.body.style.overflow = e, document.documentElement.style.overflow = K;
+      document.body.style.overflow = e, document.documentElement.style.overflow = x;
     };
   }, [t]);
-  const m = {
-    ...O,
-    ...o?.paper
-  }, g = x === !1 ? void 0 : J[x], { className: I, style: z, onClick: q, ...A } = o?.backdrop ?? {}, k = (e) => {
-    c.current || (c.current = !0, window.setTimeout(() => {
-      c.current = !1;
+  const u = {
+    ...W,
+    ...n?.paper
+  }, N = h === !1 ? void 0 : J[h], { className: q, style: A, onClick: F, ...K } = n?.backdrop ?? {}, E = (e) => {
+    f.current || (f.current = !0, window.setTimeout(() => {
+      f.current = !1;
     }, 0), a?.(e, "escapeKeyDown"));
-  }, F = (e) => {
-    e.preventDefault(), p || k(e);
+  }, X = (e) => {
+    e.preventDefault(), y || E(e);
   };
-  return t ? /* @__PURE__ */ r("dialog", {
-    ref: v,
+  return t ? /* @__PURE__ */ l("dialog", {
+    ref: g,
     tabIndex: -1,
-    "data-testid": i,
-    "aria-label": i,
-    onCancel: F,
+    "data-testid": c,
+    "aria-label": c,
+    onCancel: X,
     onKeyDown: (e) => {
-      e.key !== "Escape" || p || (e.preventDefault(), k(e));
+      e.key !== "Escape" || y || (e.preventDefault(), E(e));
     },
-    className: f(Q.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", E === "body" && "overflow-y-auto", H, h?.root),
+    className: p(Q.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", M === "body" && "overflow-y-auto", j, w?.root),
     style: {
       zIndex: 999,
-      ...N(M),
-      ...j
+      ...S(O),
+      ...R
     },
-    children: [/* @__PURE__ */ l("div", {
-      ...A,
-      className: f("absolute inset-0 bg-[#626e7eb2]", I),
-      style: z,
+    children: [/* @__PURE__ */ r("div", {
+      ...K,
+      className: p("absolute inset-0 bg-[#626e7eb2]", q),
+      style: A,
       onClick: (e) => {
-        q?.(e), e.defaultPrevented || a?.(e, "backdropClick");
+        F?.(e), e.defaultPrevented || a?.(e, "backdropClick");
       }
-    }), /* @__PURE__ */ r("div", {
-      className: f("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", n && "rounded-none", m.className, h?.paper),
+    }), /* @__PURE__ */ l("div", {
+      className: p("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", o && "rounded-none", u.className, w?.paper),
       style: {
         minWidth: 0,
         minHeight: 0,
-        ...!n && g ? { maxWidth: g } : {},
-        ...n ? {
+        ...!o && N ? { maxWidth: N } : {},
+        ...o ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : {
-          width: _ ? "calc(100% - 64px)" : "auto",
+          width: H ? "calc(100% - 64px)" : "auto",
           maxHeight: "100%"
         },
-        ...N(m.sx),
-        ...m.style,
-        ...n ? {
+        ...S(u.sx),
+        ...u.style,
+        ...o ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : { maxHeight: "calc(100% - 64px)" }
       },
-      children: [(!!d || !!s || w) && /* @__PURE__ */ r("div", {
+      children: [(!!d || !!s || b) && /* @__PURE__ */ l("div", {
         className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
-        children: [/* @__PURE__ */ r("div", {
+        children: [/* @__PURE__ */ l("div", {
           className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
-          children: [d && /* @__PURE__ */ l("div", {
+          children: [d && /* @__PURE__ */ r("div", {
             className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
             children: d
-          }), s && /* @__PURE__ */ l("div", {
+          }), s && /* @__PURE__ */ r("div", {
             className: "flex text-2xl font-semibold leading-8 text-delta-800",
             children: s
           })]
-        }), w && /* @__PURE__ */ r("div", {
+        }), b && /* @__PURE__ */ l("div", {
           className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
-          children: [R, /* @__PURE__ */ l(G, {
-            dataTest: `close-button-${i}`,
-            "aria-label": y ? void 0 : "Close",
+          children: [I, /* @__PURE__ */ r(L, {
+            dataTest: `close-button-${c}`,
+            "aria-label": v ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ l(X, {
+            endIcon: /* @__PURE__ */ r(B, {
               width: 20,
               height: 20
             }),
@@ -113,13 +117,13 @@ var J = {
               paddingRight: "6px",
               paddingLeft: "6px"
             },
-            children: y
+            children: v
           })]
         })]
-      }), S]
+      }), C]
     })]
   }) : null;
 };
 export {
-  re as StyledDialog
+  ne as StyledDialog
 };