@hortiview/shared-components 2.2.0 → 2.4.0

package/dist/components/GenericTable/GenericTable.test.js

@@ -55,18 +55,18 @@ h("GenericTable Test", () => {
     ] })), t(e.getByText("primText")).toBeInTheDocument(), e.getByText("primText").click(), t(d).toHaveBeenCalledWith(1);
   }), i("render GenericTable with custom order", () => {
     o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test", age: 20 }], order: ["name", "age"] }));
-    const d = e.getByText("id"), c = e.getByText("name"), l = e.getByText("age");
-    t(c).toBeInTheDocument(), t(l).toBeInTheDocument(), t(d).toBeInTheDocument(), t(c.compareDocumentPosition(l)).toBe(4), t(l.compareDocumentPosition(d)).toBe(4);
+    const d = e.getByText("id"), l = e.getByText("name"), c = e.getByText("age");
+    t(l).toBeInTheDocument(), t(c).toBeInTheDocument(), t(d).toBeInTheDocument(), t(l.compareDocumentPosition(c)).toBe(4), t(c.compareDocumentPosition(d)).toBe(4);
   }), i("render GenericTable with custom columnWidth in pixel", () => {
     o(
       /* @__PURE__ */ a(s, { data: [{ id: 1, name: "test", age: 20 }], customColumnWidth: { id: 200, name: 200, age: 200 } })
     );
-    const c = e.getAllByRole("cell")[0].getAttribute("width");
-    t(c).toBe("200");
+    const l = e.getAllByRole("cell")[0].getAttribute("width");
+    t(l).toBe("200");
   }), i("render GenericTable with custom columnWidth in percent", () => {
     o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], customColumnWidth: { id: "50%", name: "50%" } }));
-    const c = e.getAllByRole("cell")[0].getAttribute("width");
-    t(c).toBe("50%");
+    const l = e.getAllByRole("cell")[0].getAttribute("width");
+    t(l).toBe("50%");
   }), i("render GenericTable with title", () => {
     o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], title: "test-title" })), t(e.getByText("test-title")).toBeInTheDocument();
   }), i("render GenericTable with title and table actions", () => {
@@ -81,5 +81,35 @@ h("GenericTable Test", () => {
       isTablet: !1,
       isDesktopNavbar: !1
     }), o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test", age: 20 }], title: "test-title", cardTitleColumn: "name" })), t(e.getAllByTestId("card-title")).toHaveLength(1), t(e.getAllByTestId("card-body")).toHaveLength(1), t(e.getAllByTestId("row")).toHaveLength(2);
+  }), i("render GenericTable with OfflineView", () => {
+    o(
+      /* @__PURE__ */ a(
+        s,
+        {
+          data: [{ id: 1, name: "test" }],
+          noContentText: "noContent",
+          isOnline: !1,
+          offlineViewProps: { "data-testid": "offline-test" }
+        }
+      )
+    ), t(e.getByTestId("offline-test")).toBeInTheDocument();
+  }), i("shows OfflineView on mobile when offline", () => {
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isDesktop: !1,
+      isMobile: !0,
+      isTablet: !1,
+      isDesktopNavbar: !1
+    }), o(
+      /* @__PURE__ */ a(
+        s,
+        {
+          data: [{ id: 1, name: "test", age: 20 }],
+          title: "test-title",
+          cardTitleColumn: "name",
+          isOnline: !1,
+          offlineViewProps: { "data-testid": "offline-test" }
+        }
+      )
+    ), t(e.getByTestId("offline-test")).toBeInTheDocument();
   });
 });

package/dist/components/Modal/Modal.d.ts

@@ -1,8 +1,11 @@
 import { ModalProps as ElementModalProps } from '@element-public/react-modal';
 import { AvailableCustomIcons } from '../../enums/AvailableCustomIcons';
