@hortiview/shared-components 2.3.0 → 2.5.0

package/dist/components/Modal/Modal.js

@@ -1,16 +1,17 @@
-import { jsxs as ft, jsx as E, 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 { 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";
-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 { jsxs as ft, jsx as C, Fragment as pt } from "react/jsx-runtime";
+import { G as z } from "../../index.es-CbBdaRO2.js";
+import { I as it } from "../../index.es-Kg9soDed.js";
+import { _ as ht, c as B, P as s } from "../../_setToString-Do1lSQTZ.js";
+import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as E, useCallback as j, useMemo as Y, Fragment as Et } from "react";
+import { i as Ct, c as b, a as St } from "../../index.es-DlzwTKbh.js";
+import { b as at, c as ot, d as vt } from "../../tslib.es6-BDCynO9F.js";
+import { M as yt, a as Ot } from "../../component-neHBNHRu.js";
+import { M as Tt, c as At, m as bt } from "../../component-DsB0poTj.js";
+import { A as Dt } from "../../animationframe-EMBh6XeO.js";
+import { P as It } from "../../index.es-D-ph6ImM.js";
+import { b as Nt } from "../../index.es--yyG47az.js";
+import { Iconify as Lt } from "../Iconify/Iconify.js";
+import { O as Ft } from "../../OfflineView-HbuDPpQL.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 Rt(i, e, t) {
   return e(i, { initialFocusEl: t });
 }
