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

package/dist/index.mjs

@@ -1,95 +1,262 @@
-import React, { useRef, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+const CLOSE_CODE_NORMAL_CLOSURE = 1e3;
+const IPW_VERSION = "v1";
 const _CourierSocket = class _CourierSocket2 {
-  constructor(url, options) {
+  constructor(options) {
     __publicField$1(this, "webSocket", null);
-    __publicField$1(this, "pingInterval", null);
-    __publicField$1(this, "onOpen");
-    __publicField$1(this, "onMessageReceived");
-    __publicField$1(this, "onClose");
-    __publicField$1(this, "onError");
+    __publicField$1(this, "retryAttempt", 0);
+    __publicField$1(this, "retryTimeoutId", null);
     __publicField$1(this, "url");
     __publicField$1(this, "options");
-    this.url = url;
+    this.url = options.apiUrls.inbox.webSocket;
     this.options = options;
   }
   /**
-   * Dynamically checks if the WebSocket is connected
+   * Connects to the Courier WebSocket server.
+   *
+   * If the connection is already established, this is a no-op.
+   *
+   * @returns A promise that resolves when the connection is established or rejects if the connection could not be established.
    */
-  get isConnected() {
-    return this.webSocket !== null;
-  }
   async connect() {
-    this.disconnect();
+    var _a;
+    this.clearRetryTimeout();
+    if (this.isConnecting || this.isOpen) {
+      (_a = this.options.logger) == null ? void 0 : _a.info("Attempted to open a WebSocket connection, but one already exists.");
+      return Promise.reject(new Error("WebSocket connection already exists"));
+    }
     return new Promise((resolve, reject) => {
-      try {
-        this.webSocket = new WebSocket(this.url);
-        this.webSocket.onopen = () => {
-          var _a;
-          (_a = this.onOpen) == null ? void 0 : _a.call(this);
-          resolve();
-        };
-        this.webSocket.onmessage = (event) => {
-          var _a;
-          (_a = this.onMessageReceived) == null ? void 0 : _a.call(this, event.data);
-        };
-        this.webSocket.onclose = (event) => {
-          var _a;
-          this.webSocket = null;
-          (_a = this.onClose) == null ? void 0 : _a.call(this, event.code, event.reason);
-        };
-        this.webSocket.onerror = (event) => {
-          var _a;
-          this.webSocket = null;
-          const error = new Error("Courier Socket connection failed");
-          error.originalEvent = event;
-          (_a = this.onError) == null ? void 0 : _a.call(this, error);
-          reject(error);
-        };
-      } catch (error) {
-        this.webSocket = null;
-        reject(error);
-      }
+      this.webSocket = new WebSocket(this.getWebSocketUrl());
+      this.webSocket.addEventListener("open", (event) => {
+        this.retryAttempt = 0;
+        this.onOpen(event);
+        resolve();
+      });
+      this.webSocket.addEventListener("message", async (event) => {
+        var _a2;
+        try {
+          const json = JSON.parse(event.data);
+          if ("event" in json && json.event === "reconnect") {
+            this.close(CLOSE_CODE_NORMAL_CLOSURE);
+            await this.retryConnection(json.retryAfter * 1e3);
+            return;
+          }
+          this.onMessageReceived(json);
+        } catch (error) {
+          (_a2 = this.options.logger) == null ? void 0 : _a2.error("Error parsing socket message", error);
+        }
+      });
+      this.webSocket.addEventListener("close", (event) => {
+        if (event.code !== CLOSE_CODE_NORMAL_CLOSURE) {
+          const courierCloseEvent = _CourierSocket2.parseCloseEvent(event);
+          if (courierCloseEvent.retryAfterSeconds) {
+            this.retryConnection(courierCloseEvent.retryAfterSeconds * 1e3);
+          } else {
+            this.retryConnection();
+          }
+        }
+        this.onClose(event);
+      });
+      this.webSocket.addEventListener("error", (event) => {
+        this.retryConnection();
+        this.onError(event);
+        reject(event);
+      });
     });
   }
-  disconnect() {
-    this.stopPing();
-    if (this.webSocket) {
-      this.webSocket.close(_CourierSocket2.NORMAL_CLOSURE_STATUS);
-      this.webSocket = null;
+  /**
+   * Closes the WebSocket connection.
+   *
+   * See {@link https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/close} for more details.
+   *
+   * @param code The WebSocket close code. Defaults to {@link CLOSE_CODE_NORMAL_CLOSURE}.
+   * @param reason The WebSocket close reason.
+   */
+  close(code = CLOSE_CODE_NORMAL_CLOSURE, reason) {
+    if (this.webSocket === null) {
+      return;
     }
+    this.webSocket.close(code, reason);
+    this.webSocket = null;
   }
-  async send(message) {
-    if (!this.webSocket) {
-      return false;
+  /**
+   * Sends a message to the Courier WebSocket server.
+   *
+   * @param message The message to send. The message will be serialized to a JSON string.
+   */
+  send(message) {
+    var _a;
+    if (this.webSocket === null || this.isConnecting) {
+      (_a = this.options.logger) == null ? void 0 : _a.info("Attempted to send a message, but the WebSocket is not yet open.");
+      return;
     }
     const json = JSON.stringify(message);
-    return this.webSocket.send(json) !== void 0;
+    this.webSocket.send(json);
   }
-  keepAlive(props) {
-    this.stopPing();
-    this.pingInterval = setInterval(async () => {
-      var _a;
+  get userId() {
+    return this.options.userId;
+  }
+  get logger() {
+    return this.options.logger;
+  }
+  /**
+   * Whether the WebSocket connection is currently being established.
+   */
+  get isConnecting() {
+    return this.webSocket !== null && this.webSocket.readyState === WebSocket.CONNECTING;
+  }
+  /**
+   * Whether the WebSocket connection is currently open.
+   */
+  get isOpen() {
+    return this.webSocket !== null && this.webSocket.readyState === WebSocket.OPEN;
+  }
+  /**
+   * Constructs the WebSocket URL for the Courier WebSocket server using context
+   * from the {@link CourierClientOptions} passed to the constructor.
+   *
+   * @returns The WebSocket URL
+   */
+  getWebSocketUrl() {
+    const accessToken = this.options.accessToken;
+    const connectionId = this.options.connectionId;
+    const userId = this.userId;
+    return `${this.url}?auth=${accessToken}&cid=${connectionId}&iwpv=${IPW_VERSION}&userId=${userId}`;
+  }
+  /**
+   * Parses the Retry-After time from the WebSocket close event reason,
+   * and returns a new {@link CourierCloseEvent} with the retry after time in seconds
+   * if present.
+   *
+   * The Courier WebSocket server may send the close event reason in the following format:
+   *
+   * ```json
+   * {
+   *   "Retry-After": "10" // The retry after time in seconds
+   * }
+   * ```
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent/reason
+   *
+   * @param closeEvent The WebSocket close event.
+   * @returns The WebSocket close event with the retry after time in seconds.
+   */
+  static parseCloseEvent(closeEvent) {
+    if (closeEvent.reason === null || closeEvent.reason === "") {
+      return closeEvent;
+    }
+    try {
+      const jsonReason = JSON.parse(closeEvent.reason);
+      if (!jsonReason[_CourierSocket2.RETRY_AFTER_KEY]) {
+        return closeEvent;
+      }
+      const retryAfterSeconds = parseInt(jsonReason[_CourierSocket2.RETRY_AFTER_KEY]);
+      if (Number.isNaN(retryAfterSeconds) || retryAfterSeconds < 0) {
+        return closeEvent;
+      }
+      return {
+        ...closeEvent,
+        retryAfterSeconds
+      };
+    } catch (error) {
+      return closeEvent;
+    }
+  }
+  /**
+   * Calculates the retry backoff time in milliseconds based on the current retry attempt.
+   */
+  getBackoffTimeInMillis() {
+    const backoffIntervalInMillis = _CourierSocket2.BACKOFF_INTERVALS_IN_MILLIS[this.retryAttempt];
+    const lowerBound = backoffIntervalInMillis - backoffIntervalInMillis * _CourierSocket2.BACKOFF_JITTER_FACTOR;
+    const upperBound = backoffIntervalInMillis + backoffIntervalInMillis * _CourierSocket2.BACKOFF_JITTER_FACTOR;
+    return Math.floor(Math.random() * (upperBound - lowerBound) + lowerBound);
+  }
+  /**
+   * Retries the connection to the Courier WebSocket server after
+   * either {@param suggestedBackoffTimeInMillis} or a random backoff time
+   * calculated using {@link getBackoffTimeInMillis}.
+   *
+   * @param suggestedBackoffTimeInMillis The suggested backoff time in milliseconds.
+   * @returns A promise that resolves when the connection is established or rejects if the connection could not be established.
+   */
+  async retryConnection(suggestedBackoffTimeInMillis) {
+    var _a, _b, _c;
+    if (this.retryTimeoutId !== null) {
+      (_a = this.logger) == null ? void 0 : _a.debug("Skipping retry attempt because a previous retry is already scheduled.");
+      return;
+    }
+    if (this.retryAttempt >= _CourierSocket2.MAX_RETRY_ATTEMPTS) {
+      (_b = this.logger) == null ? void 0 : _b.error(`Max retry attempts (${_CourierSocket2.MAX_RETRY_ATTEMPTS}) reached.`);
+      return;
+    }
+    const backoffTimeInMillis = suggestedBackoffTimeInMillis != null ? suggestedBackoffTimeInMillis : this.getBackoffTimeInMillis();
+    this.retryTimeoutId = window.setTimeout(async () => {
       try {
-        await this.send({ action: "keepAlive" });
+        await this.connect();
       } catch (error) {
-        (_a = this.options.logger) == null ? void 0 : _a.error("Error occurred on Keep Alive:", error);
       }
-    }, (props == null ? void 0 : props.intervalInMillis) ?? 3e5);
+    }, backoffTimeInMillis);
+    (_c = this.logger) == null ? void 0 : _c.debug(`Retrying connection in ${Math.floor(backoffTimeInMillis / 1e3)}s. Retry attempt ${this.retryAttempt + 1} of ${_CourierSocket2.MAX_RETRY_ATTEMPTS}.`);
+    this.retryAttempt++;
   }
-  stopPing() {
-    if (this.pingInterval) {
-      clearInterval(this.pingInterval);
-      this.pingInterval = null;
+  /**
+   * Clears the retry timeout if it exists.
+   */
+  clearRetryTimeout() {
+    if (this.retryTimeoutId !== null) {
+      window.clearTimeout(this.retryTimeoutId);
+      this.retryTimeoutId = null;
     }
   }
 };
-__publicField$1(_CourierSocket, "NORMAL_CLOSURE_STATUS", 1e3);
+__publicField$1(_CourierSocket, "BACKOFF_JITTER_FACTOR", 0.5);
+__publicField$1(_CourierSocket, "MAX_RETRY_ATTEMPTS", 5);
+__publicField$1(_CourierSocket, "BACKOFF_INTERVALS_IN_MILLIS", [
+  3e4,
+  // 30 seconds
+  6e4,
+  // 1 minute
+  12e4,
+  // 2 minutes
+  24e4,
+  // 4 minutes
+  48e4
+  // 8 minutes
+]);
+__publicField$1(_CourierSocket, "RETRY_AFTER_KEY", "Retry-After");
 let CourierSocket = _CourierSocket;
+var ClientAction = /* @__PURE__ */ ((ClientAction2) => {
+  ClientAction2["Subscribe"] = "subscribe";
+  ClientAction2["Unsubscribe"] = "unsubscribe";
+  ClientAction2["Pong"] = "pong";
+  ClientAction2["Ping"] = "ping";
+  return ClientAction2;
+})(ClientAction || {});
+var ServerAction = /* @__PURE__ */ ((ServerAction2) => {
+  ServerAction2["Ack"] = "ack";
+  ServerAction2["Ping"] = "ping";
+  ServerAction2["Pong"] = "pong";
+  return ServerAction2;
+})(ServerAction || {});
+var MessageEvent = /* @__PURE__ */ ((MessageEvent2) => {
+  MessageEvent2["NewMessage"] = "message";
+  MessageEvent2["Archive"] = "archive";
+  MessageEvent2["ArchiveAll"] = "archive-all";
+  MessageEvent2["ArchiveRead"] = "archive-read";
+  MessageEvent2["Clicked"] = "clicked";
+  MessageEvent2["MarkAllRead"] = "mark-all-read";
+  MessageEvent2["Opened"] = "opened";
+  MessageEvent2["Read"] = "read";
+  MessageEvent2["Unarchive"] = "unarchive";
+  MessageEvent2["Unopened"] = "unopened";
+  MessageEvent2["Unread"] = "unread";
+  return MessageEvent2;
+})(MessageEvent || {});
 const getCourierApiUrls = (urls) => ({
   courier: {
     rest: (urls == null ? void 0 : urls.courier.rest) || "https://api.courier.com",
@@ -131,12 +298,27 @@ class Logger {
     }
   }
 }
-class UUID {
-  static generate(prefix) {
-    const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-    return prefix ? prefix + id : id;
+const _UUID = class _UUID2 {
+  /**
+   * nanoid
+   * Copyright 2017 Andrey Sitnik <andrey@sitnik.ru>
+   *
+   * https://github.com/ai/nanoid/blob/main/LICENSE
+   *
+   * @param size - The size of the UUID to generate.
+   * @returns A string representing the UUID.
+   */
+  static nanoid(size = 21) {
+    let id = "";
+    let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
+    while (size--) {
+      id += _UUID2.ALPHABET[bytes[size] & 63];
+    }
+    return id;
   }
-}
+};
+__publicField$1(_UUID, "ALPHABET", "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict");
+let UUID = _UUID;
 class CourierRequestError extends Error {
   constructor(code, message, type) {
     super(message);
@@ -164,8 +346,9 @@ Response JSON: ${JSON.stringify(data.response, null, 2)}
   `);
 }
 async function http(props) {
-  const validCodes = props.validCodes ?? [200];
-  const uid = props.options.showLogs ? UUID.generate() : void 0;
+  var _a;
+  const validCodes = (_a = props.validCodes) != null ? _a : [200];
+  const uid = props.options.showLogs ? UUID.nanoid() : void 0;
   const request = new Request(props.url, {
     method: props.method,
     headers: {
@@ -215,7 +398,7 @@ async function http(props) {
   return data;
 }
 async function graphql(props) {
-  const uid = props.options.showLogs ? UUID.generate() : void 0;
+  const uid = props.options.showLogs ? UUID.nanoid() : void 0;
   if (uid) {
     logRequest(props.options.logger, uid, "GraphQL", {
       url: props.url,
@@ -304,70 +487,120 @@ class BrandClient extends Client {
     return json.data.brand;
   }
 }
-class InboxSocket extends CourierSocket {
+const _CourierInboxSocket = class _CourierInboxSocket2 extends CourierSocket {
   constructor(options) {
-    const url = InboxSocket.buildUrl(options);
-    super(url, options);
-    __publicField$1(this, "receivedMessage");
-    __publicField$1(this, "receivedMessageEvent");
-    this.onMessageReceived = (data) => this.convertToType(data);
+    super(options);
+    __publicField$1(this, "pingIntervalId", null);
+    __publicField$1(this, "messageEventListeners", []);
   }
-  convertToType(data) {
-    var _a, _b, _c, _d;
-    try {
-      const payload = JSON.parse(data);
-      switch (payload.type) {
-        case "event":
-          const messageEvent = JSON.parse(data);
-          (_a = this.receivedMessageEvent) == null ? void 0 : _a.call(this, messageEvent);
-          break;
-        case "message":
-          const message = JSON.parse(data);
-          (_b = this.receivedMessage) == null ? void 0 : _b.call(this, message);
-          break;
-      }
-    } catch (error) {
-      (_c = this.options.logger) == null ? void 0 : _c.error("Error parsing socket message", error);
-      if (error instanceof Error) {
-        (_d = this.onError) == null ? void 0 : _d.call(this, error);
+  onOpen(_) {
+    this.restartPingInterval();
+    return Promise.resolve();
+  }
+  onMessageReceived(data) {
+    if ("action" in data && data.action === ServerAction.Ping) {
+      const envelope = data;
+      this.sendPong(envelope);
+    }
+    if ("event" in data) {
+      for (const listener of this.messageEventListeners) {
+        listener(data);
       }
     }
+    this.restartPingInterval();
+    return Promise.resolve();
   }
-  async sendSubscribe(props) {
-    var _a;
-    const subscription = {
-      action: "subscribe",
+  onClose(_) {
+    return Promise.resolve();
+  }
+  onError(_) {
+    return Promise.resolve();
+  }
+  /**
+   * Sends a subscribe message to the server.
+   *
+   * Subscribes to all events for the user.
+   */
+  sendSubscribe() {
+    const envelope = {
+      tid: UUID.nanoid(),
+      action: ClientAction.Subscribe,
       data: {
-        userAgent: "courier-js",
-        // TODO: Equivalent to Courier.agent.value()
-        channel: this.options.userId,
-        event: "*",
-        version: (props == null ? void 0 : props.version) ?? 5
+        channel: this.userId,
+        event: "*"
       }
     };
-    if (this.options.connectionId) {
-      subscription.data.clientSourceId = this.options.connectionId;
-    }
-    if (this.options.tenantId) {
-      subscription.data.accountId = this.options.tenantId;
-    }
-    (_a = this.options.logger) == null ? void 0 : _a.debug("Sending subscribe request", subscription);
-    await this.send(subscription);
+    this.send(envelope);
   }
-  static buildUrl(options) {
-    var _a;
-    let url = ((_a = options.apiUrls) == null ? void 0 : _a.inbox.webSocket) ?? "";
-    if (options.accessToken) {
-      url += `/?auth=${options.accessToken}`;
+  /**
+   * Sends an unsubscribe message to the server.
+   *
+   * Unsubscribes from all events for the user.
+   */
+  sendUnsubscribe() {
+    const envelope = {
+      tid: UUID.nanoid(),
+      action: ClientAction.Unsubscribe,
+      data: {
+        channel: this.userId
+      }
+    };
+    this.send(envelope);
+  }
+  /**
+   * Adds a message event listener, called when a message event is received
+   * from the Courier WebSocket server.
+   *
+   * @param listener The listener function
+   */
+  addMessageEventListener(listener) {
+    this.messageEventListeners.push(listener);
+  }
+  /**
+   * Send a ping message to the server.
+   *
+   * ping/pong is implemented at the application layer since the browser's
+   * WebSocket implementation does not support control-level ping/pong.
+   */
+  sendPing() {
+    const envelope = {
+      tid: UUID.nanoid(),
+      action: ClientAction.Ping
+    };
+    this.send(envelope);
+  }
+  /**
+   * Send a pong response to the server.
+   *
+   * ping/pong is implemented at the application layer since the browser's
+   * WebSocket implementation does not support control-level ping/pong.
+   */
+  sendPong(incomingMessage) {
+    const response = {
+      tid: incomingMessage.tid,
+      action: ClientAction.Pong
+    };
+    this.send(response);
+  }
+  /**
+   * Restart the ping interval, clearing the previous interval if it exists.
+   */
+  restartPingInterval() {
+    if (this.pingIntervalId) {
+      window.clearInterval(this.pingIntervalId);
     }
-    return url;
+    this.pingIntervalId = window.setInterval(() => {
+      this.sendPing();
+    }, _CourierInboxSocket2.PING_INTERVAL_MILLIS);
   }
-}
+};
+__publicField$1(_CourierInboxSocket, "PING_INTERVAL_MILLIS", 6e4);
+let CourierInboxSocket = _CourierInboxSocket;
 class InboxClient extends Client {
   constructor(options) {
     super(options);
     __publicField$1(this, "socket");
-    this.socket = new InboxSocket(options);
+    this.socket = new CourierInboxSocket(options);
   }
   /**
    * Get paginated messages
@@ -376,10 +609,11 @@ 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 = ${(props == null ? void 0 : props.paginationLimit) ?? 24}
+        $limit: Int = ${(_a = props == null ? void 0 : props.paginationLimit) != null ? _a : 24}
         $after: String ${(props == null ? void 0 : props.startCursor) ? `= "${props.startCursor}"` : ""}
       ) {
         count(params: $params)
@@ -428,10 +662,11 @@ 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 = ${(props == null ? void 0 : props.paginationLimit) ?? 24}
+        $limit: Int = ${(_a = props == null ? void 0 : props.paginationLimit) != null ? _a : 24}
         $after: String ${(props == null ? void 0 : props.startCursor) ? `= "${props.startCursor}"` : ""}
       ) {
         count(params: $params)
@@ -478,6 +713,7 @@ class InboxClient extends Client {
    * @returns Promise resolving to number of unread messages
    */
   async getUnreadMessageCount() {
+    var _a2;
     var _a;
     const query = `
       query GetMessages {
@@ -493,7 +729,7 @@ class InboxClient extends Client {
       },
       url: this.options.apiUrls.inbox.graphql
     });
-    return ((_a = response.data) == null ? void 0 : _a.count) ?? 0;
+    return (_a2 = (_a = response.data) == null ? void 0 : _a.count) != null ? _a2 : 0;
   }
   /**
    * Track a click event
@@ -976,13 +1212,14 @@ 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 baseOptions = {
       ...props,
       showLogs,
       apiUrls: props.apiUrls || getCourierApiUrls(),
-      accessToken: props.jwt ?? props.publicApiKey
+      accessToken: (_a2 = props.jwt) != null ? _a2 : props.publicApiKey
     };
     super({
       ...baseOptions,
@@ -1027,7 +1264,7 @@ class AuthenticationListener {
 }
 const _Courier = class _Courier2 {
   constructor() {
-    __publicField$1(this, "id", UUID.generate());
+    __publicField$1(this, "id", UUID.nanoid());
     __publicField$1(this, "instanceClient");
     __publicField$1(this, "_paginationLimit", 24);
     __publicField$1(this, "authenticationListeners", []);
@@ -1060,7 +1297,8 @@ const _Courier = class _Courier2 {
    * @param options - The options for the Courier client
    */
   signIn(props) {
-    const connectionId = props.connectionId ?? UUID.generate();
+    var _a;
+    const connectionId = (_a = props.connectionId) != null ? _a : UUID.nanoid();
     this.instanceClient = new CourierClient({ ...props, connectionId });
     this.notifyAuthenticationListeners({ userId: props.userId });
   }
@@ -1176,7 +1414,15 @@ const addSystemThemeModeListener = (callback) => {
     mediaQuery.removeEventListener("change", handler);
   };
 };
-class CourierSystemThemeElement extends HTMLElement {
+const BaseElement = typeof window === "undefined" ? class {
+  constructor() {
+  }
+} : class extends HTMLElement {
+  constructor() {
+    super();
+  }
+};
+class CourierSystemThemeElement extends BaseElement {
   constructor() {
     super();
     __publicField2(this, "_currentSystemTheme");
@@ -1249,6 +1495,7 @@ 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;
@@ -1284,18 +1531,18 @@ class CourierButton extends CourierSystemThemeElement {
 
       button {
         border: none;
-        border-radius: ${props.borderRadius ?? defaultBorderRadius()};
-        font-weight: ${props.fontWeight ?? defaultFontWeight()};
-        font-family: ${props.fontFamily ?? "inherit"};
-        font-size: ${props.fontSize ?? defaultFontSize()};
+        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()};
         padding: 6px 10px;
         cursor: pointer;
         width: 100%;
         height: 100%;
-        background-color: ${props.backgroundColor ?? defaultBackgroundColor()};
-        color: ${props.textColor ?? defaultTextColor()};
-        border: ${props.border ?? defaultBorder()};
-        box-shadow: ${props.shadow ?? defaultShadow()};
+        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()};
         touch-action: manipulation;
       }
 
@@ -1320,9 +1567,6 @@ class CourierButton extends CourierSystemThemeElement {
     this._style.textContent = this.getStyles(props);
   }
 }
-if (!customElements.get("courier-button")) {
-  customElements.define("courier-button", CourierButton);
-}
 const CourierIconSVGs = {
   inbox: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>
@@ -1352,14 +1596,14 @@ const CourierIconSVGs = {
 <path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>
 </svg>`
 };
-class CourierIcon extends HTMLElement {
+class CourierIcon extends BaseElement {
   constructor(color, svg) {
     super();
     __publicField2(this, "_color");
     __publicField2(this, "_svg");
     __publicField2(this, "_iconContainer");
     __publicField2(this, "_style");
-    this._color = color ?? CourierColors.black[500];
+    this._color = color != null ? color : CourierColors.black[500];
     this._svg = svg;
     const shadow = this.attachShadow({ mode: "open" });
     this._iconContainer = document.createElement("div");
@@ -1403,10 +1647,7 @@ class CourierIcon extends HTMLElement {
     this.refresh();
   }
 }
-if (!customElements.get("courier-icon")) {
-  customElements.define("courier-icon", CourierIcon);
-}
-class CourierLink extends HTMLElement {
+class CourierLink extends BaseElement {
   constructor() {
     super();
     __publicField2(this, "link");
@@ -1568,9 +1809,6 @@ __publicField2(CourierLink, "observedAttributes", [
   "font-family",
   "font-size"
 ]);
-if (!customElements.get("courier-link")) {
-  customElements.define("courier-link", CourierLink);
-}
 class CourierElement extends CourierSystemThemeElement {
   constructor() {
     super();
@@ -1583,7 +1821,7 @@ class CourierElement extends CourierSystemThemeElement {
       this.shadow.replaceChildren();
       return;
     }
-    const element = newElement ?? this.defaultElement();
+    const element = newElement != null ? newElement : this.defaultElement();
     this.shadow.replaceChildren(element);
   }
   // Default element to be used if no factory is provided
@@ -1609,13 +1847,14 @@ 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(this._props.button ?? CourierButtonVariants.secondary(this.currentSystemTheme));
+    this._button = new CourierButton((_a2 = this._props.button) != null ? _a2 : CourierButtonVariants.secondary(this.currentSystemTheme));
     this._style = document.createElement("style");
     this._style.textContent = this.getStyles(this._props);
     container.className = "container";
@@ -1634,6 +1873,7 @@ class CourierInfoState extends CourierElement {
     this.updateStyles(this._props);
   }
   getStyles(props) {
+    var _a2, _b2, _c2, _d2;
     var _a, _b, _c, _d;
     return `
       :host {
@@ -1656,10 +1896,10 @@ class CourierInfoState extends CourierElement {
 
       .container h2 {
         margin: 0;
-        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"};
+        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"};
       }
     `;
   }
@@ -1676,10 +1916,7 @@ class CourierInfoState extends CourierElement {
     this._buttonClickCallback = callback;
   }
 }
-if (!customElements.get("courier-info-state")) {
-  customElements.define("courier-info-state", CourierInfoState);
-}
-class CourierIconButton extends HTMLElement {
+class CourierIconButton extends BaseElement {
   constructor(svg, color, backgroundColor, hoverBackgroundColor, activeBackgroundColor, borderRadius, height, width) {
     super();
     __publicField2(this, "_backgroundColor");
@@ -1711,32 +1948,33 @@ class CourierIconButton extends HTMLElement {
     this._style.textContent = this.getStyles();
   }
   getStyles() {
+    var _a, _b, _c, _d, _e, _f, _g;
     return `
       :host {
         display: inline-block;
-        border-radius: ${this._borderRadius ?? "50%"};
+        border-radius: ${(_a = this._borderRadius) != null ? _a : "50%"};
       }
 
       button {
         border: none;
-        border-radius: ${this._borderRadius ?? "50%"};
+        border-radius: ${(_b = this._borderRadius) != null ? _b : "50%"};
         cursor: pointer;
-        width: ${this._width ?? "36px"};
-        height: ${this._height ?? "36px"};
+        width: ${(_c = this._width) != null ? _c : "36px"};
+        height: ${(_d = this._height) != null ? _d : "36px"};
         display: flex;
         align-items: center;
         justify-content: center;
-        background: ${this._backgroundColor ?? "transparent"};
+        background: ${(_e = this._backgroundColor) != null ? _e : "transparent"};
         transition: background-color 0.2s ease;
         touch-action: manipulation;
       }
 
       button:hover {
-        background-color: ${this._hoverBackgroundColor ?? "red"};
+        background-color: ${(_f = this._hoverBackgroundColor) != null ? _f : "red"};
       }
 
       button:active {
-        background-color: ${this._activeBackgroundColor ?? "red"};
+        background-color: ${(_g = this._activeBackgroundColor) != null ? _g : "red"};
       }
 
       button:disabled {
@@ -1772,21 +2010,20 @@ class CourierIconButton extends HTMLElement {
     this.refresh();
   }
 }
-if (!customElements.get("courier-icon-button")) {
-  customElements.define("courier-icon-button", CourierIconButton);
+function registerElement(name, element) {
+  if (typeof window !== "undefined" && !customElements.get(name)) {
+    customElements.define(name, element);
+  }
 }
 const components = [
   { name: "courier-button", class: CourierButton },
   { name: "courier-icon", class: CourierIcon },
   { name: "courier-link", class: CourierLink },
   { name: "courier-info-state", class: CourierInfoState },
-  { name: "courier-icon-button", class: CourierIconButton }
+  { name: "courier-icon-button", class: CourierIconButton },
+  { name: "courier-system-theme", class: CourierSystemThemeElement }
 ];
-components.forEach(({ name, class: componentClass }) => {
-  if (!customElements.get(name)) {
-    customElements.define(name, componentClass);
-  }
-});
+components.forEach(({ name, class: componentClass }) => registerElement(name, componentClass));
 function copyMessage(message) {
   const copy = {
     ...message
@@ -1832,7 +2069,7 @@ function getMessageTime(message) {
   if (diffInSeconds < 31536e3) return `${Math.floor(diffInSeconds / 604800)}w`;
   return `${Math.floor(diffInSeconds / 31536e3)}y`;
 }
-class CourierListItemActionMenu extends HTMLElement {
+class CourierInboxListItemMenu extends BaseElement {
   constructor(theme2) {
     super();
     __publicField(this, "_theme");
@@ -1848,16 +2085,17 @@ class CourierListItemActionMenu extends HTMLElement {
     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: ${(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"};
+        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"};
         user-select: none;
         opacity: 0;
         pointer-events: none;
@@ -1925,9 +2163,7 @@ class CourierListItemActionMenu extends HTMLElement {
     this.classList.remove("visible");
   }
 }
-if (!customElements.get("courier-list-item-menu")) {
-  customElements.define("courier-list-item-menu", CourierListItemActionMenu);
-}
+registerElement("courier-inbox-list-item-menu", CourierInboxListItemMenu);
 const _CourierInboxDatastore = class _CourierInboxDatastore2 {
   constructor() {
     __publicField(this, "_inboxDataSet");
@@ -1944,13 +2180,16 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     return _CourierInboxDatastore2.instance;
   }
   get unreadCount() {
-    return this._unreadCount ?? 0;
+    var _a;
+    return (_a = this._unreadCount) != null ? _a : 0;
   }
   get inboxDataSet() {
-    return this._inboxDataSet ?? { feedType: "inbox", messages: [], canPaginate: false, paginationCursor: null };
+    var _a;
+    return (_a = this._inboxDataSet) != null ? _a : { feedType: "inbox", messages: [], canPaginate: false, paginationCursor: null };
   }
   get archiveDataSet() {
-    return this._archiveDataSet ?? { feedType: "archive", messages: [], canPaginate: false, paginationCursor: null };
+    var _a;
+    return (_a = this._archiveDataSet) != null ? _a : { feedType: "archive", messages: [], canPaginate: false, paginationCursor: null };
   }
   addDataStoreListener(listener) {
     this._dataStoreListeners.push(listener);
@@ -1959,6 +2198,7 @@ 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) {
@@ -1977,9 +2217,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: ((_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
+      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
     };
   }
   async fetchUnreadCount(props) {
@@ -1988,7 +2228,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
       return this._unreadCount;
     }
     const unreadCount = await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.getUnreadMessageCount());
-    return unreadCount ?? 0;
+    return unreadCount != null ? unreadCount : 0;
   }
   async load(props) {
     var _a, _b, _c;
@@ -1996,7 +2236,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 ?? { feedType: "inbox", canUseCache: true };
+      const properties = props != null ? props : { feedType: "inbox", canUseCache: true };
       const [dataSet, unreadCount] = await Promise.all([
         this.fetchDataSet(properties),
         this.fetchUnreadCount(properties)
@@ -2011,9 +2251,10 @@ 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, this._unreadCount ?? 0);
+        (_d = (_c2 = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c2, (_a3 = this._unreadCount) != null ? _a3 : 0);
       });
     } catch (error) {
       (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.error("Error loading inbox:", error);
@@ -2049,73 +2290,70 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     await Promise.all(dataSetPromises);
   }
   async connectSocket() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const socket = (_a = Courier.shared.client) == null ? void 0 : _a.inbox.socket;
     try {
       if (!socket) {
         (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.info("CourierInbox socket not available");
         return;
       }
-      (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info("CourierInbox socket connectionId:", (_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId);
-      if (socket.isConnected) {
-        (_h = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _h.info("CourierInbox socket already connected. Socket will not attempt reconnection.");
+      if (socket.isConnecting || socket.isOpen) {
+        (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info(`Inbox socket already connecting or open for client ID: [${(_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId}]`);
         return;
       }
-      socket.receivedMessage = (message) => {
-        this.addMessage(message, 0, "inbox");
-      };
-      socket.receivedMessageEvent = (event) => {
-        let message;
-        if (event.messageId) {
-          message = this.getMessage({ messageId: event.messageId });
+      socket.addMessageEventListener((event) => {
+        if (event.event === MessageEvent.NewMessage) {
+          const message2 = event.data;
+          this.addMessage(message2, 0, "inbox");
+          return;
         }
+        const message = this.getMessage({ messageId: event.messageId });
         switch (event.event) {
-          case "mark-all-read":
+          case MessageEvent.MarkAllRead:
             this.readAllMessages({ canCallApi: false });
             break;
-          case "read":
+          case MessageEvent.Read:
             if (message) {
               this.readMessage({ message, canCallApi: false });
             }
             break;
-          case "unread":
+          case MessageEvent.Unread:
             if (message) {
               this.unreadMessage({ message, canCallApi: false });
             }
             break;
-          case "opened":
+          case MessageEvent.Opened:
             if (message) {
               this.openMessage({ message, canCallApi: false });
             }
             break;
-          case "archive":
+          case MessageEvent.Archive:
             if (message) {
               this.archiveMessage({ message, canCallApi: false });
             }
             break;
-          case "archive-read":
+          case MessageEvent.ArchiveRead:
             this.archiveReadMessages({ canCallApi: false });
             break;
-          case "click":
+          case MessageEvent.Clicked:
             if (message) {
               this.clickMessage({ message, canCallApi: false });
             }
             break;
-          case "unarchive":
+          case MessageEvent.Unarchive:
             if (message) {
               this.unarchiveMessage({ message, canCallApi: false });
             }
             break;
-          case "unopened":
+          case MessageEvent.Unopened:
             break;
         }
-      };
+      });
       await socket.connect();
       await socket.sendSubscribe();
-      socket.keepAlive();
-      (_j = (_i = Courier.shared.client) == null ? void 0 : _i.options.logger) == null ? void 0 : _j.info("CourierInbox socket connected");
+      (_i = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _i.info(`Inbox socket connected for client ID: [${(_h = Courier.shared.client) == null ? void 0 : _h.options.connectionId}]`);
     } catch (error) {
-      (_l = (_k = Courier.shared.client) == null ? void 0 : _k.options.logger) == null ? void 0 : _l.error("Failed to connect socket:", error);
+      (_k = (_j = Courier.shared.client) == null ? void 0 : _j.options.logger) == null ? void 0 : _k.error("Failed to connect socket:", error);
     }
   }
   /**
@@ -2124,8 +2362,12 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
    * @returns The message or undefined if it is not found
    */
   getMessage(props) {
+    var _a2;
     var _a, _b;
-    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));
+    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);
   }
   /**
    * Fetch the next page of messages
@@ -2133,6 +2375,7 @@ 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":
@@ -2148,9 +2391,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
             }));
             const dataSet = {
               feedType: "inbox",
-              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
+              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
             };
             this.addPage(dataSet);
             return dataSet;
@@ -2175,9 +2418,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
             }));
             const dataSet = {
               feedType: "archive",
-              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
+              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
             };
             this.addPage(dataSet);
             return dataSet;
@@ -2341,6 +2584,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     }
   }
   async archiveReadMessages({ canCallApi = true } = {}) {
+    var _a2;
     var _a, _b, _c, _d;
     if (!this.canMutate()) {
       return;
@@ -2348,11 +2592,11 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
     const datastoreSnapshot = this.getDatastoreSnapshot(this.unreadCount, this._inboxDataSet, this._archiveDataSet);
     try {
       const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-      const messagesToArchive = ((_a = this._inboxDataSet) == null ? void 0 : _a.messages.filter((message) => message.read)) ?? [];
+      const messagesToArchive = (_a2 = (_a = this._inboxDataSet) == null ? void 0 : _a.messages.filter((message) => message.read)) != null ? _a2 : [];
       messagesToArchive.forEach((message) => {
-        var _a2, _b2, _c2;
+        var _a22, _b2, _c2;
         message.archived = timestamp;
-        const inboxIndex = (_a2 = this._inboxDataSet) == null ? void 0 : _a2.messages.findIndex((m) => m.messageId === message.messageId);
+        const inboxIndex = (_a22 = this._inboxDataSet) == null ? void 0 : _a22.messages.findIndex((m) => m.messageId === message.messageId);
         if (inboxIndex !== void 0 && inboxIndex !== -1) {
           (_b2 = this._inboxDataSet) == null ? void 0 : _b2.messages.splice(inboxIndex, 1);
         }
@@ -2362,9 +2606,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
         }
       });
       this._dataStoreListeners.forEach((listener) => {
-        var _a2, _b2, _c2, _d2;
+        var _a22, _b2, _c2, _d2;
         if (this._inboxDataSet) {
-          (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, this._inboxDataSet, "inbox");
+          (_b2 = (_a22 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a22, this._inboxDataSet, "inbox");
         }
         if (this._archiveDataSet) {
           (_d2 = (_c2 = listener.events).onDataSetChange) == null ? void 0 : _d2.call(_c2, this._archiveDataSet, "archive");
@@ -2510,9 +2754,10 @@ 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, this._unreadCount ?? 0);
+      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a3 = this._unreadCount) != null ? _a3 : 0);
     });
   }
   removeMessage(message, index, feedType) {
@@ -2529,9 +2774,10 @@ 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, this._unreadCount ?? 0);
+      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a3 = this._unreadCount) != null ? _a3 : 0);
     });
   }
   /**
@@ -2585,9 +2831,10 @@ 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, this._unreadCount ?? 0);
+      (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a2 = this._unreadCount) != null ? _a2 : 0);
     });
   }
   /**
@@ -2619,7 +2866,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
 };
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
-class CourierListItem extends HTMLElement {
+class CourierListItem extends BaseElement {
   constructor(theme2) {
     super();
     __publicField(this, "_theme");
@@ -2658,7 +2905,7 @@ class CourierListItem extends HTMLElement {
     this._unreadIndicator.className = "unread-indicator";
     this._style = document.createElement("style");
     this._refreshStyles();
-    this._menu = new CourierListItemActionMenu(this._theme);
+    this._menu = new CourierInboxListItemMenu(this._theme);
     this._menu.setOptions(this._getMenuOptions());
     shadow.append(this._style, this._unreadIndicator, contentContainer, this._timeElement, this._menu);
     const cancelPropagation = (e) => {
@@ -2699,18 +2946,19 @@ class CourierListItem extends HTMLElement {
       "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((longPress == null ? void 0 : longPress.vibrationDuration) ?? 50);
+              navigator.vibrate((_a2 = longPress == null ? void 0 : longPress.vibrationDuration) != null ? _a2 : 50);
             }
           }
           setTimeout(() => {
             this._hideMenu();
             this._isLongPress = false;
-          }, (longPress == null ? void 0 : longPress.displayDuration) ?? 2e3);
+          }, (_b2 = longPress == null ? void 0 : longPress.displayDuration) != null ? _b2 : 2e3);
         }, 650);
       },
       { passive: true }
@@ -2727,6 +2975,7 @@ class CourierListItem extends HTMLElement {
   }
   // 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 = [];
@@ -2736,7 +2985,7 @@ class CourierListItem extends HTMLElement {
         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 : ((_k = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _k.color) ?? "red"
+          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"
         },
         onClick: () => {
           if (this._message) {
@@ -2753,7 +3002,7 @@ class CourierListItem extends HTMLElement {
       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 : ((_o = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _o.color) ?? "red"
+        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"
       },
       onClick: () => {
         if (this._message) {
@@ -2788,6 +3037,7 @@ class CourierListItem extends HTMLElement {
     }
   }
   _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 `
@@ -2796,7 +3046,7 @@ class CourierListItem extends HTMLElement {
         flex-direction: row;
         align-items: flex-start;
         justify-content: space-between;
-        border-bottom: ${(listItem == null ? void 0 : listItem.divider) ?? "1px solid red"};
+        border-bottom: ${(_a2 = listItem == null ? void 0 : listItem.divider) != null ? _a2 : "1px solid red"};
         font-family: inherit;
         cursor: pointer;
         transition: background-color 0.2s ease;
@@ -2805,7 +3055,7 @@ class CourierListItem extends HTMLElement {
         box-sizing: border-box;
         padding: 12px 20px;
         position: relative;
-        background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
+        background-color: ${(_b2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _b2 : "transparent"};
         user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -2816,21 +3066,21 @@ class CourierListItem extends HTMLElement {
       /* ───────────────────────── Base hover / active ────────────────── */
       @media (hover: hover) {
         :host(:hover) {
-          background-color: ${(listItem == null ? void 0 : listItem.hoverBackgroundColor) ?? "red"};
+          background-color: ${(_c2 = listItem == null ? void 0 : listItem.hoverBackgroundColor) != null ? _c2 : "red"};
         }
       }
       :host(:active) {
-        background-color: ${(listItem == null ? void 0 : listItem.activeBackgroundColor) ?? "red"};
+        background-color: ${(_d2 = listItem == null ? void 0 : listItem.activeBackgroundColor) != null ? _d2 : "red"};
       }
 
       /* ───────────────────────── Menu hover / active ────────────────── */
       @media (hover: hover) {
-        :host(:hover):has(courier-list-item-menu:hover, courier-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
-          background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
+        :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"};
         }
       }
-      :host(:active):has(courier-list-item-menu:active, courier-list-item-menu *:active, courier-button:active, courier-button *:active) {
-        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"};
       }
 
       :host(:last-child) {
@@ -2844,7 +3094,7 @@ class CourierListItem extends HTMLElement {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background-color: ${(listItem == null ? void 0 : listItem.unreadIndicatorColor) ?? "red"};
+        background-color: ${(_g2 = listItem == null ? void 0 : listItem.unreadIndicatorColor) != null ? _g2 : "red"};
         display: none;
       }
 
@@ -2873,27 +3123,27 @@ class CourierListItem extends HTMLElement {
       }
 
       p[part='title'] {
-        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"};
+        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"};
         margin-bottom: 4px;
       }
 
       p[part='subtitle'] {
-        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"};
+        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"};
       }
 
       p[part='time'] {
-        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"};
+        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"};
         text-align: right;
         white-space: nowrap;
       }
 
-      courier-list-item-menu {
+      courier-inbox-list-item-menu {
         z-index: 1;
         position: absolute;
         top: 8px;
@@ -2989,10 +3239,8 @@ class CourierListItem extends HTMLElement {
     });
   }
 }
-if (!customElements.get("courier-list-item")) {
-  customElements.define("courier-list-item", CourierListItem);
-}
-class CourierInboxSkeletonListItem extends HTMLElement {
+registerElement("courier-inbox-list-item", CourierListItem);
+class CourierInboxSkeletonListItem extends BaseElement {
   constructor(theme2, opacity) {
     super();
     __publicField(this, "_shadow");
@@ -3021,10 +3269,8 @@ class CourierInboxSkeletonListItem extends HTMLElement {
     `;
   }
 }
-if (!customElements.get("courier-inbox-skeleton-list-item")) {
-  customElements.define("courier-inbox-skeleton-list-item", CourierInboxSkeletonListItem);
-}
-class CourierSkeletonAnimatedRow extends HTMLElement {
+registerElement("courier-inbox-skeleton-list-item", CourierInboxSkeletonListItem);
+class CourierSkeletonAnimatedRow extends BaseElement {
   constructor(theme2, widthPercent) {
     super();
     __publicField(this, "_shadow");
@@ -3037,8 +3283,9 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
     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 = ((_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
+    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 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);
@@ -3055,7 +3302,7 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
       }
 
       .skeleton-item {
-        height: ${((_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
+        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"};
         width: 100%;
         background: linear-gradient(
           90deg,
@@ -3064,8 +3311,8 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
           ${colorWithAlpha80} 75%
         );
         background-size: 200% 100%;
-        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"};
+        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"};
       }
 
       @keyframes shimmer {
@@ -3079,9 +3326,7 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
     `;
   }
 }
-if (!customElements.get("courier-skeleton-animated-row")) {
-  customElements.define("courier-skeleton-animated-row", CourierSkeletonAnimatedRow);
-}
+registerElement("courier-skeleton-animated-row", CourierSkeletonAnimatedRow);
 class CourierInboxSkeletonList extends CourierElement {
   constructor(theme2) {
     super();
@@ -3102,6 +3347,7 @@ class CourierInboxSkeletonList extends CourierElement {
     return list;
   }
   getStyles() {
+    var _a2;
     var _a, _b;
     return `
       :host {
@@ -3122,7 +3368,7 @@ class CourierInboxSkeletonList extends CourierElement {
       }
 
       .list > * {
-        border-bottom: ${((_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
+        border-bottom: ${(_a2 = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) != null ? _a2 : "1px solid red"};
       }
 
       .list > *:last-child {
@@ -3131,10 +3377,8 @@ class CourierInboxSkeletonList extends CourierElement {
     `;
   }
 }
-if (!customElements.get("courier-inbox-skeleton-list")) {
-  customElements.define("courier-inbox-skeleton-list", CourierInboxSkeletonList);
-}
-class CourierInboxPaginationListItem extends HTMLElement {
+registerElement("courier-inbox-skeleton-list", CourierInboxSkeletonList);
+class CourierInboxPaginationListItem extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "skeletonLoadingList");
@@ -3183,10 +3427,8 @@ class CourierInboxPaginationListItem extends HTMLElement {
     this.observer.disconnect();
   }
 }
-if (!customElements.get("courier-inbox-pagination-list-item")) {
-  customElements.define("courier-inbox-pagination-list-item", CourierInboxPaginationListItem);
-}
-class CourierInboxList extends HTMLElement {
+registerElement("courier-inbox-pagination-list-item", CourierInboxPaginationListItem);
+class CourierInboxList extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3223,13 +3465,14 @@ class CourierInboxList extends HTMLElement {
     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: ${(list == null ? void 0 : list.backgroundColor) ?? CourierColors.white[500]};
+        background-color: ${(_a2 = list == null ? void 0 : list.backgroundColor) != null ? _a2 : CourierColors.white[500]};
       }
 
       ul {
@@ -3302,6 +3545,7 @@ class CourierInboxList extends HTMLElement {
     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();
@@ -3309,7 +3553,7 @@ class CourierInboxList extends HTMLElement {
       const error = (_a = theme2.inbox) == null ? void 0 : _a.error;
       const errorElement = new CourierInfoState({
         title: {
-          text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? this._error.message,
+          text: (_a2 = (_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) != null ? _a2 : 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,
@@ -3344,7 +3588,7 @@ class CourierInboxList extends HTMLElement {
       const empty = (_D = theme2.inbox) == null ? void 0 : _D.empty;
       const emptyElement = new CourierInfoState({
         title: {
-          text: ((_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) ?? `No ${this._feedType} messages yet`,
+          text: (_b2 = (_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) != null ? _b2 : `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,
@@ -3379,16 +3623,16 @@ class CourierInboxList extends HTMLElement {
       const listItem = new CourierListItem(theme2);
       listItem.setMessage(message, this._feedType);
       listItem.setOnItemClick((message2) => {
-        var _a2;
-        return (_a2 = this._onMessageClick) == null ? void 0 : _a2.call(this, message2, index);
+        var _a22;
+        return (_a22 = this._onMessageClick) == null ? void 0 : _a22.call(this, message2, index);
       });
       listItem.setOnItemActionClick((message2, action) => {
-        var _a2;
-        return (_a2 = this._onMessageActionClick) == null ? void 0 : _a2.call(this, message2, action, index);
+        var _a22;
+        return (_a22 = this._onMessageActionClick) == null ? void 0 : _a22.call(this, message2, action, index);
       });
       listItem.setOnItemLongPress((message2) => {
-        var _a2;
-        return (_a2 = this._onMessageLongPress) == null ? void 0 : _a2.call(this, message2, index);
+        var _a22;
+        return (_a22 = this._onMessageLongPress) == null ? void 0 : _a22.call(this, message2, index);
       });
       list.appendChild(listItem);
     });
@@ -3397,8 +3641,8 @@ class CourierInboxList extends HTMLElement {
         theme: theme2,
         customItem: (_da = this._paginationItemFactory) == null ? void 0 : _da.call(this, { feedType: this._feedType }),
         onPaginationTrigger: () => {
-          var _a2;
-          return (_a2 = this._onPaginationTrigger) == null ? void 0 : _a2.call(this, this._feedType);
+          var _a22;
+          return (_a22 = this._onPaginationTrigger) == null ? void 0 : _a22.call(this, this._feedType);
         }
       });
       list.appendChild(paginationItem);
@@ -3433,11 +3677,10 @@ class CourierInboxList extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-list")) {
-  customElements.define("courier-inbox-list", CourierInboxList);
-}
-class CourierInboxOptionMenuItem extends HTMLElement {
+registerElement("courier-inbox-list", CourierInboxList);
+class CourierInboxOptionMenuItem extends BaseElement {
   constructor(props) {
+    var _a;
     super();
     __publicField(this, "_option");
     __publicField(this, "_isSelected");
@@ -3454,7 +3697,7 @@ class CourierInboxOptionMenuItem extends HTMLElement {
     this._style = document.createElement("style");
     this._content = document.createElement("div");
     this._content.className = "menu-item";
-    this._itemIcon = new CourierIcon(this._option.icon.svg ?? CourierIconSVGs.inbox);
+    this._itemIcon = new CourierIcon((_a = this._option.icon.svg) != null ? _a : CourierIconSVGs.inbox);
     this._itemIcon.setAttribute("size", "16");
     this._title = document.createElement("p");
     this._title.textContent = this._option.text;
@@ -3473,6 +3716,7 @@ class CourierInboxOptionMenuItem extends HTMLElement {
     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 `
@@ -3484,11 +3728,11 @@ class CourierInboxOptionMenuItem extends HTMLElement {
       }
 
       :host(:hover) {
-        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"};
+        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"};
       }
 
       :host(:active) {
-        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"};
+        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"};
       }
 
       .menu-item {
@@ -3504,10 +3748,10 @@ class CourierInboxOptionMenuItem extends HTMLElement {
 
       p {
         margin: 0;
-        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"};
+        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"};
         white-space: nowrap;
       }
 
@@ -3517,19 +3761,18 @@ class CourierInboxOptionMenuItem extends HTMLElement {
     `;
   }
   refreshTheme() {
+    var _a2, _b2, _c2, _d2, _e;
     var _a, _b, _c, _d;
     this._style.textContent = this.getStyles();
-    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);
+    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);
   }
 }
-if (!customElements.get("courier-inbox-filter-menu-item")) {
-  customElements.define("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
-}
-class CourierInboxOptionMenu extends HTMLElement {
+registerElement("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
+class CourierInboxOptionMenu extends BaseElement {
   constructor(themeManager, type, selectable, options, onMenuOpen) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3562,6 +3805,7 @@ class CourierInboxOptionMenu extends HTMLElement {
     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 `
@@ -3575,10 +3819,10 @@ class CourierInboxOptionMenu extends HTMLElement {
         position: absolute;
         top: 42px;
         right: -6px;
-        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"};
+        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"};
         z-index: 1000;
         min-width: 200px;
         overflow: hidden;
@@ -3586,7 +3830,7 @@ class CourierInboxOptionMenu extends HTMLElement {
       }
 
       courier-inbox-filter-menu-item {
-        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"};
+        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"};
       }
 
       courier-inbox-filter-menu-item:last-child {
@@ -3595,6 +3839,7 @@ class CourierInboxOptionMenu extends HTMLElement {
     `;
   }
   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();
@@ -3602,11 +3847,11 @@ class CourierInboxOptionMenu extends HTMLElement {
     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(((_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._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.refreshMenuItems();
   }
   setOptions(options) {
@@ -3655,10 +3900,8 @@ class CourierInboxOptionMenu extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-option-menu")) {
-  customElements.define("courier-inbox-option-menu", CourierInboxOptionMenu);
-}
-class CourierUnreadCountBadge extends HTMLElement {
+registerElement("courier-inbox-option-menu", CourierInboxOptionMenu);
+class CourierUnreadCountBadge extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3724,11 +3967,10 @@ class CourierUnreadCountBadge extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-unread-count-badge")) {
-  customElements.define("courier-unread-count-badge", CourierUnreadCountBadge);
-}
-class CourierInboxHeaderTitle extends HTMLElement {
+registerElement("courier-unread-count-badge", CourierUnreadCountBadge);
+class CourierInboxHeaderTitle extends BaseElement {
   constructor(themeManager, option) {
+    var _a;
     super();
     __publicField(this, "_themeSubscription");
     __publicField(this, "_option");
@@ -3755,11 +3997,13 @@ class CourierInboxHeaderTitle extends HTMLElement {
     shadow.appendChild(this._style);
     shadow.appendChild(this._container);
     this._themeSubscription = themeManager.subscribe((_) => {
-      this.refreshTheme(this._feedType ?? "inbox");
+      var _a2;
+      this.refreshTheme((_a2 = this._feedType) != null ? _a2 : "inbox");
     });
-    this.refreshTheme(this._feedType ?? "inbox");
+    this.refreshTheme((_a = this._feedType) != null ? _a : "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 `
@@ -3777,10 +4021,10 @@ class CourierInboxHeaderTitle extends HTMLElement {
 
       h2 {
         margin: 0;
-        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"};
+        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"};
       }
 
       courier-unread-count-badge {
@@ -3801,18 +4045,19 @@ class CourierInboxHeaderTitle extends HTMLElement {
     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 = ((_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");
+        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");
         break;
       case "archive":
-        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");
+        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");
         break;
     }
   }
@@ -3821,9 +4066,7 @@ class CourierInboxHeaderTitle extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-header-title")) {
-  customElements.define("courier-inbox-header-title", CourierInboxHeaderTitle);
-}
+registerElement("courier-inbox-header-title", CourierInboxHeaderTitle);
 class CourierInboxHeader extends CourierElement {
   constructor(props) {
     super();
@@ -3842,20 +4085,21 @@ 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: ((_d = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _d.text) ?? "Inbox",
+        text: (_a2 = (_d = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _d.text) != null ? _a2 : "Inbox",
         icon: {
-          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
+          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
         },
         selectionIcon: {
-          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
+          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
         },
         onClick: (option) => {
           this.handleOptionMenuItemClick("inbox", option);
@@ -3863,14 +4107,14 @@ class CourierInboxHeader extends CourierElement {
       },
       {
         id: "archive",
-        text: ((_u = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _u.text) ?? "Archive",
+        text: (_f2 = (_u = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _u.text) != null ? _f2 : "Archive",
         icon: {
-          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
+          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
         },
         selectionIcon: {
-          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
+          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
         },
         onClick: (option) => {
           this.handleOptionMenuItemClick("archive", option);
@@ -3879,16 +4123,17 @@ 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: ((_d = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _d.text) ?? "Mark All as Read",
+        text: (_a2 = (_d = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _d.text) != null ? _a2 : "Mark All as Read",
         icon: {
-          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
+          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
         },
         selectionIcon: null,
         onClick: (_) => {
@@ -3897,10 +4142,10 @@ class CourierInboxHeader extends CourierElement {
       },
       {
         id: "archiveAll",
-        text: ((_i = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _i.text) ?? "Archive All",
+        text: (_d2 = (_i = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _i.text) != null ? _d2 : "Archive All",
         icon: {
-          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
+          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
         },
         selectionIcon: null,
         onClick: (_) => {
@@ -3909,10 +4154,10 @@ class CourierInboxHeader extends CourierElement {
       },
       {
         id: "archiveRead",
-        text: ((_n = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _n.text) ?? "Archive Read",
+        text: (_g2 = (_n = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _n.text) != null ? _g2 : "Archive Read",
         icon: {
-          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
+          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
         },
         selectionIcon: null,
         onClick: (_) => {
@@ -3925,12 +4170,13 @@ 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 = ((_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]}`;
+      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]}`;
     }
     (_f = this._filterMenu) == null ? void 0 : _f.setOptions(this.getFilterOptions());
     (_g = this._actionMenu) == null ? void 0 : _g.setOptions(this.getActionOptions());
@@ -4025,9 +4271,7 @@ class CourierInboxHeader extends CourierElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-header")) {
-  customElements.define("courier-inbox-header", CourierInboxHeader);
-}
+registerElement("courier-inbox-header", CourierInboxHeader);
 class CourierInboxDataStoreListener {
   constructor(events) {
     __publicField(this, "events");
@@ -4803,7 +5047,7 @@ class CourierInboxThemeManager {
     this._subscriptions = [];
   }
 }
-let CourierInbox$1 = class CourierInbox extends HTMLElement {
+let CourierInbox$1 = class CourierInbox extends BaseElement {
   constructor(themeManager) {
     var _a;
     super();
@@ -4826,7 +5070,7 @@ let CourierInbox$1 = class CourierInbox extends HTMLElement {
       height: "768px"
     });
     this._shadow = this.attachShadow({ mode: "open" });
-    this._themeManager = themeManager ?? new CourierInboxThemeManager(defaultLightTheme);
+    this._themeManager = themeManager != null ? themeManager : new CourierInboxThemeManager(defaultLightTheme);
     this._header = new CourierInboxHeader({
       themeManager: this._themeManager,
       onFeedTypeChange: (feedType) => {
@@ -5103,9 +5347,7 @@ let CourierInbox$1 = class CourierInbox extends HTMLElement {
     }
   }
 };
-if (!customElements.get("courier-inbox")) {
-  customElements.define("courier-inbox", CourierInbox$1);
-}
+registerElement("courier-inbox", CourierInbox$1);
 class CourierInboxMenuButton extends CourierElement {
   constructor(themeBus) {
     super();
@@ -5156,23 +5398,22 @@ 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(((_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]);
+    (_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]);
     (_r = this._unreadCountBadge) == null ? void 0 : _r.refreshTheme("button");
   }
   disconnectedCallback() {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-menu-button")) {
-  customElements.define("courier-inbox-menu-button", CourierInboxMenuButton);
-}
-let CourierInboxMenu$1 = class CourierInboxMenu extends HTMLElement {
+registerElement("courier-inbox-menu-button", CourierInboxMenuButton);
+let CourierInboxPopupMenu$1 = class CourierInboxPopupMenu extends BaseElement {
   constructor() {
     super();
     __publicField(this, "_width", "440px");
@@ -5227,6 +5468,7 @@ let CourierInboxMenu$1 = class CourierInboxMenu extends HTMLElement {
     this._style.textContent = this.getStyles();
   }
   getStyles() {
+    var _a2, _b2, _c2, _d2;
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return `
       :host {
@@ -5242,10 +5484,10 @@ let CourierInboxMenu$1 = class CourierInboxMenu extends HTMLElement {
       .popup {
         display: none;
         position: absolute;
-        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`};
+        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`};
         z-index: 1000;
         width: ${this._width};
         height: ${this._height};
@@ -5472,9 +5714,7 @@ let CourierInboxMenu$1 = class CourierInboxMenu extends HTMLElement {
     this._themeManager.cleanup();
   }
 };
-if (!customElements.get("courier-inbox-menu")) {
-  customElements.define("courier-inbox-menu", CourierInboxMenu$1);
-}
+registerElement("courier-inbox-popup-menu", CourierInboxPopupMenu$1);
 const useCourier = () => {
   const signIn = (props) => Courier.shared.signIn(props);
   const signOut = () => Courier.shared.signOut();
@@ -5890,6 +6130,19 @@ function render(node, container) {
   const root = createRoot(container);
   return root.render(node);
 }
+const CourierClientComponent = ({ children }) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!isMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
+};
 const CourierInbox2 = (props) => {
   const inboxRef = useRef(null);
   useEffect(() => {
@@ -5974,21 +6227,18 @@ const CourierInbox2 = (props) => {
       inbox.setFeedType(props.feedType || "inbox");
     });
   }, [props.feedType, inboxRef]);
-  return (
-    /* @ts-ignore */
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "courier-inbox",
-      {
-        ref: inboxRef,
-        height: props.height,
-        "light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
-        "dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
-        mode: props.mode
-      }
-    )
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(CourierClientComponent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "courier-inbox",
+    {
+      ref: inboxRef,
+      height: props.height,
+      "light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
+      "dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
+      mode: props.mode
+    }
+  ) });
 };
-const CourierInboxMenu2 = (props) => {
+const CourierInboxPopupMenu2 = (props) => {
   const menuRef = useRef(null);
   useEffect(() => {
     const menu = menuRef.current;
@@ -6082,29 +6332,26 @@ const CourierInboxMenu2 = (props) => {
       menu.setFeedType(props.feedType || "inbox");
     });
   }, [props.feedType, menuRef]);
-  return (
-    /* @ts-ignore */
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "courier-inbox-menu",
-      {
-        ref: menuRef,
-        "popup-alignment": props.popupAlignment,
-        "popup-width": props.popupWidth,
-        "popup-height": props.popupHeight,
-        left: props.left,
-        top: props.top,
-        right: props.right,
-        bottom: props.bottom,
-        "light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
-        "dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
-        mode: props.mode
-      }
-    )
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(CourierClientComponent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "courier-inbox-popup-menu",
+    {
+      ref: menuRef,
+      "popup-alignment": props.popupAlignment,
+      "popup-width": props.popupWidth,
+      "popup-height": props.popupHeight,
+      left: props.left,
+      top: props.top,
+      right: props.right,
+      bottom: props.bottom,
+      "light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
+      "dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
+      mode: props.mode
+    }
+  ) });
 };
 export {
   CourierInbox2 as CourierInbox,
-  CourierInboxMenu2 as CourierInboxMenu,
+  CourierInboxPopupMenu2 as CourierInboxPopupMenu,
   useCourier
 };
 //# sourceMappingURL=index.mjs.map