@stenajs-webui/modal 23.21.12 → 23.21.13

package/dist/index.es.js

@@ -1,43 +1,43 @@
-import F from "react-modal";
+import O from "react-modal";
 import { jsx as t, jsxs as a, Fragment as K } from "react/jsx-runtime";
-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 i from "classnames";
-import { exhaustSwitchCase as Ee, Spacing as I, getDataProps as We, Row as p, Space as Q, Heading as te, useEventCallback as He, Column as C, Box as B, Indent as Se, Txt as je, Text as Z } from "@stenajs-webui/core";
-import { Icon as Ne, FlatButton as we, stenaTimes as Pe, Spinner as Ge, CloseButton as oe, stenaTimesThick as Ve, CircledIcon as Be } from "@stenajs-webui/elements";
+import { useRef as B, useState as E, useEffect as Ae, createContext as Te, useReducer as Me, useCallback as L, useMemo as _e, createElement as fe, useContext as Re } from "react";
+import Ee from "react-draggable";
+import c from "classnames";
+import { exhaustSwitchCase as We, Spacing as F, getDataProps as He, Row as p, Space as Q, Heading as te, useEventCallback as Se, Column as v, Box as k, Indent as je, Txt as Pe, Text as Z } from "@stenajs-webui/core";
+import { Icon as Ne, FlatButton as Be, stenaTimes as qe, Spinner as Ve, CloseButton as oe, stenaTimesThick as Ge, CircledIcon as ke } from "@stenajs-webui/elements";
 import { cssColor as De } from "@stenajs-webui/theme";
