@trycourier/courier-ui-inbox 1.0.0-beta → 1.0.2-beta

package/dist/index.es.js

@@ -217,7 +217,7 @@ class ie extends HTMLElement {
   }
 }
 customElements.get("courier-icon") || customElements.define("courier-icon", ie);
-class Pe extends HTMLElement {
+class De extends HTMLElement {
   constructor() {
     super(), L(this, "link");
     const i = this.attachShadow({ mode: "open" });
@@ -341,7 +341,7 @@ class Pe extends HTMLElement {
     i ? this.link.style.setProperty("--courier-link-font-size", i) : this.link.style.removeProperty("--courier-link-font-size");
   }
 }
-L(Pe, "observedAttributes", [
+L(De, "observedAttributes", [
   "href",
   "variant",
   "disabled",
@@ -352,7 +352,7 @@ L(Pe, "observedAttributes", [
   "font-family",
   "font-size"
 ]);
-customElements.get("courier-link") || customElements.define("courier-link", Pe);
+customElements.get("courier-link") || customElements.define("courier-link", De);
 class Le extends bo {
   constructor() {
     super(), L(this, "shadow"), this.shadow = this.attachShadow({ mode: "open" });
@@ -376,7 +376,7 @@ class Le extends bo {
     `, i;
   }
 }
-class Me extends Le {
+class Ee extends Le {
   constructor(i) {
     super(), L(this, "_props"), L(this, "_title"), L(this, "_button"), L(this, "_style"), L(this, "_buttonClickCallback", null), this._props = i;
   }
@@ -427,7 +427,7 @@ class Me extends Le {
     this._buttonClickCallback = i;
   }
 }
-customElements.get("courier-info-state") || customElements.define("courier-info-state", Me);
+customElements.get("courier-info-state") || customElements.define("courier-info-state", Ee);
 class Se extends HTMLElement {
   constructor(i, e, t, s, o, n, h, d) {
     super(), L(this, "_backgroundColor"), L(this, "_hoverBackgroundColor"), L(this, "_activeBackgroundColor"), L(this, "_borderRadius"), L(this, "_height"), L(this, "_width"), L(this, "_style"), L(this, "_button"), L(this, "_icon"), this._borderRadius = n, this._backgroundColor = t, this._hoverBackgroundColor = s, this._activeBackgroundColor = o, this._height = h, this._width = d;
@@ -497,14 +497,14 @@ class Se extends HTMLElement {
   }
 }
 customElements.get("courier-icon-button") || customElements.define("courier-icon-button", Se);
-const Po = [
+const Do = [
   { name: "courier-button", class: Ie },
   { name: "courier-icon", class: ie },
-  { name: "courier-link", class: Pe },
-  { name: "courier-info-state", class: Me },
+  { name: "courier-link", class: De },
+  { name: "courier-info-state", class: Ee },
   { name: "courier-icon-button", class: Se }
 ];
-Po.forEach(({ name: g, class: i }) => {
+Do.forEach(({ name: g, class: i }) => {
   customElements.get(g) || customElements.define(g, i);
 });
 const te = class te {
@@ -604,22 +604,25 @@ const te = class te {
         let b;
         switch (_.messageId && (b = this.getMessage({ messageId: _.messageId })), _.event) {
           case "mark-all-read":
-            this.readAllMessages();
+            this.readAllMessages({ canCallApi: !1 });
             break;
           case "read":
-            b && this.readMessage(b, !1);
+            b && this.readMessage({ message: b, canCallApi: !1 });
             break;
           case "unread":
-            b && this.unreadMessage(b, !1);
+            b && this.unreadMessage({ message: b, canCallApi: !1 });
             break;
           case "opened":
-            b && this.openMessage(b, !1);
+            b && this.openMessage({ message: b, canCallApi: !1 });
             break;
           case "archive":
-            b && this.archiveMessage(b, !1);
+            b && this.archiveMessage({ message: b, canCallApi: !1 });
+            break;
+          case "archive-read":
+            this.archiveReadMessages({ canCallApi: !1 });
             break;
           case "click":
-            b && this.clickMessage(b, !1);
+            b && this.clickMessage({ message: b, canCallApi: !1 });
             break;
           case "unopened":
           case "unarchive":
@@ -635,7 +638,7 @@ const te = class te {
     return ((e = this._inboxDataSet) == null ? void 0 : e.messages.find((s) => s.messageId === i.messageId)) ?? ((t = this._archiveDataSet) == null ? void 0 : t.messages.find((s) => s.messageId === i.messageId));
   }
   async fetchNextPageOfMessages(i) {
-    var e, t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D;
+    var e, t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $;
     switch (i.feedType) {
       case "inbox":
         if (this.isPaginatingInbox)
@@ -669,12 +672,12 @@ const te = class te {
               startCursor: this._archiveDataSet.paginationCursor
             })), B = {
               messages: ((k = (v = y == null ? void 0 : y.data) == null ? void 0 : v.messages) == null ? void 0 : k.nodes) ?? [],
-              canPaginate: ((E = (S = (w = y == null ? void 0 : y.data) == null ? void 0 : w.messages) == null ? void 0 : S.pageInfo) == null ? void 0 : E.hasNextPage) ?? !1,
-              paginationCursor: ((T = (I = (M = y == null ? void 0 : y.data) == null ? void 0 : M.messages) == null ? void 0 : I.pageInfo) == null ? void 0 : T.startCursor) ?? null
+              canPaginate: ((M = (S = (w = y == null ? void 0 : y.data) == null ? void 0 : w.messages) == null ? void 0 : S.pageInfo) == null ? void 0 : M.hasNextPage) ?? !1,
+              paginationCursor: ((T = (I = (E = y == null ? void 0 : y.data) == null ? void 0 : E.messages) == null ? void 0 : I.pageInfo) == null ? void 0 : T.startCursor) ?? null
             };
             return this.addPage(B, "archive"), B;
           } catch (y) {
-            return (D = ($ = C.shared.client) == null ? void 0 : $.options.logger) == null || D.error("Error fetching next page of archived messages:", y), null;
+            return ($ = (P = C.shared.client) == null ? void 0 : P.options.logger) == null || $.error("Error fetching next page of archived messages:", y), null;
           } finally {
             this.isPaginatingArchive = !1;
           }
@@ -686,7 +689,7 @@ const te = class te {
     for (const [t, s] of Object.entries(e))
       s !== void 0 && this.updateMessage(i, s, t);
   }
-  async readMessage(i, e = !0) {
+  async readMessage({ message: i, canCallApi: e = !0 }) {
     var o, n, h, d;
     if (!C.shared.client)
       return;
@@ -703,7 +706,7 @@ const te = class te {
       this.applyLocalMessageChange(t, s), (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error reading message:", c);
     }
   }
-  async unreadMessage(i, e = !0) {
+  async unreadMessage({ message: i, canCallApi: e = !0 }) {
     var o, n, h, d;
     if (!C.shared.client)
       return;
@@ -720,7 +723,7 @@ const te = class te {
       this.applyLocalMessageChange(t, s), (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error unreading message:", c);
     }
   }
-  async openMessage(i, e = !0) {
+  async openMessage({ message: i, canCallApi: e = !0 }) {
     var o, n, h, d;
     if (!C.shared.client)
       return;
@@ -735,7 +738,7 @@ const te = class te {
         this.applyLocalMessageChange(t, s), (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error opening message:", c);
       }
   }
-  async clickMessage(i, e = !0) {
+  async clickMessage({ message: i, canCallApi: e = !0 }) {
     var t, s, o, n;
     if (C.shared.client)
       try {
@@ -747,7 +750,7 @@ const te = class te {
         (n = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Error clicking message:", h);
       }
   }
-  async archiveMessage(i, e = !0) {
+  async archiveMessage({ message: i, canCallApi: e = !0 }) {
     var o, n;
     if (!C.shared.client)
       return;
@@ -763,7 +766,33 @@ const te = class te {
         this.addMessage(t, s, "inbox"), i.archived = void 0, this.removeMessage(i, s, "archive");
       }
   }
-  async readAllMessages(i = !0) {
+  async archiveReadMessages({ canCallApi: i = !0 } = {}) {
+    var s;
+    if (!C.shared.client)
+      return;
+    const e = this._inboxDataSet, t = this._archiveDataSet;
+    try {
+      (s = this._inboxDataSet) == null || s.messages.forEach((o) => {
+        var h, d;
+        if (!o.read)
+          return;
+        const n = (h = this._inboxDataSet) == null ? void 0 : h.messages.findIndex((c) => c.messageId === o.messageId);
+        if (n !== void 0 && (this.removeMessage(o, n, "inbox"), (d = this._archiveDataSet) != null && d.messages)) {
+          const c = this.findInsertIndex(o, this._archiveDataSet.messages);
+          o.archived = (/* @__PURE__ */ new Date()).toISOString(), this.addMessage(o, c, "archive");
+        }
+      }), this._dataStoreListeners.forEach((o) => {
+        var n, h, d, c;
+        this._inboxDataSet && ((h = (n = o.events).onDataSetChange) == null || h.call(n, this._inboxDataSet, "inbox")), this._archiveDataSet && ((c = (d = o.events).onDataSetChange) == null || c.call(d, this._archiveDataSet, "archive"));
+      }), i && await C.shared.client.inbox.archiveRead();
+    } catch (o) {
+      console.error("Error archiving read messages:", o), this._inboxDataSet && e && (this._inboxDataSet.messages = e.messages), this._archiveDataSet && t && (this._archiveDataSet.messages = t.messages), this._dataStoreListeners.forEach((n) => {
+        var h, d, c, u;
+        this._inboxDataSet && ((d = (h = n.events).onDataSetChange) == null || d.call(h, this._inboxDataSet, "inbox")), this._archiveDataSet && ((u = (c = n.events).onDataSetChange) == null || u.call(c, this._archiveDataSet, "archive"));
+      });
+    }
+  }
+  async readAllMessages({ canCallApi: i = !0 } = {}) {
     var o, n, h, d;
     if (!C.shared.client)
       return;
@@ -857,21 +886,21 @@ const te = class te {
 a(te, "instance");
 let A = te;
 function zo(g) {
-  return A.shared.readMessage(g);
+  return A.shared.readMessage({ message: g });
 }
 function Oo(g) {
-  return A.shared.unreadMessage(g);
+  return A.shared.unreadMessage({ message: g });
 }
 function No(g) {
-  return A.shared.clickMessage(g);
+  return A.shared.clickMessage({ message: g });
 }
 function Uo(g) {
-  return A.shared.archiveMessage(g);
+  return A.shared.archiveMessage({ message: g });
 }
 function Vo(g) {
-  return A.shared.openMessage(g);
+  return A.shared.openMessage({ message: g });
 }
-function $o(g) {
+function Po(g) {
   if (!g.created) return "Now";
   const i = /* @__PURE__ */ new Date(), e = new Date(g.created), t = Math.floor((i.getTime() - e.getTime()) / 1e3);
   return t < 60 ? `${t}s` : t < 3600 ? `${Math.floor(t / 60)}m` : t < 86400 ? `${Math.floor(t / 3600)}h` : t < 604800 ? `${Math.floor(t / 86400)}d` : t < 31536e3 ? `${Math.floor(t / 604800)}w` : `${Math.floor(t / 31536e3)}y`;
@@ -1021,7 +1050,7 @@ class xo extends HTMLElement {
   }
   // Helpers
   _getMenuOptions() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I;
+    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I;
     const e = (h = (n = (o = (s = this._theme.inbox) == null ? void 0 : s.list) == null ? void 0 : o.item) == null ? void 0 : n.menu) == null ? void 0 : h.item;
     let t = [];
     return (d = this._message) != null && d.archived || t.push({
@@ -1031,16 +1060,16 @@ class xo extends HTMLElement {
         color: (x = this._message) != null && x.read ? (_ = e == null ? void 0 : e.unread) == null ? void 0 : _.color : ((b = e == null ? void 0 : e.read) == null ? void 0 : b.color) ?? "red"
       },
       onClick: () => {
-        this._message && (this._message.read ? A.shared.unreadMessage(this._message) : A.shared.readMessage(this._message));
+        this._message && (this._message.read ? A.shared.unreadMessage({ message: this._message }) : A.shared.readMessage({ message: this._message }));
       }
     }), t.push({
       id: (v = this._message) != null && v.archived ? "unarchive" : "archive",
       icon: {
         svg: (k = this._message) != null && k.archived ? (w = e == null ? void 0 : e.unarchive) == null ? void 0 : w.svg : (S = e == null ? void 0 : e.archive) == null ? void 0 : S.svg,
-        color: (E = this._message) != null && E.archived ? (M = e == null ? void 0 : e.unarchive) == null ? void 0 : M.color : ((I = e == null ? void 0 : e.archive) == null ? void 0 : I.color) ?? "red"
+        color: (M = this._message) != null && M.archived ? (E = e == null ? void 0 : e.unarchive) == null ? void 0 : E.color : ((I = e == null ? void 0 : e.archive) == null ? void 0 : I.color) ?? "red"
       },
       onClick: () => {
-        this._message && (this._message.archived ? alert("unarchive") : A.shared.archiveMessage(this._message));
+        this._message && (this._message.archived ? alert("unarchive") : A.shared.archiveMessage({ message: this._message }));
       }
     }), t;
   }
@@ -1215,7 +1244,7 @@ class xo extends HTMLElement {
       this._titleElement.textContent = "", this._subtitleElement.textContent = "";
       return;
     }
-    this.classList.toggle("unread", !this._message.read && this._feedType !== "archive"), this._titleElement.textContent = this._message.title || "Untitled Message", this._subtitleElement.textContent = this._message.preview || this._message.body || "", this._timeElement.textContent = $o(this._message), this._menu.setOptions(this._getMenuOptions());
+    this.classList.toggle("unread", !this._message.read && this._feedType !== "archive"), this._titleElement.textContent = this._message.title || "Untitled Message", this._subtitleElement.textContent = this._message.preview || this._message.body || "", this._timeElement.textContent = Po(this._message), this._menu.setOptions(this._getMenuOptions());
     const e = ((s = this._message) == null ? void 0 : s.actions) && this._message.actions.length > 0;
     this._actionsContainer.style.display = e ? "flex" : "none";
     const t = (h = (n = (o = this._theme.inbox) == null ? void 0 : o.list) == null ? void 0 : n.item) == null ? void 0 : h.actions;
@@ -1251,7 +1280,7 @@ class fo extends HTMLElement {
     this._shadow = this.attachShadow({ mode: "open" });
     const s = document.createElement("style");
     s.textContent = this.getStyles(t), this._shadow.appendChild(s);
-    const o = new Ee(e, 35), n = new Ee(e, 100), h = new Ee(e, 82);
+    const o = new Me(e, 35), n = new Me(e, 100), h = new Me(e, 82);
     this._shadow.appendChild(o), this._shadow.appendChild(n), this._shadow.appendChild(h);
   }
   getStyles(e) {
@@ -1269,7 +1298,7 @@ class fo extends HTMLElement {
   }
 }
 customElements.get("courier-inbox-skeleton-list-item") || customElements.define("courier-inbox-skeleton-list-item", fo);
-class Ee extends HTMLElement {
+class Me extends HTMLElement {
   constructor(e, t) {
     super();
     a(this, "_shadow");
@@ -1280,7 +1309,7 @@ class Ee extends HTMLElement {
     o.className = "skeleton-item", this._shadow.appendChild(o);
   }
   getStyles(e, t) {
-    var m, p, x, _, b, v, k, w, S, E, M, I;
+    var m, p, x, _, b, v, k, w, S, M, E, I;
     const s = ((x = (p = (m = e.inbox) == null ? void 0 : m.loading) == null ? void 0 : p.animation) == null ? void 0 : x.barColor) ?? "#000", o = s.length === 4 ? `#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}` : s, n = parseInt(o.slice(1, 3), 16), h = parseInt(o.slice(3, 5), 16), d = parseInt(o.slice(5, 7), 16), c = `rgba(${n}, ${h}, ${d}, 0.8)`, u = `rgba(${n}, ${h}, ${d}, 0.4)`;
     return `
       :host {
@@ -1302,7 +1331,7 @@ class Ee extends HTMLElement {
         );
         background-size: 200% 100%;
         animation: shimmer ${((S = (w = (k = e.inbox) == null ? void 0 : k.loading) == null ? void 0 : w.animation) == null ? void 0 : S.duration) ?? "2s"} ease-in-out infinite;
-        border-radius: ${((I = (M = (E = e.inbox) == null ? void 0 : E.loading) == null ? void 0 : M.animation) == null ? void 0 : I.barBorderRadius) ?? "14px"};
+        border-radius: ${((I = (E = (M = e.inbox) == null ? void 0 : M.loading) == null ? void 0 : E.animation) == null ? void 0 : I.barBorderRadius) ?? "14px"};
       }
 
       @keyframes shimmer {
@@ -1316,8 +1345,8 @@ class Ee extends HTMLElement {
     `;
   }
 }
-customElements.get("courier-skeleton-animated-row") || customElements.define("courier-skeleton-animated-row", Ee);
-class $e extends Le {
+customElements.get("courier-skeleton-animated-row") || customElements.define("courier-skeleton-animated-row", Me);
+class Pe extends Le {
   constructor(e) {
     super();
     a(this, "_theme");
@@ -1364,7 +1393,7 @@ class $e extends Le {
     `;
   }
 }
-customElements.get("courier-inbox-skeleton-list") || customElements.define("courier-inbox-skeleton-list", $e);
+customElements.get("courier-inbox-skeleton-list") || customElements.define("courier-inbox-skeleton-list", Pe);
 class Co extends HTMLElement {
   constructor(e) {
     super();
@@ -1380,7 +1409,7 @@ class Co extends HTMLElement {
       t.appendChild(this.customItem);
     else {
       const o = document.createElement("div");
-      o.className = "skeleton-container", this.skeletonLoadingList = new $e(e.theme), this.skeletonLoadingList.build(void 0), o.appendChild(this.skeletonLoadingList), t.appendChild(o);
+      o.className = "skeleton-container", this.skeletonLoadingList = new Pe(e.theme), this.skeletonLoadingList.build(void 0), o.appendChild(this.skeletonLoadingList), t.appendChild(o);
     }
     this.observer = new IntersectionObserver((o) => {
       o.forEach((n) => {
@@ -1498,11 +1527,11 @@ class vo extends HTMLElement {
     this._onRefresh();
   }
   render() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y, j, se, oe, ne, re, ae, he, ce, le, de, ue, pe, ge, me, be, _e, xe, fe, Ce, ve, ye;
+    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y, j, se, oe, ne, re, ae, he, ce, le, de, ue, pe, ge, me, be, _e, xe, fe, Ce, ve, ye;
     this.reset();
     const e = this._themeSubscription.manager.getTheme();
     if (this._error) {
-      const l = (s = e.inbox) == null ? void 0 : s.error, P = new Me({
+      const l = (s = e.inbox) == null ? void 0 : s.error, D = new Ee({
         title: {
           text: ((o = l == null ? void 0 : l.title) == null ? void 0 : o.text) ?? this._error.message,
           textColor: (h = (n = l == null ? void 0 : l.title) == null ? void 0 : n.font) == null ? void 0 : h.color,
@@ -1516,24 +1545,24 @@ class vo extends HTMLElement {
           hoverBackgroundColor: (v = l == null ? void 0 : l.button) == null ? void 0 : v.hoverBackgroundColor,
           activeBackgroundColor: (k = l == null ? void 0 : l.button) == null ? void 0 : k.activeBackgroundColor,
           textColor: (S = (w = l == null ? void 0 : l.button) == null ? void 0 : w.font) == null ? void 0 : S.color,
-          fontFamily: (M = (E = l == null ? void 0 : l.button) == null ? void 0 : E.font) == null ? void 0 : M.family,
+          fontFamily: (E = (M = l == null ? void 0 : l.button) == null ? void 0 : M.font) == null ? void 0 : E.family,
           fontSize: (T = (I = l == null ? void 0 : l.button) == null ? void 0 : I.font) == null ? void 0 : T.size,
-          fontWeight: (D = ($ = l == null ? void 0 : l.button) == null ? void 0 : $.font) == null ? void 0 : D.weight,
+          fontWeight: ($ = (P = l == null ? void 0 : l.button) == null ? void 0 : P.font) == null ? void 0 : $.weight,
           shadow: (y = l == null ? void 0 : l.button) == null ? void 0 : y.shadow,
           border: (B = l == null ? void 0 : l.button) == null ? void 0 : B.border,
           borderRadius: (F = l == null ? void 0 : l.button) == null ? void 0 : F.borderRadius
         }
       });
-      P.build((H = this._errorStateFactory) == null ? void 0 : H.call(this, { feedType: this._feedType, error: this._error })), P.setButtonClickCallback(() => this.handleRetry()), (R = this.shadowRoot) == null || R.appendChild(P);
+      D.build((H = this._errorStateFactory) == null ? void 0 : H.call(this, { feedType: this._feedType, error: this._error })), D.setButtonClickCallback(() => this.handleRetry()), (R = this.shadowRoot) == null || R.appendChild(D);
       return;
     }
     if (this._isLoading) {
-      const l = new $e(e);
+      const l = new Pe(e);
       l.build((z = this._loadingStateFactory) == null ? void 0 : z.call(this, { feedType: this._feedType })), (O = this.shadowRoot) == null || O.appendChild(l);
       return;
     }
     if (this._messages.length === 0) {
-      const l = (N = e.inbox) == null ? void 0 : N.empty, P = new Me({
+      const l = (N = e.inbox) == null ? void 0 : N.empty, D = new Ee({
         title: {
           text: ((U = l == null ? void 0 : l.title) == null ? void 0 : U.text) ?? `No ${this._feedType} messages yet`,
           textColor: (Z = (V = l == null ? void 0 : l.title) == null ? void 0 : V.font) == null ? void 0 : Z.color,
@@ -1555,33 +1584,33 @@ class vo extends HTMLElement {
           borderRadius: (xe = l == null ? void 0 : l.button) == null ? void 0 : xe.borderRadius
         }
       });
-      P.build((fe = this._emptyStateFactory) == null ? void 0 : fe.call(this, { feedType: this._feedType })), P.setButtonClickCallback(() => this.handleRefresh()), (Ce = this.shadowRoot) == null || Ce.appendChild(P);
+      D.build((fe = this._emptyStateFactory) == null ? void 0 : fe.call(this, { feedType: this._feedType })), D.setButtonClickCallback(() => this.handleRefresh()), (Ce = this.shadowRoot) == null || Ce.appendChild(D);
       return;
     }
     const t = document.createElement("ul");
-    if ((ve = this.shadowRoot) == null || ve.appendChild(t), this._messages.forEach((l, P) => {
+    if ((ve = this.shadowRoot) == null || ve.appendChild(t), this._messages.forEach((l, D) => {
       if (this._listItemFactory) {
-        t.appendChild(this._listItemFactory({ message: l, index: P }));
+        t.appendChild(this._listItemFactory({ message: l, index: D }));
         return;
       }
       const K = new xo(e);
       K.setMessage(l, this._feedType), K.setOnItemClick((Q) => {
         var W;
-        return (W = this._onMessageClick) == null ? void 0 : W.call(this, Q, P);
+        return (W = this._onMessageClick) == null ? void 0 : W.call(this, Q, D);
       }), K.setOnItemActionClick((Q, W) => {
         var ke;
-        return (ke = this._onMessageActionClick) == null ? void 0 : ke.call(this, Q, W, P);
+        return (ke = this._onMessageActionClick) == null ? void 0 : ke.call(this, Q, W, D);
       }), K.setOnItemLongPress((Q) => {
         var W;
-        return (W = this._onMessageLongPress) == null ? void 0 : W.call(this, Q, P);
+        return (W = this._onMessageLongPress) == null ? void 0 : W.call(this, Q, D);
       }), t.appendChild(K);
     }), this._canPaginate) {
       const l = new Co({
         theme: e,
         customItem: (ye = this._paginationItemFactory) == null ? void 0 : ye.call(this, { feedType: this._feedType }),
         onPaginationTrigger: () => {
-          var P;
-          return (P = this._onPaginationTrigger) == null ? void 0 : P.call(this, this._feedType);
+          var D;
+          return (D = this._onPaginationTrigger) == null ? void 0 : D.call(this, this._feedType);
         }
       });
       t.appendChild(l);
@@ -1633,7 +1662,7 @@ class yo extends HTMLElement {
     s.className = "spacer", this._selectionIcon = new ie(f.check), this._content.appendChild(this._itemIcon), this._content.appendChild(this._title), this._content.appendChild(s), e.selectable && this._content.appendChild(this._selectionIcon), t.appendChild(this._style), t.appendChild(this._content), this._selectionIcon.style.display = this._isSelected ? "block" : "none", this.refreshTheme();
   }
   getStyles() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D, y, B, F, H, R, z, O, N, U, V, Z;
+    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z;
     const e = this._themeManager.getTheme();
     return `
       :host {
@@ -1665,8 +1694,8 @@ class yo extends HTMLElement {
       p {
         margin: 0;
         font-family: ${((w = (k = (v = (b = (_ = (x = e.inbox) == null ? void 0 : x.header) == null ? void 0 : _.menus) == null ? void 0 : b.popup) == null ? void 0 : v.list) == null ? void 0 : k.font) == null ? void 0 : w.family) ?? "inherit"};
-        font-weight: ${(($ = (T = (I = (M = (E = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : E.menus) == null ? void 0 : M.popup) == null ? void 0 : I.list) == null ? void 0 : T.font) == null ? void 0 : $.weight) ?? "inherit"};
-        font-size: ${((R = (H = (F = (B = (y = (D = e.inbox) == null ? void 0 : D.header) == null ? void 0 : y.menus) == null ? void 0 : B.popup) == null ? void 0 : F.list) == null ? void 0 : H.font) == null ? void 0 : R.size) ?? "14px"};
+        font-weight: ${((P = (T = (I = (E = (M = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : M.menus) == null ? void 0 : E.popup) == null ? void 0 : I.list) == null ? void 0 : T.font) == null ? void 0 : P.weight) ?? "inherit"};
+        font-size: ${((R = (H = (F = (B = (y = ($ = e.inbox) == null ? void 0 : $.header) == null ? void 0 : y.menus) == null ? void 0 : B.popup) == null ? void 0 : F.list) == null ? void 0 : H.font) == null ? void 0 : R.size) ?? "14px"};
         color: ${((Z = (V = (U = (N = (O = (z = e.inbox) == null ? void 0 : z.header) == null ? void 0 : O.menus) == null ? void 0 : N.popup) == null ? void 0 : U.list) == null ? void 0 : V.font) == null ? void 0 : Z.color) ?? "red"};
         white-space: nowrap;
       }
@@ -1704,7 +1733,7 @@ class Be extends HTMLElement {
     }), this.refreshTheme();
   }
   getStyles() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T;
+    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T;
     const e = this._themeSubscription.manager.getTheme();
     return `
       :host {
@@ -1728,7 +1757,7 @@ class Be extends HTMLElement {
       }
 
       courier-inbox-filter-menu-item {
-        border-bottom: ${((T = (I = (M = (E = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : E.menus) == null ? void 0 : M.popup) == null ? void 0 : I.list) == null ? void 0 : T.divider) ?? "none"};
+        border-bottom: ${((T = (I = (E = (M = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : M.menus) == null ? void 0 : E.popup) == null ? void 0 : I.list) == null ? void 0 : T.divider) ?? "none"};
       }
 
       courier-inbox-filter-menu-item:last-child {
@@ -1777,7 +1806,7 @@ class Be extends HTMLElement {
   }
 }
 customElements.get("courier-inbox-option-menu") || customElements.define("courier-inbox-option-menu", Be);
-class De extends HTMLElement {
+class $e extends HTMLElement {
   constructor(e) {
     super();
     // Theme
@@ -1827,7 +1856,7 @@ class De extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-customElements.get("courier-unread-count-badge") || customElements.define("courier-unread-count-badge", De);
+customElements.get("courier-unread-count-badge") || customElements.define("courier-unread-count-badge", $e);
 class ko extends HTMLElement {
   constructor(e, t) {
     super();
@@ -1844,7 +1873,7 @@ class ko extends HTMLElement {
     a(this, "_style");
     this._option = t;
     const s = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style"), this._container = document.createElement("div"), this._container.className = "title-section", this._iconElement = new ie(void 0, this._option.icon.svg), this._titleElement = document.createElement("h2"), this._unreadBadge = new De({
+    this._style = document.createElement("style"), this._container = document.createElement("div"), this._container.className = "title-section", this._iconElement = new ie(void 0, this._option.icon.svg), this._titleElement = document.createElement("h2"), this._unreadBadge = new $e({
       themeBus: e,
       location: "header"
     }), this._container.appendChild(this._iconElement), this._container.appendChild(this._titleElement), this._container.appendChild(this._unreadBadge), s.appendChild(this._style), s.appendChild(this._container), this._themeSubscription = e.subscribe((o) => {
@@ -1887,14 +1916,14 @@ class ko extends HTMLElement {
     this._option = e, this._feedType = t, this._unreadBadge.setCount(s), this.updateFilter();
   }
   updateFilter() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D, y, B, F, H, R;
+    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R;
     const e = this._themeSubscription.manager.getTheme();
     switch (this._feedType) {
       case "inbox":
         this._titleElement.textContent = ((n = (o = (s = (t = e.inbox) == null ? void 0 : t.header) == null ? void 0 : s.filters) == null ? void 0 : o.inbox) == null ? void 0 : n.text) ?? "Inbox", this._iconElement.updateSVG(((m = (u = (c = (d = (h = e.inbox) == null ? void 0 : h.header) == null ? void 0 : d.filters) == null ? void 0 : c.inbox) == null ? void 0 : u.icon) == null ? void 0 : m.svg) ?? f.inbox), this._iconElement.updateColor(((v = (b = (_ = (x = (p = e.inbox) == null ? void 0 : p.header) == null ? void 0 : x.filters) == null ? void 0 : _.inbox) == null ? void 0 : b.icon) == null ? void 0 : v.color) ?? "red");
         break;
       case "archive":
-        this._titleElement.textContent = ((E = (S = (w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters) == null ? void 0 : S.archive) == null ? void 0 : E.text) ?? "Archive", this._iconElement.updateSVG(((D = ($ = (T = (I = (M = e.inbox) == null ? void 0 : M.header) == null ? void 0 : I.filters) == null ? void 0 : T.archive) == null ? void 0 : $.icon) == null ? void 0 : D.svg) ?? f.archive), this._iconElement.updateColor(((R = (H = (F = (B = (y = e.inbox) == null ? void 0 : y.header) == null ? void 0 : B.filters) == null ? void 0 : F.archive) == null ? void 0 : H.icon) == null ? void 0 : R.color) ?? "red");
+        this._titleElement.textContent = ((M = (S = (w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters) == null ? void 0 : S.archive) == null ? void 0 : M.text) ?? "Archive", this._iconElement.updateSVG((($ = (P = (T = (I = (E = e.inbox) == null ? void 0 : E.header) == null ? void 0 : I.filters) == null ? void 0 : T.archive) == null ? void 0 : P.icon) == null ? void 0 : $.svg) ?? f.archive), this._iconElement.updateColor(((R = (H = (F = (B = (y = e.inbox) == null ? void 0 : y.header) == null ? void 0 : B.filters) == null ? void 0 : F.archive) == null ? void 0 : H.icon) == null ? void 0 : R.color) ?? "red");
         break;
     }
   }
@@ -1925,7 +1954,7 @@ class wo extends Le {
   }
   // Menu options
   getFilterOptions() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y;
+    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y;
     const e = this._themeSubscription.manager.getTheme(), t = (n = (o = (s = e.inbox) == null ? void 0 : s.header) == null ? void 0 : o.menus) == null ? void 0 : n.filters;
     return [
       {
@@ -1937,7 +1966,7 @@ class wo extends Le {
         },
         selectionIcon: {
           color: ((k = (v = (b = (_ = (x = (p = e.inbox) == null ? void 0 : p.header) == null ? void 0 : x.menus) == null ? void 0 : _.popup) == null ? void 0 : b.list) == null ? void 0 : v.selectionIcon) == null ? void 0 : k.color) ?? "red",
-          svg: ((T = (I = (M = (E = (S = (w = e.inbox) == null ? void 0 : w.header) == null ? void 0 : S.menus) == null ? void 0 : E.popup) == null ? void 0 : M.list) == null ? void 0 : I.selectionIcon) == null ? void 0 : T.svg) ?? f.check
+          svg: ((T = (I = (E = (M = (S = (w = e.inbox) == null ? void 0 : w.header) == null ? void 0 : S.menus) == null ? void 0 : M.popup) == null ? void 0 : E.list) == null ? void 0 : I.selectionIcon) == null ? void 0 : T.svg) ?? f.check
         },
         onClick: (j) => {
           this.handleOptionMenuItemClick("inbox", j);
@@ -1945,9 +1974,9 @@ class wo extends Le {
       },
       {
         id: "archive",
-        text: (($ = t == null ? void 0 : t.archive) == null ? void 0 : $.text) ?? "Archive",
+        text: ((P = t == null ? void 0 : t.archive) == null ? void 0 : P.text) ?? "Archive",
         icon: {
-          color: ((y = (D = t == null ? void 0 : t.archive) == null ? void 0 : D.icon) == null ? void 0 : y.color) ?? "red",
+          color: ((y = ($ = t == null ? void 0 : t.archive) == null ? void 0 : $.icon) == null ? void 0 : y.color) ?? "red",
           svg: ((F = (B = t == null ? void 0 : t.archive) == null ? void 0 : B.icon) == null ? void 0 : F.svg) ?? f.archive
         },
         selectionIcon: {
@@ -1961,7 +1990,7 @@ class wo extends Le {
     ];
   }
   getActionOptions() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M;
+    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E;
     const t = (n = (o = (s = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : s.header) == null ? void 0 : o.menus) == null ? void 0 : n.actions;
     return [
       {
@@ -1973,7 +2002,7 @@ class wo extends Le {
         },
         selectionIcon: null,
         onClick: (I) => {
-          A.shared.readAllMessages();
+          A.shared.readAllMessages({ canCallApi: !0 });
         }
       },
       {
@@ -1994,11 +2023,11 @@ class wo extends Le {
         text: ((k = t == null ? void 0 : t.archiveRead) == null ? void 0 : k.text) ?? "Archive Read",
         icon: {
           color: ((S = (w = t == null ? void 0 : t.archiveRead) == null ? void 0 : w.icon) == null ? void 0 : S.color) ?? "red",
-          svg: ((M = (E = t == null ? void 0 : t.archiveRead) == null ? void 0 : E.icon) == null ? void 0 : M.svg) ?? f.archive
+          svg: ((E = (M = t == null ? void 0 : t.archiveRead) == null ? void 0 : M.icon) == null ? void 0 : E.svg) ?? f.archive
         },
         selectionIcon: null,
         onClick: (I) => {
-          alert("TODO: Archive read messages");
+          A.shared.archiveReadMessages({ canCallApi: !0 });
         }
       }
     ];
@@ -2581,8 +2610,8 @@ const we = {
       }
     }
   }
-}, Do = (g, i) => {
-  var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y, j, se, oe, ne, re, ae, he, ce, le, de, ue, pe, ge, me, be, _e, xe, fe, Ce, ve, ye, l, P, K, Q, W, ke, Fe, He, Re, ze, Oe, Ne, Ue, Ve, Ze, We, je, Ge, Je, qe, Xe, Ye, Ke, Qe, et, tt, it, st, ot, nt, rt, at, ht, ct, lt, dt, ut, pt, gt, mt, bt, _t, xt, ft, Ct, vt, yt, kt, wt, St, Et, Mt, It, Lt, Tt, Bt, At, Pt, $t, Dt, Ft, Ht, Rt, zt, Ot, Nt, Ut, Vt, Zt, Wt, jt, Gt, Jt, qt, Xt, Yt, Kt, Qt, ei, ti, ii, si, oi, ni, ri, ai, hi, ci, li, di, ui, pi, gi, mi, bi, _i, xi, fi, Ci, vi, yi, ki, wi, Si, Ei, Mi, Ii, Li, Ti, Bi, Ai, Pi, $i, Di, Fi, Hi, Ri, zi, Oi, Ni, Ui, Vi, Zi, Wi, ji, Gi, Ji, qi, Xi, Yi, Ki, Qi, es, ts, is, ss, os, ns, rs, as, hs, cs, ls, ds, us, ps, gs, ms, bs, _s, xs, fs, Cs, vs, ys, ks, ws, Ss, Es, Ms, Is, Ls, Ts, Bs, As, Ps, $s, Ds, Fs, Hs, Rs, zs, Os, Ns, Us, Vs, Zs, Ws, js, Gs, Js, qs, Xs, Ys, Ks, Qs, eo, to, io, so, oo, no, ro, ao, ho, co, lo, uo, po;
+}, $o = (g, i) => {
+  var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y, j, se, oe, ne, re, ae, he, ce, le, de, ue, pe, ge, me, be, _e, xe, fe, Ce, ve, ye, l, D, K, Q, W, ke, Fe, He, Re, ze, Oe, Ne, Ue, Ve, Ze, We, je, Ge, Je, qe, Xe, Ye, Ke, Qe, et, tt, it, st, ot, nt, rt, at, ht, ct, lt, dt, ut, pt, gt, mt, bt, _t, xt, ft, Ct, vt, yt, kt, wt, St, Mt, Et, It, Lt, Tt, Bt, At, Dt, Pt, $t, Ft, Ht, Rt, zt, Ot, Nt, Ut, Vt, Zt, Wt, jt, Gt, Jt, qt, Xt, Yt, Kt, Qt, ei, ti, ii, si, oi, ni, ri, ai, hi, ci, li, di, ui, pi, gi, mi, bi, _i, xi, fi, Ci, vi, yi, ki, wi, Si, Mi, Ei, Ii, Li, Ti, Bi, Ai, Di, Pi, $i, Fi, Hi, Ri, zi, Oi, Ni, Ui, Vi, Zi, Wi, ji, Gi, Ji, qi, Xi, Yi, Ki, Qi, es, ts, is, ss, os, ns, rs, as, hs, cs, ls, ds, us, ps, gs, ms, bs, _s, xs, fs, Cs, vs, ys, ks, ws, Ss, Ms, Es, Is, Ls, Ts, Bs, As, Ds, Ps, $s, Fs, Hs, Rs, zs, Os, Ns, Us, Vs, Zs, Ws, js, Gs, Js, qs, Xs, Ys, Ks, Qs, eo, to, io, so, oo, no, ro, ao, ho, co, lo, uo, po;
   const e = g === "light" ? we : Ae;
   return {
     popup: {
@@ -2609,10 +2638,10 @@ const we = {
         ...(v = i.inbox) == null ? void 0 : v.header,
         filters: {
           ...(w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters,
-          ...(E = (S = i.inbox) == null ? void 0 : S.header) == null ? void 0 : E.filters,
+          ...(M = (S = i.inbox) == null ? void 0 : S.header) == null ? void 0 : M.filters,
           inbox: {
-            ...(T = (I = (M = e.inbox) == null ? void 0 : M.header) == null ? void 0 : I.filters) == null ? void 0 : T.inbox,
-            ...(y = (D = ($ = i.inbox) == null ? void 0 : $.header) == null ? void 0 : D.filters) == null ? void 0 : y.inbox,
+            ...(T = (I = (E = e.inbox) == null ? void 0 : E.header) == null ? void 0 : I.filters) == null ? void 0 : T.inbox,
+            ...(y = ($ = (P = i.inbox) == null ? void 0 : P.header) == null ? void 0 : $.filters) == null ? void 0 : y.inbox,
             icon: {
               ...(R = (H = (F = (B = e.inbox) == null ? void 0 : B.header) == null ? void 0 : F.filters) == null ? void 0 : H.inbox) == null ? void 0 : R.icon,
               ...(U = (N = (O = (z = i.inbox) == null ? void 0 : z.header) == null ? void 0 : O.filters) == null ? void 0 : N.inbox) == null ? void 0 : U.icon
@@ -2636,7 +2665,7 @@ const we = {
           ...(fe = (xe = i.inbox) == null ? void 0 : xe.header) == null ? void 0 : fe.menus,
           popup: {
             ...(ye = (ve = (Ce = e.inbox) == null ? void 0 : Ce.header) == null ? void 0 : ve.menus) == null ? void 0 : ye.popup,
-            ...(K = (P = (l = i.inbox) == null ? void 0 : l.header) == null ? void 0 : P.menus) == null ? void 0 : K.popup,
+            ...(K = (D = (l = i.inbox) == null ? void 0 : l.header) == null ? void 0 : D.menus) == null ? void 0 : K.popup,
             list: {
               ...(Fe = (ke = (W = (Q = e.inbox) == null ? void 0 : Q.header) == null ? void 0 : W.menus) == null ? void 0 : ke.popup) == null ? void 0 : Fe.list,
               ...(Oe = (ze = (Re = (He = i.inbox) == null ? void 0 : He.header) == null ? void 0 : Re.menus) == null ? void 0 : ze.popup) == null ? void 0 : Oe.list,
@@ -2658,12 +2687,12 @@ const we = {
               ...(Ct = (ft = (xt = (_t = i.inbox) == null ? void 0 : _t.header) == null ? void 0 : xt.menus) == null ? void 0 : ft.filters) == null ? void 0 : Ct.inbox,
               icon: {
                 ...(St = (wt = (kt = (yt = (vt = e.inbox) == null ? void 0 : vt.header) == null ? void 0 : yt.menus) == null ? void 0 : kt.filters) == null ? void 0 : wt.inbox) == null ? void 0 : St.icon,
-                ...(Tt = (Lt = (It = (Mt = (Et = i.inbox) == null ? void 0 : Et.header) == null ? void 0 : Mt.menus) == null ? void 0 : It.filters) == null ? void 0 : Lt.inbox) == null ? void 0 : Tt.icon
+                ...(Tt = (Lt = (It = (Et = (Mt = i.inbox) == null ? void 0 : Mt.header) == null ? void 0 : Et.menus) == null ? void 0 : It.filters) == null ? void 0 : Lt.inbox) == null ? void 0 : Tt.icon
               }
             },
             archive: {
-              ...($t = (Pt = (At = (Bt = e.inbox) == null ? void 0 : Bt.header) == null ? void 0 : At.menus) == null ? void 0 : Pt.filters) == null ? void 0 : $t.archive,
-              ...(Rt = (Ht = (Ft = (Dt = i.inbox) == null ? void 0 : Dt.header) == null ? void 0 : Ft.menus) == null ? void 0 : Ht.filters) == null ? void 0 : Rt.archive,
+              ...(Pt = (Dt = (At = (Bt = e.inbox) == null ? void 0 : Bt.header) == null ? void 0 : At.menus) == null ? void 0 : Dt.filters) == null ? void 0 : Pt.archive,
+              ...(Rt = (Ht = (Ft = ($t = i.inbox) == null ? void 0 : $t.header) == null ? void 0 : Ft.menus) == null ? void 0 : Ht.filters) == null ? void 0 : Rt.archive,
               icon: {
                 ...(Vt = (Ut = (Nt = (Ot = (zt = e.inbox) == null ? void 0 : zt.header) == null ? void 0 : Ot.menus) == null ? void 0 : Nt.filters) == null ? void 0 : Ut.archive) == null ? void 0 : Vt.icon,
                 ...(Jt = (Gt = (jt = (Wt = (Zt = i.inbox) == null ? void 0 : Zt.header) == null ? void 0 : Wt.menus) == null ? void 0 : jt.filters) == null ? void 0 : Gt.archive) == null ? void 0 : Jt.icon
@@ -2683,10 +2712,10 @@ const we = {
             },
             archiveAll: {
               ...(yi = (vi = (Ci = (fi = e.inbox) == null ? void 0 : fi.header) == null ? void 0 : Ci.menus) == null ? void 0 : vi.actions) == null ? void 0 : yi.archiveAll,
-              ...(Ei = (Si = (wi = (ki = i.inbox) == null ? void 0 : ki.header) == null ? void 0 : wi.menus) == null ? void 0 : Si.actions) == null ? void 0 : Ei.archiveAll,
+              ...(Mi = (Si = (wi = (ki = i.inbox) == null ? void 0 : ki.header) == null ? void 0 : wi.menus) == null ? void 0 : Si.actions) == null ? void 0 : Mi.archiveAll,
               icon: {
-                ...(Bi = (Ti = (Li = (Ii = (Mi = e.inbox) == null ? void 0 : Mi.header) == null ? void 0 : Ii.menus) == null ? void 0 : Li.actions) == null ? void 0 : Ti.archiveAll) == null ? void 0 : Bi.icon,
-                ...(Fi = (Di = ($i = (Pi = (Ai = i.inbox) == null ? void 0 : Ai.header) == null ? void 0 : Pi.menus) == null ? void 0 : $i.actions) == null ? void 0 : Di.archiveAll) == null ? void 0 : Fi.icon
+                ...(Bi = (Ti = (Li = (Ii = (Ei = e.inbox) == null ? void 0 : Ei.header) == null ? void 0 : Ii.menus) == null ? void 0 : Li.actions) == null ? void 0 : Ti.archiveAll) == null ? void 0 : Bi.icon,
+                ...(Fi = ($i = (Pi = (Di = (Ai = i.inbox) == null ? void 0 : Ai.header) == null ? void 0 : Di.menus) == null ? void 0 : Pi.actions) == null ? void 0 : $i.archiveAll) == null ? void 0 : Fi.icon
               }
             },
             archiveRead: {
@@ -2714,10 +2743,10 @@ const we = {
               ...(Cs = (fs = (xs = (_s = i.inbox) == null ? void 0 : _s.list) == null ? void 0 : xs.item) == null ? void 0 : fs.menu) == null ? void 0 : Cs.item,
               read: {
                 ...(Ss = (ws = (ks = (ys = (vs = e.inbox) == null ? void 0 : vs.list) == null ? void 0 : ys.item) == null ? void 0 : ks.menu) == null ? void 0 : ws.item) == null ? void 0 : Ss.read,
-                ...(Ts = (Ls = (Is = (Ms = (Es = i.inbox) == null ? void 0 : Es.list) == null ? void 0 : Ms.item) == null ? void 0 : Is.menu) == null ? void 0 : Ls.item) == null ? void 0 : Ts.read
+                ...(Ts = (Ls = (Is = (Es = (Ms = i.inbox) == null ? void 0 : Ms.list) == null ? void 0 : Es.item) == null ? void 0 : Is.menu) == null ? void 0 : Ls.item) == null ? void 0 : Ts.read
               },
               unread: {
-                ...(Ds = ($s = (Ps = (As = (Bs = e.inbox) == null ? void 0 : Bs.list) == null ? void 0 : As.item) == null ? void 0 : Ps.menu) == null ? void 0 : $s.item) == null ? void 0 : Ds.unread,
+                ...($s = (Ps = (Ds = (As = (Bs = e.inbox) == null ? void 0 : Bs.list) == null ? void 0 : As.item) == null ? void 0 : Ds.menu) == null ? void 0 : Ps.item) == null ? void 0 : $s.unread,
                 ...(Os = (zs = (Rs = (Hs = (Fs = i.inbox) == null ? void 0 : Fs.list) == null ? void 0 : Hs.item) == null ? void 0 : Rs.menu) == null ? void 0 : zs.item) == null ? void 0 : Os.unread
               },
               archive: {
@@ -2747,7 +2776,7 @@ const we = {
     }
   };
 };
-class Eo {
+class Mo {
   constructor(i) {
     // Event IDs
     a(this, "THEME_CHANGE_EVENT", "courier_inbox_theme_change");
@@ -2787,7 +2816,7 @@ class Eo {
    * Update the theme
    */
   updateTheme() {
-    const i = this._userMode === "system" ? this._systemMode : this._userMode, e = i === "light" ? this._lightTheme : this._darkTheme, t = Do(i, e);
+    const i = this._userMode === "system" ? this._systemMode : this._userMode, e = i === "light" ? this._lightTheme : this._darkTheme, t = $o(i, e);
     this.setTheme(t);
   }
   /**
@@ -2831,7 +2860,7 @@ class Eo {
     this._systemThemeCleanup && this._systemThemeCleanup(), this._subscriptions.forEach((i) => i.unsubscribe()), this._subscriptions = [];
   }
 }
-class Mo extends HTMLElement {
+class Eo extends HTMLElement {
   constructor(e) {
     var t;
     super();
@@ -2859,7 +2888,7 @@ class Mo extends HTMLElement {
       feedType: this._currentFeed,
       height: "768px"
     });
-    this._shadow = this.attachShadow({ mode: "open" }), this._themeManager = e ?? new Eo(we), this._header = new wo({
+    this._shadow = this.attachShadow({ mode: "open" }), this._themeManager = e ?? new Mo(we), this._header = new wo({
       themeManager: this._themeManager,
       onFeedTypeChange: (s) => {
         this.setFeedType(s);
@@ -2881,7 +2910,7 @@ class Mo extends HTMLElement {
       },
       onMessageClick: (s, o) => {
         var n;
-        A.shared.clickMessage(s), this.dispatchEvent(new CustomEvent("message-click", {
+        A.shared.clickMessage({ message: s }), this.dispatchEvent(new CustomEvent("message-click", {
           detail: { message: s, index: o },
           bubbles: !0,
           composed: !0
@@ -3087,7 +3116,7 @@ class Mo extends HTMLElement {
       }
   }
 }
-customElements.get("courier-inbox") || customElements.define("courier-inbox", Mo);
+customElements.get("courier-inbox") || customElements.define("courier-inbox", Eo);
 class Io extends Le {
   constructor(e) {
     super();
@@ -3102,7 +3131,7 @@ class Io extends Le {
     });
   }
   defaultElement() {
-    this._container = document.createElement("div"), this._container.className = "menu-button-container", this._triggerButton = new Se(f.inbox), this._unreadCountBadge = new De({
+    this._container = document.createElement("div"), this._container.className = "menu-button-container", this._triggerButton = new Se(f.inbox), this._unreadCountBadge = new $e({
       themeBus: this._themeSubscription.manager,
       location: "button"
     }), this._unreadCountBadge.id = "unread-badge";
@@ -3129,9 +3158,9 @@ class Io extends Le {
     (t = this._unreadCountBadge) == null || t.setCount(e), this.updateTheme();
   }
   updateTheme() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E;
+    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M;
     const e = this._themeSubscription.manager.getTheme();
-    (n = this._triggerButton) == null || n.updateIconColor(((o = (s = (t = e == null ? void 0 : e.popup) == null ? void 0 : t.button) == null ? void 0 : s.icon) == null ? void 0 : o.color) ?? r.black[500]), (u = this._triggerButton) == null || u.updateIconSVG(((c = (d = (h = e == null ? void 0 : e.popup) == null ? void 0 : h.button) == null ? void 0 : d.icon) == null ? void 0 : c.svg) ?? f.inbox), (x = this._triggerButton) == null || x.updateBackgroundColor(((p = (m = e == null ? void 0 : e.popup) == null ? void 0 : m.button) == null ? void 0 : p.backgroundColor) ?? "transparent"), (v = this._triggerButton) == null || v.updateHoverBackgroundColor(((b = (_ = e == null ? void 0 : e.popup) == null ? void 0 : _.button) == null ? void 0 : b.hoverBackgroundColor) ?? r.black[50010]), (S = this._triggerButton) == null || S.updateActiveBackgroundColor(((w = (k = e == null ? void 0 : e.popup) == null ? void 0 : k.button) == null ? void 0 : w.activeBackgroundColor) ?? r.black[50020]), (E = this._unreadCountBadge) == null || E.refreshTheme("button");
+    (n = this._triggerButton) == null || n.updateIconColor(((o = (s = (t = e == null ? void 0 : e.popup) == null ? void 0 : t.button) == null ? void 0 : s.icon) == null ? void 0 : o.color) ?? r.black[500]), (u = this._triggerButton) == null || u.updateIconSVG(((c = (d = (h = e == null ? void 0 : e.popup) == null ? void 0 : h.button) == null ? void 0 : d.icon) == null ? void 0 : c.svg) ?? f.inbox), (x = this._triggerButton) == null || x.updateBackgroundColor(((p = (m = e == null ? void 0 : e.popup) == null ? void 0 : m.button) == null ? void 0 : p.backgroundColor) ?? "transparent"), (v = this._triggerButton) == null || v.updateHoverBackgroundColor(((b = (_ = e == null ? void 0 : e.popup) == null ? void 0 : _.button) == null ? void 0 : b.hoverBackgroundColor) ?? r.black[50010]), (S = this._triggerButton) == null || S.updateActiveBackgroundColor(((w = (k = e == null ? void 0 : e.popup) == null ? void 0 : k.button) == null ? void 0 : w.activeBackgroundColor) ?? r.black[50020]), (M = this._unreadCountBadge) == null || M.refreshTheme("button");
   }
   disconnectedCallback() {
     this._themeSubscription.unsubscribe();
@@ -3150,7 +3179,7 @@ class Fo extends HTMLElement {
     a(this, "_bottom", "40px");
     a(this, "_left", "0");
     // Theming
-    a(this, "_themeManager", new Eo(we));
+    a(this, "_themeManager", new Mo(we));
     // Components
     a(this, "_triggerButton");
     a(this, "_popup");
@@ -3161,7 +3190,7 @@ class Fo extends HTMLElement {
     // Factories
     a(this, "_popupMenuButtonFactory");
     const e = this.attachShadow({ mode: "open" });
-    this._triggerButton = new Io(this._themeManager), this._triggerButton.build(void 0), this._popup = document.createElement("div"), this._popup.className = "popup", this._inbox = new Mo(this._themeManager), this._inbox.setAttribute("height", "100%"), this._style = document.createElement("style"), this.refreshTheme(), e.appendChild(this._style), e.appendChild(this._triggerButton), e.appendChild(this._popup), this._popup.appendChild(this._inbox), this._triggerButton.addEventListener("click", this.togglePopup.bind(this)), document.addEventListener("click", this.handleOutsideClick.bind(this)), this.updatePopupPosition(), this._datastoreListener = new So(this), A.shared.addDataStoreListener(this._datastoreListener), this._themeManager.subscribe((t) => {
+    this._triggerButton = new Io(this._themeManager), this._triggerButton.build(void 0), this._popup = document.createElement("div"), this._popup.className = "popup", this._inbox = new Eo(this._themeManager), this._inbox.setAttribute("height", "100%"), this._style = document.createElement("style"), this.refreshTheme(), e.appendChild(this._style), e.appendChild(this._triggerButton), e.appendChild(this._popup), this._popup.appendChild(this._inbox), this._triggerButton.addEventListener("click", this.togglePopup.bind(this)), document.addEventListener("click", this.handleOutsideClick.bind(this)), this.updatePopupPosition(), this._datastoreListener = new So(this), A.shared.addDataStoreListener(this._datastoreListener), this._themeManager.subscribe((t) => {
       this.refreshTheme();
     });
   }
@@ -3390,21 +3419,21 @@ class Zo {
   }
 }
 export {
-  Mo as CourierInbox,
+  Eo as CourierInbox,
   So as CourierInboxDataStoreListener,
   A as CourierInboxDatastore,
   Zo as CourierInboxDatastoreEvents,
   wo as CourierInboxHeader,
   Fo as CourierInboxMenu,
-  Eo as CourierInboxThemeManager,
+  Mo as CourierInboxThemeManager,
   xo as CourierListItem,
   Uo as archiveMessage,
   No as clickMessage,
   Ae as defaultDarkTheme,
   we as defaultLightTheme,
-  $o as getMessageTime,
+  Po as getMessageTime,
   zo as markAsRead,
   Oo as markAsUnread,
-  Do as mergeTheme,
+  $o as mergeTheme,
   Vo as openMessage
 };