@stenajs-webui/modal 23.20.0 → 23.20.2

package/dist/index.es.js

@@ -1,22 +1,22 @@
-import L from "react-modal";
+import F from "react-modal";
 import { jsx as t, jsxs as a, Fragment as K } from "react/jsx-runtime";
-import { useRef as w, useState as R, useEffect as Oe, createContext as Ie, useReducer as Ae, useCallback as z, useMemo as me, createElement as ue, useContext as Te } from "react";
-import Me from "react-draggable";
+import { useRef as w, useState as E, useEffect as ze, createContext as Ae, useReducer as Te, useCallback as O, useMemo as ue, createElement as _e, useContext as Me } from "react";
+import Re from "react-draggable";
 import c from "classnames";
-import { exhaustSwitchCase as Re, Spacing as F, Row as p, Space as Q, Heading as te, useEventCallback as Ee, Column as v, Box as B, Indent as We, Txt as He, Text as Z } from "@stenajs-webui/core";
-import { Icon as be, FlatButton as Ne, stenaTimes as Se, Spinner as je, CloseButton as oe, stenaTimesThick as Pe, CircledIcon as we } from "@stenajs-webui/elements";
-import { cssColor as Be } from "@stenajs-webui/theme";
-import { ToastContainer as qe, toast as Ge } from "react-toastify";
-import './index.css';const Lo = (e) => {
-  L.setAppElement(e);
-}, Ve = "_overlay_quvmp_1", Xe = "_modal_quvmp_31", Ye = "_content_quvmp_41", Ue = "_isDraggable_quvmp_70", Je = "_footer_quvmp_101", Ke = "_stickyFooter_quvmp_105", k = {
-  overlay: Ve,
-  modal: Xe,
-  content: Ye,
-  isDraggable: Ue,
-  footer: Je,
-  stickyFooter: Ke
-}, $e = "draggable-modal-handle", xe = "draggable-modal-cancel", Qe = ({
+import { exhaustSwitchCase as Ee, Spacing as I, Row as p, Space as Q, Heading as te, useEventCallback as We, Column as C, Box as B, Indent as He, Txt as Se, Text as Z } from "@stenajs-webui/core";
+import { Icon as Ne, FlatButton as we, stenaTimes as je, Spinner as Pe, CloseButton as oe, stenaTimesThick as Ge, CircledIcon as Be } from "@stenajs-webui/elements";
+import { cssColor as $e } from "@stenajs-webui/theme";
+import { ToastContainer as Ve, toast as qe } from "react-toastify";
+import './index.css';const Fo = (e) => {
+  F.setAppElement(e);
+}, Xe = "_overlay_zoch3_1", Ye = "_modal_zoch3_33", Ue = "_content_zoch3_43", Je = "_isDraggable_zoch3_72", Ke = "_footer_zoch3_103", Qe = "_stickyFooter_zoch3_107", L = {
+  overlay: Xe,
+  modal: Ye,
+  content: Ue,
+  isDraggable: Je,
+  footer: Ke,
+  stickyFooter: Qe
+}, ke = "draggable-modal-handle", xe = "draggable-modal-cancel", Ze = ({
   width: e,
   maxWidth: o,
   draggable: n = !1,
@@ -25,15 +25,15 @@ import './index.css';const Lo = (e) => {
 }) => {
   const i = w(null);
   return /* @__PURE__ */ t(
-    L,
+    F,
     {
-      overlayClassName: k.overlay,
-      className: k.modal,
+      overlayClassName: L.overlay,
+      className: L.modal,
       ...r,
       children: /* @__PURE__ */ t(
-        Me,
+        Re,
         {
-          handle: `.${$e}`,
+          handle: `.${ke}`,
           cancel: `.${xe}, button, [role="tooltip"]`,
           bounds: ".ReactModal__Overlay",
           disabled: !n,
@@ -45,8 +45,8 @@ import './index.css';const Lo = (e) => {
                 "--swui-modal-width": e,
                 "--swui-modal-max-width": o
               },
-              className: c(k.content, {
-                [k.isDraggable]: n
+              className: c(L.content, {
+                [L.isDraggable]: n
               }),
               ref: i,
               children: s
@@ -56,18 +56,18 @@ import './index.css';const Lo = (e) => {
       )
     }
   );
-}, Ze = "_portal_17ze5_1", et = "_overlay_17ze5_4", tt = "_content_17ze5_9", ot = "_floating_17ze5_15", nt = "_slideFromLeft_17ze5_29", st = "_slideFromRight_17ze5_30", rt = "_afterOpen_17ze5_36", at = "_beforeClose_17ze5_40", lt = "_slideFromTop_17ze5_45", ct = "_slideFromBottom_17ze5_46", f = {
-  portal: Ze,
-  overlay: et,
-  content: tt,
-  floating: ot,
-  slideFromLeft: nt,
-  slideFromRight: st,
-  afterOpen: rt,
-  beforeClose: at,
-  slideFromTop: lt,
-  slideFromBottom: ct
-}, zo = ({
+}, et = "_portal_194oy_1", tt = "_overlay_194oy_4", ot = "_content_194oy_9", nt = "_floating_194oy_18", st = "_slideFromLeft_194oy_32", rt = "_slideFromRight_194oy_33", at = "_afterOpen_194oy_39", lt = "_beforeClose_194oy_43", ct = "_slideFromTop_194oy_48", it = "_slideFromBottom_194oy_49", f = {
+  portal: et,
+  overlay: tt,
+  content: ot,
+  floating: nt,
+  slideFromLeft: st,
+  slideFromRight: rt,
+  afterOpen: at,
+  beforeClose: lt,
+  slideFromTop: ct,
+  slideFromBottom: it
+}, Oo = ({
   background: e,
   zIndex: o,
   children: n,
@@ -78,7 +78,7 @@ import './index.css';const Lo = (e) => {
 }) => {
   const { height: l, width: h } = m;
   return /* @__PURE__ */ t(
-    L,
+    F,
     {
       closeTimeoutMS: 250,
       portalClassName: f.portal,
@@ -90,7 +90,7 @@ import './index.css';const Lo = (e) => {
       className: {
         base: c(
           f.content,
-          it(s),
+          dt(s),
           i && f.floating
         ),
         afterOpen: f.afterOpen,
@@ -99,10 +99,11 @@ import './index.css';const Lo = (e) => {
       style: { content: { width: h, height: l, background: e }, overlay: { zIndex: o } },
       parentSelector: r ? () => r : void 0,
       ...m,
+      bodyOpenClassName: "swui-drawer-body-open",
       children: n
     }
   );
-}, it = (e) => {
+}, dt = (e) => {
   switch (e) {
     case "left":
       return f.slideFromLeft;
@@ -113,20 +114,20 @@ import './index.css';const Lo = (e) => {
     case "bottom":
       return f.slideFromBottom;
     default:
-      return Re(e, f.slideFromLeft);
+      return Ee(e, f.slideFromLeft);
   }
-}, Fo = ({
+}, Io = ({
   header: e,
   contentRight: o,
   onRequestClose: n,
   icon: s
 }) => /* @__PURE__ */ t(
-  F,
+  I,
   {
     position: "sticky",
     top: 0,
     zIndex: 100,
-    background: Be("--lhds-color-ui-50"),
+    background: $e("--lhds-color-ui-50"),
     children: /* @__PURE__ */ a(
       p,
       {
@@ -136,15 +137,15 @@ import './index.css';const Lo = (e) => {
         children: [
           /* @__PURE__ */ a(p, { alignItems: "center", gap: 2, children: [
             /* @__PURE__ */ t(Q, { num: 1 }),
-            s && /* @__PURE__ */ t(be, { icon: s, size: 24 }),
+            s && /* @__PURE__ */ t(Ne, { icon: s, size: 24 }),
             /* @__PURE__ */ t(te, { variant: "h4", children: e })
           ] }),
           /* @__PURE__ */ a(p, { gap: 1, children: [
             o,
             /* @__PURE__ */ t(
-              Ne,
+              we,
               {
-                leftIcon: Se,
+                leftIcon: je,
                 onClick: n,
                 variant: "danger"
               }
@@ -155,19 +156,19 @@ import './index.css';const Lo = (e) => {
       }
     )
   }
-), dt = "_overlay_1gix5_1", mt = "_modal_1gix5_31", ut = "_content_1gix5_38", Y = {
-  overlay: dt,
-  modal: mt,
-  content: ut
-}, _t = { overlay: { justifyContent: "center" } }, Oo = ({
+), mt = "_overlay_1xtk3_1", ut = "_modal_1xtk3_33", _t = "_content_1xtk3_40", Y = {
+  overlay: mt,
+  modal: ut,
+  content: _t
+}, ft = { overlay: { justifyContent: "center" } }, zo = ({
   children: e,
   ...o
 }) => /* @__PURE__ */ t(
-  L,
+  F,
   {
     overlayClassName: Y.overlay,
     className: Y.modal,
-    style: _t,
+    style: ft,
     ...o,
     children: /* @__PURE__ */ t(
       "div",
@@ -178,46 +179,46 @@ import './index.css';const Lo = (e) => {
       }
     )
   }
-), ft = "_overlay_nbrrn_1", gt = "_afterOpen_nbrrn_24", pt = "_beforeClose_nbrrn_24", ht = "_modal_nbrrn_36", yt = "_content_nbrrn_59", x = {
-  overlay: ft,
-  afterOpen: gt,
-  beforeClose: pt,
-  modal: ht,
-  content: yt
-}, _e = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), Ct = ({
+), gt = "_overlay_20o05_1", pt = "_afterOpen_20o05_29", ht = "_beforeClose_20o05_29", yt = "_modal_20o05_41", Ct = "_content_20o05_64", k = {
+  overlay: gt,
+  afterOpen: pt,
+  beforeClose: ht,
+  modal: yt,
+  content: Ct
+}, fe = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), vt = ({
   children: e,
   background: o,
   className: n,
   overlayClassName: s,
   ...r
 }) => {
-  const i = w(null), [m, l] = R(_e ? "auto" : void 0), h = {
+  const i = w(null), [m, l] = E(fe ? "auto" : void 0), h = {
     overlay: { justifyContent: "center" },
     content: {
       "--swui-modal-content-bg-color": o
     }
-  }, u = Ee(() => {
-    if (!_e)
+  }, u = We(() => {
+    if (!fe)
       return;
     const y = i.current;
     y && l(
       y.scrollHeight > y.clientHeight ? "stable" : "auto"
     );
   });
-  return Oe(() => (window.addEventListener("resize", u), document.addEventListener("DOMContentLoaded", u), () => {
+  return ze(() => (window.addEventListener("resize", u), document.addEventListener("DOMContentLoaded", u), () => {
     window.removeEventListener("resize", u), document.removeEventListener("DOMContentLoaded", u);
   }), [u]), /* @__PURE__ */ t(
-    L,
+    F,
     {
       overlayClassName: {
-        base: c(s, x.overlay),
-        beforeClose: x.beforeClose,
-        afterOpen: x.afterOpen
+        base: c(s, k.overlay),
+        beforeClose: k.beforeClose,
+        afterOpen: k.afterOpen
       },
       className: {
-        base: c(n, x.modal),
-        beforeClose: x.beforeClose,
-        afterOpen: x.afterOpen
+        base: c(n, k.modal),
+        beforeClose: k.beforeClose,
+        afterOpen: k.afterOpen
       },
       style: h,
       closeTimeoutMS: 250,
@@ -226,7 +227,7 @@ import './index.css';const Lo = (e) => {
       children: /* @__PURE__ */ t(
         "div",
         {
-          className: x.content,
+          className: k.content,
           style: {
             "--swui-modal-width": "fit-content",
             scrollbarGutter: m
@@ -237,25 +238,25 @@ import './index.css';const Lo = (e) => {
       )
     }
   );
-}, vt = "_modal_4fwgb_1", bt = "_overlay_4fwgb_13", fe = {
-  modal: vt,
-  overlay: bt
-}, Io = ({
+}, bt = "_modal_4fwgb_1", Nt = "_overlay_4fwgb_13", ge = {
+  modal: bt,
+  overlay: Nt
+}, Ao = ({
   headerIconLeft: e,
   headerText: o,
   shouldCloseOnOverlayClick: n = !1,
   shouldCloseOnEsc: s = !1,
   ...r
 }) => /* @__PURE__ */ t(
-  L,
+  F,
   {
     ...r,
     isOpen: !0,
     shouldCloseOnOverlayClick: n,
     shouldCloseOnEsc: s,
-    className: fe.modal,
-    overlayClassName: fe.overlay,
-    children: /* @__PURE__ */ a(v, { spacing: 2, alignItems: "center", children: [
+    className: ge.modal,
+    overlayClassName: ge.overlay,
+    children: /* @__PURE__ */ a(C, { spacing: 2, alignItems: "center", children: [
       /* @__PURE__ */ t(
         B,
         {
@@ -266,22 +267,22 @@ import './index.css';const Lo = (e) => {
           borderRadius: "50%",
           background: "white",
           shadow: "modal",
-          children: /* @__PURE__ */ t(je, { size: "small" })
+          children: /* @__PURE__ */ t(Pe, { size: "small" })
         }
       ),
       (e || o) && /* @__PURE__ */ a(K, { children: [
-        /* @__PURE__ */ t(F, {}),
+        /* @__PURE__ */ t(I, {}),
         /* @__PURE__ */ a(p, { indent: 2, children: [
           e && /* @__PURE__ */ a(K, { children: [
-            /* @__PURE__ */ t(be, { size: 14, icon: e, color: "white" }),
-            /* @__PURE__ */ t(We, {})
+            /* @__PURE__ */ t(Ne, { size: 14, icon: e, color: "white" }),
+            /* @__PURE__ */ t(He, {})
           ] }),
           o && /* @__PURE__ */ t(te, { variant: "h4", color: "white", children: o })
         ] })
       ] })
     ] })
   }
-), Nt = ({
+), wt = ({
   onRequestClose: e,
   header: o,
   headerText: n,
@@ -292,10 +293,10 @@ import './index.css';const Lo = (e) => {
     spacing: 2,
     indent: 2,
     borderBottom: "1px solid var(--lhds-color-ui-300)",
-    className: $e,
+    className: ke,
     children: [
       /* @__PURE__ */ a(p, { flex: 1, indent: !0, alignItems: "center", children: [
-        n && /* @__PURE__ */ t(He, { className: xe, size: "large", children: n }),
+        n && /* @__PURE__ */ t(Se, { className: xe, size: "large", children: n }),
         o
       ] }),
       /* @__PURE__ */ t(B, { alignSelf: "flex-start", children: /* @__PURE__ */ t(
@@ -307,7 +308,7 @@ import './index.css';const Lo = (e) => {
       ) })
     ]
   }
-), Ao = ({
+), To = ({
   header: e,
   headerText: o,
   children: n,
@@ -320,14 +321,14 @@ import './index.css';const Lo = (e) => {
   disableStickyFooter: u = !1,
   ...y
 }) => /* @__PURE__ */ a(
-  Qe,
+  Ze,
   {
     ...y,
     onRequestClose: m,
     draggable: i,
     children: [
       /* @__PURE__ */ t(
-        Nt,
+        wt,
         {
           onRequestClose: m,
           header: e,
@@ -339,15 +340,15 @@ import './index.css';const Lo = (e) => {
       h && /* @__PURE__ */ t(
         B,
         {
-          className: c(k.footer, {
-            [k.stickyFooter]: !u
+          className: c(L.footer, {
+            [L.stickyFooter]: !u
           }),
           children: h
         }
       )
     ]
   }
-), To = ({ children: e }) => /* @__PURE__ */ t(v, { indent: 2, spacing: 2, children: e }), ee = Ie(
+), Mo = ({ children: e }) => /* @__PURE__ */ t(C, { indent: 2, spacing: 2, children: e }), ee = Ae(
   void 0
 );
 function ne(e, {
@@ -359,54 +360,55 @@ function ne(e, {
   dialogStyle: m,
   divInsteadOfDialog: l,
   disableCloseOnClickOutside: h,
-  elementId: u,
-  onResolve: y,
-  onReject: C,
-  className: E,
+  blockScroll: u = !0,
+  elementId: y,
+  onResolve: v,
+  onReject: x,
+  className: se,
   background: W,
   label: H,
   labelledby: S,
   describedby: j
 }) {
-  const Le = w(null), _ = o ?? Le, [P, ze] = Ae((d) => d + 1, 0), se = w(null), q = w(null), b = w(void 0), O = w(!1), I = w(null), [re, A] = R(!1), [G, D] = R(!1), [ae, N] = R(!1), V = e, Fe = z(
-    (d) => (se.current = new Promise(
-      (g, de) => {
-        q.current = g, I.current = de;
+  const Fe = w(null), _ = o ?? Fe, [P, Oe] = Te((d) => d + 1, 0), re = w(null), G = w(null), b = w(void 0), z = w(!1), A = w(null), [ae, T] = E(!1), [V, D] = E(!1), [le, N] = E(!1), q = e, Ie = O(
+    (d) => (re.current = new Promise(
+      (g, me) => {
+        G.current = g, A.current = me;
       }
-    ), N(!1), A(!0), D(!0), ze(), O.current = !1, b.current = d, n ? _.current?.showModal() : _.current?.show(), se.current),
+    ), N(!1), T(!0), D(!0), Oe(), z.current = !1, b.current = d, n ? _.current?.showModal() : _.current?.show(), re.current),
     [_, n]
-  ), le = z(
+  ), ce = O(
     (d) => {
-      O.current = !0, N(!0), A(!1), l ? setTimeout(() => {
-        N(!1), D(!1), q.current?.(d), b.current = void 0, y?.();
+      z.current = !0, N(!0), T(!1), l ? setTimeout(() => {
+        N(!1), D(!1), G.current?.(d), b.current = void 0, v?.();
       }, 300) : _.current?.addEventListener(
         "animationend",
         (g) => {
-          g.stopPropagation(), N(!1), D(!1), _.current?.close(), q.current?.(d), b.current = void 0, y?.();
+          g.stopPropagation(), N(!1), D(!1), _.current?.close(), G.current?.(d), b.current = void 0, v?.();
         },
         { once: !0 }
       );
     },
-    [_, y, l]
-  ), $ = z(
+    [_, v, l]
+  ), $ = O(
     (d) => {
-      O.current = !0, N(!0), A(!1), l ? setTimeout(() => {
-        N(!1), D(!1), I.current?.(d), C?.(), b.current = void 0;
+      z.current = !0, N(!0), T(!1), l ? setTimeout(() => {
+        N(!1), D(!1), A.current?.(d), x?.(), b.current = void 0;
       }, 300) : _.current?.addEventListener(
         "animationend",
         (g) => {
-          g.stopPropagation(), N(!1), D(!1), _.current?.close(), I.current?.(d), C?.(), b.current = void 0;
+          g.stopPropagation(), N(!1), D(!1), _.current?.close(), A.current?.(d), x?.(), b.current = void 0;
         },
         { once: !0 }
       );
     },
-    [_, l, C]
-  ), ce = z(
+    [_, l, x]
+  ), ie = O(
     (d) => {
-      d.stopPropagation(), O.current || (N(!1), A(!1), D(!1), I.current?.(), C?.(), b.current = void 0);
+      d.stopPropagation(), z.current || (N(!1), T(!1), D(!1), A.current?.(), x?.(), b.current = void 0);
     },
-    [C]
-  ), ie = z(
+    [x]
+  ), de = O(
     (d) => {
       if (d.target !== _.current)
         return;
@@ -414,73 +416,78 @@ function ne(e, {
       g.top <= d.clientY && d.clientY <= g.top + g.height && g.left <= d.clientX && d.clientX <= g.left + g.width || $();
     },
     [_, $]
-  ), X = me(
-    () => ({ resolve: le, reject: $ }),
-    [$, le]
+  ), X = ue(
+    () => ({ resolve: ce, reject: $ }),
+    [$, ce]
   );
-  return [me(
+  return [ue(
     () => l ? /* @__PURE__ */ t(
-      Ct,
+      vt,
       {
-        isOpen: re,
+        isOpen: ae,
         onRequestClose: $,
         background: W,
         contentLabel: H,
-        id: u,
+        id: y,
         aria: { modal: !0, labelledby: S, describedby: j },
-        children: /* @__PURE__ */ t(ee.Provider, { value: X, children: G && /* @__PURE__ */ ue(V, { ...b.current, key: P }) })
+        children: /* @__PURE__ */ t(ee.Provider, { value: X, children: V && /* @__PURE__ */ _e(q, { ...b.current, key: P }) })
       }
     ) : /* @__PURE__ */ t(
       "dialog",
       {
-        onClick: h ? void 0 : ie,
-        onClose: ce,
+        onClick: h ? void 0 : de,
+        onClose: ie,
         ref: _,
-        id: u,
-        className: c("swui-dialog", E, ae && r),
+        id: y,
+        className: c(
+          u && "swui-block-scroll",
+          se,
+          le && r
+        ),
         "aria-label": H,
         "aria-labelledby": S,
         "aria-describedby": j,
         style: { background: W, ...m },
-        children: /* @__PURE__ */ t("div", { style: i, className: s, children: G && /* @__PURE__ */ t(ee.Provider, { value: X, children: /* @__PURE__ */ ue(V, { ...b.current, key: P }) }) })
+        children: /* @__PURE__ */ t("div", { style: i, className: s, children: V && /* @__PURE__ */ t(ee.Provider, { value: X, children: /* @__PURE__ */ _e(q, { ...b.current, key: P }) }) })
       }
     ),
     [
       l,
-      re,
+      ae,
       $,
       W,
       H,
-      u,
+      y,
       S,
       j,
       X,
-      G,
       V,
+      q,
       P,
       h,
+      u,
+      de,
       ie,
-      ce,
       _,
-      E,
-      ae,
+      se,
+      le,
       r,
       m,
       i,
       s
     ]
-  ), { show: Fe, reject: $ }];
+  ), { show: Ie, reject: $ }];
 }
-const Mo = () => {
-  const e = Te(ee);
+const Ro = () => {
+  const e = Me(ee);
   if (e == null)
     throw new Error("useDialogPromise is being used outside of dialog.");
   return e;
-}, wt = "_alertDialog_14t8t_1", Bt = "_closing_14t8t_22", U = {
-  alertDialog: wt,
-  closing: Bt
+}, Bt = "_alertDialog_14t8t_1", $t = "_closing_14t8t_22", U = {
+  alertDialog: Bt,
+  closing: $t
 };
-function Ro(e, o) {
+function Eo(e, o) {
   return ne(e, {
     ...o,
     modal: !0,
@@ -492,42 +499,45 @@ function Ro(e, o) {
     className: c(o?.className, U.alertDialog)
   });
 }
-const $t = "_drawerDialog_11g6r_1", xt = "_left_11g6r_13", Dt = "_right_11g6r_14", kt = "_contentWrapper_11g6r_19", Lt = "_slideInLeft_11g6r_1", zt = "_closing_11g6r_36", Ft = "_slideOutLeft_11g6r_1", Ot = "_slideInRight_11g6r_1", It = "_slideOutRight_11g6r_1", At = "_top_11g6r_54", Tt = "_bottom_11g6r_55", Mt = "_slideInTop_11g6r_1", Rt = "_slideOutTop_11g6r_1", Et = "_slideInBottom_11g6r_1", Wt = "_slideOutBottom_11g6r_1", T = {
-  drawerDialog: $t,
+const kt = "_drawerDialog_11g6r_1", xt = "_left_11g6r_13", Dt = "_right_11g6r_14", Lt = "_contentWrapper_11g6r_19", Ft = "_slideInLeft_11g6r_1", Ot = "_closing_11g6r_36", It = "_slideOutLeft_11g6r_1", zt = "_slideInRight_11g6r_1", At = "_slideOutRight_11g6r_1", Tt = "_top_11g6r_54", Mt = "_bottom_11g6r_55", Rt = "_slideInTop_11g6r_1", Et = "_slideOutTop_11g6r_1", Wt = "_slideInBottom_11g6r_1", Ht = "_slideOutBottom_11g6r_1", M = {
+  drawerDialog: kt,
   left: xt,
   right: Dt,
-  contentWrapper: kt,
-  slideInLeft: Lt,
-  closing: zt,
-  slideOutLeft: Ft,
-  slideInRight: Ot,
-  slideOutRight: It,
-  top: At,
-  bottom: Tt,
-  slideInTop: Mt,
-  slideOutTop: Rt,
-  slideInBottom: Et,
-  slideOutBottom: Wt
+  contentWrapper: Lt,
+  slideInLeft: Ft,
+  closing: Ot,
+  slideOutLeft: It,
+  slideInRight: zt,
+  slideOutRight: At,
+  top: Tt,
+  bottom: Mt,
+  slideInTop: Rt,
+  slideOutTop: Et,
+  slideInBottom: Wt,
+  slideOutBottom: Ht
 };
-function Eo(e, o = "left", n) {
+function Wo(e, o = "left", n) {
   return ne(e, {
     ...n,
     disableCloseOnClickOutside: !0,
     modal: !1,
-    closingClassName: c(n?.closingClassName, T.closing),
+    // Drawers never block page scroll. The drawer's own scroll is kept from
+    // chaining to the page by overscroll-behavior on its content.
+    blockScroll: !1,
+    closingClassName: c(n?.closingClassName, M.closing),
     contentWrapperClassName: c(
       n?.contentWrapperClassName,
-      T.contentWrapper
+      M.contentWrapper
     ),
-    className: c(n?.className, T.drawerDialog, T[o])
+    className: c(n?.className, M.drawerDialog, M[o])
   });
 }
-const Ht = "_modalDialog_iw29e_1", St = "_closing_iw29e_37", jt = "_contentWrapper_iw29e_101", J = {
-  modalDialog: Ht,
-  closing: St,
-  contentWrapper: jt
+const St = "_modalDialog_iw29e_1", jt = "_closing_iw29e_37", Pt = "_contentWrapper_iw29e_101", J = {
+  modalDialog: St,
+  closing: jt,
+  contentWrapper: Pt
 };
-function Wo(e, o) {
+function Ho(e, o) {
   return ne(e, {
     ...o,
     modal: !0,
@@ -543,34 +553,34 @@ const De = ({
   headingLevel: e = "h2",
   size: o = "medium",
   children: n
-}) => /* @__PURE__ */ t(te, { variant: o === "medium" ? "h3" : "h1", as: e, children: n }), Pt = "_modalActionButtons_zeqa6_1", qt = {
-  modalActionButtons: Pt
-}, Gt = ({
+}) => /* @__PURE__ */ t(te, { variant: o === "medium" ? "h3" : "h1", as: e, children: n }), Gt = "_modalActionButtons_zeqa6_1", Vt = {
+  modalActionButtons: Gt
+}, qt = ({
   children: e
 }) => /* @__PURE__ */ a(B, { width: "100%", children: [
-  /* @__PURE__ */ t(F, {}),
-  /* @__PURE__ */ t("div", { className: qt.modalActionButtons, children: e })
-] }), Vt = "_modalBody_ozynq_1", ge = {
-  modalBody: Vt
-}, Xt = ({
+  /* @__PURE__ */ t(I, {}),
+  /* @__PURE__ */ t("div", { className: Vt.modalActionButtons, children: e })
+] }), Xt = "_modalBody_ozynq_1", pe = {
+  modalBody: Xt
+}, Yt = ({
   gap: e = 3,
   variant: o = "normal",
   className: n,
   ...s
 }) => /* @__PURE__ */ t(
-  v,
+  C,
   {
-    className: c(ge.modalBody, ge[o], n),
+    className: c(pe.modalBody, pe[o], n),
     indent: o === "relaxed" ? 5 : 3,
     spacing: o === "relaxed" ? 5 : 3,
     gap: e,
     ...s
   }
-), Yt = ({
+), Ut = ({
   children: e,
   maxWidth: o
 }) => /* @__PURE__ */ t(
-  v,
+  C,
   {
     flex: 1,
     height: "100%",
@@ -578,31 +588,31 @@ const De = ({
     maxWidth: o,
     children: e
   }
-), Ut = (e) => /* @__PURE__ */ t(
-  Ne,
+), Jt = (e) => /* @__PURE__ */ t(
+  we,
   {
     size: "large",
     variant: "danger",
-    leftIcon: Pe,
+    leftIcon: Ge,
     ...e
   }
-), Jt = ({
+), Kt = ({
   heading: e,
   headingLevel: o,
   headingSize: n,
   onClickClose: s,
   closeButtonAriaLabel: r
-}) => /* @__PURE__ */ t(v, { children: /* @__PURE__ */ a(p, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
+}) => /* @__PURE__ */ t(C, { children: /* @__PURE__ */ a(p, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
   e ? /* @__PURE__ */ t(De, { headingLevel: o, size: n, children: e }) : /* @__PURE__ */ t("div", {}),
   s ? /* @__PURE__ */ t(
-    Ut,
+    Jt,
     {
       onClick: s,
       size: n,
       "aria-label": r
     }
   ) : null
-] }) }), Ho = ({
+] }) }), So = ({
   icon: e,
   buttons: o,
   heading: n,
@@ -611,16 +621,16 @@ const De = ({
   maxWidth: i,
   minWidth: m,
   ...l
-}) => /* @__PURE__ */ t(Yt, { children: /* @__PURE__ */ a(Xt, { gap: 0, children: [
+}) => /* @__PURE__ */ t(Ut, { children: /* @__PURE__ */ a(Yt, { gap: 0, children: [
   l.onClickClose && /* @__PURE__ */ t(
-    Jt,
+    Kt,
     {
       onClickClose: l.onClickClose,
       closeButtonAriaLabel: l.closeButtonAriaLabel
     }
   ),
   /* @__PURE__ */ a(
-    v,
+    C,
     {
       gap: 2,
       flexDirection: "column",
@@ -629,21 +639,21 @@ const De = ({
       minWidth: m,
       children: [
         e && /* @__PURE__ */ a(K, { children: [
-          !l.onClickClose && /* @__PURE__ */ t(F, {}),
-          /* @__PURE__ */ t(we, { icon: e, size: "large" }),
-          /* @__PURE__ */ t(F, {})
+          !l.onClickClose && /* @__PURE__ */ t(I, {}),
+          /* @__PURE__ */ t(Be, { icon: e, size: "large" }),
+          /* @__PURE__ */ t(I, {})
         ] }),
         /* @__PURE__ */ t(De, { children: n }),
         s && /* @__PURE__ */ t(Z, { textAlign: "center", children: s }),
         r,
-        o && /* @__PURE__ */ t(Gt, { children: o })
+        o && /* @__PURE__ */ t(qt, { children: o })
       ]
     }
   )
-] }) }), Kt = "_modalFooter_1ypno_1", Qt = "_sticky_1ypno_10", pe = {
-  modalFooter: Kt,
-  sticky: Qt
-}, So = ({
+] }) }), Qt = "_modalFooter_1ypno_1", Zt = "_sticky_1ypno_10", he = {
+  modalFooter: Qt,
+  sticky: Zt
+}, jo = ({
   sticky: e,
   zIndex: o = 4,
   gap: n = 2,
@@ -652,22 +662,22 @@ const De = ({
 }) => /* @__PURE__ */ t(
   p,
   {
-    className: c(pe.modalFooter, e && pe.sticky, s),
+    className: c(he.modalFooter, e && he.sticky, s),
     shadow: "var(--swui-sticky-footer-shadow)",
     zIndex: o,
     gap: n,
     ...r
   }
-), Zt = "_unreadDot_l8bni_1", eo = "_dot_l8bni_4", he = {
-  unreadDot: Zt,
-  dot: eo
-}, to = ({ children: e }) => /* @__PURE__ */ a("div", { className: he.unreadDot, children: [
+), eo = "_unreadDot_l8bni_1", to = "_dot_l8bni_4", ye = {
+  unreadDot: eo,
+  dot: to
+}, oo = ({ children: e }) => /* @__PURE__ */ a("div", { className: ye.unreadDot, children: [
   e,
-  /* @__PURE__ */ t("div", { className: he.dot })
-] }), oo = "_notificationHeader_1rl25_1", no = "_timestamp_1rl25_2", ye = {
-  notificationHeader: oo,
-  timestamp: no
-}, ke = ({
+  /* @__PURE__ */ t("div", { className: ye.dot })
+] }), no = "_notificationHeader_1rl25_1", so = "_timestamp_1rl25_2", Ce = {
+  notificationHeader: no,
+  timestamp: so
+}, Le = ({
   text: e,
   timestamp: o,
   icon: n,
@@ -680,14 +690,14 @@ const De = ({
   iconBackgroundColor: u,
   forceCloseButtonAlignment: y
 }) => {
-  const C = n ? /* @__PURE__ */ t(
-    we,
+  const v = n ? /* @__PURE__ */ t(
+    Be,
     {
       size: "small",
       icon: n,
       "aria-label": s,
       variant: "whiteBg",
-      backgroundColor: u || so(l, h)
+      backgroundColor: u || ro(l, h)
     }
   ) : void 0;
   return /* @__PURE__ */ a(
@@ -696,20 +706,20 @@ const De = ({
       alignItems: "flex-start",
       justifyContent: "space-between",
       "data-comp": "NotificationHeader",
-      className: ye.notificationHeader,
+      className: Ce.notificationHeader,
       gap: 2,
       children: [
         /* @__PURE__ */ a(p, { gap: 2, alignItems: "flex-start", children: [
-          r && /* @__PURE__ */ t(v, { justifyContent: "center", children: r }),
-          !r && C && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", children: l ? /* @__PURE__ */ t(to, { children: C }) : C }),
+          r && /* @__PURE__ */ t(C, { justifyContent: "center", children: r }),
+          !r && v && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", children: l ? /* @__PURE__ */ t(oo, { children: v }) : v }),
           /* @__PURE__ */ a(B, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
             n || m || y ? /* @__PURE__ */ t(Q, { num: 0.5 }) : null,
             /* @__PURE__ */ t(Z, { variant: "bold", children: e }),
-            o && /* @__PURE__ */ t("div", { className: ye.timestamp, children: /* @__PURE__ */ t(
+            o && /* @__PURE__ */ t("div", { className: Ce.timestamp, children: /* @__PURE__ */ t(
               Z,
               {
                 size: "small",
-                color: Be(
+                color: $e(
                   l ? "--lhds-color-blue-600" : "--lhds-color-ui-600"
                 ),
                 children: o
@@ -717,21 +727,21 @@ const De = ({
             ) })
           ] })
         ] }),
-        i && /* @__PURE__ */ t(v, { justifyContent: "center", children: i }),
+        i && /* @__PURE__ */ t(C, { justifyContent: "center", children: i }),
         m && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", width: "40px", children: /* @__PURE__ */ t(oe, { onClick: m }) })
       ]
     }
   );
-}, so = (e, o) => {
+}, ro = (e, o) => {
   if (!(!e && o === "standard"))
     return "--lhds-color-ui-50";
-}, ro = "_notification_tpz0j_1", ao = "_body_tpz0j_10", lo = "_standard_tpz0j_15", co = "_unread_tpz0j_16", io = "_danger_tpz0j_21", M = {
-  notification: ro,
-  body: ao,
-  standard: lo,
-  unread: co,
-  danger: io
-}, jo = ({
+}, ao = "_notification_tpz0j_1", lo = "_body_tpz0j_10", co = "_standard_tpz0j_15", io = "_unread_tpz0j_16", mo = "_danger_tpz0j_21", R = {
+  notification: ao,
+  body: lo,
+  standard: co,
+  unread: io,
+  danger: mo
+}, Po = ({
   variant: e = "standard",
   children: o,
   unread: n,
@@ -741,26 +751,26 @@ const De = ({
   {
     "data-comp": "Notification",
     className: c(
-      M.notification,
-      M[e],
-      n && M.unread
+      R.notification,
+      R[e],
+      n && R.unread
     ),
     children: [
-      /* @__PURE__ */ t(ke, { ...s, unread: n, variant: e }),
-      o && /* @__PURE__ */ t(v, { className: M.body, children: o })
+      /* @__PURE__ */ t(Le, { ...s, unread: n, variant: e }),
+      o && /* @__PURE__ */ t(C, { className: R.body, children: o })
     ]
   }
-), mo = "_notificationList_1rkvu_1", uo = {
-  notificationList: mo
-}, Po = ({
+), uo = "_notificationList_1rkvu_1", _o = {
+  notificationList: uo
+}, Go = ({
   children: e
-}) => /* @__PURE__ */ a("div", { "data-comp": "NotificationList", className: uo.notificationList, children: [
+}) => /* @__PURE__ */ a("div", { "data-comp": "NotificationList", className: _o.notificationList, children: [
   e,
   /* @__PURE__ */ t("div", {})
-] }), _o = "_toast_1ifzt_1", fo = "_body_1ifzt_2", Ce = {
-  toast: _o,
-  body: fo
-}, qo = ({
+] }), fo = "_toast_1ifzt_1", go = "_body_1ifzt_2", ve = {
+  toast: fo,
+  body: go
+}, Vo = ({
   children: e,
   width: o = 364,
   maxWidth: n,
@@ -768,37 +778,37 @@ const De = ({
 }) => /* @__PURE__ */ a(
   B,
   {
-    className: Ce.toast,
+    className: ve.toast,
     "data-comp": "Toast",
     width: o,
     maxWidth: n,
     children: [
-      /* @__PURE__ */ t(ke, { forceCloseButtonAlignment: !0, ...s }),
-      e && /* @__PURE__ */ t("div", { className: Ce.body, children: e })
+      /* @__PURE__ */ t(Le, { forceCloseButtonAlignment: !0, ...s }),
+      e && /* @__PURE__ */ t("div", { className: ve.body, children: e })
     ]
   }
-), go = "_toastBox_1lvsy_1", po = "_clickable_1lvsy_8", ve = {
-  toastBox: go,
-  clickable: po
-}, Go = ({ className: e, ...o }) => /* @__PURE__ */ t(
+), po = "_toastBox_1lvsy_1", ho = "_clickable_1lvsy_8", be = {
+  toastBox: po,
+  clickable: ho
+}, qo = ({ className: e, ...o }) => /* @__PURE__ */ t(
   B,
   {
     as: o.onClick ? "button" : void 0,
     className: c(
       e,
-      ve.toastBox,
-      o.onClick && ve.clickable
+      be.toastBox,
+      o.onClick && be.clickable
     ),
     "data-comp": "Toast",
     role: "alert",
     ...o
   }
-), ho = "_toastContainer_1rek2_1", yo = {
-  toastContainer: ho
-}, Vo = ({ ...e }) => /* @__PURE__ */ t(
-  qe,
+), yo = "_toastContainer_1rek2_1", Co = {
+  toastContainer: yo
+}, Xo = ({ ...e }) => /* @__PURE__ */ t(
+  Ve,
   {
-    className: yo.toastContainer,
+    className: Co.toastContainer,
     closeButton: ({ closeToast: o }) => /* @__PURE__ */ t(oe, { onClick: o }),
     hideProgressBar: !0,
     pauseOnFocusLoss: !1,
@@ -806,42 +816,42 @@ const De = ({
     draggable: !1,
     ...e
   }
-), Xo = (e, o) => Ge(e, o);
+), Yo = (e, o) => qe(e, o);
 export {
-  Oo as Alert,
-  Qe as BaseWindow,
+  zo as Alert,
+  Ze as BaseWindow,
   xe as DRAGGABLE_CANCEL_CLASSNAME,
-  $e as DRAGGABLE_HANDLE_CLASSNAME,
+  ke as DRAGGABLE_HANDLE_CLASSNAME,
   ee as DialogContext,
-  zo as Drawer,
-  Fo as DrawerHeader,
-  Ho as InfoAlert,
-  Io as LoadingModal,
-  Ct as Modal,
-  Gt as ModalActionButtons,
-  Xt as ModalBody,
-  Ut as ModalCloseButton,
-  Yt as ModalContainer,
-  So as ModalFooter,
-  Jt as ModalHeader,
+  Oo as Drawer,
+  Io as DrawerHeader,
+  So as InfoAlert,
+  Ao as LoadingModal,
+  vt as Modal,
+  qt as ModalActionButtons,
+  Yt as ModalBody,
+  Jt as ModalCloseButton,
+  Ut as ModalContainer,
+  jo as ModalFooter,
+  Kt as ModalHeader,
   De as ModalHeading,
-  jo as Notification,
-  ke as NotificationHeader,
-  Po as NotificationList,
-  qo as Toast,
-  Go as ToastBox,
-  Vo as ToastContainer,
-  to as UnreadDot,
-  Ao as Window,
-  To as WindowFooter,
-  Nt as WindowHeader,
-  so as getIconBgColorFromVariant,
-  Lo as setupDeclarativeModals,
-  Xo as showToast,
-  Ro as useAlertDialog,
+  Po as Notification,
+  Le as NotificationHeader,
+  Go as NotificationList,
+  Vo as Toast,
+  qo as ToastBox,
+  Xo as ToastContainer,
+  oo as UnreadDot,
+  To as Window,
+  Mo as WindowFooter,
+  wt as WindowHeader,
+  ro as getIconBgColorFromVariant,
+  Fo as setupDeclarativeModals,
+  Yo as showToast,
+  Eo as useAlertDialog,
   ne as useDialog,
-  Mo as useDialogPromise,
-  Eo as useDrawerDialog,
-  Wo as useModalDialog
+  Ro as useDialogPromise,
+  Wo as useDrawerDialog,
+  Ho as useModalDialog
 };
 //# sourceMappingURL=index.es.js.map