-function Ft(i) {
+function Bt(i) {
   return i ? i.scrollHeight > i.offsetHeight : !1;
 }
-function Rt(i) {
+function wt(i) {
   return i ? i.scrollTop === 0 : !1;
 }
-function Bt(i) {
+function Mt(i) {
   return i ? Math.ceil(i.scrollHeight - i.scrollTop) === i.clientHeight : !1;
 }
-function wt(i) {
+function kt(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", Ht = (
   /** @class */
   function() {
     function i(e, t) {
@@ -105,8 +106,8 @@ var q = "mdc-dom-focus-sentinel", Mt = (
       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(q) && !o, f = !1;
         if (a) {
-          var p = getComputedStyle(n);
-          f = p.display === "none" || p.visibility === "hidden";
+          var h = getComputedStyle(n);
+          f = h.display === "none" || h.visibility === "hidden";
         }
         return a && !f;
       });
@@ -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 Dt(), 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 {
@@ -409,7 +410,7 @@ var rt = (
     }, e.prototype.toggleScrollDividerFooter = function() {
       this.adapter.isScrollableContentAtBottom() ? this.adapter.hasClass(r.SCROLL_DIVIDER_FOOTER) && this.adapter.removeClass(r.SCROLL_DIVIDER_FOOTER) : this.adapter.addClass(r.SCROLL_DIVIDER_FOOTER);
     }, e;
-  }(vt)
+  }(yt)
 );
 /**
  * @license
@@ -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, Pt = (
   /** @class */
   function(i) {
     at(e, i);
@@ -477,30 +478,30 @@ 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(g, p) {
+        return new Ht(g, p);
       });
       var a = this.root.querySelector(u.CONTAINER_SELECTOR);
       if (!a)
         throw new Error("Dialog component requires a " + u.CONTAINER_SELECTOR + " container element");
       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));
+        for (var f = vt(this.buttons), h = f.next(); !h.done; h = f.next()) {
+          var S = h.value;
+          this.buttonRipples.push(new Tt(S));
         }
-      } catch (_) {
-        n = { error: _ };
+      } catch (g) {
+        n = { error: g };
       } finally {
         try {
-          p && !p.done && (o = f.return) && o.call(f);
+          h && !h.done && (o = f.return) && o.call(f);
         } finally {
           if (n) throw n.error;
         }
       }
     }, 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 = Rt(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,18 +525,18 @@ var u = rt.strings, kt = (
           return t.root.classList.add(o);
         },
         areButtonsStacked: function() {
-          return wt(t.buttons);
+          return kt(t.buttons);
         },
         clickDefaultButton: function() {
           t.defaultButton && t.defaultButton.click();
         },
         eventTargetMatches: function(o, a) {
-          return o ? At(o, a) : !1;
+          return o ? bt(o, a) : !1;
         },
         getActionFromEvent: function(o) {
           if (!o.target)
             return "";
-          var a = Tt(o.target, "[" + u.ACTION_ATTRIBUTE + "]");
+          var a = At(o.target, "[" + u.ACTION_ATTRIBUTE + "]");
           return a && a.getAttribute(u.ACTION_ATTRIBUTE);
         },
         getInitialFocusEl: function() {
@@ -545,7 +546,7 @@ var u = rt.strings, kt = (
           return t.root.classList.contains(o);
         },
         isContentScrollable: function() {
-          return Ft(t.content);
+          return Bt(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 wt(t.content);
         },
         isScrollableContentAtBottom: function() {
-          return Bt(t.content);
+          return Mt(t.content);
         },
         registerWindowEventHandler: function(o, a) {
           window.addEventListener(o, a);
@@ -599,9 +600,9 @@ var u = rt.strings, kt = (
     }, e.prototype.getInitialFocusEl = function() {
       return this.root.querySelector("[" + u.INITIAL_FOCUS_ATTRIBUTE + "]");
     }, e;
-  }(yt)
+  }(Ot)
 );
-const Ht = {
+const Ut = {
   /**
    * 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 = {
+}, xt = {
   actionButton: null,
   backButton: null,
   badge: void 0,
@@ -795,19 +796,19 @@ const Ht = {
     badge: o,
     backButton: a,
     children: f,
-    className: p,
-    content: v,
-    defaultButton: _,
-    dismissiveButton: C,
-    footerSupplemental: b,
+    className: h,
+    content: S,
+    defaultButton: g,
+    dismissiveButton: p,
+    footerSupplemental: y,
     headerActions: J,
     hideCloseIcon: H,
     indicator: st,
-    initialFocus: y,
+    initialFocus: O,
     mobileStackedButtons: P,
-    modalSize: h,
-    nextButton: O,
-    noActions: T,
+    modalSize: _,
+    nextButton: T,
+    noActions: A,
     onClose: U,
     onClosed: x,
     onOpen: D,
@@ -822,39 +823,39 @@ 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);
+  E(() => {
+    dt(T || a);
+  }, [T, a]);
   const L = j(() => {
     ct(window.innerWidth <= 600);
   }, []);
-  g(() => (L(), window.addEventListener("resize", L), () => {
+  E(() => (L(), window.addEventListener("resize", L), () => {
     window.removeEventListener("resize", L);
-  }), [L]), g(() => (l.current = kt.attachTo(N.current), () => {
+  }), [L]), E(() => (l.current = Pt.attachTo(N.current), () => {
     l.current.destroy();
-  }), [l, N]), g(() => {
+  }), [l, N]), E(() => {
     l.current.foundation.setAutoStackButtons(P);
-  }, [P]), g(() => {
-    T && (l.current.foundation.adapter.trapFocus = () => {
+  }, [P]), E(() => {
+    A && (l.current.foundation.adapter.trapFocus = () => {
     });
-  }, [T]), g(() => {
+  }, [A]), E(() => {
     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 && Ct(K), x && x(m);
   }, [K, x]);
-  g(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
+  E(() => (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]), E(() => (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]), E(() => (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]), E(() => (l.current.unlisten("MDCDialog:closed", R), l.current.listen("MDCDialog:closed", R), () => {
     l.current.unlisten("MDCDialog:closed", R);
-  }), [l, R]), g(() => {
+  }), [l, R]), E(() => {
     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 g === "action" && (m["data-mdc-dialog-button-default"] = !0), O === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [t?.props.elevation, t?.props.variant, g, 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 g === "primary" && (m["data-mdc-dialog-button-default"] = !0), O === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [X, g, 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),
+    className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", h),
     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", _ === "fullscreen" && "mdc-dialog--fullscreen", _ === "max" && "lmnt-modal__max", _ === "xlarge" && "lmnt-modal__xl", _ === "large" && "lmnt-modal__lg", _ === "medium" && "lmnt-modal__md", _ === "small" && "lmnt-modal__sm", (_ === "mobile" || W) && "lmnt-modal__mobile", _ === "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", (_ === "dialog" || H) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (H || _ === "dialog" || A) && "lmnt-modal--no-close-icon")
+  }, !H && _ !== "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 || p || 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 g === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), O === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  })), !V && (t || p || c) && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
-  }, C && A(C, {
+  }, p && b(p, {
     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, St(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,48 +920,63 @@ 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 = Ut;
+k.defaultProps = xt;
+const Gt = "_modal_fr8bw_1", Kt = "_title_fr8bw_6", Wt = "_titleWithoutCloseIcon_fr8bw_18", Vt = "_closeButton_fr8bw_22", w = {
+  modal: Gt,
+  title: Kt,
+  titleWithoutCloseIcon: Wt,
+  closeButton: Vt
+}, ae = ({
   onClose: i,
   title: e,
   headerActions: t,
   hideCloseIcon: n,
   leadingIcon: o,
-  ...a
+  isOnline: a = !0,
+  offlineViewProps: f,
+  children: h,
+  ...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(
-        It,
-        {
-          level: 6,
-          className: n && !o ? w.titleWithoutCloseIcon : "",
-          children: e
-        }
-      )
-    ] }, "base-group");
-    return t ? Array.isArray(t) ? [p, /* @__PURE__ */ E(z, { children: t }, "action-group")] : [p, t] : p;
+  const g = Y(() => {
+    const p = {
+      id: "base",
+      action: /* @__PURE__ */ ft(z, { primaryAlign: "center", secondaryAlign: "center", children: [
+        !n && /* @__PURE__ */ C(
+          it,
+          {
+            icon: "close",
+            onClick: () => i?.(),
+            type: "button",
+            className: w.closeButton
+          }
+        ),
+        o ? /* @__PURE__ */ C(It, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ C(Lt, { icon: o }) }) : /* @__PURE__ */ C(pt, {}),
+        /* @__PURE__ */ C(
+          Nt,
+          {
+            level: 6,
+            className: n && !o ? w.titleWithoutCloseIcon : "",
+            children: e
+          }
+        )
+      ] }, "base-group")
+    };
+    return t ? Array.isArray(t) ? [p, { id: "action-group", action: /* @__PURE__ */ C(z, { children: t }, "action-group") }] : [p, { id: "action", action: t }] : [p];
   }, [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: g.map((p) => /* @__PURE__ */ C(Et, { children: p.action }, p.id)) }, "header-group"),
+      preventClose: !0,
+      children: a ? h : /* @__PURE__ */ C(Ft, { ...f })
     }
   );
 };
 export {
-  ne as Modal
+  ae as Modal
 };

