@trycourier/courier-react 8.0.15-beta → 8.0.16-beta

package/dist/index.mjs

@@ -194,7 +194,7 @@ const _CourierSocket = class _CourierSocket2 {
       (_b = this.logger) == null ? void 0 : _b.error(`Max retry attempts (${_CourierSocket2.MAX_RETRY_ATTEMPTS}) reached.`);
       return;
     }
-    const backoffTimeInMillis = suggestedBackoffTimeInMillis != null ? suggestedBackoffTimeInMillis : this.getBackoffTimeInMillis();
+    const backoffTimeInMillis = suggestedBackoffTimeInMillis ?? this.getBackoffTimeInMillis();
     this.retryTimeoutId = window.setTimeout(async () => {
       try {
         await this.connect();
@@ -346,8 +346,7 @@ Response JSON: ${JSON.stringify(data.response, null, 2)}
   `);
 }
 async function http(props) {
-  var _a;
-  const validCodes = (_a = props.validCodes) != null ? _a : [200];
+  const validCodes = props.validCodes ?? [200];
   const uid = props.options.showLogs ? UUID.nanoid() : void 0;
   const request = new Request(props.url, {
     method: props.method,
@@ -609,11 +608,10 @@ class InboxClient extends Client {
    * @returns Promise resolving to paginated messages response
    */
   async getMessages(props) {
-    var _a;
     const query = `
       query GetInboxMessages(
         $params: FilterParamsInput = { ${this.options.tenantId ? `accountId: "${this.options.tenantId}"` : ""} }
-        $limit: Int = ${(_a = props == null ? void 0 : props.paginationLimit) != null ? _a : 24}
+        $limit: Int = ${(props == null ? void 0 : props.paginationLimit) ?? 24}
         $after: String ${(props == null ? void 0 : props.startCursor) ? `= "${props.startCursor}"` : ""}
       ) {
         count(params: $params)
@@ -662,11 +660,10 @@ class InboxClient extends Client {
    * @returns Promise resolving to paginated archived messages response
    */
   async getArchivedMessages(props) {
-    var _a;
     const query = `
       query GetInboxMessages(
         $params: FilterParamsInput = { ${this.options.tenantId ? `accountId: "${this.options.tenantId}"` : ""}, archived: true }
-        $limit: Int = ${(_a = props == null ? void 0 : props.paginationLimit) != null ? _a : 24}
+        $limit: Int = ${(props == null ? void 0 : props.paginationLimit) ?? 24}
         $after: String ${(props == null ? void 0 : props.startCursor) ? `= "${props.startCursor}"` : ""}
       ) {
         count(params: $params)
@@ -713,7 +710,6 @@ class InboxClient extends Client {
    * @returns Promise resolving to number of unread messages
    */
   async getUnreadMessageCount() {
-    var _a2;
     var _a;
     const query = `
       query GetMessages {
@@ -729,7 +725,7 @@ class InboxClient extends Client {
       },
       url: this.options.apiUrls.inbox.graphql
     });
-    return (_a2 = (_a = response.data) == null ? void 0 : _a.count) != null ? _a2 : 0;
+    return ((_a = response.data) == null ? void 0 : _a.count) ?? 0;
   }
   /**
    * Track a click event
@@ -1212,14 +1208,13 @@ class TrackingClient extends Client {
 }
 class CourierClient extends Client {
   constructor(props) {
-    var _a2;
     var _a, _b;
-    const showLogs = props.showLogs !== void 0 ? props.showLogs : process.env.NODE_ENV === "development";
+    const showLogs = props.showLogs !== void 0 ? props.showLogs : false;
     const baseOptions = {
       ...props,
       showLogs,
       apiUrls: props.apiUrls || getCourierApiUrls(),
-      accessToken: (_a2 = props.jwt) != null ? _a2 : props.publicApiKey
+      accessToken: props.jwt ?? props.publicApiKey
     };
     super({
       ...baseOptions,
@@ -1297,8 +1292,7 @@ const _Courier = class _Courier2 {
    * @param options - The options for the Courier client
    */
   signIn(props) {
-    var _a;
-    const connectionId = (_a = props.connectionId) != null ? _a : UUID.nanoid();
+    const connectionId = props.connectionId ?? UUID.nanoid();
     this.instanceClient = new CourierClient({ ...props, connectionId });
     this.notifyAuthenticationListeners({ userId: props.userId });
   }
@@ -1495,7 +1489,6 @@ class CourierButton extends CourierSystemThemeElement {
     });
   }
   getStyles(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const defaultTextColor = () => {
       const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
       return secondary.textColor;
@@ -1531,18 +1524,18 @@ class CourierButton extends CourierSystemThemeElement {
 
       button {
         border: none;
-        border-radius: ${(_a = props.borderRadius) != null ? _a : defaultBorderRadius()};
-        font-weight: ${(_b = props.fontWeight) != null ? _b : defaultFontWeight()};
-        font-family: ${(_c = props.fontFamily) != null ? _c : "inherit"};
-        font-size: ${(_d = props.fontSize) != null ? _d : defaultFontSize()};
+        border-radius: ${props.borderRadius ?? defaultBorderRadius()};
+        font-weight: ${props.fontWeight ?? defaultFontWeight()};
+        font-family: ${props.fontFamily ?? "inherit"};
+        font-size: ${props.fontSize ?? defaultFontSize()};
         padding: 6px 10px;
         cursor: pointer;
         width: 100%;
         height: 100%;
-        background-color: ${(_e = props.backgroundColor) != null ? _e : defaultBackgroundColor()};
-        color: ${(_f = props.textColor) != null ? _f : defaultTextColor()};
-        border: ${(_g = props.border) != null ? _g : defaultBorder()};
-        box-shadow: ${(_h = props.shadow) != null ? _h : defaultShadow()};
+        background-color: ${props.backgroundColor ?? defaultBackgroundColor()};
+        color: ${props.textColor ?? defaultTextColor()};
+        border: ${props.border ?? defaultBorder()};
+        box-shadow: ${props.shadow ?? defaultShadow()};
         touch-action: manipulation;
       }
 
@@ -1603,7 +1596,7 @@ class CourierIcon extends BaseElement {
     __publicField2(this, "_svg");
     __publicField2(this, "_iconContainer");
     __publicField2(this, "_style");
-    this._color = color != null ? color : CourierColors.black[500];
+    this._color = color ?? CourierColors.black[500];
     this._svg = svg;
     const shadow = this.attachShadow({ mode: "open" });
     this._iconContainer = document.createElement("div");
@@ -1821,7 +1814,7 @@ class CourierElement extends CourierSystemThemeElement {
       this.shadow.replaceChildren();
       return;
     }
-    const element = newElement != null ? newElement : this.defaultElement();
+    const element = newElement ?? this.defaultElement();
     this.shadow.replaceChildren(element);
   }
   // Default element to be used if no factory is provided
@@ -1847,14 +1840,13 @@ class CourierInfoState extends CourierElement {
     this._props = props;
   }
   defaultElement() {
-    var _a2;
     var _a, _b;
     const container = document.createElement("div");
     this._title = document.createElement("h2");
     if ((_a = this._props.title) == null ? void 0 : _a.text) {
       this._title.textContent = this._props.title.text;
     }
-    this._button = new CourierButton((_a2 = this._props.button) != null ? _a2 : CourierButtonVariants.secondary(this.currentSystemTheme));
+    this._button = new CourierButton(this._props.button ?? CourierButtonVariants.secondary(this.currentSystemTheme));
     this._style = document.createElement("style");
     this._style.textContent = this.getStyles(this._props);
     container.className = "container";
@@ -1873,7 +1865,6 @@ class CourierInfoState extends CourierElement {
     this.updateStyles(this._props);
   }
   getStyles(props) {
-    var _a2, _b2, _c2, _d2;
     var _a, _b, _c, _d;
     return `
       :host {
@@ -1896,10 +1887,10 @@ class CourierInfoState extends CourierElement {
 
       .container h2 {
         margin: 0;
-        color: ${(_a2 = (_a = props.title) == null ? void 0 : _a.textColor) != null ? _a2 : "red"};
-        font-size: ${(_b2 = (_b = props.title) == null ? void 0 : _b.fontSize) != null ? _b2 : "16px"};
-        font-weight: ${(_c2 = (_c = props.title) == null ? void 0 : _c.fontWeight) != null ? _c2 : "500"};
-        font-family: ${(_d2 = (_d = props.title) == null ? void 0 : _d.fontFamily) != null ? _d2 : "inherit"};
+        color: ${((_a = props.title) == null ? void 0 : _a.textColor) ?? "red"};
+        font-size: ${((_b = props.title) == null ? void 0 : _b.fontSize) ?? "16px"};
+        font-weight: ${((_c = props.title) == null ? void 0 : _c.fontWeight) ?? "500"};
+        font-family: ${((_d = props.title) == null ? void 0 : _d.fontFamily) ?? "inherit"};
       }
     `;
   }
@@ -1948,33 +1939,32 @@ class CourierIconButton extends BaseElement {
     this._style.textContent = this.getStyles();
   }
   getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g;
     return `
       :host {
         display: inline-block;
-        border-radius: ${(_a = this._borderRadius) != null ? _a : "50%"};
+        border-radius: ${this._borderRadius ?? "50%"};
       }
 
       button {
         border: none;
-        border-radius: ${(_b = this._borderRadius) != null ? _b : "50%"};
+        border-radius: ${this._borderRadius ?? "50%"};
         cursor: pointer;
-        width: ${(_c = this._width) != null ? _c : "36px"};
-        height: ${(_d = this._height) != null ? _d : "36px"};
+        width: ${this._width ?? "36px"};
+        height: ${this._height ?? "36px"};
         display: flex;
         align-items: center;
         justify-content: center;
-        background: ${(_e = this._backgroundColor) != null ? _e : "transparent"};
+        background: ${this._backgroundColor ?? "transparent"};
         transition: background-color 0.2s ease;
         touch-action: manipulation;
       }
 
       button:hover {
-        background-color: ${(_f = this._hoverBackgroundColor) != null ? _f : "red"};
+        background-color: ${this._hoverBackgroundColor ?? "red"};
       }
 
       button:active {
-        background-color: ${(_g = this._activeBackgroundColor) != null ? _g : "red"};
+        background-color: ${this._activeBackgroundColor ?? "red"};
       }
 
       button:disabled {
@@ -2085,17 +2075,16 @@ class CourierInboxListItemMenu extends BaseElement {
     shadow.appendChild(menu);
   }
   getStyles() {
-    var _a2, _b2, _c2, _d;
     var _a, _b, _c;
     const menu = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
     return `
       :host {
         display: block;
         position: absolute;
-        background: ${(_a2 = menu == null ? void 0 : menu.backgroundColor) != null ? _a2 : "red"};
-        border: ${(_b2 = menu == null ? void 0 : menu.border) != null ? _b2 : "1px solid red"};
-        border-radius: ${(_c2 = menu == null ? void 0 : menu.borderRadius) != null ? _c2 : "0px"};
-        box-shadow: ${(_d = menu == null ? void 0 : menu.shadow) != null ? _d : "0 2px 8px red"};
+        background: ${(menu == null ? void 0 : menu.backgroundColor) ?? "red"};
+        border: ${(menu == null ? void 0 : menu.border) ?? "1px solid red"};
+        border-radius: ${(menu == null ? void 0 : menu.borderRadius) ?? "0px"};
+        box-shadow: ${(menu == null ? void 0 : menu.shadow) ?? "0 2px 8px red"};
         user-select: none;
         opacity: 0;
         pointer-events: none;
@@ -2180,16 +2169,13 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     return _CourierInboxDatastore2.instance;
   }
   get unreadCount() {
-    var _a;
-    return (_a = this._unreadCount) != null ? _a : 0;
+    return this._unreadCount ?? 0;
   }
   get inboxDataSet() {
-    var _a;
-    return (_a = this._inboxDataSet) != null ? _a : { feedType: "inbox", messages: [], canPaginate: false, paginationCursor: null };
+    return this._inboxDataSet ?? { feedType: "inbox", messages: [], canPaginate: false, paginationCursor: null };
   }
   get archiveDataSet() {
-    var _a;
-    return (_a = this._archiveDataSet) != null ? _a : { feedType: "archive", messages: [], canPaginate: false, paginationCursor: null };
+    return this._archiveDataSet ?? { feedType: "archive", messages: [], canPaginate: false, paginationCursor: null };
   }
   addDataStoreListener(listener) {
     this._dataStoreListeners.push(listener);
@@ -2198,7 +2184,6 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     this._dataStoreListeners = this._dataStoreListeners.filter((l) => l !== listener);
   }
   async fetchDataSet(props) {
-    var _a2, _b2, _c2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     if (props.canUseCache) {
       switch (props.feedType) {
@@ -2217,9 +2202,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     const response = props.feedType === "inbox" ? await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.getMessages()) : await ((_b = Courier.shared.client) == null ? void 0 : _b.inbox.getArchivedMessages());
     return {
       feedType: props.feedType,
-      messages: (_a2 = (_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) != null ? _a2 : [],
-      canPaginate: (_b2 = (_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) != null ? _b2 : false,
-      paginationCursor: (_c2 = (_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) != null ? _c2 : null
+      messages: ((_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) ?? [],
+      canPaginate: ((_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) ?? false,
+      paginationCursor: ((_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) ?? null
     };
   }
   async fetchUnreadCount(props) {
@@ -2228,7 +2213,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
       return this._unreadCount;
     }
     const unreadCount = await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.getUnreadMessageCount());
-    return unreadCount != null ? unreadCount : 0;
+    return unreadCount ?? 0;
   }
   async load(props) {
     var _a, _b, _c;
@@ -2236,7 +2221,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
       if (!((_a = Courier.shared.client) == null ? void 0 : _a.options.userId)) {
         throw new Error("User is not signed in");
       }
-      const properties = props != null ? props : { feedType: "inbox", canUseCache: true };
+      const properties = props ?? { feedType: "inbox", canUseCache: true };
       const [dataSet, unreadCount] = await Promise.all([
         this.fetchDataSet(properties),
         this.fetchUnreadCount(properties)
@@ -2251,10 +2236,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
       }
       this._unreadCount = unreadCount;
       this._dataStoreListeners.forEach((listener) => {
-        var _a3;
         var _a2, _b2, _c2, _d;
         (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, dataSet, properties.feedType);
-        (_d = (_c2 = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c2, (_a3 = this._unreadCount) != null ? _a3 : 0);
+        (_d = (_c2 = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c2, this._unreadCount ?? 0);
       });
     } catch (error) {
       (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.error("Error loading inbox:", error);
@@ -2362,12 +2346,11 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
    * @returns The message or undefined if it is not found
    */
   getMessage(props) {
-    var _a2;
     var _a, _b;
     if (!props.messageId) {
       return void 0;
     }
-    return (_a2 = (_a = this._inboxDataSet) == null ? void 0 : _a.messages.find((m) => m.messageId === props.messageId)) != null ? _a2 : (_b = this._archiveDataSet) == null ? void 0 : _b.messages.find((m) => m.messageId === props.messageId);
+    return ((_a = this._inboxDataSet) == null ? void 0 : _a.messages.find((m) => m.messageId === props.messageId)) ?? ((_b = this._archiveDataSet) == null ? void 0 : _b.messages.find((m) => m.messageId === props.messageId));
   }
   /**
    * Fetch the next page of messages
@@ -2375,7 +2358,6 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
    * @returns The next page of messages or null if there is no next page
    */
   async fetchNextPageOfMessages(props) {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     switch (props.feedType) {
       case "inbox":
@@ -2391,9 +2373,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
             }));
             const dataSet = {
               feedType: "inbox",
-              messages: (_a2 = (_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) != null ? _a2 : [],
-              canPaginate: (_b2 = (_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) != null ? _b2 : false,
-              paginationCursor: (_c2 = (_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) != null ? _c2 : null
+              messages: ((_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) ?? [],
+              canPaginate: ((_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) ?? false,
+              paginationCursor: ((_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) ?? null
             };
             this.addPage(dataSet);
             return dataSet;
@@ -2418,9 +2400,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
             }));
             const dataSet = {
               feedType: "archive",
-              messages: (_d2 = (_p = (_o = response == null ? void 0 : response.data) == null ? void 0 : _o.messages) == null ? void 0 : _p.nodes) != null ? _d2 : [],
-              canPaginate: (_e2 = (_s = (_r = (_q = response == null ? void 0 : response.data) == null ? void 0 : _q.messages) == null ? void 0 : _r.pageInfo) == null ? void 0 : _s.hasNextPage) != null ? _e2 : false,
-              paginationCursor: (_f2 = (_v = (_u = (_t = response == null ? void 0 : response.data) == null ? void 0 : _t.messages) == null ? void 0 : _u.pageInfo) == null ? void 0 : _v.startCursor) != null ? _f2 : null
+              messages: ((_p = (_o = response == null ? void 0 : response.data) == null ? void 0 : _o.messages) == null ? void 0 : _p.nodes) ?? [],
+              canPaginate: ((_s = (_r = (_q = response == null ? void 0 : response.data) == null ? void 0 : _q.messages) == null ? void 0 : _r.pageInfo) == null ? void 0 : _s.hasNextPage) ?? false,
+              paginationCursor: ((_v = (_u = (_t = response == null ? void 0 : response.data) == null ? void 0 : _t.messages) == null ? void 0 : _u.pageInfo) == null ? void 0 : _v.startCursor) ?? null
             };
             this.addPage(dataSet);
             return dataSet;
@@ -2584,7 +2566,6 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     }
   }
   async archiveReadMessages({ canCallApi = true } = {}) {
-    var _a2;
     var _a, _b, _c, _d;
     if (!this.canMutate()) {
       return;
@@ -2592,11 +2573,11 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     const datastoreSnapshot = this.getDatastoreSnapshot(this.unreadCount, this._inboxDataSet, this._archiveDataSet);
     try {
       const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-      const messagesToArchive = (_a2 = (_a = this._inboxDataSet) == null ? void 0 : _a.messages.filter((message) => message.read)) != null ? _a2 : [];
+      const messagesToArchive = ((_a = this._inboxDataSet) == null ? void 0 : _a.messages.filter((message) => message.read)) ?? [];
       messagesToArchive.forEach((message) => {
-        var _a22, _b2, _c2;
+        var _a2, _b2, _c2;
         message.archived = timestamp;
-        const inboxIndex = (_a22 = this._inboxDataSet) == null ? void 0 : _a22.messages.findIndex((m) => m.messageId === message.messageId);
+        const inboxIndex = (_a2 = this._inboxDataSet) == null ? void 0 : _a2.messages.findIndex((m) => m.messageId === message.messageId);
         if (inboxIndex !== void 0 && inboxIndex !== -1) {
           (_b2 = this._inboxDataSet) == null ? void 0 : _b2.messages.splice(inboxIndex, 1);
         }
@@ -2606,9 +2587,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
         }
       });
       this._dataStoreListeners.forEach((listener) => {
-        var _a22, _b2, _c2, _d2;
+        var _a2, _b2, _c2, _d2;
         if (this._inboxDataSet) {
-          (_b2 = (_a22 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a22, this._inboxDataSet, "inbox");
+          (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, this._inboxDataSet, "inbox");
         }
         if (this._archiveDataSet) {
           (_d2 = (_c2 = listener.events).onDataSetChange) == null ? void 0 : _d2.call(_c2, this._archiveDataSet, "archive");
@@ -2754,10 +2735,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
         break;
     }
     this._dataStoreListeners.forEach((listener) => {
-      var _a3;
       var _a2, _b2, _c, _d;
       (_b2 = (_a2 = listener.events).onMessageAdd) == null ? void 0 : _b2.call(_a2, message, index, feedType);
-      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a3 = this._unreadCount) != null ? _a3 : 0);
+      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this._unreadCount ?? 0);
     });
   }
   removeMessage(message, index, feedType) {
@@ -2774,10 +2754,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
         break;
     }
     this._dataStoreListeners.forEach((listener) => {
-      var _a3;
       var _a2, _b2, _c, _d;
       (_b2 = (_a2 = listener.events).onMessageRemove) == null ? void 0 : _b2.call(_a2, message, index, feedType);
-      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a3 = this._unreadCount) != null ? _a3 : 0);
+      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this._unreadCount ?? 0);
     });
   }
   /**
@@ -2831,10 +2810,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
         break;
     }
     this._dataStoreListeners.forEach((listener) => {
-      var _a2;
       var _a, _b, _c, _d;
       (_b = (_a = listener.events).onMessageUpdate) == null ? void 0 : _b.call(_a, message, index, feedType);
-      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a2 = this._unreadCount) != null ? _a2 : 0);
+      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this._unreadCount ?? 0);
     });
   }
   /**
@@ -2946,19 +2924,18 @@ class CourierListItem extends BaseElement {
       "touchstart",
       () => {
         this._longPressTimeout = window.setTimeout(() => {
-          var _a2, _b2;
           this._isLongPress = true;
           this._showMenu();
           if (this._message && this.onItemLongPress) {
             this.onItemLongPress(this._message);
             if (navigator.vibrate) {
-              navigator.vibrate((_a2 = longPress == null ? void 0 : longPress.vibrationDuration) != null ? _a2 : 50);
+              navigator.vibrate((longPress == null ? void 0 : longPress.vibrationDuration) ?? 50);
             }
           }
           setTimeout(() => {
             this._hideMenu();
             this._isLongPress = false;
-          }, (_b2 = longPress == null ? void 0 : longPress.displayDuration) != null ? _b2 : 2e3);
+          }, (longPress == null ? void 0 : longPress.displayDuration) ?? 2e3);
         }, 650);
       },
       { passive: true }
@@ -2975,7 +2952,6 @@ class CourierListItem extends BaseElement {
   }
   // Helpers
   _getMenuOptions() {
-    var _a2, _b2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     const menuTheme = (_d = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu) == null ? void 0 : _d.item;
     let options = [];
@@ -2985,7 +2961,7 @@ class CourierListItem extends BaseElement {
         id: ((_e = this._message) == null ? void 0 : _e.read) ? "unread" : "read",
         icon: {
           svg: ((_f = this._message) == null ? void 0 : _f.read) ? (_g = menuTheme == null ? void 0 : menuTheme.unread) == null ? void 0 : _g.svg : (_h = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _h.svg,
-          color: ((_i = this._message) == null ? void 0 : _i.read) ? (_j = menuTheme == null ? void 0 : menuTheme.unread) == null ? void 0 : _j.color : (_a2 = (_k = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _k.color) != null ? _a2 : "red"
+          color: ((_i = this._message) == null ? void 0 : _i.read) ? (_j = menuTheme == null ? void 0 : menuTheme.unread) == null ? void 0 : _j.color : ((_k = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _k.color) ?? "red"
         },
         onClick: () => {
           if (this._message) {
@@ -3002,7 +2978,7 @@ class CourierListItem extends BaseElement {
       id: isArchiveFeed ? "unarchive" : "archive",
       icon: {
         svg: isArchiveFeed ? (_l = menuTheme == null ? void 0 : menuTheme.unarchive) == null ? void 0 : _l.svg : (_m = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _m.svg,
-        color: isArchiveFeed ? (_n = menuTheme == null ? void 0 : menuTheme.unarchive) == null ? void 0 : _n.color : (_b2 = (_o = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _o.color) != null ? _b2 : "red"
+        color: isArchiveFeed ? (_n = menuTheme == null ? void 0 : menuTheme.unarchive) == null ? void 0 : _n.color : ((_o = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _o.color) ?? "red"
       },
       onClick: () => {
         if (this._message) {
@@ -3037,7 +3013,6 @@ class CourierListItem extends BaseElement {
     }
   }
   _getStyles() {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n, _o, _p;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const listItem = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item;
     return `
@@ -3046,7 +3021,7 @@ class CourierListItem extends BaseElement {
         flex-direction: row;
         align-items: flex-start;
         justify-content: space-between;
-        border-bottom: ${(_a2 = listItem == null ? void 0 : listItem.divider) != null ? _a2 : "1px solid red"};
+        border-bottom: ${(listItem == null ? void 0 : listItem.divider) ?? "1px solid red"};
         font-family: inherit;
         cursor: pointer;
         transition: background-color 0.2s ease;
@@ -3055,7 +3030,7 @@ class CourierListItem extends BaseElement {
         box-sizing: border-box;
         padding: 12px 20px;
         position: relative;
-        background-color: ${(_b2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _b2 : "transparent"};
+        background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
         user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -3066,21 +3041,21 @@ class CourierListItem extends BaseElement {
       /* ───────────────────────── Base hover / active ────────────────── */
       @media (hover: hover) {
         :host(:hover) {
-          background-color: ${(_c2 = listItem == null ? void 0 : listItem.hoverBackgroundColor) != null ? _c2 : "red"};
+          background-color: ${(listItem == null ? void 0 : listItem.hoverBackgroundColor) ?? "red"};
         }
       }
       :host(:active) {
-        background-color: ${(_d2 = listItem == null ? void 0 : listItem.activeBackgroundColor) != null ? _d2 : "red"};
+        background-color: ${(listItem == null ? void 0 : listItem.activeBackgroundColor) ?? "red"};
       }
 
       /* ───────────────────────── Menu hover / active ────────────────── */
       @media (hover: hover) {
         :host(:hover):has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
-          background-color: ${(_e2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _e2 : "transparent"};
+          background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
         }
       }
       :host(:active):has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
-        background-color: ${(_f2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _f2 : "transparent"};
+        background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
       }
 
       :host(:last-child) {
@@ -3094,7 +3069,7 @@ class CourierListItem extends BaseElement {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background-color: ${(_g2 = listItem == null ? void 0 : listItem.unreadIndicatorColor) != null ? _g2 : "red"};
+        background-color: ${(listItem == null ? void 0 : listItem.unreadIndicatorColor) ?? "red"};
         display: none;
       }
 
@@ -3123,22 +3098,22 @@ class CourierListItem extends BaseElement {
       }
 
       p[part='title'] {
-        font-family: ${(_h2 = (_c = listItem == null ? void 0 : listItem.title) == null ? void 0 : _c.family) != null ? _h2 : "inherit"};
-        font-size: ${(_i2 = (_d = listItem == null ? void 0 : listItem.title) == null ? void 0 : _d.size) != null ? _i2 : "14px"};
-        color: ${(_j2 = (_e = listItem == null ? void 0 : listItem.title) == null ? void 0 : _e.color) != null ? _j2 : "red"};
+        font-family: ${((_c = listItem == null ? void 0 : listItem.title) == null ? void 0 : _c.family) ?? "inherit"};
+        font-size: ${((_d = listItem == null ? void 0 : listItem.title) == null ? void 0 : _d.size) ?? "14px"};
+        color: ${((_e = listItem == null ? void 0 : listItem.title) == null ? void 0 : _e.color) ?? "red"};
         margin-bottom: 4px;
       }
 
       p[part='subtitle'] {
-        font-family: ${(_k2 = (_f = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _f.family) != null ? _k2 : "inherit"};
-        font-size: ${(_l = (_g = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _g.size) != null ? _l : "14px"};
-        color: ${(_m = (_h = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _h.color) != null ? _m : "red"};
+        font-family: ${((_f = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _f.family) ?? "inherit"};
+        font-size: ${((_g = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _g.size) ?? "14px"};
+        color: ${((_h = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _h.color) ?? "red"};
       }
 
       p[part='time'] {
-        font-family: ${(_n = (_i = listItem == null ? void 0 : listItem.time) == null ? void 0 : _i.family) != null ? _n : "inherit"};
-        font-size: ${(_o = (_j = listItem == null ? void 0 : listItem.time) == null ? void 0 : _j.size) != null ? _o : "14px"};
-        color: ${(_p = (_k = listItem == null ? void 0 : listItem.time) == null ? void 0 : _k.color) != null ? _p : "red"};
+        font-family: ${((_i = listItem == null ? void 0 : listItem.time) == null ? void 0 : _i.family) ?? "inherit"};
+        font-size: ${((_j = listItem == null ? void 0 : listItem.time) == null ? void 0 : _j.size) ?? "14px"};
+        color: ${((_k = listItem == null ? void 0 : listItem.time) == null ? void 0 : _k.color) ?? "red"};
         text-align: right;
         white-space: nowrap;
       }
@@ -3283,9 +3258,8 @@ class CourierSkeletonAnimatedRow extends BaseElement {
     this._shadow.appendChild(skeletonItem);
   }
   getStyles(theme2, widthPercent) {
-    var _a2, _b2, _c2, _d2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-    const color = (_a2 = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) != null ? _a2 : "#000";
+    const color = ((_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
     const hexColor = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
     const r = parseInt(hexColor.slice(1, 3), 16);
     const g = parseInt(hexColor.slice(3, 5), 16);
@@ -3302,7 +3276,7 @@ class CourierSkeletonAnimatedRow extends BaseElement {
       }
 
       .skeleton-item {
-        height: ${(_b2 = (_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) != null ? _b2 : "14px"};
+        height: ${((_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
         width: 100%;
         background: linear-gradient(
           90deg,
@@ -3311,8 +3285,8 @@ class CourierSkeletonAnimatedRow extends BaseElement {
           ${colorWithAlpha80} 75%
         );
         background-size: 200% 100%;
-        animation: shimmer ${(_c2 = (_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) != null ? _c2 : "2s"} ease-in-out infinite;
-        border-radius: ${(_d2 = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) != null ? _d2 : "14px"};
+        animation: shimmer ${((_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) ?? "2s"} ease-in-out infinite;
+        border-radius: ${((_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) ?? "14px"};
       }
 
       @keyframes shimmer {
@@ -3347,7 +3321,6 @@ class CourierInboxSkeletonList extends CourierElement {
     return list;
   }
   getStyles() {
-    var _a2;
     var _a, _b;
     return `
       :host {
@@ -3368,7 +3341,7 @@ class CourierInboxSkeletonList extends CourierElement {
       }
 
       .list > * {
-        border-bottom: ${(_a2 = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) != null ? _a2 : "1px solid red"};
+        border-bottom: ${((_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
       }
 
       .list > *:last-child {
@@ -3465,14 +3438,13 @@ class CourierInboxList extends BaseElement {
     return this._messages;
   }
   getStyles() {
-    var _a2;
     var _a;
     const list = (_a = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : _a.list;
     return `
       :host {
         flex: 1;
         width: 100%;
-        background-color: ${(_a2 = list == null ? void 0 : list.backgroundColor) != null ? _a2 : CourierColors.white[500]};
+        background-color: ${(list == null ? void 0 : list.backgroundColor) ?? CourierColors.white[500]};
       }
 
       ul {
@@ -3545,7 +3517,6 @@ class CourierInboxList extends BaseElement {
     this._onRefresh();
   }
   render() {
-    var _a2, _b2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da;
     this.reset();
     const theme2 = this._themeSubscription.manager.getTheme();
@@ -3553,7 +3524,7 @@ class CourierInboxList extends BaseElement {
       const error = (_a = theme2.inbox) == null ? void 0 : _a.error;
       const errorElement = new CourierInfoState({
         title: {
-          text: (_a2 = (_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) != null ? _a2 : this._error.message,
+          text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? this._error.message,
           textColor: (_d = (_c = error == null ? void 0 : error.title) == null ? void 0 : _c.font) == null ? void 0 : _d.color,
           fontFamily: (_f = (_e = error == null ? void 0 : error.title) == null ? void 0 : _e.font) == null ? void 0 : _f.family,
           fontSize: (_h = (_g = error == null ? void 0 : error.title) == null ? void 0 : _g.font) == null ? void 0 : _h.size,
@@ -3588,7 +3559,7 @@ class CourierInboxList extends BaseElement {
       const empty = (_D = theme2.inbox) == null ? void 0 : _D.empty;
       const emptyElement = new CourierInfoState({
         title: {
-          text: (_b2 = (_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) != null ? _b2 : `No ${this._feedType} messages yet`,
+          text: ((_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) ?? `No ${this._feedType} messages yet`,
           textColor: (_G = (_F = empty == null ? void 0 : empty.title) == null ? void 0 : _F.font) == null ? void 0 : _G.color,
           fontFamily: (_I = (_H = empty == null ? void 0 : empty.title) == null ? void 0 : _H.font) == null ? void 0 : _I.family,
           fontSize: (_K = (_J = empty == null ? void 0 : empty.title) == null ? void 0 : _J.font) == null ? void 0 : _K.size,
@@ -3623,16 +3594,16 @@ class CourierInboxList extends BaseElement {
       const listItem = new CourierListItem(theme2);
       listItem.setMessage(message, this._feedType);
       listItem.setOnItemClick((message2) => {
-        var _a22;
-        return (_a22 = this._onMessageClick) == null ? void 0 : _a22.call(this, message2, index);
+        var _a2;
+        return (_a2 = this._onMessageClick) == null ? void 0 : _a2.call(this, message2, index);
       });
       listItem.setOnItemActionClick((message2, action) => {
-        var _a22;
-        return (_a22 = this._onMessageActionClick) == null ? void 0 : _a22.call(this, message2, action, index);
+        var _a2;
+        return (_a2 = this._onMessageActionClick) == null ? void 0 : _a2.call(this, message2, action, index);
       });
       listItem.setOnItemLongPress((message2) => {
-        var _a22;
-        return (_a22 = this._onMessageLongPress) == null ? void 0 : _a22.call(this, message2, index);
+        var _a2;
+        return (_a2 = this._onMessageLongPress) == null ? void 0 : _a2.call(this, message2, index);
       });
       list.appendChild(listItem);
     });
@@ -3641,8 +3612,8 @@ class CourierInboxList extends BaseElement {
         theme: theme2,
         customItem: (_da = this._paginationItemFactory) == null ? void 0 : _da.call(this, { feedType: this._feedType }),
         onPaginationTrigger: () => {
-          var _a22;
-          return (_a22 = this._onPaginationTrigger) == null ? void 0 : _a22.call(this, this._feedType);
+          var _a2;
+          return (_a2 = this._onPaginationTrigger) == null ? void 0 : _a2.call(this, this._feedType);
         }
       });
       list.appendChild(paginationItem);
@@ -3680,7 +3651,6 @@ class CourierInboxList extends BaseElement {
 registerElement("courier-inbox-list", CourierInboxList);
 class CourierInboxOptionMenuItem extends BaseElement {
   constructor(props) {
-    var _a;
     super();
     __publicField(this, "_option");
     __publicField(this, "_isSelected");
@@ -3697,7 +3667,7 @@ class CourierInboxOptionMenuItem extends BaseElement {
     this._style = document.createElement("style");
     this._content = document.createElement("div");
     this._content.className = "menu-item";
-    this._itemIcon = new CourierIcon((_a = this._option.icon.svg) != null ? _a : CourierIconSVGs.inbox);
+    this._itemIcon = new CourierIcon(this._option.icon.svg ?? CourierIconSVGs.inbox);
     this._itemIcon.setAttribute("size", "16");
     this._title = document.createElement("p");
     this._title.textContent = this._option.text;
@@ -3716,7 +3686,6 @@ class CourierInboxOptionMenuItem extends BaseElement {
     this.refreshTheme();
   }
   getStyles() {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
     const theme2 = this._themeManager.getTheme();
     return `
@@ -3728,11 +3697,11 @@ class CourierInboxOptionMenuItem extends BaseElement {
       }
 
       :host(:hover) {
-        background-color: ${(_a2 = (_e = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.list) == null ? void 0 : _e.hoverBackgroundColor) != null ? _a2 : "red"};
+        background-color: ${((_e = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.list) == null ? void 0 : _e.hoverBackgroundColor) ?? "red"};
       }
 
       :host(:active) {
-        background-color: ${(_b2 = (_j = (_i = (_h = (_g = (_f = theme2.inbox) == null ? void 0 : _f.header) == null ? void 0 : _g.menus) == null ? void 0 : _h.popup) == null ? void 0 : _i.list) == null ? void 0 : _j.activeBackgroundColor) != null ? _b2 : "red"};
+        background-color: ${((_j = (_i = (_h = (_g = (_f = theme2.inbox) == null ? void 0 : _f.header) == null ? void 0 : _g.menus) == null ? void 0 : _h.popup) == null ? void 0 : _i.list) == null ? void 0 : _j.activeBackgroundColor) ?? "red"};
       }
 
       .menu-item {
@@ -3748,10 +3717,10 @@ class CourierInboxOptionMenuItem extends BaseElement {
 
       p {
         margin: 0;
-        font-family: ${(_c2 = (_p = (_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.menus) == null ? void 0 : _m.popup) == null ? void 0 : _n.list) == null ? void 0 : _o.font) == null ? void 0 : _p.family) != null ? _c2 : "inherit"};
-        font-weight: ${(_d2 = (_v = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) != null ? _d2 : "inherit"};
-        font-size: ${(_e2 = (_B = (_A = (_z = (_y = (_x = (_w = theme2.inbox) == null ? void 0 : _w.header) == null ? void 0 : _x.menus) == null ? void 0 : _y.popup) == null ? void 0 : _z.list) == null ? void 0 : _A.font) == null ? void 0 : _B.size) != null ? _e2 : "14px"};
-        color: ${(_f2 = (_H = (_G = (_F = (_E = (_D = (_C = theme2.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.menus) == null ? void 0 : _E.popup) == null ? void 0 : _F.list) == null ? void 0 : _G.font) == null ? void 0 : _H.color) != null ? _f2 : "red"};
+        font-family: ${((_p = (_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.menus) == null ? void 0 : _m.popup) == null ? void 0 : _n.list) == null ? void 0 : _o.font) == null ? void 0 : _p.family) ?? "inherit"};
+        font-weight: ${((_v = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) ?? "inherit"};
+        font-size: ${((_B = (_A = (_z = (_y = (_x = (_w = theme2.inbox) == null ? void 0 : _w.header) == null ? void 0 : _x.menus) == null ? void 0 : _y.popup) == null ? void 0 : _z.list) == null ? void 0 : _A.font) == null ? void 0 : _B.size) ?? "14px"};
+        color: ${((_H = (_G = (_F = (_E = (_D = (_C = theme2.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.menus) == null ? void 0 : _E.popup) == null ? void 0 : _F.list) == null ? void 0 : _G.font) == null ? void 0 : _H.color) ?? "red"};
         white-space: nowrap;
       }
 
@@ -3761,14 +3730,13 @@ class CourierInboxOptionMenuItem extends BaseElement {
     `;
   }
   refreshTheme() {
-    var _a2, _b2, _c2, _d2, _e;
     var _a, _b, _c, _d;
     this._style.textContent = this.getStyles();
-    this._selectionIcon.updateColor((_a2 = (_a = this._option.selectionIcon) == null ? void 0 : _a.color) != null ? _a2 : "red");
-    this._selectionIcon.updateSVG((_b2 = (_b = this._option.selectionIcon) == null ? void 0 : _b.svg) != null ? _b2 : CourierIconSVGs.check);
-    this._title.textContent = (_c2 = this._option.text) != null ? _c2 : "Missing Text";
-    this._itemIcon.updateColor((_d2 = (_c = this._option.icon) == null ? void 0 : _c.color) != null ? _d2 : "red");
-    this._itemIcon.updateSVG((_e = (_d = this._option.icon) == null ? void 0 : _d.svg) != null ? _e : CourierIconSVGs.inbox);
+    this._selectionIcon.updateColor(((_a = this._option.selectionIcon) == null ? void 0 : _a.color) ?? "red");
+    this._selectionIcon.updateSVG(((_b = this._option.selectionIcon) == null ? void 0 : _b.svg) ?? CourierIconSVGs.check);
+    this._title.textContent = this._option.text ?? "Missing Text";
+    this._itemIcon.updateColor(((_c = this._option.icon) == null ? void 0 : _c.color) ?? "red");
+    this._itemIcon.updateSVG(((_d = this._option.icon) == null ? void 0 : _d.svg) ?? CourierIconSVGs.inbox);
   }
 }
 registerElement("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
@@ -3805,7 +3773,6 @@ class CourierInboxOptionMenu extends BaseElement {
     this.refreshTheme();
   }
   getStyles() {
-    var _a2, _b2, _c2, _d2, _e2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
     const theme2 = this._themeSubscription.manager.getTheme();
     return `
@@ -3819,10 +3786,10 @@ class CourierInboxOptionMenu extends BaseElement {
         position: absolute;
         top: 42px;
         right: -6px;
-        border-radius: ${(_a2 = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.borderRadius) != null ? _a2 : "6px"};
-        border: ${(_b2 = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.menus) == null ? void 0 : _g.popup) == null ? void 0 : _h.border) != null ? _b2 : "1px solid red"};
-        background: ${(_c2 = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.backgroundColor) != null ? _c2 : "red"};
-        box-shadow: ${(_d2 = (_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.menus) == null ? void 0 : _o.popup) == null ? void 0 : _p.shadow) != null ? _d2 : "0 4px 12px 0 red"};
+        border-radius: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.borderRadius) ?? "6px"};
+        border: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.menus) == null ? void 0 : _g.popup) == null ? void 0 : _h.border) ?? "1px solid red"};
+        background: ${((_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.backgroundColor) ?? "red"};
+        box-shadow: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.menus) == null ? void 0 : _o.popup) == null ? void 0 : _p.shadow) ?? "0 4px 12px 0 red"};
         z-index: 1000;
         min-width: 200px;
         overflow: hidden;
@@ -3830,7 +3797,7 @@ class CourierInboxOptionMenu extends BaseElement {
       }
 
       courier-inbox-filter-menu-item {
-        border-bottom: ${(_e2 = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) != null ? _e2 : "none"};
+        border-bottom: ${((_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) ?? "none"};
       }
 
       courier-inbox-filter-menu-item:last-child {
@@ -3839,7 +3806,6 @@ class CourierInboxOptionMenu extends BaseElement {
     `;
   }
   refreshTheme() {
-    var _a2, _b2, _c2, _d2, _e2;
     var _a, _b, _c, _d, _e, _f;
     this._style.textContent = this.getStyles();
     const theme2 = this._themeSubscription.manager.getTheme();
@@ -3847,11 +3813,11 @@ class CourierInboxOptionMenu extends BaseElement {
     const isFilter = this._type === "filters";
     const buttonConfig = isFilter ? (_c = menu == null ? void 0 : menu.filters) == null ? void 0 : _c.button : (_d = menu == null ? void 0 : menu.actions) == null ? void 0 : _d.button;
     const defaultIcon = isFilter ? CourierIconSVGs.filter : CourierIconSVGs.overflow;
-    this._menuButton.updateIconSVG((_a2 = (_e = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _e.svg) != null ? _a2 : defaultIcon);
-    this._menuButton.updateIconColor((_b2 = (_f = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _f.color) != null ? _b2 : "red");
-    this._menuButton.updateBackgroundColor((_c2 = buttonConfig == null ? void 0 : buttonConfig.backgroundColor) != null ? _c2 : "transparent");
-    this._menuButton.updateHoverBackgroundColor((_d2 = buttonConfig == null ? void 0 : buttonConfig.hoverBackgroundColor) != null ? _d2 : "red");
-    this._menuButton.updateActiveBackgroundColor((_e2 = buttonConfig == null ? void 0 : buttonConfig.activeBackgroundColor) != null ? _e2 : "red");
+    this._menuButton.updateIconSVG(((_e = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _e.svg) ?? defaultIcon);
+    this._menuButton.updateIconColor(((_f = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _f.color) ?? "red");
+    this._menuButton.updateBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.backgroundColor) ?? "transparent");
+    this._menuButton.updateHoverBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.hoverBackgroundColor) ?? "red");
+    this._menuButton.updateActiveBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.activeBackgroundColor) ?? "red");
     this.refreshMenuItems();
   }
   setOptions(options) {
@@ -3970,7 +3936,6 @@ class CourierUnreadCountBadge extends BaseElement {
 registerElement("courier-unread-count-badge", CourierUnreadCountBadge);
 class CourierInboxHeaderTitle extends BaseElement {
   constructor(themeManager, option) {
-    var _a;
     super();
     __publicField(this, "_themeSubscription");
     __publicField(this, "_option");
@@ -3997,13 +3962,11 @@ class CourierInboxHeaderTitle extends BaseElement {
     shadow.appendChild(this._style);
     shadow.appendChild(this._container);
     this._themeSubscription = themeManager.subscribe((_) => {
-      var _a2;
-      this.refreshTheme((_a2 = this._feedType) != null ? _a2 : "inbox");
+      this.refreshTheme(this._feedType ?? "inbox");
     });
-    this.refreshTheme((_a = this._feedType) != null ? _a : "inbox");
+    this.refreshTheme(this._feedType ?? "inbox");
   }
   getStyles() {
-    var _a2, _b2, _c2, _d2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     const theme2 = this._themeSubscription.manager.getTheme();
     return `
@@ -4021,10 +3984,10 @@ class CourierInboxHeaderTitle extends BaseElement {
 
       h2 {
         margin: 0;
-        font-family: ${(_a2 = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) != null ? _a2 : "inherit"};
-        font-size: ${(_b2 = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) != null ? _b2 : "18px"};
-        font-weight: ${(_c2 = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.filters) == null ? void 0 : _k.font) == null ? void 0 : _l.weight) != null ? _c2 : "500"};
-        color: ${(_d2 = (_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) != null ? _d2 : "red"};
+        font-family: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) ?? "inherit"};
+        font-size: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) ?? "18px"};
+        font-weight: ${((_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.filters) == null ? void 0 : _k.font) == null ? void 0 : _l.weight) ?? "500"};
+        color: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) ?? "red"};
       }
 
       courier-unread-count-badge {
@@ -4045,19 +4008,18 @@ class CourierInboxHeaderTitle extends BaseElement {
     this.updateFilter();
   }
   updateFilter() {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
     const theme2 = this._themeSubscription.manager.getTheme();
     switch (this._feedType) {
       case "inbox":
-        this._titleElement.textContent = (_a2 = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) != null ? _a2 : "Inbox";
-        this._iconElement.updateSVG((_b2 = (_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) != null ? _b2 : CourierIconSVGs.inbox);
-        this._iconElement.updateColor((_c2 = (_n = (_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.inbox) == null ? void 0 : _m.icon) == null ? void 0 : _n.color) != null ? _c2 : "red");
+        this._titleElement.textContent = ((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) ?? "Inbox";
+        this._iconElement.updateSVG(((_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
+        this._iconElement.updateColor(((_n = (_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.inbox) == null ? void 0 : _m.icon) == null ? void 0 : _n.color) ?? "red");
         break;
       case "archive":
-        this._titleElement.textContent = (_d2 = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.archive) == null ? void 0 : _r.text) != null ? _d2 : "Archive";
-        this._iconElement.updateSVG((_e2 = (_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.svg) != null ? _e2 : CourierIconSVGs.archive);
-        this._iconElement.updateColor((_f2 = (_B = (_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.archive) == null ? void 0 : _A.icon) == null ? void 0 : _B.color) != null ? _f2 : "red");
+        this._titleElement.textContent = ((_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.archive) == null ? void 0 : _r.text) ?? "Archive";
+        this._iconElement.updateSVG(((_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.svg) ?? CourierIconSVGs.archive);
+        this._iconElement.updateColor(((_B = (_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.archive) == null ? void 0 : _A.icon) == null ? void 0 : _B.color) ?? "red");
         break;
     }
   }
@@ -4085,21 +4047,20 @@ class CourierInboxHeader extends CourierElement {
   }
   // Menu options
   getFilterOptions() {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K;
     const theme2 = this._themeSubscription.manager.getTheme();
     const filterMenu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.filters;
     return [
       {
         id: "inbox",
-        text: (_a2 = (_d = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _d.text) != null ? _a2 : "Inbox",
+        text: ((_d = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _d.text) ?? "Inbox",
         icon: {
-          color: (_b2 = (_f = (_e = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) != null ? _b2 : "red",
-          svg: (_c2 = (_h = (_g = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) != null ? _c2 : CourierIconSVGs.inbox
+          color: ((_f = (_e = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) ?? "red",
+          svg: ((_h = (_g = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) ?? CourierIconSVGs.inbox
         },
         selectionIcon: {
-          color: (_d2 = (_n = (_m = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.list) == null ? void 0 : _m.selectionIcon) == null ? void 0 : _n.color) != null ? _d2 : "red",
-          svg: (_e2 = (_t = (_s = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.menus) == null ? void 0 : _q.popup) == null ? void 0 : _r.list) == null ? void 0 : _s.selectionIcon) == null ? void 0 : _t.svg) != null ? _e2 : CourierIconSVGs.check
+          color: ((_n = (_m = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.list) == null ? void 0 : _m.selectionIcon) == null ? void 0 : _n.color) ?? "red",
+          svg: ((_t = (_s = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.menus) == null ? void 0 : _q.popup) == null ? void 0 : _r.list) == null ? void 0 : _s.selectionIcon) == null ? void 0 : _t.svg) ?? CourierIconSVGs.check
         },
         onClick: (option) => {
           this.handleOptionMenuItemClick("inbox", option);
@@ -4107,14 +4068,14 @@ class CourierInboxHeader extends CourierElement {
       },
       {
         id: "archive",
-        text: (_f2 = (_u = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _u.text) != null ? _f2 : "Archive",
+        text: ((_u = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _u.text) ?? "Archive",
         icon: {
-          color: (_g2 = (_w = (_v = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.color) != null ? _g2 : "red",
-          svg: (_h2 = (_y = (_x = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) != null ? _h2 : CourierIconSVGs.archive
+          color: ((_w = (_v = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.color) ?? "red",
+          svg: ((_y = (_x = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive
         },
         selectionIcon: {
-          color: (_i2 = (_E = (_D = (_C = (_B = (_A = (_z = theme2.inbox) == null ? void 0 : _z.header) == null ? void 0 : _A.menus) == null ? void 0 : _B.popup) == null ? void 0 : _C.list) == null ? void 0 : _D.selectionIcon) == null ? void 0 : _E.color) != null ? _i2 : "red",
-          svg: (_j2 = (_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.selectionIcon) == null ? void 0 : _K.svg) != null ? _j2 : CourierIconSVGs.check
+          color: ((_E = (_D = (_C = (_B = (_A = (_z = theme2.inbox) == null ? void 0 : _z.header) == null ? void 0 : _A.menus) == null ? void 0 : _B.popup) == null ? void 0 : _C.list) == null ? void 0 : _D.selectionIcon) == null ? void 0 : _E.color) ?? "red",
+          svg: ((_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.selectionIcon) == null ? void 0 : _K.svg) ?? CourierIconSVGs.check
         },
         onClick: (option) => {
           this.handleOptionMenuItemClick("archive", option);
@@ -4123,17 +4084,16 @@ class CourierInboxHeader extends CourierElement {
     ];
   }
   getActionOptions() {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
     const theme2 = this._themeSubscription.manager.getTheme();
     const actionMenu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.actions;
     return [
       {
         id: "markAllRead",
-        text: (_a2 = (_d = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _d.text) != null ? _a2 : "Mark All as Read",
+        text: ((_d = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _d.text) ?? "Mark All as Read",
         icon: {
-          color: (_b2 = (_f = (_e = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) != null ? _b2 : "red",
-          svg: (_c2 = (_h = (_g = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) != null ? _c2 : CourierIconSVGs.inbox
+          color: ((_f = (_e = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) ?? "red",
+          svg: ((_h = (_g = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) ?? CourierIconSVGs.inbox
         },
         selectionIcon: null,
         onClick: (_) => {
@@ -4142,10 +4102,10 @@ class CourierInboxHeader extends CourierElement {
       },
       {
         id: "archiveAll",
-        text: (_d2 = (_i = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _i.text) != null ? _d2 : "Archive All",
+        text: ((_i = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _i.text) ?? "Archive All",
         icon: {
-          color: (_e2 = (_k = (_j = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _j.icon) == null ? void 0 : _k.color) != null ? _e2 : "red",
-          svg: (_f2 = (_m = (_l = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _l.icon) == null ? void 0 : _m.svg) != null ? _f2 : CourierIconSVGs.archive
+          color: ((_k = (_j = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _j.icon) == null ? void 0 : _k.color) ?? "red",
+          svg: ((_m = (_l = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _l.icon) == null ? void 0 : _m.svg) ?? CourierIconSVGs.archive
         },
         selectionIcon: null,
         onClick: (_) => {
@@ -4154,10 +4114,10 @@ class CourierInboxHeader extends CourierElement {
       },
       {
         id: "archiveRead",
-        text: (_g2 = (_n = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _n.text) != null ? _g2 : "Archive Read",
+        text: ((_n = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _n.text) ?? "Archive Read",
         icon: {
-          color: (_h2 = (_p = (_o = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _o.icon) == null ? void 0 : _p.color) != null ? _h2 : "red",
-          svg: (_i2 = (_r = (_q = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _q.icon) == null ? void 0 : _r.svg) != null ? _i2 : CourierIconSVGs.archive
+          color: ((_p = (_o = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _o.icon) == null ? void 0 : _p.color) ?? "red",
+          svg: ((_r = (_q = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _q.icon) == null ? void 0 : _r.svg) ?? CourierIconSVGs.archive
         },
         selectionIcon: null,
         onClick: (_) => {
@@ -4170,13 +4130,12 @@ class CourierInboxHeader extends CourierElement {
     return ["icon", "title", "feed-type"];
   }
   refreshTheme() {
-    var _a2, _b2;
     var _a, _b, _c, _d, _e, _f, _g;
     const theme2 = this._themeSubscription.manager.getTheme();
     const header = (_a = this.shadow) == null ? void 0 : _a.querySelector(".courier-inbox-header");
     if (header) {
-      header.style.backgroundColor = (_a2 = (_c = (_b = theme2.inbox) == null ? void 0 : _b.header) == null ? void 0 : _c.backgroundColor) != null ? _a2 : CourierColors.white[500];
-      header.style.boxShadow = (_b2 = (_e = (_d = theme2.inbox) == null ? void 0 : _d.header) == null ? void 0 : _e.shadow) != null ? _b2 : `0px 1px 0px 0px ${CourierColors.gray[500]}`;
+      header.style.backgroundColor = ((_c = (_b = theme2.inbox) == null ? void 0 : _b.header) == null ? void 0 : _c.backgroundColor) ?? CourierColors.white[500];
+      header.style.boxShadow = ((_e = (_d = theme2.inbox) == null ? void 0 : _d.header) == null ? void 0 : _e.shadow) ?? `0px 1px 0px 0px ${CourierColors.gray[500]}`;
     }
     (_f = this._filterMenu) == null ? void 0 : _f.setOptions(this.getFilterOptions());
     (_g = this._actionMenu) == null ? void 0 : _g.setOptions(this.getActionOptions());
@@ -5070,7 +5029,7 @@ let CourierInbox$1 = class CourierInbox extends BaseElement {
       height: "768px"
     });
     this._shadow = this.attachShadow({ mode: "open" });
-    this._themeManager = themeManager != null ? themeManager : new CourierInboxThemeManager(defaultLightTheme);
+    this._themeManager = themeManager ?? new CourierInboxThemeManager(defaultLightTheme);
     this._header = new CourierInboxHeader({
       themeManager: this._themeManager,
       onFeedTypeChange: (feedType) => {
@@ -5398,14 +5357,13 @@ class CourierInboxMenuButton extends CourierElement {
     this.updateTheme();
   }
   updateTheme() {
-    var _a2, _b2, _c2, _d2, _e2;
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
     const theme2 = this._themeSubscription.manager.getTheme();
-    (_d = this._triggerButton) == null ? void 0 : _d.updateIconColor((_a2 = (_c = (_b = (_a = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.icon) == null ? void 0 : _c.color) != null ? _a2 : CourierColors.black[500]);
-    (_h = this._triggerButton) == null ? void 0 : _h.updateIconSVG((_b2 = (_g = (_f = (_e = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) == null ? void 0 : _g.svg) != null ? _b2 : CourierIconSVGs.inbox);
-    (_k = this._triggerButton) == null ? void 0 : _k.updateBackgroundColor((_c2 = (_j = (_i = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.backgroundColor) != null ? _c2 : "transparent");
-    (_n = this._triggerButton) == null ? void 0 : _n.updateHoverBackgroundColor((_d2 = (_m = (_l = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.hoverBackgroundColor) != null ? _d2 : CourierColors.black[50010]);
-    (_q = this._triggerButton) == null ? void 0 : _q.updateActiveBackgroundColor((_e2 = (_p = (_o = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _o.button) == null ? void 0 : _p.activeBackgroundColor) != null ? _e2 : CourierColors.black[50020]);
+    (_d = this._triggerButton) == null ? void 0 : _d.updateIconColor(((_c = (_b = (_a = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.icon) == null ? void 0 : _c.color) ?? CourierColors.black[500]);
+    (_h = this._triggerButton) == null ? void 0 : _h.updateIconSVG(((_g = (_f = (_e = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) == null ? void 0 : _g.svg) ?? CourierIconSVGs.inbox);
+    (_k = this._triggerButton) == null ? void 0 : _k.updateBackgroundColor(((_j = (_i = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.backgroundColor) ?? "transparent");
+    (_n = this._triggerButton) == null ? void 0 : _n.updateHoverBackgroundColor(((_m = (_l = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.hoverBackgroundColor) ?? CourierColors.black[50010]);
+    (_q = this._triggerButton) == null ? void 0 : _q.updateActiveBackgroundColor(((_p = (_o = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _o.button) == null ? void 0 : _p.activeBackgroundColor) ?? CourierColors.black[50020]);
     (_r = this._unreadCountBadge) == null ? void 0 : _r.refreshTheme("button");
   }
   disconnectedCallback() {
@@ -5468,7 +5426,6 @@ let CourierInboxPopupMenu$1 = class CourierInboxPopupMenu extends BaseElement {
     this._style.textContent = this.getStyles();
   }
   getStyles() {
-    var _a2, _b2, _c2, _d2;
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return `
       :host {
@@ -5484,10 +5441,10 @@ let CourierInboxPopupMenu$1 = class CourierInboxPopupMenu extends BaseElement {
       .popup {
         display: none;
         position: absolute;
-        background: ${(_a2 = (_b = (_a = this.theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) != null ? _a2 : "red"};
-        border-radius: ${(_b2 = (_d = (_c = this.theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) != null ? _b2 : "8px"};
-        border: ${(_c2 = (_f = (_e = this.theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) != null ? _c2 : `1px solid red`};
-        box-shadow: ${(_d2 = (_h = (_g = this.theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) != null ? _d2 : `0px 8px 16px -4px red`};
+        background: ${((_b = (_a = this.theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
+        border-radius: ${((_d = (_c = this.theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
+        border: ${((_f = (_e = this.theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
+        box-shadow: ${((_h = (_g = this.theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
         z-index: 1000;
         width: ${this._width};
         height: ${this._height};
@@ -5837,284 +5794,12 @@ function requireReactJsxRuntime_production() {
   reactJsxRuntime_production.jsxs = jsxProd;
   return reactJsxRuntime_production;
 }
-var reactJsxRuntime_development = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactJsxRuntime_development;
-function requireReactJsxRuntime_development() {
-  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-  hasRequiredReactJsxRuntime_development = 1;
-  "production" !== process.env.NODE_ENV && function() {
-    function getComponentNameFromType(type) {
-      if (null == type) return null;
-      if ("function" === typeof type)
-        return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
-      if ("string" === typeof type) return type;
-      switch (type) {
-        case REACT_FRAGMENT_TYPE:
-          return "Fragment";
-        case REACT_PROFILER_TYPE:
-          return "Profiler";
-        case REACT_STRICT_MODE_TYPE:
-          return "StrictMode";
-        case REACT_SUSPENSE_TYPE:
-          return "Suspense";
-        case REACT_SUSPENSE_LIST_TYPE:
-          return "SuspenseList";
-        case REACT_ACTIVITY_TYPE:
-          return "Activity";
-      }
-      if ("object" === typeof type)
-        switch ("number" === typeof type.tag && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), type.$$typeof) {
-          case REACT_PORTAL_TYPE:
-            return "Portal";
-          case REACT_CONTEXT_TYPE:
-            return (type.displayName || "Context") + ".Provider";
-          case REACT_CONSUMER_TYPE:
-            return (type._context.displayName || "Context") + ".Consumer";
-          case REACT_FORWARD_REF_TYPE:
-            var innerType = type.render;
-            type = type.displayName;
-            type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
-            return type;
-          case REACT_MEMO_TYPE:
-            return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
-          case REACT_LAZY_TYPE:
-            innerType = type._payload;
-            type = type._init;
-            try {
-              return getComponentNameFromType(type(innerType));
-            } catch (x) {
-            }
-        }
-      return null;
-    }
-    function testStringCoercion(value) {
-      return "" + value;
-    }
-    function checkKeyStringCoercion(value) {
-      try {
-        testStringCoercion(value);
-        var JSCompiler_inline_result = false;
-      } catch (e) {
-        JSCompiler_inline_result = true;
-      }
-      if (JSCompiler_inline_result) {
-        JSCompiler_inline_result = console;
-        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-        var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
-        JSCompiler_temp_const.call(
-          JSCompiler_inline_result,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          JSCompiler_inline_result$jscomp$0
-        );
-        return testStringCoercion(value);
-      }
-    }
-    function getTaskName(type) {
-      if (type === REACT_FRAGMENT_TYPE) return "<>";
-      if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
-        return "<...>";
-      try {
-        var name = getComponentNameFromType(type);
-        return name ? "<" + name + ">" : "<...>";
-      } catch (x) {
-        return "<...>";
-      }
-    }
-    function getOwner() {
-      var dispatcher = ReactSharedInternals.A;
-      return null === dispatcher ? null : dispatcher.getOwner();
-    }
-    function UnknownOwner() {
-      return Error("react-stack-top-frame");
-    }
-    function hasValidKey(config) {
-      if (hasOwnProperty.call(config, "key")) {
-        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-        if (getter && getter.isReactWarning) return false;
-      }
-      return void 0 !== config.key;
-    }
-    function defineKeyPropWarningGetter(props, displayName) {
-      function warnAboutAccessingKey() {
-        specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          displayName
-        ));
-      }
-      warnAboutAccessingKey.isReactWarning = true;
-      Object.defineProperty(props, "key", {
-        get: warnAboutAccessingKey,
-        configurable: true
-      });
-    }
-    function elementRefGetterWithDeprecationWarning() {
-      var componentName = getComponentNameFromType(this.type);
-      didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      ));
-      componentName = this.props.ref;
-      return void 0 !== componentName ? componentName : null;
-    }
-    function ReactElement(type, key, self, source, owner, props, debugStack, debugTask) {
-      self = props.ref;
-      type = {
-        $$typeof: REACT_ELEMENT_TYPE,
-        type,
-        key,
-        props,
-        _owner: owner
-      };
-      null !== (void 0 !== self ? self : null) ? Object.defineProperty(type, "ref", {
-        enumerable: false,
-        get: elementRefGetterWithDeprecationWarning
-      }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-      type._store = {};
-      Object.defineProperty(type._store, "validated", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: 0
-      });
-      Object.defineProperty(type, "_debugInfo", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: null
-      });
-      Object.defineProperty(type, "_debugStack", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: debugStack
-      });
-      Object.defineProperty(type, "_debugTask", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: debugTask
-      });
-      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-      return type;
-    }
-    function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
-      var children = config.children;
-      if (void 0 !== children)
-        if (isStaticChildren)
-          if (isArrayImpl(children)) {
-            for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
-              validateChildKeys(children[isStaticChildren]);
-            Object.freeze && Object.freeze(children);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else validateChildKeys(children);
-      if (hasOwnProperty.call(config, "key")) {
-        children = getComponentNameFromType(type);
-        var keys = Object.keys(config).filter(function(k) {
-          return "key" !== k;
-        });
-        isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
-        didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
-          'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-          isStaticChildren,
-          children,
-          keys,
-          children
-        ), didWarnAboutKeySpread[children + isStaticChildren] = true);
-      }
-      children = null;
-      void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
-      hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
-      if ("key" in config) {
-        maybeKey = {};
-        for (var propName in config)
-          "key" !== propName && (maybeKey[propName] = config[propName]);
-      } else maybeKey = config;
-      children && defineKeyPropWarningGetter(
-        maybeKey,
-        "function" === typeof type ? type.displayName || type.name || "Unknown" : type
-      );
-      return ReactElement(
-        type,
-        children,
-        self,
-        source,
-        getOwner(),
-        maybeKey,
-        debugStack,
-        debugTask
-      );
-    }
-    function validateChildKeys(node) {
-      "object" === typeof node && null !== node && node.$$typeof === REACT_ELEMENT_TYPE && node._store && (node._store.validated = 1);
-    }
-    var React$1 = React, REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    React$1 = {
-      "react-stack-bottom-frame": function(callStackForError) {
-        return callStackForError();
-      }
-    };
-    var specialPropKeyWarningShown;
-    var didWarnAboutElementRef = {};
-    var unknownOwnerDebugStack = React$1["react-stack-bottom-frame"].bind(
-      React$1,
-      UnknownOwner
-    )();
-    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-    var didWarnAboutKeySpread = {};
-    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-    reactJsxRuntime_development.jsx = function(type, config, maybeKey, source, self) {
-      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-      return jsxDEVImpl(
-        type,
-        config,
-        maybeKey,
-        false,
-        source,
-        self,
-        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
-        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-      );
-    };
-    reactJsxRuntime_development.jsxs = function(type, config, maybeKey, source, self) {
-      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-      return jsxDEVImpl(
-        type,
-        config,
-        maybeKey,
-        true,
-        source,
-        self,
-        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
-        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-      );
-    };
-  }();
-  return reactJsxRuntime_development;
-}
 var hasRequiredJsxRuntime;
 function requireJsxRuntime() {
   if (hasRequiredJsxRuntime) return jsxRuntime.exports;
   hasRequiredJsxRuntime = 1;
-  if (process.env.NODE_ENV === "production") {
+  {
     jsxRuntime.exports = requireReactJsxRuntime_production();
-  } else {
-    jsxRuntime.exports = requireReactJsxRuntime_development();
   }
   return jsxRuntime.exports;
 }