-import { ToastContainer as qe, toast as Xe } from "react-toastify";
-import './index.css';const Oo = (e) => {
-  F.setAppElement(e);
-}, Ye = "_overlay_zoch3_1", Ue = "_modal_zoch3_33", Je = "_content_zoch3_43", Ke = "_isDraggable_zoch3_72", Qe = "_footer_zoch3_103", Ze = "_stickyFooter_zoch3_107", L = {
-  overlay: Ye,
-  modal: Ue,
-  content: Je,
-  isDraggable: Ke,
-  footer: Qe,
-  stickyFooter: Ze
-}, $e = "draggable-modal-handle", ke = "draggable-modal-cancel", et = ({
+import { ToastContainer as Xe, toast as Ye } from "react-toastify";
+import './index.css';const Io = (e) => {
+  O.setAppElement(e);
+}, Ue = "_overlay_zoch3_1", Je = "_modal_zoch3_33", Ke = "_content_zoch3_43", Qe = "_isDraggable_zoch3_72", Ze = "_footer_zoch3_103", et = "_stickyFooter_zoch3_107", z = {
+  overlay: Ue,
+  modal: Je,
+  content: Ke,
+  isDraggable: Qe,
+  footer: Ze,
+  stickyFooter: et
+}, $e = "draggable-modal-handle", xe = "draggable-modal-cancel", tt = ({
   width: e,
   maxWidth: o,
   draggable: n = !1,
   children: s,
   ...r
 }) => {
-  const c = w(null);
+  const i = B(null);
   return /* @__PURE__ */ t(
-    F,
+    O,
     {
-      overlayClassName: L.overlay,
-      className: L.modal,
+      overlayClassName: z.overlay,
+      className: z.modal,
       ...r,
       children: /* @__PURE__ */ t(
-        Re,
+        Ee,
         {
           handle: `.${$e}`,
-          cancel: `.${ke}, button, [role="tooltip"]`,
+          cancel: `.${xe}, button, [role="tooltip"]`,
           bounds: ".ReactModal__Overlay",
           disabled: !n,
-          nodeRef: c,
+          nodeRef: i,
           children: /* @__PURE__ */ t(
             "div",
             {
@@ -45,10 +45,10 @@ import './index.css';const Oo = (e) => {
                 "--swui-modal-width": e,
                 "--swui-modal-max-width": o
               },
-              className: i(L.content, {
-                [L.isDraggable]: n
+              className: c(z.content, {
+                [z.isDraggable]: n
               }),
-              ref: c,
+              ref: i,
               children: s
             }
           )
@@ -56,29 +56,29 @@ import './index.css';const Oo = (e) => {
       )
     }
   );
-}, tt = "_portal_194oy_1", ot = "_overlay_194oy_4", nt = "_content_194oy_9", st = "_floating_194oy_18", rt = "_slideFromLeft_194oy_32", at = "_slideFromRight_194oy_33", lt = "_afterOpen_194oy_39", ct = "_beforeClose_194oy_43", it = "_slideFromTop_194oy_48", dt = "_slideFromBottom_194oy_49", f = {
-  portal: tt,
-  overlay: ot,
-  content: nt,
-  floating: st,
-  slideFromLeft: rt,
-  slideFromRight: at,
-  afterOpen: lt,
-  beforeClose: ct,
-  slideFromTop: it,
-  slideFromBottom: dt
-}, Io = ({
+}, ot = "_portal_194oy_1", nt = "_overlay_194oy_4", st = "_content_194oy_9", rt = "_floating_194oy_18", at = "_slideFromLeft_194oy_32", lt = "_slideFromRight_194oy_33", ct = "_afterOpen_194oy_39", it = "_beforeClose_194oy_43", dt = "_slideFromTop_194oy_48", mt = "_slideFromBottom_194oy_49", f = {
+  portal: ot,
+  overlay: nt,
+  content: st,
+  floating: rt,
+  slideFromLeft: at,
+  slideFromRight: lt,
+  afterOpen: ct,
+  beforeClose: it,
+  slideFromTop: dt,
+  slideFromBottom: mt
+}, Ao = ({
   background: e,
   zIndex: o,
   children: n,
   slideFrom: s = "left",
   portalTarget: r,
-  floating: c,
-  ...m
+  floating: i,
+  ...d
 }) => {
-  const { height: l, width: h } = m;
+  const { height: l, width: y } = d;
   return /* @__PURE__ */ t(
-    F,
+    O,
     {
       closeTimeoutMS: 250,
       portalClassName: f.portal,
@@ -88,22 +88,22 @@ import './index.css';const Oo = (e) => {
         beforeClose: f.beforeClose
       },
       className: {
-        base: i(
+        base: c(
           f.content,
-          mt(s),
-          c && f.floating
+          ut(s),
+          i && f.floating
         ),
         afterOpen: f.afterOpen,
         beforeClose: f.beforeClose
       },
-      style: { content: { width: h, height: l, background: e }, overlay: { zIndex: o } },
+      style: { content: { width: y, height: l, background: e }, overlay: { zIndex: o } },
       parentSelector: r ? () => r : void 0,
-      ...m,
+      ...d,
       bodyOpenClassName: "swui-drawer-body-open",
       children: n
     }
   );
-}, mt = (e) => {
+}, ut = (e) => {
   switch (e) {
     case "left":
       return f.slideFromLeft;
@@ -114,23 +114,23 @@ import './index.css';const Oo = (e) => {
     case "bottom":
       return f.slideFromBottom;
     default:
-      return Ee(e, f.slideFromLeft);
+      return We(e, f.slideFromLeft);
   }
-}, zo = ({
+}, To = ({
   header: e,
   contentRight: o,
   onRequestClose: n,
   icon: s,
   headingLevel: r = "h1",
-  ...c
+  ...i
 }) => /* @__PURE__ */ t(
-  I,
+  F,
   {
     position: "sticky",
     top: 0,
     zIndex: 100,
     background: De("--lhds-color-ui-50"),
-    ...We(c),
+    ...He(i),
     children: /* @__PURE__ */ a(
       p,
       {
@@ -146,9 +146,9 @@ import './index.css';const Oo = (e) => {
           /* @__PURE__ */ a(p, { gap: 1, children: [
             o,
             /* @__PURE__ */ t(
-              we,
+              Be,
               {
-                leftIcon: Pe,
+                leftIcon: qe,
                 onClick: n,
                 variant: "danger"
               }
@@ -159,19 +159,19 @@ import './index.css';const Oo = (e) => {
       }
     )
   }
-), ut = "_overlay_1xtk3_1", _t = "_modal_1xtk3_33", ft = "_content_1xtk3_40", Y = {
-  overlay: ut,
-  modal: _t,
-  content: ft
-}, gt = { overlay: { justifyContent: "center" } }, Ao = ({
+), _t = "_overlay_1xtk3_1", ft = "_modal_1xtk3_33", gt = "_content_1xtk3_40", Y = {
+  overlay: _t,
+  modal: ft,
+  content: gt
+}, ht = { overlay: { justifyContent: "center" } }, Mo = ({
   children: e,
   ...o
 }) => /* @__PURE__ */ t(
-  F,
+  O,
   {
     overlayClassName: Y.overlay,
     className: Y.modal,
-    style: gt,
+    style: ht,
     ...o,
     children: /* @__PURE__ */ t(
       "div",
@@ -182,86 +182,96 @@ import './index.css';const Oo = (e) => {
       }
     )
   }
-), pt = "_overlay_20o05_1", ht = "_afterOpen_20o05_29", yt = "_beforeClose_20o05_29", Ct = "_modal_20o05_41", vt = "_content_20o05_64", $ = {
+), pt = "_overlay_qz2d4_1", yt = "_afterOpen_qz2d4_29", Ct = "_beforeClose_qz2d4_29", vt = "_modal_qz2d4_41", bt = "_content_qz2d4_64", wt = "_contentOverflowVisible_qz2d4_95", N = {
   overlay: pt,
-  afterOpen: ht,
-  beforeClose: yt,
-  modal: Ct,
-  content: vt
-}, fe = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), bt = ({
+  afterOpen: yt,
+  beforeClose: Ct,
+  modal: vt,
+  content: bt,
+  contentOverflowVisible: wt
+}, ge = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), Nt = ({
   children: e,
   background: o,
   className: n,
   overlayClassName: s,
-  ...r
+  allowContentOverflow: r = !1,
+  ...i
 }) => {
-  const c = w(null), [m, l] = E(fe ? "auto" : void 0), h = {
-    overlay: { justifyContent: "center" },
+  const d = B(null), [l, y] = E(ge ? "auto" : void 0), C = {
+    /*
+    A modal that lets content stick out of it is aligned to the top, since
+    whatever sticks out does so downwards and would otherwise run off the
+    bottom of the screen on a laptop. Everything else stays centred.
+    */
+    overlay: r ? {} : { justifyContent: "center" },
     content: {
       "--swui-modal-content-bg-color": o
     }
-  }, u = He(() => {
-    if (!fe)
+  }, u = Se(() => {
+    if (!ge)
       return;
-    const y = c.current;
-    y && l(
-      y.scrollHeight > y.clientHeight ? "stable" : "auto"
+    const g = d.current;
+    g && y(
+      g.scrollHeight > g.clientHeight ? "stable" : "auto"
     );
   });
-  return ze(() => (window.addEventListener("resize", u), document.addEventListener("DOMContentLoaded", u), () => {
+  return Ae(() => (window.addEventListener("resize", u), document.addEventListener("DOMContentLoaded", u), () => {
     window.removeEventListener("resize", u), document.removeEventListener("DOMContentLoaded", u);
   }), [u]), /* @__PURE__ */ t(
-    F,
+    O,
     {
       overlayClassName: {
-        base: i(s, $.overlay),
-        beforeClose: $.beforeClose,
-        afterOpen: $.afterOpen
+        base: c(s, N.overlay),
+        beforeClose: N.beforeClose,
+        afterOpen: N.afterOpen
       },
       className: {
-        base: i(n, $.modal),
-        beforeClose: $.beforeClose,
-        afterOpen: $.afterOpen
+        base: c(n, N.modal),
+        beforeClose: N.beforeClose,
+        afterOpen: N.afterOpen
       },
-      style: h,
+      style: C,
       closeTimeoutMS: 250,
       onAfterOpen: u,
-      ...r,
+      ...i,
       children: /* @__PURE__ */ t(
         "div",
         {
-          className: $.content,
+          className: c(
+            N.content,
+            r && N.contentOverflowVisible
+          ),
           style: {
             "--swui-modal-width": "fit-content",
-            scrollbarGutter: m
+            scrollbarGutter: l
           },
-          ref: c,
+          ref: d,
           children: e
         }
       )
     }
   );
-}, Nt = "_modal_4fwgb_1", wt = "_overlay_4fwgb_13", ge = {
-  modal: Nt,
-  overlay: wt
-}, To = ({
+}, Bt = "_modal_4fwgb_1", kt = "_overlay_4fwgb_13", he = {
+  modal: Bt,
+  overlay: kt
+}, Ro = ({
   headerIconLeft: e,
   headerText: o,
   shouldCloseOnOverlayClick: n = !1,
   shouldCloseOnEsc: s = !1,
   ...r
 }) => /* @__PURE__ */ t(
-  F,
+  O,
   {
     ...r,
     isOpen: !0,
     shouldCloseOnOverlayClick: n,
     shouldCloseOnEsc: s,
-    className: ge.modal,
-    overlayClassName: ge.overlay,
-    children: /* @__PURE__ */ a(C, { spacing: 2, alignItems: "center", children: [
+    className: he.modal,
+    overlayClassName: he.overlay,
+    children: /* @__PURE__ */ a(v, { spacing: 2, alignItems: "center", children: [
       /* @__PURE__ */ t(
-        B,
+        k,
         {
           alignItems: "center",
           justifyContent: "center",
@@ -270,22 +280,22 @@ import './index.css';const Oo = (e) => {
           borderRadius: "50%",
           background: "white",
           shadow: "modal",
-          children: /* @__PURE__ */ t(Ge, { size: "small" })
+          children: /* @__PURE__ */ t(Ve, { size: "small" })
         }
       ),
       (e || o) && /* @__PURE__ */ a(K, { children: [
-        /* @__PURE__ */ t(I, {}),
+        /* @__PURE__ */ t(F, {}),
         /* @__PURE__ */ a(p, { indent: 2, children: [
           e && /* @__PURE__ */ a(K, { children: [
             /* @__PURE__ */ t(Ne, { size: 14, icon: e, color: "white" }),
-            /* @__PURE__ */ t(Se, {})
+            /* @__PURE__ */ t(je, {})
           ] }),
           o && /* @__PURE__ */ t(te, { variant: "h4", color: "white", children: o })
         ] })
       ] })
     ] })
   }
-), Bt = ({
+), Dt = ({
   onRequestClose: e,
   header: o,
   headerText: n,
@@ -299,10 +309,10 @@ import './index.css';const Oo = (e) => {
     className: $e,
     children: [
       /* @__PURE__ */ a(p, { flex: 1, indent: !0, alignItems: "center", children: [
-        n && /* @__PURE__ */ t(je, { className: ke, size: "large", children: n }),
+        n && /* @__PURE__ */ t(Pe, { className: xe, size: "large", children: n }),
         o
       ] }),
-      /* @__PURE__ */ t(B, { alignSelf: "flex-start", children: /* @__PURE__ */ t(
+      /* @__PURE__ */ t(k, { alignSelf: "flex-start", children: /* @__PURE__ */ t(
         oe,
         {
           className: s,
@@ -311,47 +321,47 @@ import './index.css';const Oo = (e) => {
       ) })
     ]
   }
-), Mo = ({
+), Eo = ({
   header: e,
   headerText: o,
   children: n,
   spacing: s,
   indent: r,
-  draggable: c = !1,
-  onRequestClose: m,
+  draggable: i = !1,
+  onRequestClose: d,
   closeButtonClassName: l,
-  footer: h,
-  disableStickyFooter: u = !1,
-  ...y
+  footer: y,
+  disableStickyFooter: C = !1,
+  ...u
 }) => /* @__PURE__ */ a(
-  et,
+  tt,
   {
-    ...y,
-    onRequestClose: m,
-    draggable: c,
+    ...u,
+    onRequestClose: d,
+    draggable: i,
     children: [
       /* @__PURE__ */ t(
-        Bt,
+        Dt,
         {
-          onRequestClose: m,
+          onRequestClose: d,
           header: e,
           headerText: o,
           closeButtonClassName: l
         }
       ),
-      /* @__PURE__ */ t(B, { spacing: typeof s == "number" ? s : 1, indent: typeof r == "number" ? r : 1, children: n }),
-      h && /* @__PURE__ */ t(
-        B,
+      /* @__PURE__ */ t(k, { spacing: typeof s == "number" ? s : 1, indent: typeof r == "number" ? r : 1, children: n }),
+      y && /* @__PURE__ */ t(
+        k,
         {
-          className: i(L.footer, {
-            [L.stickyFooter]: !u
+          className: c(z.footer, {
+            [z.stickyFooter]: !C
           }),
-          children: h
+          children: y
         }
       )
     ]
   }
-), Ro = ({ children: e }) => /* @__PURE__ */ t(C, { indent: 2, spacing: 2, children: e }), ee = Ae(
+), Wo = ({ children: e }) => /* @__PURE__ */ t(v, { indent: 2, spacing: 2, children: e }), ee = Te(
   void 0
 );
 function ne(e, {
@@ -359,167 +369,170 @@ function ne(e, {
   modal: n,
   contentWrapperClassName: s,
   closingClassName: r,
-  contentWrapperStyle: c,
-  dialogStyle: m,
+  contentWrapperStyle: i,
+  dialogStyle: d,
   divInsteadOfDialog: l,
-  disableCloseOnClickOutside: h,
-  blockScroll: u = !0,
-  elementId: y,
-  onResolve: v,
-  onReject: k,
+  disableCloseOnClickOutside: y,
+  blockScroll: C = !0,
+  elementId: u,
+  onResolve: g,
+  onReject: $,
   className: se,
   background: W,
+  allowContentOverflow: re,
   label: H,
   labelledby: S,
   describedby: j
 }) {
-  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, x] = E(!1), [le, N] = E(!1), q = e, Ie = O(
-    (d) => (re.current = new Promise(
-      (g, me) => {
-        G.current = g, A.current = me;
+  const Le = B(null), _ = o ?? Le, [P, Fe] = Me((m) => m + 1, 0), ae = B(null), q = B(null), b = B(void 0), I = B(!1), A = B(null), [le, T] = E(!1), [V, x] = E(!1), [ce, w] = E(!1), G = e, Ie = L(
+    (m) => (ae.current = new Promise(
+      (h, ue) => {
+        q.current = h, A.current = ue;
       }
-    ), N(!1), T(!0), x(!0), Oe(), z.current = !1, b.current = d, n ? _.current?.showModal() : _.current?.show(), re.current),
+    ), w(!1), T(!0), x(!0), Fe(), I.current = !1, b.current = m, n ? _.current?.showModal() : _.current?.show(), ae.current),
     [_, n]
-  ), ce = O(
-    (d) => {
-      z.current = !0, N(!0), T(!1), l ? setTimeout(() => {
-        N(!1), x(!1), G.current?.(d), b.current = void 0, v?.();
+  ), ie = L(
+    (m) => {
+      I.current = !0, w(!0), T(!1), l ? setTimeout(() => {
+        w(!1), x(!1), q.current?.(m), b.current = void 0, g?.();
       }, 300) : _.current?.addEventListener(
         "animationend",
-        (g) => {
-          g.stopPropagation(), N(!1), x(!1), _.current?.close(), G.current?.(d), b.current = void 0, v?.();
+        (h) => {
+          h.stopPropagation(), w(!1), x(!1), _.current?.close(), q.current?.(m), b.current = void 0, g?.();
         },
         { once: !0 }
       );
     },
-    [_, v, l]
-  ), D = O(
-    (d) => {
-      z.current = !0, N(!0), T(!1), l ? setTimeout(() => {
-        N(!1), x(!1), A.current?.(d), k?.(), b.current = void 0;
+    [_, g, l]
+  ), D = L(
+    (m) => {
+      I.current = !0, w(!0), T(!1), l ? setTimeout(() => {
+        w(!1), x(!1), A.current?.(m), $?.(), b.current = void 0;
       }, 300) : _.current?.addEventListener(
         "animationend",
-        (g) => {
-          g.stopPropagation(), N(!1), x(!1), _.current?.close(), A.current?.(d), k?.(), b.current = void 0;
+        (h) => {
+          h.stopPropagation(), w(!1), x(!1), _.current?.close(), A.current?.(m), $?.(), b.current = void 0;
         },
         { once: !0 }
       );
     },
-    [_, l, k]
-  ), ie = O(
-    (d) => {
-      d.stopPropagation(), z.current || (N(!1), T(!1), x(!1), A.current?.(), k?.(), b.current = void 0);
+    [_, l, $]
+  ), de = L(
+    (m) => {
+      m.stopPropagation(), I.current || (w(!1), T(!1), x(!1), A.current?.(), $?.(), b.current = void 0);
     },
-    [k]
-  ), de = O(
-    (d) => {
-      if (d.target !== _.current)
+    [$]
+  ), me = L(
+    (m) => {
+      if (m.target !== _.current)
         return;
-      const g = _.current.getBoundingClientRect();
-      g.top <= d.clientY && d.clientY <= g.top + g.height && g.left <= d.clientX && d.clientX <= g.left + g.width || D();
+      const h = _.current.getBoundingClientRect();
+      h.top <= m.clientY && m.clientY <= h.top + h.height && h.left <= m.clientX && m.clientX <= h.left + h.width || D();
     },
     [_, D]
-  ), X = ue(
-    () => ({ resolve: ce, reject: D }),
-    [D, ce]
+  ), X = _e(
+    () => ({ resolve: ie, reject: D }),
+    [D, ie]
   );
-  return [ue(
+  return [_e(
     () => l ? /* @__PURE__ */ t(
-      bt,
+      Nt,
       {
-        isOpen: ae,
+        isOpen: le,
         onRequestClose: D,
         background: W,
+        allowContentOverflow: re,
         contentLabel: H,
-        id: y,
+        id: u,
         aria: { modal: !0, labelledby: S, describedby: j },
-        children: /* @__PURE__ */ t(ee.Provider, { value: X, children: V && /* @__PURE__ */ _e(q, { ...b.current, key: P }) })
+        children: /* @__PURE__ */ t(ee.Provider, { value: X, children: V && /* @__PURE__ */ fe(G, { ...b.current, key: P }) })
       }
     ) : /* @__PURE__ */ t(
       "dialog",
       {
-        onClick: h ? void 0 : de,
-        onClose: ie,
+        onClick: y ? void 0 : me,
+        onClose: de,
         ref: _,
-        id: y,
-        className: i(
-          u && "swui-block-scroll",
+        id: u,
+        className: c(
+          C && "swui-block-scroll",
           se,
-          le && r
+          ce && r
         ),
         "aria-label": H,
         "aria-labelledby": S,
         "aria-describedby": j,
-        style: { background: W, ...m },
-        children: /* @__PURE__ */ t("div", { style: c, className: s, children: V && /* @__PURE__ */ t(ee.Provider, { value: X, children: /* @__PURE__ */ _e(q, { ...b.current, key: P }) }) })
+        style: { background: W, ...d },
+        children: /* @__PURE__ */ t("div", { style: i, className: s, children: V && /* @__PURE__ */ t(ee.Provider, { value: X, children: /* @__PURE__ */ fe(G, { ...b.current, key: P }) }) })
       }
     ),
     [
       l,
-      ae,
+      le,
       D,
       W,
+      re,
       H,
-      y,
+      u,
       S,
       j,
       X,
       V,
-      q,
+      G,
       P,
-      h,
-      u,
+      y,
+      C,
+      me,
       de,
-      ie,
       _,
       se,
-      le,
+      ce,
       r,
-      m,
-      c,
+      d,
+      i,
       s
     ]
   ), { show: Ie, reject: D }];
 }
-const Eo = () => {
-  const e = Me(ee);
+const Ho = () => {
+  const e = Re(ee);
   if (e == null)
     throw new Error("useDialogPromise is being used outside of dialog.");
   return e;
-}, Dt = "_alertDialog_14t8t_1", $t = "_closing_14t8t_22", U = {
-  alertDialog: Dt,
-  closing: $t
+}, $t = "_alertDialog_14t8t_1", xt = "_closing_14t8t_22", U = {
+  alertDialog: $t,
+  closing: xt
 };
-function Wo(e, o) {
+function So(e, o) {
   return ne(e, {
     ...o,
     modal: !0,
-    closingClassName: i(o?.closingClassName, U.closing),
-    contentWrapperClassName: i(
+    closingClassName: c(o?.closingClassName, U.closing),
+    contentWrapperClassName: c(
       o?.contentWrapperClassName,
       U.contentWrapper
     ),
-    className: i(o?.className, U.alertDialog)
+    className: c(o?.className, U.alertDialog)
   });
 }
-const kt = "_drawerDialog_11g6r_1", xt = "_left_11g6r_13", Lt = "_right_11g6r_14", Ft = "_contentWrapper_11g6r_19", Ot = "_slideInLeft_11g6r_1", It = "_closing_11g6r_36", zt = "_slideOutLeft_11g6r_1", At = "_slideInRight_11g6r_1", Tt = "_slideOutRight_11g6r_1", Mt = "_top_11g6r_54", Rt = "_bottom_11g6r_55", Et = "_slideInTop_11g6r_1", Wt = "_slideOutTop_11g6r_1", Ht = "_slideInBottom_11g6r_1", St = "_slideOutBottom_11g6r_1", M = {
-  drawerDialog: kt,
-  left: xt,
+const zt = "_drawerDialog_11g6r_1", Ot = "_left_11g6r_13", Lt = "_right_11g6r_14", Ft = "_contentWrapper_11g6r_19", It = "_slideInLeft_11g6r_1", At = "_closing_11g6r_36", Tt = "_slideOutLeft_11g6r_1", Mt = "_slideInRight_11g6r_1", Rt = "_slideOutRight_11g6r_1", Et = "_top_11g6r_54", Wt = "_bottom_11g6r_55", Ht = "_slideInTop_11g6r_1", St = "_slideOutTop_11g6r_1", jt = "_slideInBottom_11g6r_1", Pt = "_slideOutBottom_11g6r_1", M = {
+  drawerDialog: zt,
+  left: Ot,
   right: Lt,
   contentWrapper: Ft,
-  slideInLeft: Ot,
-  closing: It,
-  slideOutLeft: zt,
-  slideInRight: At,
-  slideOutRight: Tt,
-  top: Mt,
-  bottom: Rt,
-  slideInTop: Et,
-  slideOutTop: Wt,
-  slideInBottom: Ht,
-  slideOutBottom: St
+  slideInLeft: It,
+  closing: At,
+  slideOutLeft: Tt,
+  slideInRight: Mt,
+  slideOutRight: Rt,
+  top: Et,
+  bottom: Wt,
+  slideInTop: Ht,
+  slideOutTop: St,
+  slideInBottom: jt,
+  slideOutBottom: Pt
 };
-function Ho(e, o = "left", n) {
+function jo(e, o = "left", n) {
   return ne(e, {
     ...n,
     disableCloseOnClickOutside: !0,
@@ -527,63 +540,63 @@ function Ho(e, o = "left", n) {
     // 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: i(n?.closingClassName, M.closing),
-    contentWrapperClassName: i(
+    closingClassName: c(n?.closingClassName, M.closing),
+    contentWrapperClassName: c(
       n?.contentWrapperClassName,
       M.contentWrapper
     ),
-    className: i(n?.className, M.drawerDialog, M[o])
+    className: c(n?.className, M.drawerDialog, M[o])
   });
 }
-const jt = "_modalDialog_iw29e_1", Pt = "_closing_iw29e_37", Gt = "_contentWrapper_iw29e_101", J = {
-  modalDialog: jt,
-  closing: Pt,
+const qt = "_modalDialog_iw29e_1", Vt = "_closing_iw29e_37", Gt = "_contentWrapper_iw29e_101", J = {
+  modalDialog: qt,
+  closing: Vt,
   contentWrapper: Gt
 };
-function So(e, o) {
+function Po(e, o) {
   return ne(e, {
     ...o,
     modal: !0,
-    closingClassName: i(o?.closingClassName, J.closing),
-    contentWrapperClassName: i(
+    closingClassName: c(o?.closingClassName, J.closing),
+    contentWrapperClassName: c(
       o?.contentWrapperClassName,
       J.contentWrapper
     ),
-    className: i(o?.className, J.modalDialog)
+    className: c(o?.className, J.modalDialog)
   });
 }
-const xe = ({
+const ze = ({
   headingLevel: e = "h2",
   size: o = "medium",
   children: n
-}) => /* @__PURE__ */ t(te, { variant: o === "medium" ? "h3" : "h1", as: e, children: n }), Vt = "_modalActionButtons_zeqa6_1", qt = {
-  modalActionButtons: Vt
-}, Xt = ({
-  children: e
-}) => /* @__PURE__ */ a(B, { width: "100%", children: [
-  /* @__PURE__ */ t(I, {}),
-  /* @__PURE__ */ t("div", { className: qt.modalActionButtons, children: e })
-] }), Yt = "_modalBody_ozynq_1", pe = {
-  modalBody: Yt
+}) => /* @__PURE__ */ t(te, { variant: o === "medium" ? "h3" : "h1", as: e, children: n }), Xt = "_modalActionButtons_zeqa6_1", Yt = {
+  modalActionButtons: Xt
 }, Ut = ({
+  children: e
+}) => /* @__PURE__ */ a(k, { width: "100%", children: [
+  /* @__PURE__ */ t(F, {}),
+  /* @__PURE__ */ t("div", { className: Yt.modalActionButtons, children: e })
+] }), Jt = "_modalBody_ozynq_1", pe = {
+  modalBody: Jt
+}, Kt = ({
   gap: e = 3,
   variant: o = "normal",
   className: n,
   ...s
 }) => /* @__PURE__ */ t(
-  C,
+  v,
   {
-    className: i(pe.modalBody, pe[o], n),
+    className: c(pe.modalBody, pe[o], n),
     indent: o === "relaxed" ? 5 : 3,
     spacing: o === "relaxed" ? 5 : 3,
     gap: e,
     ...s
   }
-), Jt = ({
+), Qt = ({
   children: e,
   maxWidth: o
 }) => /* @__PURE__ */ t(
-  C,
+  v,
   {
     flex: 1,
     height: "100%",
@@ -591,72 +604,72 @@ const xe = ({
     maxWidth: o,
     children: e
   }
-), Kt = (e) => /* @__PURE__ */ t(
-  we,
+), Zt = (e) => /* @__PURE__ */ t(
+  Be,
   {
     size: "large",
     variant: "danger",
-    leftIcon: Ve,
+    leftIcon: Ge,
     ...e
   }
-), Qt = ({
+), eo = ({
   heading: e,
   headingLevel: o,
   headingSize: n,
   onClickClose: s,
   closeButtonAriaLabel: r
-}) => /* @__PURE__ */ t(C, { children: /* @__PURE__ */ a(p, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
-  e ? /* @__PURE__ */ t(xe, { headingLevel: o, size: n, children: e }) : /* @__PURE__ */ t("div", {}),
+}) => /* @__PURE__ */ t(v, { children: /* @__PURE__ */ a(p, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
+  e ? /* @__PURE__ */ t(ze, { headingLevel: o, size: n, children: e }) : /* @__PURE__ */ t("div", {}),
   s ? /* @__PURE__ */ t(
-    Kt,
+    Zt,
     {
       onClick: s,
       size: n,
       "aria-label": r
     }
   ) : null
-] }) }), jo = ({
+] }) }), qo = ({
   icon: e,
   buttons: o,
   heading: n,
   text: s,
   children: r,
-  maxWidth: c,
-  minWidth: m,
+  maxWidth: i,
+  minWidth: d,
   ...l
-}) => /* @__PURE__ */ t(Jt, { children: /* @__PURE__ */ a(Ut, { gap: 0, children: [
+}) => /* @__PURE__ */ t(Qt, { children: /* @__PURE__ */ a(Kt, { gap: 0, children: [
   l.onClickClose && /* @__PURE__ */ t(
-    Qt,
+    eo,
     {
       onClickClose: l.onClickClose,
       closeButtonAriaLabel: l.closeButtonAriaLabel
     }
   ),
   /* @__PURE__ */ a(
-    C,
+    v,
     {
       gap: 2,
       flexDirection: "column",
       alignItems: "center",
-      maxWidth: c,
-      minWidth: m,
+      maxWidth: i,
+      minWidth: d,
       children: [
         e && /* @__PURE__ */ a(K, { children: [
-          !l.onClickClose && /* @__PURE__ */ t(I, {}),
-          /* @__PURE__ */ t(Be, { icon: e, size: "large" }),
-          /* @__PURE__ */ t(I, {})
+          !l.onClickClose && /* @__PURE__ */ t(F, {}),
+          /* @__PURE__ */ t(ke, { icon: e, size: "large" }),
+          /* @__PURE__ */ t(F, {})
         ] }),
-        /* @__PURE__ */ t(xe, { children: n }),
+        /* @__PURE__ */ t(ze, { children: n }),
         s && /* @__PURE__ */ t(Z, { textAlign: "center", children: s }),
         r,
-        o && /* @__PURE__ */ t(Xt, { children: o })
+        o && /* @__PURE__ */ t(Ut, { children: o })
       ]
     }
   )
-] }) }), Zt = "_modalFooter_1ypno_1", eo = "_sticky_1ypno_10", he = {
-  modalFooter: Zt,
-  sticky: eo
-}, Po = ({
+] }) }), to = "_modalFooter_1uwtk_1", oo = "_sticky_1uwtk_20", ye = {
+  modalFooter: to,
+  sticky: oo
+}, Vo = ({
   sticky: e,
   zIndex: o = 4,
   gap: n = 2,
@@ -665,42 +678,42 @@ const xe = ({
 }) => /* @__PURE__ */ t(
   p,
   {
-    className: i(he.modalFooter, e && he.sticky, s),
+    className: c(ye.modalFooter, e && ye.sticky, s),
     shadow: "var(--swui-sticky-footer-shadow)",
     zIndex: o,
     gap: n,
     ...r
   }
-), to = "_unreadDot_l8bni_1", oo = "_dot_l8bni_4", ye = {
-  unreadDot: to,
-  dot: oo
-}, no = ({ children: e }) => /* @__PURE__ */ a("div", { className: ye.unreadDot, children: [
+), no = "_unreadDot_l8bni_1", so = "_dot_l8bni_4", Ce = {
+  unreadDot: no,
+  dot: so
+}, ro = ({ children: e }) => /* @__PURE__ */ a("div", { className: Ce.unreadDot, children: [
   e,
-  /* @__PURE__ */ t("div", { className: ye.dot })
-] }), so = "_notificationHeader_1rl25_1", ro = "_timestamp_1rl25_2", Ce = {
-  notificationHeader: so,
-  timestamp: ro
-}, Le = ({
+  /* @__PURE__ */ t("div", { className: Ce.dot })
+] }), ao = "_notificationHeader_1rl25_1", lo = "_timestamp_1rl25_2", ve = {
+  notificationHeader: ao,
+  timestamp: lo
+}, Oe = ({
   text: e,
   timestamp: o,
   icon: n,
   iconAriaLabel: s,
   contentLeft: r,
-  contentRight: c,
-  onClickClose: m,
+  contentRight: i,
+  onClickClose: d,
   unread: l = !1,
-  variant: h,
-  iconBackgroundColor: u,
-  forceCloseButtonAlignment: y
+  variant: y,
+  iconBackgroundColor: C,
+  forceCloseButtonAlignment: u
 }) => {
-  const v = n ? /* @__PURE__ */ t(
-    Be,
+  const g = n ? /* @__PURE__ */ t(
+    ke,
     {
       size: "small",
       icon: n,
       "aria-label": s,
       variant: "whiteBg",
-      backgroundColor: u || ao(l, h)
+      backgroundColor: C || co(l, y)
     }
   ) : void 0;
   return /* @__PURE__ */ a(
@@ -709,16 +722,16 @@ const xe = ({
       alignItems: "flex-start",
       justifyContent: "space-between",
       "data-comp": "NotificationHeader",
-      className: Ce.notificationHeader,
+      className: ve.notificationHeader,
       gap: 2,
       children: [
         /* @__PURE__ */ a(p, { gap: 2, alignItems: "flex-start", children: [
-          r && /* @__PURE__ */ t(C, { justifyContent: "center", children: r }),
-          !r && v && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", children: l ? /* @__PURE__ */ t(no, { 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,
+          r && /* @__PURE__ */ t(v, { justifyContent: "center", children: r }),
+          !r && g && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", children: l ? /* @__PURE__ */ t(ro, { children: g }) : g }),
+          /* @__PURE__ */ a(k, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
+            n || d || u ? /* @__PURE__ */ t(Q, { num: 0.5 }) : null,
             /* @__PURE__ */ t(Z, { variant: "bold", children: e }),
-            o && /* @__PURE__ */ t("div", { className: Ce.timestamp, children: /* @__PURE__ */ t(
+            o && /* @__PURE__ */ t("div", { className: ve.timestamp, children: /* @__PURE__ */ t(
               Z,
               {
                 size: "small",
@@ -730,20 +743,20 @@ const xe = ({
             ) })
           ] })
         ] }),
-        c && /* @__PURE__ */ t(C, { justifyContent: "center", children: c }),
-        m && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", width: "40px", children: /* @__PURE__ */ t(oe, { onClick: m }) })
+        i && /* @__PURE__ */ t(v, { justifyContent: "center", children: i }),
+        d && /* @__PURE__ */ t(p, { alignItems: "center", height: "40px", width: "40px", children: /* @__PURE__ */ t(oe, { onClick: d }) })
       ]
     }
   );
-}, ao = (e, o) => {
+}, co = (e, o) => {
   if (!(!e && o === "standard"))
     return "--lhds-color-ui-50";
-}, lo = "_notification_tpz0j_1", co = "_body_tpz0j_10", io = "_standard_tpz0j_15", mo = "_unread_tpz0j_16", uo = "_danger_tpz0j_21", R = {
-  notification: lo,
-  body: co,
-  standard: io,
-  unread: mo,
-  danger: uo
+}, io = "_notification_tpz0j_1", mo = "_body_tpz0j_10", uo = "_standard_tpz0j_15", _o = "_unread_tpz0j_16", fo = "_danger_tpz0j_21", R = {
+  notification: io,
+  body: mo,
+  standard: uo,
+  unread: _o,
+  danger: fo
 }, Go = ({
   variant: e = "standard",
   children: o,
@@ -753,65 +766,65 @@ const xe = ({
   "div",
   {
     "data-comp": "Notification",
-    className: i(
+    className: c(
       R.notification,
       R[e],
       n && R.unread
     ),
     children: [
-      /* @__PURE__ */ t(Le, { ...s, unread: n, variant: e }),
-      o && /* @__PURE__ */ t(C, { className: R.body, children: o })
+      /* @__PURE__ */ t(Oe, { ...s, unread: n, variant: e }),
+      o && /* @__PURE__ */ t(v, { className: R.body, children: o })
     ]
   }
-), _o = "_notificationList_1rkvu_1", fo = {
-  notificationList: _o
-}, Vo = ({
+), go = "_notificationList_1rkvu_1", ho = {
+  notificationList: go
+}, Xo = ({
   children: e
-}) => /* @__PURE__ */ a("div", { "data-comp": "NotificationList", className: fo.notificationList, children: [
+}) => /* @__PURE__ */ a("div", { "data-comp": "NotificationList", className: ho.notificationList, children: [
   e,
   /* @__PURE__ */ t("div", {})
-] }), go = "_toast_1ifzt_1", po = "_body_1ifzt_2", ve = {
-  toast: go,
-  body: po
-}, qo = ({
+] }), po = "_toast_1ifzt_1", yo = "_body_1ifzt_2", be = {
+  toast: po,
+  body: yo
+}, Yo = ({
   children: e,
   width: o = 364,
   maxWidth: n,
   ...s
 }) => /* @__PURE__ */ a(
-  B,
+  k,
   {
-    className: ve.toast,
+    className: be.toast,
     "data-comp": "Toast",
     width: o,
     maxWidth: n,
     children: [
-      /* @__PURE__ */ t(Le, { forceCloseButtonAlignment: !0, ...s }),
-      e && /* @__PURE__ */ t("div", { className: ve.body, children: e })
+      /* @__PURE__ */ t(Oe, { forceCloseButtonAlignment: !0, ...s }),
+      e && /* @__PURE__ */ t("div", { className: be.body, children: e })
     ]
   }
-), ho = "_toastBox_1lvsy_1", yo = "_clickable_1lvsy_8", be = {
-  toastBox: ho,
-  clickable: yo
-}, Xo = ({ className: e, ...o }) => /* @__PURE__ */ t(
-  B,
+), Co = "_toastBox_1lvsy_1", vo = "_clickable_1lvsy_8", we = {
+  toastBox: Co,
+  clickable: vo
+}, Uo = ({ className: e, ...o }) => /* @__PURE__ */ t(
+  k,
   {
     as: o.onClick ? "button" : void 0,
-    className: i(
+    className: c(
       e,
-      be.toastBox,
-      o.onClick && be.clickable
+      we.toastBox,
+      o.onClick && we.clickable
     ),
     "data-comp": "Toast",
     role: "alert",
     ...o
   }
-), Co = "_toastContainer_1rek2_1", vo = {
-  toastContainer: Co
-}, Yo = ({ ...e }) => /* @__PURE__ */ t(
-  qe,
+), bo = "_toastContainer_1rek2_1", wo = {
+  toastContainer: bo
+}, Jo = ({ ...e }) => /* @__PURE__ */ t(
+  Xe,
   {
-    className: vo.toastContainer,
+    className: wo.toastContainer,
     closeButton: ({ closeToast: o }) => /* @__PURE__ */ t(oe, { onClick: o }),
     hideProgressBar: !0,
     pauseOnFocusLoss: !1,
@@ -819,42 +832,42 @@ const xe = ({
     draggable: !1,
     ...e
   }
-), Uo = (e, o) => Xe(e, o);
+), Ko = (e, o) => Ye(e, o);
 export {
-  Ao as Alert,
-  et as BaseWindow,
-  ke as DRAGGABLE_CANCEL_CLASSNAME,
+  Mo as Alert,
+  tt as BaseWindow,
+  xe as DRAGGABLE_CANCEL_CLASSNAME,
   $e as DRAGGABLE_HANDLE_CLASSNAME,
   ee as DialogContext,
-  Io as Drawer,
-  zo as DrawerHeader,
-  jo as InfoAlert,
-  To as LoadingModal,
-  bt as Modal,
-  Xt as ModalActionButtons,
-  Ut as ModalBody,
-  Kt as ModalCloseButton,
-  Jt as ModalContainer,
-  Po as ModalFooter,
-  Qt as ModalHeader,
-  xe as ModalHeading,
+  Ao as Drawer,
+  To as DrawerHeader,
+  qo as InfoAlert,
+  Ro as LoadingModal,
+  Nt as Modal,
+  Ut as ModalActionButtons,
+  Kt as ModalBody,
+  Zt as ModalCloseButton,
+  Qt as ModalContainer,
+  Vo as ModalFooter,
+  eo as ModalHeader,
+  ze as ModalHeading,
   Go as Notification,
-  Le as NotificationHeader,
-  Vo as NotificationList,
-  qo as Toast,
-  Xo as ToastBox,
-  Yo as ToastContainer,
-  no as UnreadDot,
-  Mo as Window,
-  Ro as WindowFooter,
-  Bt as WindowHeader,
-  ao as getIconBgColorFromVariant,
-  Oo as setupDeclarativeModals,
-  Uo as showToast,
-  Wo as useAlertDialog,
+  Oe as NotificationHeader,
+  Xo as NotificationList,
+  Yo as Toast,
+  Uo as ToastBox,
+  Jo as ToastContainer,
+  ro as UnreadDot,
+  Eo as Window,
+  Wo as WindowFooter,
+  Dt as WindowHeader,
+  co as getIconBgColorFromVariant,
+  Io as setupDeclarativeModals,
+  Ko as showToast,
+  So as useAlertDialog,
   ne as useDialog,
-  Eo as useDialogPromise,
-  Ho as useDrawerDialog,
-  So as useModalDialog
+  Ho as useDialogPromise,
+  jo as useDrawerDialog,
+  Po as useModalDialog
 };
 //# sourceMappingURL=index.es.js.map