@hortiview/shared-components 2.3.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 E, Fragment as pt } from "react/jsx-runtime";
+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 _t, useState as nt, useEffect as g, useCallback as j, useMemo as Y } from "react";
-import { i as Et, 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 q = "mdc-dom-focus-sentinel", Mt = (
+var q = "mdc-dom-focus-sentinel", kt = (
   /** @class */
   function() {
     function i(e, t) {
@@ -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",
@@ -227,7 +228,7 @@ var rt = (
     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,7 +244,7 @@ var rt = (
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return S;
+        return v;
       },
       enumerable: !1,
       configurable: !0
@@ -319,7 +320,7 @@ 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() {
@@ -365,7 +366,7 @@ var rt = (
         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 {
@@ -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(_, C) {
-        return new Mt(_, 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 (_) {
-        n = { error: _ };
+      } 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,
@@ -796,18 +797,18 @@ const Ht = {
     backButton: a,
     children: f,
     className: p,
-    content: v,
-    defaultButton: _,
-    dismissiveButton: C,
-    footerSupplemental: b,
+    content: S,
+    defaultButton: h,
+    dismissiveButton: E,
+    footerSupplemental: y,
     headerActions: J,
     hideCloseIcon: H,
     indicator: st,
-    initialFocus: y,
+    initialFocus: O,
     mobileStackedButtons: P,
-    modalSize: h,
-    nextButton: O,
-    noActions: T,
+    modalSize: g,
+    nextButton: T,
+    noActions: A,
     onClose: U,
     onClosed: x,
     onOpen: D,
@@ -822,23 +823,23 @@ const Ht = {
     ...lt
   } = i, N = et(), l = et();
   _t(e, () => N.current, []);
-  const [W, ct] = nt(), [V, dt] = nt(() => O || a);
-  g(() => {
-    dt(O || a);
-  }, [O, a]);
+  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, N]), _(() => {
     l.current.foundation.setAutoStackButtons(P);
-  }, [P]), g(() => {
-    T && (l.current.foundation.adapter.trapFocus = () => {
+  }, [P]), _(() => {
+    A && (l.current.foundation.adapter.trapFocus = () => {
     });
-  }, [T]), g(() => {
+  }, [A]), _(() => {
     l.current.scrimClickAction = G ? "" : "close", l.current.escapeKeyAction = G ? "" : "close";
   }, [G]);
   const F = j((m) => {
@@ -846,15 +847,15 @@ const Ht = {
   }, [U]), R = j((m) => {
     K && Et(K), x && x(m);
   }, [K, x]);
-  g(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
+  _(() => (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 _ === "action" && (m["data-mdc-dialog-button-default"] = !0), y === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [t?.props.elevation, t?.props.variant, _, 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 _ === "primary" && (m["data-mdc-dialog-button-default"] = !0), y === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [X, _, 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" || W) && "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" || H) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (H || h === "dialog" || T) && "lmnt-modal--no-close-icon")
-  }, !H && 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,24 +895,24 @@ 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", W && "lmnt-dialog__actions__mobile", b && "lmnt-modal__actions--supplemental-btn", W && P && "lmnt-modal_actions-mobile-stacked")
-  }, !V && 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 _ === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), y === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  })), !V && (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)), V && /* @__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", {
@@ -919,26 +920,29 @@ const Ht = {
   }));
 });
 k.displayName = "Modal";
-k.propTypes = Ht;
-k.defaultProps = Pt;
-const Ut = "_modal_fr8bw_1", xt = "_title_fr8bw_6", Gt = "_titleWithoutCloseIcon_fr8bw_18", Kt = "_closeButton_fr8bw_22", w = {
-  modal: Ut,
-  title: xt,
-  titleWithoutCloseIcon: Gt,
-  closeButton: Kt
-}, ne = ({
+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(z, { primaryAlign: "center", secondaryAlign: "center", children: [
-      !n && /* @__PURE__ */ E(it, { icon: "close", onClick: () => i?.(), type: "button", className: w.closeButton }),
-      o ? /* @__PURE__ */ E(Dt, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ E(Nt, { icon: o }) }) : /* @__PURE__ */ E(pt, {}),
-      /* @__PURE__ */ E(
+  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,
@@ -947,20 +951,21 @@ const Ut = "_modal_fr8bw_1", xt = "_title_fr8bw_6", Gt = "_titleWithoutCloseIcon
         }
       )
     ] }, "base-group");
-    return t ? Array.isArray(t) ? [p, /* @__PURE__ */ E(z, { 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__ */ E(
+  return /* @__PURE__ */ C(
     k,
     {
-      ...a,
+      ...S,
       "data-testid": "modal",
-      className: `${w.modal} ${w.title} ${a.className ?? ""}`,
+      className: `${w.modal} ${w.title} ${S.className ?? ""}`,
       hideCloseIcon: !0,
-      headerActions: /* @__PURE__ */ E(z, { 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 {
-  ne as Modal
+  ie as Modal
 };

package/dist/components/OfflineView/OfflineView.d.ts

@@ -0,0 +1,68 @@
+export type OfflineViewProps = {
+    /**
+     * The title of the offline view
+     *
+     * Defaults to **You’re currently offline**
+     */
+    title?: string;
+    /**
+     * The subtitle of the offline view, optional
+     */
+    subtitle?: string;
+    /**
+     * The Icon of the offline view
+     *
+     * Defaults to **cloud_off**.
+     */
+    icon?: string;
+    /**
+     * The offline view size
+     *
+     * Defaults to **large**
+     */
+    size?: 'large' | 'small';
+    /**
+     * Visual variant
+     *
+     * Defaults to **basic**
+     */
+    variant?: 'basic' | 'filled';
+    /**
+     * The button label. If provided, a button will be shown.
+     */
+    buttonLabel?: string;
+    /**
+     * Click handler for the button (used only if a button is rendered).
+     */
+    onClick?: () => void;
+    /**
+     * Optional test id pass-through.
+     */
+    'data-testid'?: string;
+    /**
+     * Optional CSS class for the root element
+     */
+    className?: string;
+    /**
+     * Stretch to the container’s full width.
+     *
+     * Defaults to **false**.
+     */
+    fullWidth?: boolean;
+};
+/**
+ * Offline placeholder/view shown when no network connection is available.
+ *
+ * @param {string} title - The title of the offline view
+ * @param {string} subtitle - Optional subtitle
+ * @param {string} icon - The Icon of the offline view, default is cloud_off
+ * @param {'large' | 'small'} size - The offline view size, default is large
+ * @param {'basic' | 'filled'} variant - Visual variant, default is basic
+ * @param {string} buttonLabel - The button label, if defined, the button will be displayed
+ * @param {() => void} onClick - Event handler for the button
+ * @param {string} 'data-testid' - Optional test id passthrough
+ * @param {string} className - Optional CSS class for the root element
+ * @param {boolean} fullWidth - Stretch to the container’s full width.
+ * @returns {JSX.Element}
+ */
+export declare const OfflineView: ({ title, subtitle, icon, size, variant, "data-testid": dataTestId, buttonLabel, fullWidth, className, onClick, }: OfflineViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OfflineView/OfflineView.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "../../index.es-DntoATwO.js";
+import "../Iconify/Iconify.js";
+import "../../index.es-D54RuMc_.js";
+import { O as f } from "../../OfflineView-BW19N4Cu.js";
+import "../../index.es-CiqbARoC.js";
+export {
+  f as OfflineView
+};

package/dist/components/OfflineView/OfflineView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/OfflineView/OfflineView.test.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { a as n, s as t, f as u } from "../../react.esm-CX1WJ2Pp.js";
+import { s as r, O as i } from "../../OfflineView-BW19N4Cu.js";
+import { d as B, t as l, g as e, a as c } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+B("OfflineView", () => {
+  l("should render OfflineView with title and subtitle", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", subtitle: "test-subtitle" })), e(t.getByTestId("offline-view-container")).toBeInTheDocument(), e(t.getByText("test-title")).toBeInTheDocument(), e(t.getByText("test-subtitle")).toBeInTheDocument(), e(t.queryByText("cloud_off")).toBeInTheDocument();
+  }), l("should render without subtitle", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title" })), e(t.getByTestId("offline-view-container")).toBeInTheDocument(), e(t.getByText("test-title")).toBeInTheDocument(), e(t.queryByText("test-subtitle")).not.toBeInTheDocument();
+  }), l("should render custom icon", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", icon: "add" })), e(t.getByTestId("offline-view-container")).toBeInTheDocument(), e(t.getByText("test-title")).toBeInTheDocument(), e(t.getByText("add")).toBeInTheDocument();
+  }), l("should render the small offline view", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", size: "small" })), e(t.getByText("test-title")).toHaveClass("mdc-typography--subtitle1");
+  }), l("should render the filled offline view", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", variant: "filled", "data-testid": "test" })), e(t.getByTestId("test")).toHaveClass(r.bgGrey);
+  }), l("should render OfflineView with button", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", buttonLabel: "Button" })), e(t.getByText("Button")).toBeInTheDocument(), e(t.getByRole("button")).toBeInTheDocument();
+  }), l("calls onClick when button is clicked", () => {
+    const s = c.fn();
+    n(/* @__PURE__ */ o(i, { title: "test-title", buttonLabel: "Button", onClick: s })), u.click(t.getByText("Button")), e(s).toHaveBeenCalled();
+  }), l("should render OfflineView without button", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title" })), e(t.queryByText("Button")).not.toBeInTheDocument(), e(t.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

package/dist/main.d.ts

@@ -21,6 +21,7 @@ export { ListArea } from './components/ListArea/ListArea';
 export { LoadingSpinner } from './components/LoadingSpinner/Default/LoadingSpinner';
 export { Modal } from './components/Modal/Modal';
 export { ModulePadding } from './components/ModulePadding/ModulePadding';
+export { OfflineView } from './components/OfflineView/OfflineView';
 export { OnboardingBanner } from './components/OnboardingBanner/OnboardingBanner';
 export { OverflowTooltip } from './components/OverflowTooltip/OverflowTooltip';
 export { ScrollbarX, ScrollbarY } from './components/Scrollbar/Scrollbar';