+import { OfflineViewProps } from '../OfflineView/OfflineView';
 
 type ModalProps = ElementModalProps & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement> & {
     leadingIcon?: keyof typeof AvailableCustomIcons | string;
+    isOnline?: boolean;
+    offlineViewProps?: Partial<OfflineViewProps>;
 };
 /**
  * A custom modal providing a custom header and close button.
@@ -13,7 +16,9 @@ type ModalProps = ElementModalProps & React.HTMLProps<HTMLElement> & React.DOMAt
  * @param hideCloseIcon - If true, the close icon will be hidden. @default true.
  * @param leadingIcon - Iconify icon string (material icons and custom icons)
  * @param - Other element props to pass to the modal.
+ * @param isOnline - Whether the user is online; shows OfflineView when false.
+ * @param offlineViewProps - Props forwarded to OfflineView when offline.
  * @returns
  */
-export declare const Modal: ({ onClose, title, headerActions, hideCloseIcon, leadingIcon, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ onClose, title, headerActions, hideCloseIcon, leadingIcon, isOnline, offlineViewProps, children, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Modal/Modal.js

@@ -1,9 +1,9 @@
-import { jsxs as ft, jsx as _, Fragment as pt } from "react/jsx-runtime";
-import { G as V } from "../../index.es-DntoATwO.js";
+import { jsxs as ft, jsx as C, Fragment as pt } from "react/jsx-runtime";
+import { G as z } from "../../index.es-DntoATwO.js";
 import { I as it } from "../../index.es-0lQcz8m1.js";
 import { _ as ht, c as B, P as s } from "../../identity-DLWZln-X.js";
-import d, { forwardRef as gt, useRef as et, useImperativeHandle as Et, useState as nt, useEffect as g, useCallback as z, useMemo as Y } from "react";
-import { i as _t, c as A, a as Ct } from "../../index.es-da0cf7oE.js";
+import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as _, useCallback as j, useMemo as Y } from "react";
+import { i as Et, c as b, a as Ct } from "../../index.es-da0cf7oE.js";
 import { b as at, c as ot, d as St } from "../../tslib.es6-BDCynO9F.js";
 import { M as vt, a as yt } from "../../component-neHBNHRu.js";
 import { M as Ot, c as Tt, m as At } from "../../component-DsB0poTj.js";
@@ -11,6 +11,7 @@ import { A as bt } from "../../animationframe-EMBh6XeO.js";
 import { P as Dt } from "../../index.es-D-CKRzIB.js";
 import { b as It } from "../../index.es-D54RuMc_.js";
 import { Iconify as Nt } from "../Iconify/Iconify.js";
+import { O as Lt } from "../../OfflineView-BW19N4Cu.js";
 import '../../assets/Modal.css';/**
  * @license
  * Copyright 2016 Google Inc.
@@ -33,19 +34,19 @@ import '../../assets/Modal.css';/**
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-function Lt(i, e, t) {
+function Ft(i, e, t) {
   return e(i, { initialFocusEl: t });
 }
-function Ft(i) {
+function Rt(i) {
   return i ? i.scrollHeight > i.offsetHeight : !1;
 }
-function Rt(i) {
+function Bt(i) {
   return i ? i.scrollTop === 0 : !1;
 }
-function Bt(i) {
+function wt(i) {
   return i ? Math.ceil(i.scrollHeight - i.scrollTop) === i.clientHeight : !1;
 }
-function wt(i) {
+function Mt(i) {
   var e = /* @__PURE__ */ new Set();
   return [].forEach.call(i, function(t) {
     return e.add(t.offsetTop);
@@ -73,7 +74,7 @@ function wt(i) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var j = "mdc-dom-focus-sentinel", Mt = (
+var q = "mdc-dom-focus-sentinel", kt = (
   /** @class */
   function() {
     function i(e, t) {
@@ -85,7 +86,7 @@ var j = "mdc-dom-focus-sentinel", Mt = (
         throw new Error("FocusTrap: Element must have at least one focusable child.");
       this.elFocusedBeforeTrapFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.wrapTabFocus(this.root), this.options.skipInitialFocus || this.focusInitialElement(e, this.options.initialFocusEl);
     }, i.prototype.releaseFocus = function() {
-      [].slice.call(this.root.querySelectorAll("." + j)).forEach(function(e) {
+      [].slice.call(this.root.querySelectorAll("." + q)).forEach(function(e) {
         e.parentElement.removeChild(e);
       }), !this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus && this.elFocusedBeforeTrapFocus.focus();
     }, i.prototype.wrapTabFocus = function(e) {
@@ -103,7 +104,7 @@ var j = "mdc-dom-focus-sentinel", Mt = (
     }, i.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(j) && !o, f = !1;
+        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(q) && !o, f = !1;
         if (a) {
           var p = getComputedStyle(n);
           f = p.display === "none" || p.visibility === "hidden";
@@ -112,7 +113,7 @@ var j = "mdc-dom-focus-sentinel", Mt = (
       });
     }, i.prototype.createSentinel = function() {
       var e = document.createElement("div");
-      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(j), e;
+      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(q), e;
     }, i;
   }()
 );
@@ -171,7 +172,7 @@ var r = {
   // to prevent interactions with the content behind this scrim, and to capture
   // scrim clicks.
   SCRIM_HIDDEN: "mdc-dialog__scrim--hidden"
-}, S = {
+}, v = {
   ACTION_ATTRIBUTE: "data-mdc-dialog-action",
   BUTTON_DEFAULT_ATTRIBUTE: "data-mdc-dialog-button-default",
   BUTTON_SELECTOR: ".mdc-dialog__button",
@@ -191,7 +192,7 @@ var r = {
     ".mdc-menu .mdc-deprecated-list-item"
   ].join(", "),
   SURFACE_SELECTOR: ".mdc-dialog__surface"
-}, q = {
+}, $ = {
   DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
   DIALOG_ANIMATION_OPEN_TIME_MS: 150
 };
@@ -217,17 +218,17 @@ var r = {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var w;
+var M;
 (function(i) {
   i.POLL_SCROLL_POS = "poll_scroll_position", i.POLL_LAYOUT_CHANGE = "poll_layout_change";
-})(w || (w = {}));
+})(M || (M = {}));
 var rt = (
   /** @class */
   function(i) {
     at(e, i);
     function e(t) {
       var n = i.call(this, ot(ot({}, e.defaultAdapter), t)) || this;
-      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = S.CLOSE_ACTION, n.scrimClickAction = S.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = S.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new bt(), n.contentScrollHandler = function() {
+      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = v.CLOSE_ACTION, n.scrimClickAction = v.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = v.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new bt(), n.contentScrollHandler = function() {
         n.handleScrollEvent();
       }, n.windowResizeHandler = function() {
         n.layout();
@@ -243,13 +244,13 @@ var rt = (
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return S;
+        return v;
       },
       enumerable: !1,
       configurable: !0
     }), Object.defineProperty(e, "numbers", {
       get: function() {
-        return q;
+        return $;
       },
       enumerable: !1,
       configurable: !0
@@ -319,19 +320,19 @@ var rt = (
     }), e.prototype.init = function() {
       this.adapter.hasClass(r.STACKED) && this.setAutoStackButtons(!1), this.isFullscreen = this.adapter.hasClass(r.FULLSCREEN);
     }, e.prototype.destroy = function() {
-      this.dialogOpen && this.close(S.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
+      this.dialogOpen && this.close(v.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
     }, e.prototype.open = function(t) {
       var n = this;
       this.dialogOpen = !0, this.adapter.notifyOpening(), this.adapter.addClass(r.OPENING), this.isFullscreen && this.adapter.registerContentEventHandler("scroll", this.contentScrollHandler), t && t.isAboveFullscreenDialog && this.adapter.addClass(r.SCRIM_HIDDEN), this.adapter.registerWindowEventHandler("resize", this.windowResizeHandler), this.adapter.registerWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), this.runNextAnimationFrame(function() {
         n.adapter.addClass(r.OPEN), n.adapter.addBodyClass(r.SCROLL_LOCK), n.layout(), n.animationTimer = setTimeout(function() {
           n.handleAnimationTimerEnd(), n.adapter.trapFocus(n.adapter.getInitialFocusEl()), n.adapter.notifyOpened();
-        }, q.DIALOG_ANIMATION_OPEN_TIME_MS);
+        }, $.DIALOG_ANIMATION_OPEN_TIME_MS);
       });
     }, e.prototype.close = function(t) {
       var n = this;
       t === void 0 && (t = ""), this.dialogOpen && (this.dialogOpen = !1, this.adapter.notifyClosing(t), this.adapter.addClass(r.CLOSING), this.adapter.removeClass(r.OPEN), this.adapter.removeBodyClass(r.SCROLL_LOCK), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), cancelAnimationFrame(this.animationFrame), this.animationFrame = 0, clearTimeout(this.animationTimer), this.animationTimer = setTimeout(function() {
         n.adapter.releaseFocus(), n.handleAnimationTimerEnd(), n.adapter.notifyClosed(t);
-      }, q.DIALOG_ANIMATION_CLOSE_TIME_MS));
+      }, $.DIALOG_ANIMATION_CLOSE_TIME_MS));
     }, e.prototype.showSurfaceScrim = function() {
       var t = this;
       this.adapter.addClass(r.SURFACE_SCRIM_SHOWING), this.runNextAnimationFrame(function() {
@@ -361,11 +362,11 @@ var rt = (
       this.suppressDefaultPressSelector = t;
     }, e.prototype.layout = function() {
       var t = this;
-      this.animFrame.request(w.POLL_LAYOUT_CHANGE, function() {
+      this.animFrame.request(M.POLL_LAYOUT_CHANGE, function() {
         t.layoutInternal();
       });
     }, e.prototype.handleClick = function(t) {
-      var n = this.adapter.eventTargetMatches(t.target, S.SCRIM_SELECTOR);
+      var n = this.adapter.eventTargetMatches(t.target, v.SCRIM_SELECTOR);
       if (n && this.scrimClickAction !== "")
         this.close(this.scrimClickAction);
       else {
@@ -386,7 +387,7 @@ var rt = (
       n && this.escapeKeyAction !== "" && this.close(this.escapeKeyAction);
     }, e.prototype.handleScrollEvent = function() {
       var t = this;
-      this.animFrame.request(w.POLL_SCROLL_POS, function() {
+      this.animFrame.request(M.POLL_SCROLL_POS, function() {
         t.toggleScrollDividerHeader(), t.toggleScrollDividerFooter();
       });
     }, e.prototype.layoutInternal = function() {
@@ -433,7 +434,7 @@ var rt = (
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var u = rt.strings, kt = (
+var u = rt.strings, Ht = (
   /** @class */
   function(i) {
     at(e, i);
@@ -477,8 +478,8 @@ var u = rt.strings, kt = (
       return new e(t);
     }, e.prototype.initialize = function(t) {
       var n, o;
-      t === void 0 && (t = function(E, C) {
-        return new Mt(E, C);
+      t === void 0 && (t = function(h, E) {
+        return new kt(h, E);
       });
       var a = this.root.querySelector(u.CONTAINER_SELECTOR);
       if (!a)
@@ -486,11 +487,11 @@ var u = rt.strings, kt = (
       this.container = a, this.content = this.root.querySelector(u.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(u.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + u.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
       try {
         for (var f = St(this.buttons), p = f.next(); !p.done; p = f.next()) {
-          var v = p.value;
-          this.buttonRipples.push(new Ot(v));
+          var S = p.value;
+          this.buttonRipples.push(new Ot(S));
         }
-      } catch (E) {
-        n = { error: E };
+      } catch (h) {
+        n = { error: h };
       } finally {
         try {
           p && !p.done && (o = f.return) && o.call(f);
@@ -500,7 +501,7 @@ var u = rt.strings, kt = (
       }
     }, e.prototype.initialSyncWithDOM = function() {
       var t = this;
-      this.focusTrap = Lt(this.container, this.focusTrapFactory, this.getInitialFocusEl() || void 0), this.handleClick = this.foundation.handleClick.bind(this.foundation), this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation), this.handleDocumentKeydown = this.foundation.handleDocumentKeydown.bind(this.foundation), this.handleOpening = function() {
+      this.focusTrap = Ft(this.container, this.focusTrapFactory, this.getInitialFocusEl() || void 0), this.handleClick = this.foundation.handleClick.bind(this.foundation), this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation), this.handleDocumentKeydown = this.foundation.handleDocumentKeydown.bind(this.foundation), this.handleOpening = function() {
         document.addEventListener("keydown", t.handleDocumentKeydown);
       }, this.handleClosing = function() {
         document.removeEventListener("keydown", t.handleDocumentKeydown);
@@ -524,7 +525,7 @@ var u = rt.strings, kt = (
           return t.root.classList.add(o);
         },
         areButtonsStacked: function() {
-          return wt(t.buttons);
+          return Mt(t.buttons);
         },
         clickDefaultButton: function() {
           t.defaultButton && t.defaultButton.click();
@@ -545,7 +546,7 @@ var u = rt.strings, kt = (
           return t.root.classList.contains(o);
         },
         isContentScrollable: function() {
-          return Ft(t.content);
+          return Rt(t.content);
         },
         notifyClosed: function(o) {
           return t.emit(u.CLOSED_EVENT, o ? { action: o } : {});
@@ -583,10 +584,10 @@ var u = rt.strings, kt = (
           t.content instanceof HTMLElement && t.content.removeEventListener(o, a);
         },
         isScrollableContentAtTop: function() {
-          return Rt(t.content);
+          return Bt(t.content);
         },
         isScrollableContentAtBottom: function() {
-          return Bt(t.content);
+          return wt(t.content);
         },
         registerWindowEventHandler: function(o, a) {
           window.addEventListener(o, a);
@@ -601,7 +602,7 @@ var u = rt.strings, kt = (
     }, e;
   }(yt)
 );
-const Ht = {
+const Pt = {
   /**
    * An action button that will not automatically trigger a dismiss or accept. It is meant to be used only in certain circumstances where more control of the modal is required such as validating forms. If primaryButton is sent with actionButton, actionButton will be ignored.
    *
@@ -764,7 +765,7 @@ const Ht = {
    * Defaults to **null**.
    */
   title: s.string
-}, Pt = {
+}, Ut = {
   actionButton: null,
   backButton: null,
   badge: void 0,
@@ -788,7 +789,7 @@ const Ht = {
   returnFocusSelector: null,
   scrollable: !1,
   title: null
-}, M = /* @__PURE__ */ gt((i, e) => {
+}, k = /* @__PURE__ */ gt((i, e) => {
   const {
     actionButton: t,
     actionIcons: n,
@@ -796,65 +797,65 @@ const Ht = {
     backButton: a,
     children: f,
     className: p,
-    content: v,
-    defaultButton: E,
-    dismissiveButton: C,
-    footerSupplemental: b,
+    content: S,
+    defaultButton: h,
+    dismissiveButton: E,
+    footerSupplemental: y,
     headerActions: J,
-    hideCloseIcon: k,
+    hideCloseIcon: H,
     indicator: st,
-    initialFocus: y,
-    mobileStackedButtons: H,
-    modalSize: h,
-    nextButton: O,
-    noActions: T,
-    onClose: P,
-    onClosed: U,
+    initialFocus: O,
+    mobileStackedButtons: P,
+    modalSize: g,
+    nextButton: T,
+    noActions: A,
+    onClose: U,
+    onClosed: x,
     onOpen: D,
     onOpened: I,
     open: Q,
-    preventClose: x,
+    preventClose: G,
     preventPrimaryAccept: X,
     primaryButton: c,
-    returnFocusSelector: G,
+    returnFocusSelector: K,
     scrollable: Z,
     title: tt,
     ...lt
   } = i, N = et(), l = et();
-  Et(e, () => N.current, []);
-  const [K, ct] = nt(), [W, dt] = nt(() => O || a);
-  g(() => {
-    dt(O || a);
-  }, [O, a]);
-  const L = z(() => {
+  _t(e, () => N.current, []);
+  const [W, ct] = nt(), [V, dt] = nt(() => T || a);
+  _(() => {
+    dt(T || a);
+  }, [T, a]);
+  const L = j(() => {
     ct(window.innerWidth <= 600);
   }, []);
-  g(() => (L(), window.addEventListener("resize", L), () => {
+  _(() => (L(), window.addEventListener("resize", L), () => {
     window.removeEventListener("resize", L);
-  }), [L]), g(() => (l.current = kt.attachTo(N.current), () => {
+  }), [L]), _(() => (l.current = Ht.attachTo(N.current), () => {
     l.current.destroy();
-  }), [l, N]), g(() => {
-    l.current.foundation.setAutoStackButtons(H);
-  }, [H]), g(() => {
-    T && (l.current.foundation.adapter.trapFocus = () => {
+  }), [l, N]), _(() => {
+    l.current.foundation.setAutoStackButtons(P);
+  }, [P]), _(() => {
+    A && (l.current.foundation.adapter.trapFocus = () => {
     });
-  }, [T]), g(() => {
-    l.current.scrimClickAction = x ? "" : "close", l.current.escapeKeyAction = x ? "" : "close";
-  }, [x]);
-  const F = z((m) => {
-    P && P(m);
-  }, [P]), R = z((m) => {
-    G && _t(G), U && U(m);
-  }, [G, U]);
-  g(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
+  }, [A]), _(() => {
+    l.current.scrimClickAction = G ? "" : "close", l.current.escapeKeyAction = G ? "" : "close";
+  }, [G]);
+  const F = j((m) => {
+    U && U(m);
+  }, [U]), R = j((m) => {
+    K && Et(K), x && x(m);
+  }, [K, x]);
+  _(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
     l.current.unlisten("MDCDialog: opening", D);
-  }), [l, D]), g(() => (l.current.unlisten("MDCDialog:opened", I), l.current.listen("MDCDialog:opened", I), () => {
+  }), [l, D]), _(() => (l.current.unlisten("MDCDialog:opened", I), l.current.listen("MDCDialog:opened", I), () => {
     l.current.unlisten("MDCDialog:opened", I);
-  }), [l, I]), g(() => (l.current.unlisten("MDCDialog:closing", F), l.current.listen("MDCDialog:closing", F), () => {
+  }), [l, I]), _(() => (l.current.unlisten("MDCDialog:closing", F), l.current.listen("MDCDialog:closing", F), () => {
     l.current.unlisten("MDCDialog:closing", F);
-  }), [l, F]), g(() => (l.current.unlisten("MDCDialog:closed", R), l.current.listen("MDCDialog:closed", R), () => {
+  }), [l, F]), _(() => (l.current.unlisten("MDCDialog:closed", R), l.current.listen("MDCDialog:closed", R), () => {
     l.current.unlisten("MDCDialog:closed", R);
-  }), [l, R]), g(() => {
+  }), [l, R]), _(() => {
     Q ? l.current.open() : l.current.close();
   }, [l, Q]);
   const ut = Y(() => () => {
@@ -863,27 +864,27 @@ const Ht = {
       elevation: t?.props.elevation !== "default" ? t?.props.elevation : "flat",
       variant: t?.props.variant || "filled"
     };
-    return E === "action" && (m["data-mdc-dialog-button-default"] = !0), y === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [t?.props.elevation, t?.props.variant, E, y]), mt = Y(() => () => {
+    return h === "action" && (m["data-mdc-dialog-button-default"] = !0), O === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [t?.props.elevation, t?.props.variant, h, O]), mt = Y(() => () => {
     const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       "data-mdc-dialog-action": X ? "" : "accept",
       elevation: c?.props.elevation !== "default" ? c?.props.elevation : "flat",
       variant: c?.props.variant || "filled"
     };
-    return E === "primary" && (m["data-mdc-dialog-button-default"] = !0), y === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [X, E, y, c?.props.elevation, c?.props.variant]);
+    return h === "primary" && (m["data-mdc-dialog-button-default"] = !0), O === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [X, h, O, c?.props.elevation, c?.props.variant]);
   return /* @__PURE__ */ d.createElement("aside", ht({
     ref: N,
     className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", p),
     role: "alertdialog"
   }, lt), /* @__PURE__ */ d.createElement("div", {
-    className: B("lmnt-modal__container", "mdc-dialog__container", h === "fullscreen" && "mdc-dialog--fullscreen", h === "max" && "lmnt-modal__max", h === "xlarge" && "lmnt-modal__xl", h === "large" && "lmnt-modal__lg", h === "medium" && "lmnt-modal__md", h === "small" && "lmnt-modal__sm", (h === "mobile" || K) && "lmnt-modal__mobile", h === "dialog" && "lmnt-modal__dialog", T && "lmnt-modal-no-actions")
+    className: B("lmnt-modal__container", "mdc-dialog__container", g === "fullscreen" && "mdc-dialog--fullscreen", g === "max" && "lmnt-modal__max", g === "xlarge" && "lmnt-modal__xl", g === "large" && "lmnt-modal__lg", g === "medium" && "lmnt-modal__md", g === "small" && "lmnt-modal__sm", (g === "mobile" || W) && "lmnt-modal__mobile", g === "dialog" && "lmnt-modal__dialog", A && "lmnt-modal-no-actions")
   }, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
   }, /* @__PURE__ */ d.createElement("header", {
-    className: B("lmnt-modal__title", "mdc-dialog__title", (h === "dialog" || k) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (k || h === "dialog" || T) && "lmnt-modal--no-close-icon")
-  }, !k && h !== "dialog" && !T && /* @__PURE__ */ d.createElement(it, {
+    className: B("lmnt-modal__title", "mdc-dialog__title", (g === "dialog" || H) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (H || g === "dialog" || A) && "lmnt-modal--no-close-icon")
+  }, !H && g !== "dialog" && !A && /* @__PURE__ */ d.createElement(it, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear"
@@ -894,72 +895,77 @@ const Ht = {
     style: {
       marginLeft: "0"
     }
-  }, o)), (v || f) && /* @__PURE__ */ d.createElement("section", {
+  }, o)), (S || f) && /* @__PURE__ */ d.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, v || f), st, (t || a || C || O || c || b) && /* @__PURE__ */ d.createElement("footer", {
-    className: B("lmnt-modal__actions", "mdc-dialog__actions", K && "lmnt-dialog__actions__mobile", b && "lmnt-modal__actions--supplemental-btn", K && H && "lmnt-modal_actions-mobile-stacked")
-  }, !W && b && /* @__PURE__ */ d.createElement("div", {
+  }, S || f), st, (t || a || E || T || c || y) && /* @__PURE__ */ d.createElement("footer", {
+    className: B("lmnt-modal__actions", "mdc-dialog__actions", W && "lmnt-dialog__actions__mobile", y && "lmnt-modal__actions--supplemental-btn", W && P && "lmnt-modal_actions-mobile-stacked")
+  }, !V && y && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
-  }, A(b, () => {
+  }, b(y, () => {
     const m = {};
-    return E === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), y === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  })), !W && (t || C || c) && /* @__PURE__ */ d.createElement("div", {
+    return h === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), O === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  })), !V && (t || E || c) && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
-  }, C && A(C, {
+  }, E && b(E, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
-  }), t && !c && A(t, ut), c && A(c, mt)), W && /* @__PURE__ */ d.createElement("div", {
+  }), t && !c && b(t, ut), c && b(c, mt)), V && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
-  }, /* @__PURE__ */ d.createElement("div", null, Ct(a, "lmnt-modal__button")), /* @__PURE__ */ d.createElement("div", null, A(O, {
+  }, /* @__PURE__ */ d.createElement("div", null, Ct(a, "lmnt-modal__button")), /* @__PURE__ */ d.createElement("div", null, b(T, {
     className: "lmnt-modal__button",
     "data-mdc-dialog-initial-focus": !0
   })))))), /* @__PURE__ */ d.createElement("div", {
     className: "mdc-dialog__scrim"
   }));
 });
-M.displayName = "Modal";
-M.propTypes = Ht;
-M.defaultProps = Pt;
-const Ut = "_modal_18rd0_1", xt = "_title_18rd0_6", Gt = "_titleWithoutCloseIcon_18rd0_18", $ = {
-  modal: Ut,
-  title: xt,
-  titleWithoutCloseIcon: Gt
-}, ee = ({
+k.displayName = "Modal";
+k.propTypes = Pt;
+k.defaultProps = Ut;
+const xt = "_modal_fr8bw_1", Gt = "_title_fr8bw_6", Kt = "_titleWithoutCloseIcon_fr8bw_18", Wt = "_closeButton_fr8bw_22", w = {
+  modal: xt,
+  title: Gt,
+  titleWithoutCloseIcon: Kt,
+  closeButton: Wt
+}, ie = ({
   onClose: i,
   title: e,
   headerActions: t,
   hideCloseIcon: n,
   leadingIcon: o,
-  ...a
+  isOnline: a = !0,
+  offlineViewProps: f,
+  children: p,
+  ...S
 }) => {
-  const f = Y(() => {
-    const p = /* @__PURE__ */ ft(V, { primaryAlign: "center", secondaryAlign: "center", children: [
-      !n && /* @__PURE__ */ _(it, { icon: "close", onClick: () => i?.(), type: "button" }),
-      o ? /* @__PURE__ */ _(Dt, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ _(Nt, { icon: o }) }) : /* @__PURE__ */ _(pt, {}),
-      /* @__PURE__ */ _(
+  const h = Y(() => {
+    const E = /* @__PURE__ */ ft(z, { primaryAlign: "center", secondaryAlign: "center", children: [
+      !n && /* @__PURE__ */ C(it, { icon: "close", onClick: () => i?.(), type: "button", className: w.closeButton }),
+      o ? /* @__PURE__ */ C(Dt, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ C(Nt, { icon: o }) }) : /* @__PURE__ */ C(pt, {}),
+      /* @__PURE__ */ C(
         It,
         {
           level: 6,
-          className: n && !o ? $.titleWithoutCloseIcon : "",
+          className: n && !o ? w.titleWithoutCloseIcon : "",
           children: e
         }
       )
     ] }, "base-group");
-    return t ? Array.isArray(t) ? [p, /* @__PURE__ */ _(V, { children: t }, "action-group")] : [p, t] : p;
+    return t ? Array.isArray(t) ? [E, /* @__PURE__ */ C(z, { children: t }, "action-group")] : [E, t] : E;
   }, [t, n, o, i, e]);
-  return /* @__PURE__ */ _(
-    M,
+  return /* @__PURE__ */ C(
+    k,
     {
-      ...a,
+      ...S,
       "data-testid": "modal",
-      className: `${$.modal} ${$.title} ${a.className ?? ""}`,
+      className: `${w.modal} ${w.title} ${S.className ?? ""}`,
       hideCloseIcon: !0,
-      headerActions: /* @__PURE__ */ _(V, { primaryAlign: "space-between", secondaryAlign: "center", children: f }, "header-group"),
-      preventClose: !0
+      headerActions: /* @__PURE__ */ C(z, { primaryAlign: "space-between", secondaryAlign: "center", children: h }, "header-group"),
+      preventClose: !0,
+      children: a ? p : /* @__PURE__ */ C(Lt, { ...f })
     }
   );
 };
 export {
-  ee as Modal
+  ie as Modal
 };

package/dist/components/ModulePadding/ModulePadding.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { P as r } from "../../index.es-D-CKRzIB.js";
-import "react";
 import "../../isEmpty-B4GG2s-V.js";
+import "react";
 import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";