package/dist/components/ModulePadding/ModulePadding.js

@@ -1,17 +1,18 @@
 import { jsx as i } from "react/jsx-runtime";
-import { P as r } from "../../index.es-D-CKRzIB.js";
-import "../../isEmpty-B4GG2s-V.js";
+import { P as r } from "../../index.es-D-ph6ImM.js";
+import "../../isEmpty-DsdC9UUD.js";
 import "react";
-import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
+import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
-import "../../orderBy-Bd48bw88.js";
+import "../../orderBy-CyjsW2ET.js";
 import "../../uniqueId-NU3-C36A.js";
 import "react-hook-form";
-import "../../get-DFv1gXfq.js";
+import "../../get-B8c-T4F8.js";
+import "../../omit-1Eom1PmQ.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
-const k = ({ children: o }) => {
-  const { isDesktop: t } = d();
+const x = ({ children: o }) => {
+  const { isDesktop: t } = m();
   return /* @__PURE__ */ i(
     r,
     {
@@ -23,5 +24,5 @@ const k = ({ children: o }) => {
   );
 };
 export {
-  k as ModulePadding
+  x as ModulePadding
 };

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-CbBdaRO2.js";
+import "../Iconify/Iconify.js";
+import "../../index.es--yyG47az.js";
+import { O as f } from "../../OfflineView-HbuDPpQL.js";
+import "../../index.es-Bx1E5MPK.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-HbuDPpQL.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();
+  });
+});