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

package/dist/index.es.js

@@ -1,3439 +0,0 @@
-var Lo = Object.defineProperty;
-var To = (g, i, e) => i in g ? Lo(g, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[i] = e;
-var a = (g, i, e) => To(g, typeof i != "symbol" ? i + "" : i, e);
-import { Courier as C } from "@trycourier/courier-js";
-var Bo = Object.defineProperty, Ao = (g, i, e) => i in g ? Bo(g, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[i] = e, L = (g, i, e) => Ao(g, typeof i != "symbol" ? i + "" : i, e);
-const r = {
-  black: {
-    500: "#171717",
-    50010: "#1717171A",
-    50020: "#17171733"
-  },
-  gray: {
-    200: "#F5F5F5",
-    400: "#3A3A3A",
-    500: "#E5E5E5",
-    600: "#737373"
-  },
-  white: {
-    500: "#FFFFFF",
-    50010: "#FFFFFF1A",
-    50020: "#FFFFFF33"
-  },
-  blue: {
-    400: "#60A5FA",
-    500: "#2563EB"
-  }
-}, G = {
-  light: {
-    colors: {
-      primary: r.black[500],
-      secondary: r.white[500],
-      border: r.gray[500],
-      link: r.blue[500],
-      icon: r.black[500]
-    },
-    button: {
-      cornerRadius: "4px"
-    }
-  },
-  dark: {
-    colors: {
-      primary: r.white[500],
-      secondary: r.black[500],
-      border: r.gray[400],
-      link: r.blue[400],
-      icon: r.white[500]
-    },
-    button: {
-      cornerRadius: "4px"
-    }
-  }
-}, go = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", mo = (g) => {
-  if (typeof window > "u")
-    return () => {
-    };
-  const i = window.matchMedia("(prefers-color-scheme: dark)"), e = (t) => {
-    g(t.matches ? "dark" : "light");
-  };
-  return i.addEventListener("change", e), () => {
-    i.removeEventListener("change", e);
-  };
-};
-class bo extends HTMLElement {
-  constructor() {
-    super(), L(this, "_currentSystemTheme"), L(this, "_systemThemeCleanup"), this._currentSystemTheme = go(), this._systemThemeCleanup = mo((i) => {
-      this._currentSystemTheme = i, this.onSystemThemeChange(i);
-    });
-  }
-  get currentSystemTheme() {
-    return this._currentSystemTheme;
-  }
-  disconnectedCallback() {
-    this._systemThemeCleanup && this._systemThemeCleanup();
-  }
-  onSystemThemeChange(i) {
-  }
-}
-const Te = {
-  borderRadius: "4px",
-  fontSize: "14px"
-}, ee = {
-  primary: (g) => ({
-    ...Te,
-    backgroundColor: G[g].colors.primary,
-    textColor: G[g].colors.secondary,
-    fontWeight: "500",
-    shadow: "none"
-  }),
-  secondary: (g) => ({
-    ...Te,
-    backgroundColor: G[g].colors.secondary,
-    textColor: G[g].colors.primary,
-    fontWeight: "500",
-    border: `1px solid ${G[g].colors.border}`,
-    shadow: g === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
-  }),
-  tertiary: (g) => ({
-    ...Te,
-    backgroundColor: G[g].colors.border,
-    textColor: G[g].colors.primary,
-    fontWeight: "500",
-    border: "none",
-    shadow: "none"
-  })
-};
-class Ie extends bo {
-  constructor(i) {
-    super(), L(this, "_button"), L(this, "_style");
-    const e = this.attachShadow({ mode: "open" });
-    this._button = document.createElement("button"), this._button.setAttribute("part", "button"), this._style = document.createElement("style"), this._style.textContent = this.getStyles(i), e.appendChild(this._style), e.appendChild(this._button), this.updateButton(i), this._button.addEventListener("click", (t) => {
-      t.preventDefault(), t.stopPropagation(), i.onClick && i.onClick();
-    });
-  }
-  getStyles(i) {
-    const e = () => ee.secondary(this.currentSystemTheme).textColor, t = () => ee.secondary(this.currentSystemTheme).backgroundColor, s = () => ee.secondary(this.currentSystemTheme).border, o = () => ee.secondary(this.currentSystemTheme).shadow, n = () => ee.secondary(this.currentSystemTheme).borderRadius, h = () => ee.secondary(this.currentSystemTheme).fontSize, d = () => ee.secondary(this.currentSystemTheme).fontWeight;
-    return `
-      :host {
-        display: inline-block;
-      }
-
-      button {
-        border: none;
-        border-radius: ${i.borderRadius ?? n()};
-        font-weight: ${i.fontWeight ?? d()};
-        font-family: ${i.fontFamily ?? "inherit"};
-        font-size: ${i.fontSize ?? h()};
-        padding: 6px 10px;
-        cursor: pointer;
-        width: 100%;
-        height: 100%;
-        background-color: ${i.backgroundColor ?? t()};
-        color: ${i.textColor ?? e()};
-        border: ${i.border ?? s()};
-        box-shadow: ${i.shadow ?? o()};
-        touch-action: manipulation;
-      }
-
-      button:hover {
-        ${i.hoverBackgroundColor ? `background-color: ${i.hoverBackgroundColor};` : "filter: brightness(0.9);"}
-      }
-
-      button:active {
-        ${i.activeBackgroundColor ? `background-color: ${i.activeBackgroundColor};` : "filter: brightness(0.8);"}
-      }
-
-      button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `;
-  }
-  updateButton(i) {
-    i.text && (this._button.textContent = i.text), this._style.textContent = this.getStyles(i);
-  }
-}
-customElements.get("courier-button") || customElements.define("courier-button", Ie);
-const f = {
-  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"/>
-</svg>`,
-  archive: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.5 6.5V8H18.5V6.5H5.5ZM5 5H19C19.5312 5 20 5.46875 20 6V8.5C20 9.0625 19.5312 9.5 19 9.5H5C4.4375 9.5 4 9.0625 4 8.5V6C4 5.46875 4.4375 5 5 5ZM9 11.75C9 11.3438 9.3125 11 9.75 11H14.25C14.6562 11 15 11.3438 15 11.75C15 12.1875 14.6562 12.5 14.25 12.5H9.75C9.3125 12.5 9 12.1875 9 11.75ZM5 17V10.5H6.5V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V10.5H19V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17Z" fill="currentColor"/>
-</svg>`,
-  check: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.793 7.33203C19.0742 7.64453 19.0742 8.11328 18.793 8.39453L10.543 16.6445C10.2305 16.957 9.76172 16.957 9.48047 16.6445L5.23047 12.3945C4.91797 12.1133 4.91797 11.6445 5.23047 11.3633C5.51172 11.0508 5.98047 11.0508 6.26172 11.3633L9.98047 15.082L17.7305 7.33203C18.0117 7.05078 18.4805 7.05078 18.7617 7.33203H18.793Z" fill="currentColor"/>
-</svg>`,
-  filter: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 7C5 6.59375 5.3125 6.25 5.75 6.25H18.25C18.6562 6.25 19 6.59375 19 7C19 7.4375 18.6562 7.75 18.25 7.75H5.75C5.3125 7.75 5 7.4375 5 7ZM7 12C7 11.5938 7.3125 11.25 7.75 11.25H16.25C16.6562 11.25 17 11.5938 17 12C17 12.4375 16.6562 12.75 16.25 12.75H7.75C7.3125 12.75 7 12.4375 7 12ZM14 17C14 17.4375 13.6562 17.75 13.25 17.75H10.75C10.3125 17.75 10 17.4375 10 17C10 16.5938 10.3125 16.25 10.75 16.25H13.25C13.6562 16.25 14 16.5938 14 17Z" fill="currentColor"/>
-</svg>`,
-  overflow: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5117 11.9883C18.5117 12.5508 18.1992 13.0195 17.7617 13.3008C17.293 13.582 16.6992 13.582 16.2617 13.3008C15.793 13.0195 15.5117 12.5508 15.5117 11.9883C15.5117 11.457 15.793 10.9883 16.2617 10.707C16.6992 10.4258 17.293 10.4258 17.7617 10.707C18.1992 10.9883 18.5117 11.457 18.5117 11.9883ZM13.5117 11.9883C13.5117 12.5508 13.1992 13.0195 12.7617 13.3008C12.293 13.582 11.6992 13.582 11.2617 13.3008C10.793 13.0195 10.5117 12.5508 10.5117 11.9883C10.5117 11.457 10.793 10.9883 11.2617 10.707C11.6992 10.4258 12.293 10.4258 12.7617 10.707C13.1992 10.9883 13.5117 11.457 13.5117 11.9883ZM7.01172 13.4883C6.44922 13.4883 5.98047 13.207 5.69922 12.7383C5.41797 12.3008 5.41797 11.707 5.69922 11.2383C5.98047 10.8008 6.44922 10.4883 7.01172 10.4883C7.54297 10.4883 8.01172 10.8008 8.29297 11.2383C8.57422 11.707 8.57422 12.3008 8.29297 12.7383C8.01172 13.207 7.54297 13.4883 7.01172 13.4883Z" fill="currentColor"/>
-</svg>`,
-  read: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 6.5C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5H7ZM5 7C5 5.90625 5.875 5 7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7ZM15.5312 10.5312L11.5312 14.5312C11.2188 14.8438 10.75 14.8438 10.4688 14.5312L8.46875 12.5312C8.15625 12.25 8.15625 11.7812 8.46875 11.5C8.75 11.1875 9.21875 11.1875 9.53125 11.5L11 12.9688L14.4688 9.46875C14.75 9.1875 15.2188 9.1875 15.5 9.46875C15.8125 9.78125 15.8125 10.25 15.5 10.5312H15.5312Z" fill="currentColor"/>
-</svg>`,
-  archiveRead: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 6.5V15.25H16.5V6.5H7.5ZM6 15.25V6.5C6 5.6875 6.65625 5 7.5 5H16.5C17.3125 5 18 5.6875 18 6.5V15.25C18.4062 15.25 18.75 15.5938 18.75 16C18.75 16.4375 18.4062 16.75 18 16.75H6C5.5625 16.75 5.25 16.4375 5.25 16C5.25 15.5938 5.5625 15.25 6 15.25ZM5 13V14.5H4.5V17.5H19.5V14.5H19V13H19.5C20.3125 13 21 13.6875 21 14.5V17.5C21 18.3438 20.3125 19 19.5 19H4.5C3.65625 19 3 18.3438 3 17.5V14.5C3 13.6875 3.65625 13 4.5 13H5ZM15.0312 9.625L11.6875 12.9688C11.5312 13.0938 11.3438 13.1875 11.1562 13.1875C10.9375 13.1875 10.75 13.0938 10.625 12.9688L8.96875 11.2812C8.65625 11 8.65625 10.5312 8.96875 10.25C9.25 9.9375 9.71875 9.9375 10 10.25L11.1562 11.375L13.9688 8.5625C14.25 8.28125 14.7188 8.28125 15 8.5625C15.3125 8.875 15.3125 9.34375 15 9.625H15.0312Z" fill="currentColor"/>
-</svg>`,
-  unread: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 6.5H7C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5ZM7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7C5 5.90625 5.875 5 7 5Z" fill="currentColor"/>
-</svg>`,
-  unarchive: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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 ie extends HTMLElement {
-  constructor(i, e) {
-    super(), L(this, "_color"), L(this, "_svg"), L(this, "_iconContainer"), L(this, "_style"), this._color = i ?? r.black[500], this._svg = e;
-    const t = this.attachShadow({ mode: "open" });
-    this._iconContainer = document.createElement("div"), t.appendChild(this._iconContainer), this._style = document.createElement("style"), this._style.textContent = this.getStyles(this._color), t.appendChild(this._style), this.refresh();
-  }
-  getStyles(i) {
-    return `
-      :host {
-        display: inline-block;
-        line-height: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      svg {
-        width: 24px;
-        height: 24px;
-        color: ${i};
-      }
-    `;
-  }
-  refresh() {
-    this._svg && (this._iconContainer.innerHTML = this._svg), this._color && (this._style.textContent = this.getStyles(this._color));
-  }
-  updateColor(i) {
-    this._color = i, this.refresh();
-  }
-  updateSVG(i) {
-    this._svg = i, this.refresh();
-  }
-}
-customElements.get("courier-icon") || customElements.define("courier-icon", ie);
-class De extends HTMLElement {
-  constructor() {
-    super(), L(this, "link");
-    const i = this.attachShadow({ mode: "open" });
-    this.link = document.createElement("a"), this.link.setAttribute("part", "link");
-    const e = document.createElement("style");
-    e.textContent = `
-      :host {
-        display: inline-block;
-      }
-
-      a {
-        text-decoration: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-weight: 500;
-        transition: all 0.2s ease;
-        font-family: var(--courier-link-font-family, inherit);
-        font-size: var(--courier-link-font-size, inherit);
-      }
-
-      /* Variants */
-      a[data-variant="primary"][data-mode="light"] {
-        color: var(--courier-link-color, ${G.light.colors.link});
-      }
-
-      a[data-variant="primary"][data-mode="light"]:hover {
-        opacity: 0.8;
-      }
-
-      a[data-variant="primary"][data-mode="light"]:active {
-        opacity: 0.6;
-      }
-
-      a[data-variant="primary"][data-mode="dark"] {
-        color: var(--courier-link-color, ${G.dark.colors.link});
-      }
-
-      a[data-variant="primary"][data-mode="dark"]:hover {
-        opacity: 0.8;
-      }
-
-      a[data-variant="primary"][data-mode="dark"]:active {
-        opacity: 0.6;
-      }
-
-      a[data-underline="true"] {
-        text-decoration: underline;
-      }
-
-      a:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-    `, i.appendChild(e), i.appendChild(this.link), this.updateVariant(), this.updateUnderline(), this.updateMode();
-  }
-  connectedCallback() {
-    const i = document.createElement("slot");
-    this.link.appendChild(i), this.updateHref();
-  }
-  attributeChangedCallback(i, e, t) {
-    if (e !== t)
-      switch (i) {
-        case "href":
-          this.updateHref();
-          break;
-        case "variant":
-        case "mode":
-          this.updateVariant();
-          break;
-        case "disabled":
-          this.link.style.pointerEvents = this.hasAttribute("disabled") ? "none" : "auto", this.link.style.opacity = this.hasAttribute("disabled") ? "0.6" : "1";
-          break;
-        case "color":
-          this.updateColor();
-          break;
-        case "underline":
-          this.updateUnderline();
-          break;
-        case "target":
-          this.updateTarget();
-          break;
-        case "font-family":
-          this.updateFontFamily();
-          break;
-        case "font-size":
-          this.updateFontSize();
-          break;
-      }
-  }
-  updateHref() {
-    const i = this.getAttribute("href");
-    i && (this.link.href = i);
-  }
-  updateVariant() {
-    const i = this.getAttribute("variant") || "primary", e = this.getAttribute("mode") || "light";
-    this.link.setAttribute("data-variant", i), this.link.setAttribute("data-mode", e);
-  }
-  updateColor() {
-    const i = this.getAttribute("color");
-    i ? this.link.style.setProperty("--courier-link-color", i) : this.link.style.removeProperty("--courier-link-color");
-  }
-  updateUnderline() {
-    const i = this.getAttribute("underline") === "true";
-    this.link.setAttribute("data-underline", i.toString());
-  }
-  updateMode() {
-    const i = this.getAttribute("mode") || "light";
-    this.link.setAttribute("data-mode", i);
-  }
-  updateTarget() {
-    const i = this.getAttribute("target");
-    i && (this.link.target = i);
-  }
-  updateFontFamily() {
-    const i = this.getAttribute("font-family");
-    i ? this.link.style.setProperty("--courier-link-font-family", i) : this.link.style.removeProperty("--courier-link-font-family");
-  }
-  updateFontSize() {
-    const i = this.getAttribute("font-size");
-    i ? this.link.style.setProperty("--courier-link-font-size", i) : this.link.style.removeProperty("--courier-link-font-size");
-  }
-}
-L(De, "observedAttributes", [
-  "href",
-  "variant",
-  "disabled",
-  "color",
-  "underline",
-  "mode",
-  "target",
-  "font-family",
-  "font-size"
-]);
-customElements.get("courier-link") || customElements.define("courier-link", De);
-class Le extends bo {
-  constructor() {
-    super(), L(this, "shadow"), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  // Build the element with a factory function
-  build(i) {
-    if (i === null) {
-      this.shadow.replaceChildren();
-      return;
-    }
-    const e = i ?? this.defaultElement();
-    this.shadow.replaceChildren(e);
-  }
-  // Default element to be used if no factory is provided
-  defaultElement() {
-    const i = document.createElement("div");
-    return i.textContent = "Default Element Factory", i.style.cssText = `
-      background-color: red;
-      text-align: center;
-      padding: 12px;
-    `, i;
-  }
-}
-class Ee extends Le {
-  constructor(i) {
-    super(), L(this, "_props"), L(this, "_title"), L(this, "_button"), L(this, "_style"), L(this, "_buttonClickCallback", null), this._props = i;
-  }
-  defaultElement() {
-    var i, e;
-    const t = document.createElement("div");
-    return this._title = document.createElement("h2"), (i = this._props.title) != null && i.text && (this._title.textContent = this._props.title.text), this._button = new Ie(this._props.button ?? ee.secondary(this.currentSystemTheme)), this._style = document.createElement("style"), this._style.textContent = this.getStyles(this._props), t.className = "container", t.appendChild(this._style), t.appendChild(this._title), t.appendChild(this._button), this.shadow.appendChild(t), (e = this._button) == null || e.addEventListener("click", () => {
-      this._buttonClickCallback && this._buttonClickCallback();
-    }), t;
-  }
-  onSystemThemeChange(i) {
-    this.updateStyles(this._props);
-  }
-  getStyles(i) {
-    var e, t, s, o;
-    return `
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-      }
-
-      .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 16px;
-        text-align: center;
-        padding: 24px;
-      }
-
-      .container h2 {
-        margin: 0;
-        color: ${((e = i.title) == null ? void 0 : e.textColor) ?? "red"};
-        font-size: ${((t = i.title) == null ? void 0 : t.fontSize) ?? "16px"};
-        font-weight: ${((s = i.title) == null ? void 0 : s.fontWeight) ?? "500"};
-        font-family: ${((o = i.title) == null ? void 0 : o.fontFamily) ?? "inherit"};
-      }
-    `;
-  }
-  updateStyles(i) {
-    this._props = i, this._style && (this._style.textContent = this.getStyles(i)), this._button && this._button.updateButton(i.button);
-  }
-  setButtonClickCallback(i) {
-    this._buttonClickCallback = i;
-  }
-}
-customElements.get("courier-info-state") || customElements.define("courier-info-state", Ee);
-class Se extends HTMLElement {
-  constructor(i, e, t, s, o, n, h, d) {
-    super(), L(this, "_backgroundColor"), L(this, "_hoverBackgroundColor"), L(this, "_activeBackgroundColor"), L(this, "_borderRadius"), L(this, "_height"), L(this, "_width"), L(this, "_style"), L(this, "_button"), L(this, "_icon"), this._borderRadius = n, this._backgroundColor = t, this._hoverBackgroundColor = s, this._activeBackgroundColor = o, this._height = h, this._width = d;
-    const c = this.attachShadow({ mode: "open" });
-    this._button = document.createElement("button"), this._button.setAttribute("part", "button"), this._icon = new ie(e, i), this._style = document.createElement("style"), this.refresh(), c.appendChild(this._style), this._button.appendChild(this._icon), c.appendChild(this._button);
-  }
-  refresh() {
-    this._style.textContent = this.getStyles();
-  }
-  getStyles() {
-    return `
-      :host {
-        display: inline-block;
-        border-radius: ${this._borderRadius ?? "50%"};
-      }
-
-      button {
-        border: none;
-        border-radius: ${this._borderRadius ?? "50%"};
-        cursor: pointer;
-        width: ${this._width ?? "36px"};
-        height: ${this._height ?? "36px"};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: ${this._backgroundColor ?? "transparent"};
-        transition: background-color 0.2s ease;
-        touch-action: manipulation;
-      }
-
-      button:hover {
-        background-color: ${this._hoverBackgroundColor ?? "red"};
-      }
-
-      button:active {
-        background-color: ${this._activeBackgroundColor ?? "red"};
-      }
-
-      button:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      [part="icon"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-      }
-    `;
-  }
-  updateIconColor(i) {
-    this._icon.updateColor(i);
-  }
-  updateIconSVG(i) {
-    this._icon.updateSVG(i);
-  }
-  updateBackgroundColor(i) {
-    this._backgroundColor = i, this.refresh();
-  }
-  updateHoverBackgroundColor(i) {
-    this._hoverBackgroundColor = i, this.refresh();
-  }
-  updateActiveBackgroundColor(i) {
-    this._activeBackgroundColor = i, this.refresh();
-  }
-}
-customElements.get("courier-icon-button") || customElements.define("courier-icon-button", Se);
-const Do = [
-  { name: "courier-button", class: Ie },
-  { name: "courier-icon", class: ie },
-  { name: "courier-link", class: De },
-  { name: "courier-info-state", class: Ee },
-  { name: "courier-icon-button", class: Se }
-];
-Do.forEach(({ name: g, class: i }) => {
-  customElements.get(g) || customElements.define(g, i);
-});
-const te = class te {
-  constructor() {
-    a(this, "_inboxDataSet");
-    a(this, "_archiveDataSet");
-    a(this, "_dataStoreListeners", []);
-    a(this, "_unreadCount");
-    a(this, "isPaginatingInbox", !1);
-    a(this, "isPaginatingArchive", !1);
-  }
-  static get shared() {
-    return te.instance || (te.instance = new te()), te.instance;
-  }
-  get unreadCount() {
-    return this._unreadCount ?? 0;
-  }
-  get inboxDataSet() {
-    return this._inboxDataSet ?? { messages: [], canPaginate: !1, paginationCursor: null };
-  }
-  get archiveDataSet() {
-    return this._archiveDataSet ?? { messages: [], canPaginate: !1, paginationCursor: null };
-  }
-  addDataStoreListener(i) {
-    this._dataStoreListeners.push(i);
-  }
-  removeDataStoreListener(i) {
-    this._dataStoreListeners = this._dataStoreListeners.filter((e) => e !== i);
-  }
-  async fetchDataSet(i) {
-    var t, s, o, n, h, d, c, u, m, p;
-    if (i.canUseCache)
-      switch (i.feedType) {
-        case "inbox":
-          if (this._inboxDataSet)
-            return this._inboxDataSet;
-          break;
-        case "archive":
-          if (this._archiveDataSet)
-            return this._archiveDataSet;
-          break;
-      }
-    const e = i.feedType === "inbox" ? await ((t = C.shared.client) == null ? void 0 : t.inbox.getMessages()) : await ((s = C.shared.client) == null ? void 0 : s.inbox.getArchivedMessages());
-    return {
-      messages: ((n = (o = e == null ? void 0 : e.data) == null ? void 0 : o.messages) == null ? void 0 : n.nodes) ?? [],
-      canPaginate: ((c = (d = (h = e == null ? void 0 : e.data) == null ? void 0 : h.messages) == null ? void 0 : d.pageInfo) == null ? void 0 : c.hasNextPage) ?? !1,
-      paginationCursor: ((p = (m = (u = e == null ? void 0 : e.data) == null ? void 0 : u.messages) == null ? void 0 : m.pageInfo) == null ? void 0 : p.startCursor) ?? null
-    };
-  }
-  async fetchUnreadCount(i) {
-    var t;
-    return i.canUseCache && this._unreadCount !== void 0 ? this._unreadCount : await ((t = C.shared.client) == null ? void 0 : t.inbox.getUnreadMessageCount()) ?? 0;
-  }
-  async load(i) {
-    var e, t, s;
-    try {
-      if (!((e = C.shared.client) != null && e.options.userId))
-        throw new Error("User is not signed in");
-      const o = i ?? { feedType: "inbox", canUseCache: !0 }, [n, h] = await Promise.all([
-        this.fetchDataSet(o),
-        this.fetchUnreadCount(o)
-      ]);
-      switch (o.feedType) {
-        case "inbox":
-          this._inboxDataSet = n;
-          break;
-        case "archive":
-          this._archiveDataSet = n;
-          break;
-      }
-      this._unreadCount = h, this._dataStoreListeners.forEach((d) => {
-        var c, u, m, p;
-        (u = (c = d.events).onDataSetChange) == null || u.call(c, n, o.feedType), (p = (m = d.events).onUnreadCountChange) == null || p.call(m, this._unreadCount ?? 0);
-      }), await this.connectSocket();
-    } catch (o) {
-      (s = (t = C.shared.client) == null ? void 0 : t.options.logger) == null || s.error("Error loading inbox:", o), this._dataStoreListeners.forEach((n) => {
-        var h, d;
-        (d = (h = n.events).onError) == null || d.call(h, o);
-      });
-    }
-  }
-  async connectSocket() {
-    var e, t, s, o, n, h, d, c, u, m, p, x;
-    const i = (e = C.shared.client) == null ? void 0 : e.inbox.socket;
-    try {
-      if (!i) {
-        (s = (t = C.shared.client) == null ? void 0 : t.options.logger) == null || s.info("CourierInbox socket not available");
-        return;
-      }
-      if ((h = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || h.info("CourierInbox socket connectionId:", (n = C.shared.client) == null ? void 0 : n.options.connectionId), i.isConnected) {
-        (c = (d = C.shared.client) == null ? void 0 : d.options.logger) == null || c.info("CourierInbox socket already connected. Socket will not attempt reconnection.");
-        return;
-      }
-      i.receivedMessage = (_) => {
-        this.addMessage(_, 0, "inbox");
-      }, i.receivedMessageEvent = (_) => {
-        let b;
-        switch (_.messageId && (b = this.getMessage({ messageId: _.messageId })), _.event) {
-          case "mark-all-read":
-            this.readAllMessages({ canCallApi: !1 });
-            break;
-          case "read":
-            b && this.readMessage({ message: b, canCallApi: !1 });
-            break;
-          case "unread":
-            b && this.unreadMessage({ message: b, canCallApi: !1 });
-            break;
-          case "opened":
-            b && this.openMessage({ message: b, canCallApi: !1 });
-            break;
-          case "archive":
-            b && this.archiveMessage({ message: b, canCallApi: !1 });
-            break;
-          case "archive-read":
-            this.archiveReadMessages({ canCallApi: !1 });
-            break;
-          case "click":
-            b && this.clickMessage({ message: b, canCallApi: !1 });
-            break;
-          case "unopened":
-          case "unarchive":
-            break;
-        }
-      }, await i.connect(), await i.sendSubscribe(), i.keepAlive(), (m = (u = C.shared.client) == null ? void 0 : u.options.logger) == null || m.info("CourierInbox socket connected");
-    } catch (_) {
-      (x = (p = C.shared.client) == null ? void 0 : p.options.logger) == null || x.error("Failed to connect socket:", _);
-    }
-  }
-  getMessage(i) {
-    var e, t;
-    return ((e = this._inboxDataSet) == null ? void 0 : e.messages.find((s) => s.messageId === i.messageId)) ?? ((t = this._archiveDataSet) == null ? void 0 : t.messages.find((s) => s.messageId === i.messageId));
-  }
-  async fetchNextPageOfMessages(i) {
-    var e, t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $;
-    switch (i.feedType) {
-      case "inbox":
-        if (this.isPaginatingInbox)
-          return null;
-        if ((e = this._inboxDataSet) != null && e.canPaginate && this._inboxDataSet.paginationCursor)
-          try {
-            this.isPaginatingInbox = !0;
-            const y = await ((t = C.shared.client) == null ? void 0 : t.inbox.getMessages({
-              paginationLimit: C.shared.paginationLimit,
-              startCursor: this._inboxDataSet.paginationCursor
-            })), B = {
-              messages: ((o = (s = y == null ? void 0 : y.data) == null ? void 0 : s.messages) == null ? void 0 : o.nodes) ?? [],
-              canPaginate: ((d = (h = (n = y == null ? void 0 : y.data) == null ? void 0 : n.messages) == null ? void 0 : h.pageInfo) == null ? void 0 : d.hasNextPage) ?? !1,
-              paginationCursor: ((m = (u = (c = y == null ? void 0 : y.data) == null ? void 0 : c.messages) == null ? void 0 : u.pageInfo) == null ? void 0 : m.startCursor) ?? null
-            };
-            return this.addPage(B, "inbox"), B;
-          } catch (y) {
-            return (x = (p = C.shared.client) == null ? void 0 : p.options.logger) == null || x.error("Error fetching next page of inbox messages:", y), null;
-          } finally {
-            this.isPaginatingInbox = !1;
-          }
-        break;
-      case "archive":
-        if (this.isPaginatingArchive)
-          return null;
-        if ((_ = this._archiveDataSet) != null && _.canPaginate && this._archiveDataSet.paginationCursor)
-          try {
-            this.isPaginatingArchive = !0;
-            const y = await ((b = C.shared.client) == null ? void 0 : b.inbox.getArchivedMessages({
-              paginationLimit: C.shared.paginationLimit,
-              startCursor: this._archiveDataSet.paginationCursor
-            })), B = {
-              messages: ((k = (v = y == null ? void 0 : y.data) == null ? void 0 : v.messages) == null ? void 0 : k.nodes) ?? [],
-              canPaginate: ((M = (S = (w = y == null ? void 0 : y.data) == null ? void 0 : w.messages) == null ? void 0 : S.pageInfo) == null ? void 0 : M.hasNextPage) ?? !1,
-              paginationCursor: ((T = (I = (E = y == null ? void 0 : y.data) == null ? void 0 : E.messages) == null ? void 0 : I.pageInfo) == null ? void 0 : T.startCursor) ?? null
-            };
-            return this.addPage(B, "archive"), B;
-          } catch (y) {
-            return ($ = (P = C.shared.client) == null ? void 0 : P.options.logger) == null || $.error("Error fetching next page of archived messages:", y), null;
-          } finally {
-            this.isPaginatingArchive = !1;
-          }
-        break;
-    }
-    return null;
-  }
-  applyLocalMessageChange(i, e) {
-    for (const [t, s] of Object.entries(e))
-      s !== void 0 && this.updateMessage(i, s, t);
-  }
-  async readMessage({ message: i, canCallApi: e = !0 }) {
-    var o, n, h, d;
-    if (!C.shared.client)
-      return;
-    const t = i;
-    if (t.read)
-      return;
-    const s = {
-      inbox: (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((c) => c.messageId === i.messageId),
-      archive: (n = this._archiveDataSet) == null ? void 0 : n.messages.findIndex((c) => c.messageId === i.messageId)
-    };
-    try {
-      i.read = (/* @__PURE__ */ new Date()).toISOString(), this.applyLocalMessageChange(i, s), e && await C.shared.client.inbox.read({ messageId: i.messageId });
-    } catch (c) {
-      this.applyLocalMessageChange(t, s), (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error reading message:", c);
-    }
-  }
-  async unreadMessage({ message: i, canCallApi: e = !0 }) {
-    var o, n, h, d;
-    if (!C.shared.client)
-      return;
-    const t = i;
-    if (!t.read)
-      return;
-    const s = {
-      inbox: (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((c) => c.messageId === i.messageId),
-      archive: (n = this._archiveDataSet) == null ? void 0 : n.messages.findIndex((c) => c.messageId === i.messageId)
-    };
-    try {
-      i.read = void 0, this.applyLocalMessageChange(i, s), e && await C.shared.client.inbox.unread({ messageId: i.messageId });
-    } catch (c) {
-      this.applyLocalMessageChange(t, s), (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error unreading message:", c);
-    }
-  }
-  async openMessage({ message: i, canCallApi: e = !0 }) {
-    var o, n, h, d;
-    if (!C.shared.client)
-      return;
-    const t = i, s = {
-      inbox: (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((c) => c.messageId === i.messageId),
-      archive: (n = this._archiveDataSet) == null ? void 0 : n.messages.findIndex((c) => c.messageId === i.messageId)
-    };
-    if (!(!s.inbox && !s.archive) && !t.opened)
-      try {
-        i.opened = (/* @__PURE__ */ new Date()).toISOString(), this.applyLocalMessageChange(i, s), e && await C.shared.client.inbox.open({ messageId: i.messageId });
-      } catch (c) {
-        this.applyLocalMessageChange(t, s), (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error opening message:", c);
-      }
-  }
-  async clickMessage({ message: i, canCallApi: e = !0 }) {
-    var t, s, o, n;
-    if (C.shared.client)
-      try {
-        (t = i.trackingIds) != null && t.clickTrackingId && e && await C.shared.client.inbox.click({
-          messageId: i.messageId,
-          trackingId: (s = i.trackingIds) == null ? void 0 : s.clickTrackingId
-        });
-      } catch (h) {
-        (n = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Error clicking message:", h);
-      }
-  }
-  async archiveMessage({ message: i, canCallApi: e = !0 }) {
-    var o, n;
-    if (!C.shared.client)
-      return;
-    const t = i, s = (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((h) => h.messageId === i.messageId);
-    if (s !== void 0)
-      try {
-        if (this.removeMessage(i, s, "inbox"), (n = this._archiveDataSet) != null && n.messages) {
-          const h = this.findInsertIndex(i, this._archiveDataSet.messages);
-          i.archived = (/* @__PURE__ */ new Date()).toISOString(), this.addMessage(i, h, "archive");
-        }
-        e && await C.shared.client.inbox.archive({ messageId: i.messageId });
-      } catch {
-        this.addMessage(t, s, "inbox"), i.archived = void 0, this.removeMessage(i, s, "archive");
-      }
-  }
-  async archiveReadMessages({ canCallApi: i = !0 } = {}) {
-    var s;
-    if (!C.shared.client)
-      return;
-    const e = this._inboxDataSet, t = this._archiveDataSet;
-    try {
-      (s = this._inboxDataSet) == null || s.messages.forEach((o) => {
-        var h, d;
-        if (!o.read)
-          return;
-        const n = (h = this._inboxDataSet) == null ? void 0 : h.messages.findIndex((c) => c.messageId === o.messageId);
-        if (n !== void 0 && (this.removeMessage(o, n, "inbox"), (d = this._archiveDataSet) != null && d.messages)) {
-          const c = this.findInsertIndex(o, this._archiveDataSet.messages);
-          o.archived = (/* @__PURE__ */ new Date()).toISOString(), this.addMessage(o, c, "archive");
-        }
-      }), this._dataStoreListeners.forEach((o) => {
-        var n, h, d, c;
-        this._inboxDataSet && ((h = (n = o.events).onDataSetChange) == null || h.call(n, this._inboxDataSet, "inbox")), this._archiveDataSet && ((c = (d = o.events).onDataSetChange) == null || c.call(d, this._archiveDataSet, "archive"));
-      }), i && await C.shared.client.inbox.archiveRead();
-    } catch (o) {
-      console.error("Error archiving read messages:", o), this._inboxDataSet && e && (this._inboxDataSet.messages = e.messages), this._archiveDataSet && t && (this._archiveDataSet.messages = t.messages), this._dataStoreListeners.forEach((n) => {
-        var h, d, c, u;
-        this._inboxDataSet && ((d = (h = n.events).onDataSetChange) == null || d.call(h, this._inboxDataSet, "inbox")), this._archiveDataSet && ((u = (c = n.events).onDataSetChange) == null || u.call(c, this._archiveDataSet, "archive"));
-      });
-    }
-  }
-  async readAllMessages({ canCallApi: i = !0 } = {}) {
-    var o, n, h, d;
-    if (!C.shared.client)
-      return;
-    const e = this._inboxDataSet, t = this._archiveDataSet, s = this._unreadCount;
-    try {
-      (o = this._inboxDataSet) == null || o.messages.forEach((c) => {
-        c.read || (c.read = (/* @__PURE__ */ new Date()).toISOString());
-      }), (n = this._archiveDataSet) == null || n.messages.forEach((c) => {
-        c.read || (c.read = (/* @__PURE__ */ new Date()).toISOString());
-      }), this._unreadCount = 0, this._dataStoreListeners.forEach((c) => {
-        var u, m, p, x, _, b;
-        this._inboxDataSet && ((m = (u = c.events).onDataSetChange) == null || m.call(u, this._inboxDataSet, "inbox")), this._archiveDataSet && ((x = (p = c.events).onDataSetChange) == null || x.call(p, this._archiveDataSet, "archive")), (b = (_ = c.events).onUnreadCountChange) == null || b.call(_, this._unreadCount);
-      }), i && await C.shared.client.inbox.readAll();
-    } catch (c) {
-      (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Error reading all messages:", c), this._inboxDataSet && e && (this._inboxDataSet.messages = e.messages), this._archiveDataSet && t && (this._archiveDataSet.messages = t.messages), this._unreadCount = s, this._dataStoreListeners.forEach((u) => {
-        var m, p, x, _, b, v;
-        this._inboxDataSet && ((p = (m = u.events).onDataSetChange) == null || p.call(m, this._inboxDataSet, "inbox")), this._archiveDataSet && ((_ = (x = u.events).onDataSetChange) == null || _.call(x, this._archiveDataSet, "archive")), (v = (b = u.events).onUnreadCountChange) == null || v.call(b, this._unreadCount);
-      });
-    }
-  }
-  findInsertIndex(i, e) {
-    const t = [...e];
-    t.push(i), t.sort((o, n) => {
-      const h = new Date(o.created ?? Date.now()).getTime();
-      return new Date(n.created ?? Date.now()).getTime() - h;
-    });
-    const s = t.findIndex((o) => o.messageId === i.messageId);
-    return Math.max(s - 1, 0);
-  }
-  addPage(i, e) {
-    switch (e) {
-      case "inbox":
-        this._inboxDataSet && (this._inboxDataSet.canPaginate = i.canPaginate, this._inboxDataSet.paginationCursor = i.paginationCursor, this._inboxDataSet.messages = [...this._inboxDataSet.messages, ...i.messages]);
-        break;
-      case "archive":
-        this._archiveDataSet && (this._archiveDataSet.canPaginate = i.canPaginate, this._archiveDataSet.paginationCursor = i.paginationCursor, this._archiveDataSet.messages = [...this._archiveDataSet.messages, ...i.messages]);
-        break;
-    }
-    this._dataStoreListeners.forEach(
-      (t) => {
-        var s, o;
-        return (o = (s = t.events).onPageAdded) == null ? void 0 : o.call(s, i, e);
-      }
-    );
-  }
-  addMessage(i, e, t) {
-    var s, o;
-    switch (t) {
-      case "inbox":
-        !i.read && this._unreadCount !== void 0 && (this._unreadCount = this._unreadCount + 1), (s = this._inboxDataSet) == null || s.messages.splice(e, 0, i);
-        break;
-      case "archive":
-        (o = this._archiveDataSet) == null || o.messages.splice(e, 0, i);
-        break;
-    }
-    this._dataStoreListeners.forEach((n) => {
-      var h, d, c, u;
-      (d = (h = n.events).onMessageAdd) == null || d.call(h, i, e, t), (u = (c = n.events).onUnreadCountChange) == null || u.call(c, this._unreadCount ?? 0);
-    });
-  }
-  removeMessage(i, e, t) {
-    var s, o;
-    switch (t) {
-      case "inbox":
-        !i.read && this._unreadCount !== void 0 && (this._unreadCount = this._unreadCount - 1), (s = this._inboxDataSet) == null || s.messages.splice(e, 1);
-        break;
-      case "archive":
-        (o = this._archiveDataSet) == null || o.messages.splice(e, 1);
-        break;
-    }
-    this._dataStoreListeners.forEach((n) => {
-      var h, d, c, u;
-      (d = (h = n.events).onMessageRemove) == null || d.call(h, i, e, t), (u = (c = n.events).onUnreadCountChange) == null || u.call(c, this._unreadCount ?? 0);
-    });
-  }
-  updateMessage(i, e, t) {
-    switch (t) {
-      case "inbox":
-        this._unreadCount !== void 0 && !i.archived && (i.read && (this._unreadCount = Math.max(0, this._unreadCount - 1)), i.read || (this._unreadCount = this._unreadCount + 1)), this._inboxDataSet && (this._inboxDataSet.messages[e] = i);
-        break;
-      case "archive":
-        this._archiveDataSet && (this._archiveDataSet.messages[e] = i);
-        break;
-    }
-    this._dataStoreListeners.forEach((s) => {
-      var o, n, h, d;
-      (n = (o = s.events).onMessageUpdate) == null || n.call(o, i, e, t), (d = (h = s.events).onUnreadCountChange) == null || d.call(h, this._unreadCount ?? 0);
-    });
-  }
-};
-a(te, "instance");
-let A = te;
-function zo(g) {
-  return A.shared.readMessage({ message: g });
-}
-function Oo(g) {
-  return A.shared.unreadMessage({ message: g });
-}
-function No(g) {
-  return A.shared.clickMessage({ message: g });
-}
-function Uo(g) {
-  return A.shared.archiveMessage({ message: g });
-}
-function Vo(g) {
-  return A.shared.openMessage({ message: g });
-}
-function Po(g) {
-  if (!g.created) return "Now";
-  const i = /* @__PURE__ */ new Date(), e = new Date(g.created), t = Math.floor((i.getTime() - e.getTime()) / 1e3);
-  return t < 60 ? `${t}s` : t < 3600 ? `${Math.floor(t / 60)}m` : t < 86400 ? `${Math.floor(t / 3600)}h` : t < 604800 ? `${Math.floor(t / 86400)}d` : t < 31536e3 ? `${Math.floor(t / 604800)}w` : `${Math.floor(t / 31536e3)}y`;
-}
-class _o extends HTMLElement {
-  constructor(e) {
-    super();
-    // State
-    a(this, "_theme");
-    a(this, "_options", []);
-    // Components
-    a(this, "_style");
-    this._theme = e;
-    const t = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style"), this._style.textContent = this.getStyles(), t.appendChild(this._style);
-    const s = document.createElement("ul");
-    s.className = "menu", t.appendChild(s);
-  }
-  getStyles() {
-    var t, s, o;
-    const e = (o = (s = (t = this._theme.inbox) == null ? void 0 : t.list) == null ? void 0 : s.item) == null ? void 0 : o.menu;
-    return `
-      :host {
-        display: block;
-        position: absolute;
-        background: ${(e == null ? void 0 : e.backgroundColor) ?? "red"};
-        border: ${(e == null ? void 0 : e.border) ?? "1px solid red"};
-        border-radius: ${(e == null ? void 0 : e.borderRadius) ?? "0px"};
-        box-shadow: ${(e == null ? void 0 : e.shadow) ?? "0 2px 8px red"};
-        user-select: none;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.15s;
-        overflow: hidden;
-      }
-
-      :host(.visible) {
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      ul.menu {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: row;
-      }
-
-      li.menu-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        border-bottom: none;
-        background: transparent;
-      }
-    `;
-  }
-  setOptions(e) {
-    this._options = e, this.renderMenu();
-  }
-  renderMenu() {
-    var o, n, h, d;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("ul.menu");
-    if (!e) return;
-    e.innerHTML = "";
-    const t = (d = (h = (n = this._theme.inbox) == null ? void 0 : n.list) == null ? void 0 : h.item) == null ? void 0 : d.menu, s = (c) => {
-      c.stopPropagation(), c.preventDefault();
-    };
-    this._options.forEach((c) => {
-      var p, x, _;
-      const u = new Se(c.icon.svg, c.icon.color, t == null ? void 0 : t.backgroundColor, (p = t == null ? void 0 : t.item) == null ? void 0 : p.hoverBackgroundColor, (x = t == null ? void 0 : t.item) == null ? void 0 : x.activeBackgroundColor, (_ = t == null ? void 0 : t.item) == null ? void 0 : _.borderRadius), m = (b) => {
-        s(b), c.onClick();
-      };
-      u.addEventListener("click", m), u.addEventListener("touchstart", s), u.addEventListener("touchend", m), u.addEventListener("touchmove", s), u.addEventListener("mousedown", s), u.addEventListener("mouseup", s), e.appendChild(u);
-    });
-  }
-  show() {
-    this.classList.add("visible");
-  }
-  hide() {
-    this.classList.remove("visible");
-  }
-}
-customElements.get("courier-list-item-menu") || customElements.define("courier-list-item-menu", _o);
-class xo extends HTMLElement {
-  constructor(e) {
-    super();
-    // State
-    a(this, "_theme");
-    a(this, "_message", null);
-    a(this, "_feedType", "inbox");
-    a(this, "_isMobile", !1);
-    // Elements
-    a(this, "_titleElement");
-    a(this, "_subtitleElement");
-    a(this, "_timeElement");
-    a(this, "_style");
-    a(this, "_menu");
-    a(this, "_unreadIndicator");
-    a(this, "_actionsContainer");
-    // Touch gestures
-    a(this, "_longPressTimeout", null);
-    a(this, "_isLongPress", !1);
-    // Callbacks
-    a(this, "onItemClick", null);
-    a(this, "onItemLongPress", null);
-    a(this, "onItemActionClick", null);
-    this._theme = e, this._isMobile = "ontouchstart" in window;
-    const t = this.attachShadow({ mode: "open" }), s = document.createElement("div");
-    s.className = "content-container", this._titleElement = document.createElement("p"), this._titleElement.setAttribute("part", "title"), this._subtitleElement = document.createElement("p"), this._subtitleElement.setAttribute("part", "subtitle"), this._actionsContainer = document.createElement("div"), this._actionsContainer.className = "actions-container", s.appendChild(this._titleElement), s.appendChild(this._subtitleElement), s.appendChild(this._actionsContainer), this._timeElement = document.createElement("p"), this._timeElement.setAttribute("part", "time"), this._unreadIndicator = document.createElement("div"), this._unreadIndicator.className = "unread-indicator", this._style = document.createElement("style"), this._refreshStyles(), this._menu = new _o(this._theme), this._menu.setOptions(this._getMenuOptions()), t.append(this._style, this._unreadIndicator, s, this._timeElement, this._menu);
-    const o = (n) => {
-      n.stopPropagation(), n.preventDefault();
-    };
-    this._menu.addEventListener("mousedown", o), this._menu.addEventListener("pointerdown", o), this._menu.addEventListener("click", o), this.addEventListener("click", (n) => {
-      this._menu.contains(n.target) || n.composedPath().includes(this._menu) || this._message && this.onItemClick && !(n.target instanceof ie) && !this._isLongPress && this.onItemClick(this._message);
-    }), this._setupHoverBehavior(), this._setupLongPressBehavior();
-  }
-  _setupHoverBehavior() {
-    this._isMobile || (this.addEventListener("mouseenter", () => {
-      this._isLongPress = !1, this._showMenu();
-    }), this.addEventListener("mouseleave", () => this._hideMenu()));
-  }
-  _setupLongPressBehavior() {
-    var s, o, n;
-    const e = (n = (o = (s = this._theme.inbox) == null ? void 0 : s.list) == null ? void 0 : o.item) == null ? void 0 : n.menu;
-    if (!(e != null && e.enabled))
-      return;
-    const t = e.longPress;
-    this.addEventListener(
-      "touchstart",
-      () => {
-        this._longPressTimeout = window.setTimeout(() => {
-          this._isLongPress = !0, this._showMenu(), this._message && this.onItemLongPress && (this.onItemLongPress(this._message), navigator.vibrate && navigator.vibrate((t == null ? void 0 : t.vibrationDuration) ?? 50)), setTimeout(() => {
-            this._hideMenu(), this._isLongPress = !1;
-          }, (t == null ? void 0 : t.displayDuration) ?? 2e3);
-        }, 650);
-      },
-      { passive: !0 }
-    ), this.addEventListener("touchend", () => {
-      this._longPressTimeout && (window.clearTimeout(this._longPressTimeout), this._longPressTimeout = null);
-    });
-  }
-  setOnLongPress(e) {
-    this.onItemLongPress = e;
-  }
-  // Helpers
-  _getMenuOptions() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I;
-    const e = (h = (n = (o = (s = this._theme.inbox) == null ? void 0 : s.list) == null ? void 0 : o.item) == null ? void 0 : n.menu) == null ? void 0 : h.item;
-    let t = [];
-    return (d = this._message) != null && d.archived || t.push({
-      id: (c = this._message) != null && c.read ? "unread" : "read",
-      icon: {
-        svg: (u = this._message) != null && u.read ? (m = e == null ? void 0 : e.unread) == null ? void 0 : m.svg : (p = e == null ? void 0 : e.read) == null ? void 0 : p.svg,
-        color: (x = this._message) != null && x.read ? (_ = e == null ? void 0 : e.unread) == null ? void 0 : _.color : ((b = e == null ? void 0 : e.read) == null ? void 0 : b.color) ?? "red"
-      },
-      onClick: () => {
-        this._message && (this._message.read ? A.shared.unreadMessage({ message: this._message }) : A.shared.readMessage({ message: this._message }));
-      }
-    }), t.push({
-      id: (v = this._message) != null && v.archived ? "unarchive" : "archive",
-      icon: {
-        svg: (k = this._message) != null && k.archived ? (w = e == null ? void 0 : e.unarchive) == null ? void 0 : w.svg : (S = e == null ? void 0 : e.archive) == null ? void 0 : S.svg,
-        color: (M = this._message) != null && M.archived ? (E = e == null ? void 0 : e.unarchive) == null ? void 0 : E.color : ((I = e == null ? void 0 : e.archive) == null ? void 0 : I.color) ?? "red"
-      },
-      onClick: () => {
-        this._message && (this._message.archived ? alert("unarchive") : A.shared.archiveMessage({ message: this._message }));
-      }
-    }), t;
-  }
-  // Menu visibility helpers
-  _showMenu() {
-    var t, s, o;
-    const e = (o = (s = (t = this._theme.inbox) == null ? void 0 : t.list) == null ? void 0 : s.item) == null ? void 0 : o.menu;
-    e && e.enabled && (this._menu.setOptions(this._getMenuOptions()), this._menu.style.display = "block", this._menu.show(), this._timeElement.style.opacity = "0");
-  }
-  _hideMenu() {
-    var t, s, o;
-    const e = (o = (s = (t = this._theme.inbox) == null ? void 0 : t.list) == null ? void 0 : s.item) == null ? void 0 : o.menu;
-    e && e.enabled && (this._menu.hide(), this._menu.style.display = "none", this._timeElement.style.opacity = "1");
-  }
-  _getStyles() {
-    var t, s, o, n, h, d, c, u, m, p, x;
-    const e = (s = (t = this._theme.inbox) == null ? void 0 : t.list) == null ? void 0 : s.item;
-    return `
-      :host {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-        border-bottom: ${(e == null ? void 0 : e.divider) ?? "1px solid red"};
-        font-family: inherit;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        margin: 0;
-        width: 100%;
-        box-sizing: border-box;
-        padding: 12px 20px;
-        position: relative;
-        background-color: ${(e == null ? void 0 : e.backgroundColor) ?? "transparent"};
-        user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        touch-action: manipulation;
-      }
-
-      /* ───────────────────────── Base hover / active ────────────────── */
-      @media (hover: hover) {
-        :host(:hover) {
-          background-color: ${(e == null ? void 0 : e.hoverBackgroundColor) ?? "red"};
-        }
-      }
-      :host(:active) {
-        background-color: ${(e == null ? void 0 : e.activeBackgroundColor) ?? "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: ${(e == null ? void 0 : e.backgroundColor) ?? "transparent"};
-        }
-      }
-      :host(:active):has(courier-list-item-menu:active, courier-list-item-menu *:active, courier-button:active, courier-button *:active) {
-        background-color: ${(e == null ? void 0 : e.backgroundColor) ?? "transparent"};
-      }
-
-      :host(:last-child) {
-        border-bottom: none;
-      }
-
-      .unread-indicator {
-        position: absolute;
-        top: 28px;
-        left: 6px;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background-color: ${(e == null ? void 0 : e.unreadIndicatorColor) ?? "red"};
-        display: none;
-      }
-
-      :host(.unread) .unread-indicator {
-        display: block;
-      }
-
-      .content-container {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        margin-right: 12px;
-      }
-
-      p {
-        margin: 0;
-        overflow-wrap: break-word;
-        word-break: break-word;
-        hyphens: auto;
-        line-height: 1.4;
-        user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        text-align: left;
-      }
-
-      p[part='title'] {
-        font-family: ${((o = e == null ? void 0 : e.title) == null ? void 0 : o.family) ?? "inherit"};
-        font-size: ${((n = e == null ? void 0 : e.title) == null ? void 0 : n.size) ?? "14px"};
-        color: ${((h = e == null ? void 0 : e.title) == null ? void 0 : h.color) ?? "red"};
-        margin-bottom: 4px;
-      }
-
-      p[part='subtitle'] {
-        font-family: ${((d = e == null ? void 0 : e.subtitle) == null ? void 0 : d.family) ?? "inherit"};
-        font-size: ${((c = e == null ? void 0 : e.subtitle) == null ? void 0 : c.size) ?? "14px"};
-        color: ${((u = e == null ? void 0 : e.subtitle) == null ? void 0 : u.color) ?? "red"};
-      }
-
-      p[part='time'] {
-        font-family: ${((m = e == null ? void 0 : e.time) == null ? void 0 : m.family) ?? "inherit"};
-        font-size: ${((p = e == null ? void 0 : e.time) == null ? void 0 : p.size) ?? "14px"};
-        color: ${((x = e == null ? void 0 : e.time) == null ? void 0 : x.color) ?? "red"};
-        text-align: right;
-        white-space: nowrap;
-      }
-
-      courier-list-item-menu {
-        z-index: 1;
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        display: none; /* becomes block while visible */
-      }
-
-      .actions-container {
-        display: flex;
-        margin-top: 10px;
-        flex-wrap: wrap;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-        display: none;
-      }
-
-    `;
-  }
-  _refreshStyles() {
-    this._style.textContent = this._getStyles();
-  }
-  // Lifecycle hooks
-  connectedCallback() {
-    var s, o;
-    const e = this.getAttribute("message"), t = this.getAttribute("feed-type");
-    if (t && (this._feedType = t), e)
-      try {
-        this._message = JSON.parse(e), this._updateContent();
-      } catch (n) {
-        (o = (s = C.shared.client) == null ? void 0 : s.options.logger) == null || o.error("CourierListItem – failed to parse message:", n);
-      }
-  }
-  // Public API
-  setMessage(e, t) {
-    this._message = e, this._feedType = t, this._updateContent();
-  }
-  setOnItemClick(e) {
-    this.onItemClick = e;
-  }
-  setOnItemActionClick(e) {
-    this.onItemActionClick = e;
-  }
-  setOnItemLongPress(e) {
-    this.onItemLongPress = e;
-  }
-  // Content rendering
-  _updateContent() {
-    var s, o, n, h, d, c;
-    if (!this._message) {
-      this._titleElement.textContent = "", this._subtitleElement.textContent = "";
-      return;
-    }
-    this.classList.toggle("unread", !this._message.read && this._feedType !== "archive"), this._titleElement.textContent = this._message.title || "Untitled Message", this._subtitleElement.textContent = this._message.preview || this._message.body || "", this._timeElement.textContent = Po(this._message), this._menu.setOptions(this._getMenuOptions());
-    const e = ((s = this._message) == null ? void 0 : s.actions) && this._message.actions.length > 0;
-    this._actionsContainer.style.display = e ? "flex" : "none";
-    const t = (h = (n = (o = this._theme.inbox) == null ? void 0 : o.list) == null ? void 0 : n.item) == null ? void 0 : h.actions;
-    (c = (d = this._message) == null ? void 0 : d.actions) == null || c.forEach((u) => {
-      var p, x, _, b;
-      const m = new Ie({
-        text: u.content,
-        variant: "secondary",
-        backgroundColor: t == null ? void 0 : t.backgroundColor,
-        hoverBackgroundColor: t == null ? void 0 : t.hoverBackgroundColor,
-        activeBackgroundColor: t == null ? void 0 : t.activeBackgroundColor,
-        border: t == null ? void 0 : t.border,
-        borderRadius: t == null ? void 0 : t.borderRadius,
-        shadow: t == null ? void 0 : t.shadow,
-        fontFamily: (p = t == null ? void 0 : t.font) == null ? void 0 : p.family,
-        fontSize: (x = t == null ? void 0 : t.font) == null ? void 0 : x.size,
-        fontWeight: (_ = t == null ? void 0 : t.font) == null ? void 0 : _.weight,
-        textColor: (b = t == null ? void 0 : t.font) == null ? void 0 : b.color,
-        onClick: () => {
-          this._message && this.onItemActionClick && this.onItemActionClick(this._message, u);
-        }
-      });
-      this._actionsContainer.appendChild(m);
-    });
-  }
-}
-customElements.get("courier-list-item") || customElements.define("courier-list-item", xo);
-class fo extends HTMLElement {
-  constructor(e, t) {
-    super();
-    // Shadow root
-    a(this, "_shadow");
-    this._shadow = this.attachShadow({ mode: "open" });
-    const s = document.createElement("style");
-    s.textContent = this.getStyles(t), this._shadow.appendChild(s);
-    const o = new Me(e, 35), n = new Me(e, 100), h = new Me(e, 82);
-    this._shadow.appendChild(o), this._shadow.appendChild(n), this._shadow.appendChild(h);
-  }
-  getStyles(e) {
-    return `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding: 12px;
-        width: 100%;
-        box-sizing: border-box;
-        opacity: ${e};
-      }
-    `;
-  }
-}
-customElements.get("courier-inbox-skeleton-list-item") || customElements.define("courier-inbox-skeleton-list-item", fo);
-class Me extends HTMLElement {
-  constructor(e, t) {
-    super();
-    a(this, "_shadow");
-    this._shadow = this.attachShadow({ mode: "open" });
-    const s = document.createElement("style");
-    s.textContent = this.getStyles(e, t), this._shadow.appendChild(s);
-    const o = document.createElement("div");
-    o.className = "skeleton-item", this._shadow.appendChild(o);
-  }
-  getStyles(e, t) {
-    var m, p, x, _, b, v, k, w, S, M, E, I;
-    const s = ((x = (p = (m = e.inbox) == null ? void 0 : m.loading) == null ? void 0 : p.animation) == null ? void 0 : x.barColor) ?? "#000", o = s.length === 4 ? `#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}` : s, n = parseInt(o.slice(1, 3), 16), h = parseInt(o.slice(3, 5), 16), d = parseInt(o.slice(5, 7), 16), c = `rgba(${n}, ${h}, ${d}, 0.8)`, u = `rgba(${n}, ${h}, ${d}, 0.4)`;
-    return `
-      :host {
-        display: flex;
-        height: 100%;
-        width: ${t}%;
-        align-items: flex-start;
-        justify-content: flex-start;
-      }
-
-      .skeleton-item {
-        height: ${((v = (b = (_ = e.inbox) == null ? void 0 : _.loading) == null ? void 0 : b.animation) == null ? void 0 : v.barHeight) ?? "14px"};
-        width: 100%;
-        background: linear-gradient(
-          90deg,
-          ${c} 25%,
-          ${u} 50%,
-          ${c} 75%
-        );
-        background-size: 200% 100%;
-        animation: shimmer ${((S = (w = (k = e.inbox) == null ? void 0 : k.loading) == null ? void 0 : w.animation) == null ? void 0 : S.duration) ?? "2s"} ease-in-out infinite;
-        border-radius: ${((I = (E = (M = e.inbox) == null ? void 0 : M.loading) == null ? void 0 : E.animation) == null ? void 0 : I.barBorderRadius) ?? "14px"};
-      }
-
-      @keyframes shimmer {
-        0% {
-          background-position: 200% 0;
-        }
-        100% {
-          background-position: -200% 0;
-        }
-      }
-    `;
-  }
-}
-customElements.get("courier-skeleton-animated-row") || customElements.define("courier-skeleton-animated-row", Me);
-class Pe extends Le {
-  constructor(e) {
-    super();
-    a(this, "_theme");
-    this._theme = e;
-  }
-  defaultElement() {
-    const e = document.createElement("div");
-    e.className = "list";
-    const t = document.createElement("style");
-    t.textContent = this.getStyles(), e.appendChild(t);
-    for (let s = 0; s < 3; s++) {
-      const o = new fo(this._theme, 1 / (s + 1));
-      e.appendChild(o);
-    }
-    return this.shadow.appendChild(e), e;
-  }
-  getStyles() {
-    var e, t;
-    return `
-      :host {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        align-items: flex-start;
-        justify-content: flex-start;
-        overflow: hidden;
-      }
-
-      .list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      .list > * {
-        border-bottom: ${((t = (e = this._theme.inbox) == null ? void 0 : e.loading) == null ? void 0 : t.divider) ?? "1px solid red"};
-      }
-
-      .list > *:last-child {
-        border-bottom: none;
-      }
-    `;
-  }
-}
-customElements.get("courier-inbox-skeleton-list") || customElements.define("courier-inbox-skeleton-list", Pe);
-class Co extends HTMLElement {
-  constructor(e) {
-    super();
-    // Components
-    a(this, "skeletonLoadingList");
-    a(this, "observer");
-    a(this, "customItem");
-    // Handlers
-    a(this, "onPaginationTrigger");
-    this.onPaginationTrigger = e.onPaginationTrigger, this.customItem = e.customItem;
-    const t = this.attachShadow({ mode: "open" }), s = document.createElement("style");
-    if (s.textContent = this.getStyles(), t.appendChild(s), this.customItem)
-      t.appendChild(this.customItem);
-    else {
-      const o = document.createElement("div");
-      o.className = "skeleton-container", this.skeletonLoadingList = new Pe(e.theme), this.skeletonLoadingList.build(void 0), o.appendChild(this.skeletonLoadingList), t.appendChild(o);
-    }
-    this.observer = new IntersectionObserver((o) => {
-      o.forEach((n) => {
-        n.isIntersecting && this.onPaginationTrigger();
-      });
-    }), this.observer.observe(this);
-  }
-  getStyles() {
-    return `
-      :host {
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-      }
-
-      .skeleton-container {
-        height: 150%;
-      }
-    `;
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-}
-customElements.get("courier-inbox-pagination-list-item") || customElements.define("courier-inbox-pagination-list-item", Co);
-class vo extends HTMLElement {
-  constructor(e) {
-    super();
-    // Theme
-    a(this, "_themeSubscription");
-    // State
-    a(this, "_messages", []);
-    a(this, "_feedType", "inbox");
-    a(this, "_isLoading", !0);
-    a(this, "_error", null);
-    a(this, "_canPaginate", !1);
-    // Callbacks
-    a(this, "_onMessageClick", null);
-    a(this, "_onMessageActionClick", null);
-    a(this, "_onMessageLongPress", null);
-    a(this, "_onRefresh");
-    // Factories
-    a(this, "_onPaginationTrigger");
-    a(this, "_listItemFactory");
-    a(this, "_paginationItemFactory");
-    a(this, "_loadingStateFactory");
-    a(this, "_emptyStateFactory");
-    a(this, "_errorStateFactory");
-    this._themeSubscription = e.themeManager.subscribe((o) => {
-      this.refreshTheme();
-    }), this._onRefresh = e.onRefresh, this._onPaginationTrigger = e.onPaginationTrigger, this._onMessageClick = e.onMessageClick, this._onMessageActionClick = e.onMessageActionClick, this._onMessageLongPress = e.onMessageLongPress;
-    const t = this.attachShadow({ mode: "open" }), s = document.createElement("style");
-    s.textContent = this.getStyles(), t.appendChild(s);
-  }
-  // Getters
-  get messages() {
-    return this._messages;
-  }
-  getStyles() {
-    var t;
-    const e = (t = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : t.list;
-    return `
-      :host {
-        flex: 1;
-        width: 100%;
-        background-color: ${(e == null ? void 0 : e.backgroundColor) ?? r.white[500]};
-      }
-
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        height: 100%;
-      }
-    `;
-  }
-  reset() {
-    var t, s;
-    for (; (t = this.shadowRoot) != null && t.firstChild; )
-      this.shadowRoot.removeChild(this.shadowRoot.firstChild);
-    const e = document.createElement("style");
-    e.textContent = this.getStyles(), (s = this.shadowRoot) == null || s.appendChild(e);
-  }
-  setDataSet(e) {
-    this._messages = [...e.messages], this._canPaginate = !!e.canPaginate, this._error = null, this._isLoading = !1, this.render();
-  }
-  addPage(e) {
-    this._messages = [...this._messages, ...e.messages], this._canPaginate = !!e.canPaginate, this._error = null, this._isLoading = !1, this.render();
-  }
-  addMessage(e, t = 0) {
-    this._messages.splice(t, 0, e), this.render();
-  }
-  removeMessage(e = 0) {
-    this._messages.splice(e, 1), this.render();
-  }
-  updateMessage(e, t = 0) {
-    this._messages[t] = e, this.render();
-  }
-  setFeedType(e) {
-    this._feedType = e, this._error = null, this._isLoading = !0, this.render();
-  }
-  setLoading(e) {
-    this._error = null, this._isLoading = e, this.render();
-  }
-  setError(e) {
-    this._error = e, this._isLoading = !1, this._messages = [], this.render();
-  }
-  setErrorNoClient() {
-    this.setError(new Error("No user signed in"));
-  }
-  handleRetry() {
-    this._onRefresh();
-  }
-  handleRefresh() {
-    this._onRefresh();
-  }
-  render() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y, j, se, oe, ne, re, ae, he, ce, le, de, ue, pe, ge, me, be, _e, xe, fe, Ce, ve, ye;
-    this.reset();
-    const e = this._themeSubscription.manager.getTheme();
-    if (this._error) {
-      const l = (s = e.inbox) == null ? void 0 : s.error, D = new Ee({
-        title: {
-          text: ((o = l == null ? void 0 : l.title) == null ? void 0 : o.text) ?? this._error.message,
-          textColor: (h = (n = l == null ? void 0 : l.title) == null ? void 0 : n.font) == null ? void 0 : h.color,
-          fontFamily: (c = (d = l == null ? void 0 : l.title) == null ? void 0 : d.font) == null ? void 0 : c.family,
-          fontSize: (m = (u = l == null ? void 0 : l.title) == null ? void 0 : u.font) == null ? void 0 : m.size,
-          fontWeight: (x = (p = l == null ? void 0 : l.title) == null ? void 0 : p.font) == null ? void 0 : x.weight
-        },
-        button: {
-          text: (_ = l == null ? void 0 : l.button) == null ? void 0 : _.text,
-          backgroundColor: (b = l == null ? void 0 : l.button) == null ? void 0 : b.backgroundColor,
-          hoverBackgroundColor: (v = l == null ? void 0 : l.button) == null ? void 0 : v.hoverBackgroundColor,
-          activeBackgroundColor: (k = l == null ? void 0 : l.button) == null ? void 0 : k.activeBackgroundColor,
-          textColor: (S = (w = l == null ? void 0 : l.button) == null ? void 0 : w.font) == null ? void 0 : S.color,
-          fontFamily: (E = (M = l == null ? void 0 : l.button) == null ? void 0 : M.font) == null ? void 0 : E.family,
-          fontSize: (T = (I = l == null ? void 0 : l.button) == null ? void 0 : I.font) == null ? void 0 : T.size,
-          fontWeight: ($ = (P = l == null ? void 0 : l.button) == null ? void 0 : P.font) == null ? void 0 : $.weight,
-          shadow: (y = l == null ? void 0 : l.button) == null ? void 0 : y.shadow,
-          border: (B = l == null ? void 0 : l.button) == null ? void 0 : B.border,
-          borderRadius: (F = l == null ? void 0 : l.button) == null ? void 0 : F.borderRadius
-        }
-      });
-      D.build((H = this._errorStateFactory) == null ? void 0 : H.call(this, { feedType: this._feedType, error: this._error })), D.setButtonClickCallback(() => this.handleRetry()), (R = this.shadowRoot) == null || R.appendChild(D);
-      return;
-    }
-    if (this._isLoading) {
-      const l = new Pe(e);
-      l.build((z = this._loadingStateFactory) == null ? void 0 : z.call(this, { feedType: this._feedType })), (O = this.shadowRoot) == null || O.appendChild(l);
-      return;
-    }
-    if (this._messages.length === 0) {
-      const l = (N = e.inbox) == null ? void 0 : N.empty, D = new Ee({
-        title: {
-          text: ((U = l == null ? void 0 : l.title) == null ? void 0 : U.text) ?? `No ${this._feedType} messages yet`,
-          textColor: (Z = (V = l == null ? void 0 : l.title) == null ? void 0 : V.font) == null ? void 0 : Z.color,
-          fontFamily: (q = (J = l == null ? void 0 : l.title) == null ? void 0 : J.font) == null ? void 0 : q.family,
-          fontSize: (Y = (X = l == null ? void 0 : l.title) == null ? void 0 : X.font) == null ? void 0 : Y.size,
-          fontWeight: (se = (j = l == null ? void 0 : l.title) == null ? void 0 : j.font) == null ? void 0 : se.weight
-        },
-        button: {
-          text: (oe = l == null ? void 0 : l.button) == null ? void 0 : oe.text,
-          backgroundColor: (ne = l == null ? void 0 : l.button) == null ? void 0 : ne.backgroundColor,
-          hoverBackgroundColor: (re = l == null ? void 0 : l.button) == null ? void 0 : re.hoverBackgroundColor,
-          activeBackgroundColor: (ae = l == null ? void 0 : l.button) == null ? void 0 : ae.activeBackgroundColor,
-          textColor: (ce = (he = l == null ? void 0 : l.button) == null ? void 0 : he.font) == null ? void 0 : ce.color,
-          fontFamily: (de = (le = l == null ? void 0 : l.button) == null ? void 0 : le.font) == null ? void 0 : de.family,
-          fontSize: (pe = (ue = l == null ? void 0 : l.button) == null ? void 0 : ue.font) == null ? void 0 : pe.size,
-          fontWeight: (me = (ge = l == null ? void 0 : l.button) == null ? void 0 : ge.font) == null ? void 0 : me.weight,
-          shadow: (be = l == null ? void 0 : l.button) == null ? void 0 : be.shadow,
-          border: (_e = l == null ? void 0 : l.button) == null ? void 0 : _e.border,
-          borderRadius: (xe = l == null ? void 0 : l.button) == null ? void 0 : xe.borderRadius
-        }
-      });
-      D.build((fe = this._emptyStateFactory) == null ? void 0 : fe.call(this, { feedType: this._feedType })), D.setButtonClickCallback(() => this.handleRefresh()), (Ce = this.shadowRoot) == null || Ce.appendChild(D);
-      return;
-    }
-    const t = document.createElement("ul");
-    if ((ve = this.shadowRoot) == null || ve.appendChild(t), this._messages.forEach((l, D) => {
-      if (this._listItemFactory) {
-        t.appendChild(this._listItemFactory({ message: l, index: D }));
-        return;
-      }
-      const K = new xo(e);
-      K.setMessage(l, this._feedType), K.setOnItemClick((Q) => {
-        var W;
-        return (W = this._onMessageClick) == null ? void 0 : W.call(this, Q, D);
-      }), K.setOnItemActionClick((Q, W) => {
-        var ke;
-        return (ke = this._onMessageActionClick) == null ? void 0 : ke.call(this, Q, W, D);
-      }), K.setOnItemLongPress((Q) => {
-        var W;
-        return (W = this._onMessageLongPress) == null ? void 0 : W.call(this, Q, D);
-      }), t.appendChild(K);
-    }), this._canPaginate) {
-      const l = new Co({
-        theme: e,
-        customItem: (ye = this._paginationItemFactory) == null ? void 0 : ye.call(this, { feedType: this._feedType }),
-        onPaginationTrigger: () => {
-          var D;
-          return (D = this._onPaginationTrigger) == null ? void 0 : D.call(this, this._feedType);
-        }
-      });
-      t.appendChild(l);
-    }
-  }
-  // Factories
-  setLoadingStateFactory(e) {
-    this._loadingStateFactory = e, this.render();
-  }
-  setEmptyStateFactory(e) {
-    this._emptyStateFactory = e, this.render();
-  }
-  setErrorStateFactory(e) {
-    this._errorStateFactory = e, this.render();
-  }
-  setListItemFactory(e) {
-    this._listItemFactory = e, this.render();
-  }
-  setPaginationItemFactory(e) {
-    this._paginationItemFactory = e, this.render();
-  }
-  refreshTheme() {
-    this.render();
-  }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-customElements.get("courier-inbox-list") || customElements.define("courier-inbox-list", vo);
-class yo extends HTMLElement {
-  constructor(e) {
-    super();
-    // State
-    a(this, "_option");
-    a(this, "_isSelected");
-    // Components
-    a(this, "_content");
-    a(this, "_itemIcon");
-    a(this, "_title");
-    a(this, "_selectionIcon");
-    a(this, "_style");
-    // Theme
-    a(this, "_themeManager");
-    this._option = e.option, this._isSelected = e.isSelected, this._themeManager = e.themeManager;
-    const t = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style"), this._content = document.createElement("div"), this._content.className = "menu-item", this._itemIcon = new ie(this._option.icon.svg ?? f.inbox), this._itemIcon.setAttribute("size", "16"), this._title = document.createElement("p"), this._title.textContent = this._option.text;
-    const s = document.createElement("div");
-    s.className = "spacer", this._selectionIcon = new ie(f.check), this._content.appendChild(this._itemIcon), this._content.appendChild(this._title), this._content.appendChild(s), e.selectable && this._content.appendChild(this._selectionIcon), t.appendChild(this._style), t.appendChild(this._content), this._selectionIcon.style.display = this._isSelected ? "block" : "none", this.refreshTheme();
-  }
-  getStyles() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z;
-    const e = this._themeManager.getTheme();
-    return `
-      :host {
-        display: flex;
-        flex-direction: row;
-        padding: 6px 12px;
-        cursor: pointer;
-      }
-
-      :host(:hover) {
-        background-color: ${((h = (n = (o = (s = (t = e.inbox) == null ? void 0 : t.header) == null ? void 0 : s.menus) == null ? void 0 : o.popup) == null ? void 0 : n.list) == null ? void 0 : h.hoverBackgroundColor) ?? "red"};
-      }
-
-      :host(:active) {
-        background-color: ${((p = (m = (u = (c = (d = e.inbox) == null ? void 0 : d.header) == null ? void 0 : c.menus) == null ? void 0 : u.popup) == null ? void 0 : m.list) == null ? void 0 : p.activeBackgroundColor) ?? "red"};
-      }
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        gap: 12px;
-      }
-
-      .spacer {
-        flex: 1;
-      }
-
-      p {
-        margin: 0;
-        font-family: ${((w = (k = (v = (b = (_ = (x = e.inbox) == null ? void 0 : x.header) == null ? void 0 : _.menus) == null ? void 0 : b.popup) == null ? void 0 : v.list) == null ? void 0 : k.font) == null ? void 0 : w.family) ?? "inherit"};
-        font-weight: ${((P = (T = (I = (E = (M = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : M.menus) == null ? void 0 : E.popup) == null ? void 0 : I.list) == null ? void 0 : T.font) == null ? void 0 : P.weight) ?? "inherit"};
-        font-size: ${((R = (H = (F = (B = (y = ($ = e.inbox) == null ? void 0 : $.header) == null ? void 0 : y.menus) == null ? void 0 : B.popup) == null ? void 0 : F.list) == null ? void 0 : H.font) == null ? void 0 : R.size) ?? "14px"};
-        color: ${((Z = (V = (U = (N = (O = (z = e.inbox) == null ? void 0 : z.header) == null ? void 0 : O.menus) == null ? void 0 : N.popup) == null ? void 0 : U.list) == null ? void 0 : V.font) == null ? void 0 : Z.color) ?? "red"};
-        white-space: nowrap;
-      }
-
-      .check-icon {
-        display: none;
-      }
-    `;
-  }
-  refreshTheme() {
-    var e, t, s, o;
-    this._style.textContent = this.getStyles(), this._selectionIcon.updateColor(((e = this._option.selectionIcon) == null ? void 0 : e.color) ?? "red"), this._selectionIcon.updateSVG(((t = this._option.selectionIcon) == null ? void 0 : t.svg) ?? f.check), this._title.textContent = this._option.text ?? "Missing Text", this._itemIcon.updateColor(((s = this._option.icon) == null ? void 0 : s.color) ?? "red"), this._itemIcon.updateSVG(((o = this._option.icon) == null ? void 0 : o.svg) ?? f.inbox);
-  }
-}
-customElements.get("courier-inbox-filter-menu-item") || customElements.define("courier-inbox-filter-menu-item", yo);
-class Be extends HTMLElement {
-  constructor(e, t, s, o, n) {
-    super();
-    // Theme
-    a(this, "_themeSubscription");
-    // State
-    a(this, "_type");
-    a(this, "_selectedIndex", 0);
-    a(this, "_options");
-    a(this, "_selectable");
-    a(this, "_onMenuOpen");
-    // Components
-    a(this, "_menuButton");
-    a(this, "_menu");
-    a(this, "_style");
-    this._type = t, this._selectable = s, this._options = o, this._selectedIndex = 0, this._onMenuOpen = n;
-    const h = this.attachShadow({ mode: "open" });
-    this._menuButton = new Se(t === "filters" ? f.filter : f.overflow), this._menu = document.createElement("div"), this._menu.className = `menu ${t}`, this._style = document.createElement("style"), h.appendChild(this._style), h.appendChild(this._menuButton), h.appendChild(this._menu), this._menuButton.addEventListener("click", this.toggleMenu.bind(this)), document.addEventListener("click", this.handleOutsideClick.bind(this)), this._themeSubscription = e.subscribe((d) => {
-      this.refreshTheme();
-    }), this.refreshTheme();
-  }
-  getStyles() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T;
-    const e = this._themeSubscription.manager.getTheme();
-    return `
-      :host {
-        position: relative;
-        display: inline-block;
-      }
-
-      .menu {
-        display: none;
-        position: absolute;
-        top: 42px;
-        right: -6px;
-        border-radius: ${((n = (o = (s = (t = e.inbox) == null ? void 0 : t.header) == null ? void 0 : s.menus) == null ? void 0 : o.popup) == null ? void 0 : n.borderRadius) ?? "6px"};
-        border: ${((u = (c = (d = (h = e.inbox) == null ? void 0 : h.header) == null ? void 0 : d.menus) == null ? void 0 : c.popup) == null ? void 0 : u.border) ?? "1px solid red"};
-        background: ${((_ = (x = (p = (m = e.inbox) == null ? void 0 : m.header) == null ? void 0 : p.menus) == null ? void 0 : x.popup) == null ? void 0 : _.backgroundColor) ?? "red"};
-        box-shadow: ${((w = (k = (v = (b = e.inbox) == null ? void 0 : b.header) == null ? void 0 : v.menus) == null ? void 0 : k.popup) == null ? void 0 : w.shadow) ?? "0 4px 12px 0 red"};
-        z-index: 1000;
-        min-width: 200px;
-        overflow: hidden;
-        padding: 4px 0;
-      }
-
-      courier-inbox-filter-menu-item {
-        border-bottom: ${((T = (I = (E = (M = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : M.menus) == null ? void 0 : E.popup) == null ? void 0 : I.list) == null ? void 0 : T.divider) ?? "none"};
-      }
-
-      courier-inbox-filter-menu-item:last-child {
-        border-bottom: none;
-      }
-    `;
-  }
-  refreshTheme() {
-    var h, d, c, u, m, p;
-    this._style.textContent = this.getStyles();
-    const t = (d = (h = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : h.header) == null ? void 0 : d.menus, s = this._type === "filters", o = s ? (c = t == null ? void 0 : t.filters) == null ? void 0 : c.button : (u = t == null ? void 0 : t.actions) == null ? void 0 : u.button, n = s ? f.filter : f.overflow;
-    this._menuButton.updateIconSVG(((m = o == null ? void 0 : o.icon) == null ? void 0 : m.svg) ?? n), this._menuButton.updateIconColor(((p = o == null ? void 0 : o.icon) == null ? void 0 : p.color) ?? "red"), this._menuButton.updateBackgroundColor((o == null ? void 0 : o.backgroundColor) ?? "transparent"), this._menuButton.updateHoverBackgroundColor((o == null ? void 0 : o.hoverBackgroundColor) ?? "red"), this._menuButton.updateActiveBackgroundColor((o == null ? void 0 : o.activeBackgroundColor) ?? "red"), this.refreshMenuItems();
-  }
-  setOptions(e) {
-    this._options = e, this.refreshMenuItems();
-  }
-  refreshMenuItems() {
-    this._menu.innerHTML = "", this._options.forEach((e, t) => {
-      const s = new yo({
-        option: e,
-        selectable: this._selectable,
-        isSelected: this._selectedIndex === t,
-        themeManager: this._themeSubscription.manager
-      });
-      s.addEventListener("click", () => {
-        this._selectedIndex = t, e.onClick(e), this.refreshMenuItems(), this.closeMenu();
-      }), this._menu.appendChild(s);
-    });
-  }
-  toggleMenu(e) {
-    e.stopPropagation();
-    const t = this._menu.style.display !== "block";
-    this._menu.style.display = t ? "block" : "none", t && this._onMenuOpen();
-  }
-  handleOutsideClick(e) {
-    this.contains(e.target) || this.closeMenu();
-  }
-  closeMenu() {
-    this._menu.style.display = "none";
-  }
-  selectOption(e) {
-    this._selectedIndex = this._options.findIndex((t) => t.id === e.id), this.refreshMenuItems();
-  }
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-customElements.get("courier-inbox-option-menu") || customElements.define("courier-inbox-option-menu", Be);
-class $e extends HTMLElement {
-  constructor(e) {
-    super();
-    // Theme
-    a(this, "_themeSubscription");
-    // State
-    a(this, "_location");
-    a(this, "_count", 0);
-    // Elements
-    a(this, "_badge");
-    a(this, "_style");
-    this._location = e.location, this._themeSubscription = e.themeBus.subscribe((s) => {
-      this.refreshTheme(this._location);
-    });
-    const t = this.attachShadow({ mode: "open" });
-    this._badge = document.createElement("span"), this._badge.className = "unread-badge", this._style = document.createElement("style"), this._style.textContent = this.getStyles(this._location), t.appendChild(this._style), t.appendChild(this._badge);
-  }
-  getStyles(e) {
-    var c, u, m, p, x, _, b;
-    const t = this._themeSubscription.manager.getTheme(), s = e === "button" ? (u = (c = t.popup) == null ? void 0 : c.button) == null ? void 0 : u.unreadIndicator : (x = (p = (m = t.inbox) == null ? void 0 : m.header) == null ? void 0 : p.filters) == null ? void 0 : x.unreadIndicator, o = s == null ? void 0 : s.backgroundColor, n = s == null ? void 0 : s.borderRadius, h = (_ = s == null ? void 0 : s.font) == null ? void 0 : _.color, d = (b = s == null ? void 0 : s.font) == null ? void 0 : b.size;
-    return `
-      :host {
-        display: inline-block;
-      }
-
-      .unread-badge {
-        background-color: ${o};
-        color: ${h};
-        border-radius: ${n};
-        padding: 4px 8px;
-        font-size: ${d};
-        text-align: center;
-        display: none;
-        pointer-events: none;
-      }
-    `;
-  }
-  setCount(e) {
-    this._count = e, this.updateBadge();
-  }
-  refreshTheme(e) {
-    this._location = e, this.updateBadge();
-  }
-  updateBadge() {
-    this._style.textContent = this.getStyles(this._location), this._count > 0 ? (this._badge.textContent = this._count.toString(), this._badge.style.display = "block") : this._badge.style.display = "none";
-  }
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-customElements.get("courier-unread-count-badge") || customElements.define("courier-unread-count-badge", $e);
-class ko extends HTMLElement {
-  constructor(e, t) {
-    super();
-    // Theme
-    a(this, "_themeSubscription");
-    // State
-    a(this, "_option");
-    a(this, "_feedType");
-    // Components
-    a(this, "_titleElement");
-    a(this, "_iconElement");
-    a(this, "_unreadBadge");
-    a(this, "_container");
-    a(this, "_style");
-    this._option = t;
-    const s = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style"), this._container = document.createElement("div"), this._container.className = "title-section", this._iconElement = new ie(void 0, this._option.icon.svg), this._titleElement = document.createElement("h2"), this._unreadBadge = new $e({
-      themeBus: e,
-      location: "header"
-    }), this._container.appendChild(this._iconElement), this._container.appendChild(this._titleElement), this._container.appendChild(this._unreadBadge), s.appendChild(this._style), s.appendChild(this._container), this._themeSubscription = e.subscribe((o) => {
-      this.refreshTheme(this._feedType ?? "inbox");
-    }), this.refreshTheme(this._feedType ?? "inbox");
-  }
-  getStyles() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w;
-    const e = this._themeSubscription.manager.getTheme();
-    return `
-      .title-section {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        position: relative;
-      }
-
-      courier-icon {
-        display: flex;
-        align-items: center;
-      }
-
-      h2 {
-        margin: 0;
-        font-family: ${((n = (o = (s = (t = e.inbox) == null ? void 0 : t.header) == null ? void 0 : s.filters) == null ? void 0 : o.font) == null ? void 0 : n.family) ?? "inherit"};
-        font-size: ${((u = (c = (d = (h = e.inbox) == null ? void 0 : h.header) == null ? void 0 : d.filters) == null ? void 0 : c.font) == null ? void 0 : u.size) ?? "18px"};
-        font-weight: ${((_ = (x = (p = (m = e.inbox) == null ? void 0 : m.header) == null ? void 0 : p.filters) == null ? void 0 : x.font) == null ? void 0 : _.weight) ?? "500"};
-        color: ${((w = (k = (v = (b = e.inbox) == null ? void 0 : b.header) == null ? void 0 : v.filters) == null ? void 0 : k.font) == null ? void 0 : w.color) ?? "red"};
-      }
-
-      courier-unread-count-badge {
-        margin-left: 4px;
-      }
-    `;
-  }
-  refreshTheme(e) {
-    this._feedType = e, this._style.textContent = this.getStyles(), this._unreadBadge.refreshTheme("header"), this.updateFilter();
-  }
-  updateSelectedOption(e, t, s) {
-    this._option = e, this._feedType = t, this._unreadBadge.setCount(s), this.updateFilter();
-  }
-  updateFilter() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R;
-    const e = this._themeSubscription.manager.getTheme();
-    switch (this._feedType) {
-      case "inbox":
-        this._titleElement.textContent = ((n = (o = (s = (t = e.inbox) == null ? void 0 : t.header) == null ? void 0 : s.filters) == null ? void 0 : o.inbox) == null ? void 0 : n.text) ?? "Inbox", this._iconElement.updateSVG(((m = (u = (c = (d = (h = e.inbox) == null ? void 0 : h.header) == null ? void 0 : d.filters) == null ? void 0 : c.inbox) == null ? void 0 : u.icon) == null ? void 0 : m.svg) ?? f.inbox), this._iconElement.updateColor(((v = (b = (_ = (x = (p = e.inbox) == null ? void 0 : p.header) == null ? void 0 : x.filters) == null ? void 0 : _.inbox) == null ? void 0 : b.icon) == null ? void 0 : v.color) ?? "red");
-        break;
-      case "archive":
-        this._titleElement.textContent = ((M = (S = (w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters) == null ? void 0 : S.archive) == null ? void 0 : M.text) ?? "Archive", this._iconElement.updateSVG((($ = (P = (T = (I = (E = e.inbox) == null ? void 0 : E.header) == null ? void 0 : I.filters) == null ? void 0 : T.archive) == null ? void 0 : P.icon) == null ? void 0 : $.svg) ?? f.archive), this._iconElement.updateColor(((R = (H = (F = (B = (y = e.inbox) == null ? void 0 : y.header) == null ? void 0 : B.filters) == null ? void 0 : F.archive) == null ? void 0 : H.icon) == null ? void 0 : R.color) ?? "red");
-        break;
-    }
-  }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-customElements.get("courier-inbox-header-title") || customElements.define("courier-inbox-header-title", ko);
-class wo extends Le {
-  constructor(e) {
-    super();
-    // Theme
-    a(this, "_themeSubscription");
-    // State
-    a(this, "_feedType", "inbox");
-    a(this, "_unreadCount", 0);
-    // Components
-    a(this, "_titleSection");
-    a(this, "_filterMenu");
-    a(this, "_actionMenu");
-    a(this, "_style");
-    // Callbacks
-    a(this, "_onFeedTypeChange");
-    this._themeSubscription = e.themeManager.subscribe((t) => {
-      this.refreshTheme();
-    }), this._onFeedTypeChange = e.onFeedTypeChange;
-  }
-  // Menu options
-  getFilterOptions() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y;
-    const e = this._themeSubscription.manager.getTheme(), t = (n = (o = (s = e.inbox) == null ? void 0 : s.header) == null ? void 0 : o.menus) == null ? void 0 : n.filters;
-    return [
-      {
-        id: "inbox",
-        text: ((h = t == null ? void 0 : t.inbox) == null ? void 0 : h.text) ?? "Inbox",
-        icon: {
-          color: ((c = (d = t == null ? void 0 : t.inbox) == null ? void 0 : d.icon) == null ? void 0 : c.color) ?? "red",
-          svg: ((m = (u = t == null ? void 0 : t.inbox) == null ? void 0 : u.icon) == null ? void 0 : m.svg) ?? f.inbox
-        },
-        selectionIcon: {
-          color: ((k = (v = (b = (_ = (x = (p = e.inbox) == null ? void 0 : p.header) == null ? void 0 : x.menus) == null ? void 0 : _.popup) == null ? void 0 : b.list) == null ? void 0 : v.selectionIcon) == null ? void 0 : k.color) ?? "red",
-          svg: ((T = (I = (E = (M = (S = (w = e.inbox) == null ? void 0 : w.header) == null ? void 0 : S.menus) == null ? void 0 : M.popup) == null ? void 0 : E.list) == null ? void 0 : I.selectionIcon) == null ? void 0 : T.svg) ?? f.check
-        },
-        onClick: (j) => {
-          this.handleOptionMenuItemClick("inbox", j);
-        }
-      },
-      {
-        id: "archive",
-        text: ((P = t == null ? void 0 : t.archive) == null ? void 0 : P.text) ?? "Archive",
-        icon: {
-          color: ((y = ($ = t == null ? void 0 : t.archive) == null ? void 0 : $.icon) == null ? void 0 : y.color) ?? "red",
-          svg: ((F = (B = t == null ? void 0 : t.archive) == null ? void 0 : B.icon) == null ? void 0 : F.svg) ?? f.archive
-        },
-        selectionIcon: {
-          color: ((U = (N = (O = (z = (R = (H = e.inbox) == null ? void 0 : H.header) == null ? void 0 : R.menus) == null ? void 0 : z.popup) == null ? void 0 : O.list) == null ? void 0 : N.selectionIcon) == null ? void 0 : U.color) ?? "red",
-          svg: ((Y = (X = (q = (J = (Z = (V = e.inbox) == null ? void 0 : V.header) == null ? void 0 : Z.menus) == null ? void 0 : J.popup) == null ? void 0 : q.list) == null ? void 0 : X.selectionIcon) == null ? void 0 : Y.svg) ?? f.check
-        },
-        onClick: (j) => {
-          this.handleOptionMenuItemClick("archive", j);
-        }
-      }
-    ];
-  }
-  getActionOptions() {
-    var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E;
-    const t = (n = (o = (s = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : s.header) == null ? void 0 : o.menus) == null ? void 0 : n.actions;
-    return [
-      {
-        id: "markAllRead",
-        text: ((h = t == null ? void 0 : t.markAllRead) == null ? void 0 : h.text) ?? "Mark All as Read",
-        icon: {
-          color: ((c = (d = t == null ? void 0 : t.markAllRead) == null ? void 0 : d.icon) == null ? void 0 : c.color) ?? "red",
-          svg: ((m = (u = t == null ? void 0 : t.markAllRead) == null ? void 0 : u.icon) == null ? void 0 : m.svg) ?? f.inbox
-        },
-        selectionIcon: null,
-        onClick: (I) => {
-          A.shared.readAllMessages({ canCallApi: !0 });
-        }
-      },
-      {
-        id: "archiveAll",
-        text: ((p = t == null ? void 0 : t.archiveAll) == null ? void 0 : p.text) ?? "Archive All",
-        icon: {
-          color: ((_ = (x = t == null ? void 0 : t.archiveAll) == null ? void 0 : x.icon) == null ? void 0 : _.color) ?? "red",
-          svg: ((v = (b = t == null ? void 0 : t.archiveAll) == null ? void 0 : b.icon) == null ? void 0 : v.svg) ?? f.archive
-        },
-        selectionIcon: null,
-        onClick: (I) => {
-          var T;
-          alert(JSON.stringify((T = C.shared.client) == null ? void 0 : T.options));
-        }
-      },
-      {
-        id: "archiveRead",
-        text: ((k = t == null ? void 0 : t.archiveRead) == null ? void 0 : k.text) ?? "Archive Read",
-        icon: {
-          color: ((S = (w = t == null ? void 0 : t.archiveRead) == null ? void 0 : w.icon) == null ? void 0 : S.color) ?? "red",
-          svg: ((E = (M = t == null ? void 0 : t.archiveRead) == null ? void 0 : M.icon) == null ? void 0 : E.svg) ?? f.archive
-        },
-        selectionIcon: null,
-        onClick: (I) => {
-          A.shared.archiveReadMessages({ canCallApi: !0 });
-        }
-      }
-    ];
-  }
-  static get observedAttributes() {
-    return ["icon", "title", "feed-type"];
-  }
-  refreshTheme() {
-    var s, o, n, h, d, c, u;
-    const e = this._themeSubscription.manager.getTheme(), t = (s = this.shadow) == null ? void 0 : s.querySelector(".courier-inbox-header");
-    t && (t.style.backgroundColor = ((n = (o = e.inbox) == null ? void 0 : o.header) == null ? void 0 : n.backgroundColor) ?? r.white[500], t.style.boxShadow = ((d = (h = e.inbox) == null ? void 0 : h.header) == null ? void 0 : d.shadow) ?? `0px 1px 0px 0px ${r.gray[500]}`), (c = this._filterMenu) == null || c.setOptions(this.getFilterOptions()), (u = this._actionMenu) == null || u.setOptions(this.getActionOptions());
-  }
-  handleOptionMenuItemClick(e, t) {
-    this._feedType = e, this._titleSection && this._titleSection.updateSelectedOption(t, this._feedType, this._feedType === "inbox" ? this._unreadCount : 0), this._onFeedTypeChange(e);
-  }
-  render(e) {
-    this._feedType = e.feedType, this._unreadCount = e.unreadCount, this.refreshTitleSection();
-  }
-  refreshTitleSection() {
-    var t, s;
-    const e = this.getFilterOptions().find((o) => ["inbox", "archive"].includes(o.id) && o.id === this._feedType);
-    e && ((t = this._titleSection) == null || t.updateSelectedOption(e, this._feedType, this._feedType === "inbox" ? this._unreadCount : 0), (s = this._filterMenu) == null || s.selectOption(e));
-  }
-  build(e) {
-    var t;
-    super.build(e), this._style = document.createElement("style"), this._style.textContent = this.getStyles(), (t = this.shadow) == null || t.appendChild(this._style), this.refreshTheme();
-  }
-  defaultElement() {
-    const e = this.getFilterOptions();
-    this._titleSection = new ko(this._themeSubscription.manager, e[0]), this._filterMenu = new Be(this._themeSubscription.manager, "filters", !0, e, () => {
-      var n;
-      (n = this._actionMenu) == null || n.closeMenu();
-    }), this._actionMenu = new Be(this._themeSubscription.manager, "actions", !1, this.getActionOptions(), () => {
-      var n;
-      (n = this._filterMenu) == null || n.closeMenu();
-    }), this._filterMenu.selectOption(e[0]);
-    const t = document.createElement("div");
-    t.className = "spacer";
-    const s = document.createElement("div");
-    s.className = "actions", s.appendChild(this._filterMenu), s.appendChild(this._actionMenu);
-    const o = document.createElement("div");
-    return o.className = "courier-inbox-header", o.appendChild(this._titleSection), o.appendChild(t), o.appendChild(s), o;
-  }
-  getStyles() {
-    return `
-      :host {
-        z-index: 100;
-      }
-
-      .courier-inbox-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 10px 10px 10px 16px;
-        background-color: ${r.white[500]};
-        box-shadow: 0px 1px 0px 0px ${r.gray[500]};
-      }
-
-      .header-content {
-        display: flex;
-        align-items: center;
-        flex: 1;
-      }
-
-      .spacer {
-        flex: 1;
-      }
-
-      .actions {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-    `;
-  }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-customElements.get("courier-inbox-header") || customElements.define("courier-inbox-header", wo);
-class So {
-  constructor(i) {
-    a(this, "events");
-    this.events = i;
-  }
-  remove() {
-    A.shared.removeDataStoreListener(this);
-  }
-}
-const we = {
-  popup: {
-    button: {
-      icon: {
-        color: r.black[500],
-        svg: f.inbox
-      },
-      backgroundColor: "transparent",
-      hoverBackgroundColor: r.black[50010],
-      activeBackgroundColor: r.black[50020],
-      unreadIndicator: {
-        font: {
-          color: r.white[500],
-          size: "14px",
-          family: void 0,
-          weight: void 0
-        },
-        backgroundColor: r.blue[500],
-        borderRadius: "12px"
-      }
-    },
-    window: {
-      backgroundColor: r.white[500],
-      borderRadius: "8px",
-      border: `1px solid ${r.gray[500]}`,
-      shadow: `0px 8px 16px -4px ${r.gray[500]}`
-    }
-  },
-  inbox: {
-    header: {
-      backgroundColor: r.white[500],
-      shadow: `0px 1px 0px 0px ${r.gray[500]}`,
-      filters: {
-        font: {
-          color: r.black[500],
-          family: void 0,
-          size: "18px"
-        },
-        inbox: {
-          icon: {
-            color: r.black[500],
-            svg: f.inbox
-          },
-          text: "Inbox"
-        },
-        archive: {
-          icon: {
-            color: r.black[500],
-            svg: f.archive
-          },
-          text: "Archive"
-        },
-        unreadIndicator: {
-          font: {
-            color: r.white[500],
-            family: void 0,
-            size: "14px"
-          },
-          backgroundColor: r.blue[500],
-          borderRadius: "12px"
-        }
-      },
-      menus: {
-        popup: {
-          backgroundColor: r.white[500],
-          border: `1px solid ${r.gray[500]}`,
-          borderRadius: "4px",
-          shadow: `0px 4px 8px -2px ${r.gray[500]}`,
-          list: {
-            hoverBackgroundColor: r.gray[200],
-            activeBackgroundColor: r.gray[500],
-            divider: "none",
-            font: {
-              color: r.black[500],
-              family: void 0,
-              size: "14px"
-            },
-            selectionIcon: {
-              color: r.black[500],
-              svg: f.check
-            }
-          }
-        },
-        filters: {
-          button: {
-            icon: {
-              color: r.black[500],
-              svg: f.filter
-            },
-            backgroundColor: "transparent",
-            hoverBackgroundColor: r.black[50010],
-            activeBackgroundColor: r.black[50020]
-          },
-          inbox: {
-            icon: {
-              color: r.black[500],
-              svg: f.inbox
-            },
-            text: "Inbox"
-          },
-          archive: {
-            icon: {
-              color: r.black[500],
-              svg: f.archive
-            },
-            text: "Archive"
-          }
-        },
-        actions: {
-          button: {
-            icon: {
-              color: r.black[500],
-              svg: f.overflow
-            },
-            backgroundColor: "transparent",
-            hoverBackgroundColor: r.black[50010],
-            activeBackgroundColor: r.black[50020]
-          },
-          markAllRead: {
-            icon: {
-              color: r.black[500],
-              svg: f.read
-            },
-            text: "Mark All as Read"
-          },
-          archiveAll: {
-            icon: {
-              color: r.black[500],
-              svg: f.archive
-            },
-            text: "Archive All"
-          },
-          archiveRead: {
-            icon: {
-              color: r.black[500],
-              svg: f.archiveRead
-            },
-            text: "Archive Read"
-          }
-        }
-      }
-    },
-    list: {
-      backgroundColor: r.white[500],
-      item: {
-        backgroundColor: "transparent",
-        unreadIndicatorColor: r.blue[500],
-        hoverBackgroundColor: r.gray[200],
-        activeBackgroundColor: r.gray[500],
-        actions: {
-          backgroundColor: "transparent",
-          hoverBackgroundColor: r.gray[200],
-          activeBackgroundColor: r.gray[500],
-          border: `1px solid ${r.gray[500]}`,
-          borderRadius: "4px",
-          shadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
-          font: {
-            color: r.black[500],
-            family: void 0,
-            size: "14px"
-          }
-        },
-        title: {
-          color: r.black[500],
-          family: void 0,
-          size: "14px"
-        },
-        subtitle: {
-          color: r.gray[600],
-          family: void 0,
-          size: "14px"
-        },
-        time: {
-          color: r.gray[600],
-          family: void 0,
-          size: "14px"
-        },
-        divider: `1px solid ${r.gray[200]}`,
-        menu: {
-          enabled: !0,
-          backgroundColor: r.white[500],
-          border: `1px solid ${r.gray[500]}`,
-          borderRadius: "4px",
-          shadow: `0px 2px 4px -2px ${r.gray[500]}`,
-          longPress: {
-            displayDuration: 4e3,
-            vibrationDuration: 50
-          },
-          item: {
-            hoverBackgroundColor: r.gray[200],
-            activeBackgroundColor: r.gray[500],
-            borderRadius: "0px",
-            read: {
-              color: r.black[500],
-              svg: f.read
-            },
-            unread: {
-              color: r.black[500],
-              svg: f.unread
-            },
-            archive: {
-              color: r.black[500],
-              svg: f.archive
-            },
-            unarchive: {
-              color: r.black[500],
-              svg: f.unarchive
-            }
-          }
-        }
-      }
-    },
-    loading: {
-      animation: {
-        barColor: r.gray[500],
-        barHeight: "14px",
-        barBorderRadius: "14px",
-        duration: "2s"
-      },
-      divider: `1px solid ${r.gray[200]}`
-    },
-    empty: {
-      title: {
-        font: {
-          size: "16px",
-          weight: "500",
-          color: r.black[500]
-        }
-      },
-      button: {
-        text: "Refresh"
-      }
-    },
-    error: {
-      title: {
-        font: {
-          size: "16px",
-          weight: "500",
-          color: r.black[500]
-        }
-      },
-      button: {
-        text: "Retry"
-      }
-    }
-  }
-}, Ae = {
-  popup: {
-    button: {
-      icon: {
-        color: r.white[500],
-        svg: f.inbox
-      },
-      backgroundColor: "transparent",
-      hoverBackgroundColor: r.white[50010],
-      activeBackgroundColor: r.white[50020],
-      unreadIndicator: {
-        font: {
-          color: r.white[500],
-          size: "14px",
-          family: void 0,
-          weight: void 0
-        },
-        backgroundColor: r.blue[500],
-        borderRadius: "12px"
-      }
-    },
-    window: {
-      backgroundColor: r.black[500],
-      borderRadius: "8px",
-      border: `1px solid ${r.gray[400]}`,
-      shadow: `0px 4px 8px -2px ${r.white[50020]}`
-    }
-  },
-  inbox: {
-    header: {
-      backgroundColor: r.black[500],
-      shadow: `0px 1px 0px 0px ${r.gray[400]}`,
-      filters: {
-        font: {
-          color: r.white[500],
-          family: void 0,
-          size: "18px"
-        },
-        inbox: {
-          icon: {
-            color: r.white[500],
-            svg: f.inbox
-          },
-          text: "Inbox"
-        },
-        archive: {
-          icon: {
-            color: r.white[500],
-            svg: f.archive
-          },
-          text: "Archive"
-        },
-        unreadIndicator: {
-          font: {
-            color: r.white[500],
-            family: void 0,
-            size: "14px"
-          },
-          backgroundColor: r.blue[500],
-          borderRadius: "12px"
-        }
-      },
-      menus: {
-        popup: {
-          backgroundColor: r.black[500],
-          border: `1px solid ${r.gray[400]}`,
-          borderRadius: "4px",
-          shadow: `0px 4px 8px -2px ${r.white[50020]}`,
-          list: {
-            hoverBackgroundColor: r.white[50010],
-            activeBackgroundColor: r.white[50020],
-            divider: "none",
-            font: {
-              color: r.white[500],
-              family: void 0,
-              size: "14px"
-            },
-            selectionIcon: {
-              color: r.white[500],
-              svg: f.check
-            }
-          }
-        },
-        filters: {
-          button: {
-            icon: {
-              color: r.white[500],
-              svg: f.filter
-            },
-            backgroundColor: "transparent",
-            hoverBackgroundColor: r.white[50010],
-            activeBackgroundColor: r.white[50020]
-          },
-          inbox: {
-            icon: {
-              color: r.white[500],
-              svg: f.inbox
-            },
-            text: "Inbox"
-          },
-          archive: {
-            icon: {
-              color: r.white[500],
-              svg: f.archive
-            },
-            text: "Archive"
-          }
-        },
-        actions: {
-          button: {
-            icon: {
-              color: r.white[500],
-              svg: f.overflow
-            },
-            backgroundColor: "transparent",
-            hoverBackgroundColor: r.white[50010],
-            activeBackgroundColor: r.white[50020]
-          },
-          markAllRead: {
-            icon: {
-              color: r.white[500],
-              svg: f.read
-            },
-            text: "Mark All as Read"
-          },
-          archiveAll: {
-            icon: {
-              color: r.white[500],
-              svg: f.archive
-            },
-            text: "Archive All"
-          },
-          archiveRead: {
-            icon: {
-              color: r.white[500],
-              svg: f.archiveRead
-            },
-            text: "Archive Read"
-          }
-        }
-      }
-    },
-    list: {
-      backgroundColor: r.black[500],
-      item: {
-        backgroundColor: "transparent",
-        unreadIndicatorColor: r.blue[500],
-        hoverBackgroundColor: r.white[50010],
-        activeBackgroundColor: r.white[50020],
-        actions: {
-          backgroundColor: "transparent",
-          hoverBackgroundColor: r.white[50010],
-          activeBackgroundColor: r.white[50020],
-          border: `1px solid ${r.gray[400]}`,
-          borderRadius: "4px",
-          shadow: `0px 1px 2px 0px ${r.white[50010]}`,
-          font: {
-            color: r.white[500],
-            family: void 0,
-            size: "14px"
-          }
-        },
-        title: {
-          color: r.white[500],
-          family: void 0,
-          size: "14px"
-        },
-        subtitle: {
-          color: r.gray[500],
-          family: void 0,
-          size: "14px"
-        },
-        time: {
-          color: r.gray[500],
-          family: void 0,
-          size: "12px"
-        },
-        divider: `1px solid ${r.gray[400]}`,
-        menu: {
-          enabled: !0,
-          backgroundColor: r.black[500],
-          border: `1px solid ${r.gray[400]}`,
-          borderRadius: "4px",
-          shadow: `0px 2px 4px -2px ${r.white[50020]}`,
-          longPress: {
-            displayDuration: 4e3,
-            vibrationDuration: 50
-          },
-          item: {
-            hoverBackgroundColor: r.white[50010],
-            activeBackgroundColor: r.white[50020],
-            borderRadius: "0px",
-            read: {
-              color: r.white[500],
-              svg: f.read
-            },
-            unread: {
-              color: r.white[500],
-              svg: f.unread
-            },
-            archive: {
-              color: r.white[500],
-              svg: f.archive
-            },
-            unarchive: {
-              color: r.white[500],
-              svg: f.unarchive
-            }
-          }
-        }
-      }
-    },
-    loading: {
-      animation: {
-        barColor: r.white[500],
-        barHeight: "14px",
-        barBorderRadius: "14px",
-        duration: "2s"
-      },
-      divider: `1px solid ${r.gray[400]}`
-    },
-    empty: {
-      title: {
-        font: {
-          size: "16px",
-          weight: "500",
-          color: r.white[500]
-        }
-      },
-      button: {
-        text: "Refresh"
-      }
-    },
-    error: {
-      title: {
-        font: {
-          size: "16px",
-          weight: "500",
-          color: r.white[500]
-        }
-      },
-      button: {
-        text: "Retry"
-      }
-    }
-  }
-}, $o = (g, i) => {
-  var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M, E, I, T, P, $, y, B, F, H, R, z, O, N, U, V, Z, J, q, X, Y, j, se, oe, ne, re, ae, he, ce, le, de, ue, pe, ge, me, be, _e, xe, fe, Ce, ve, ye, l, D, K, Q, W, ke, Fe, He, Re, ze, Oe, Ne, Ue, Ve, Ze, We, je, Ge, Je, qe, Xe, Ye, Ke, Qe, et, tt, it, st, ot, nt, rt, at, ht, ct, lt, dt, ut, pt, gt, mt, bt, _t, xt, ft, Ct, vt, yt, kt, wt, St, Mt, Et, It, Lt, Tt, Bt, At, Dt, Pt, $t, Ft, Ht, Rt, zt, Ot, Nt, Ut, Vt, Zt, Wt, jt, Gt, Jt, qt, Xt, Yt, Kt, Qt, ei, ti, ii, si, oi, ni, ri, ai, hi, ci, li, di, ui, pi, gi, mi, bi, _i, xi, fi, Ci, vi, yi, ki, wi, Si, Mi, Ei, Ii, Li, Ti, Bi, Ai, Di, Pi, $i, Fi, Hi, Ri, zi, Oi, Ni, Ui, Vi, Zi, Wi, ji, Gi, Ji, qi, Xi, Yi, Ki, Qi, es, ts, is, ss, os, ns, rs, as, hs, cs, ls, ds, us, ps, gs, ms, bs, _s, xs, fs, Cs, vs, ys, ks, ws, Ss, Ms, Es, Is, Ls, Ts, Bs, As, Ds, Ps, $s, Fs, Hs, Rs, zs, Os, Ns, Us, Vs, Zs, Ws, js, Gs, Js, qs, Xs, Ys, Ks, Qs, eo, to, io, so, oo, no, ro, ao, ho, co, lo, uo, po;
-  const e = g === "light" ? we : Ae;
-  return {
-    popup: {
-      button: {
-        ...(t = e.popup) == null ? void 0 : t.button,
-        ...(s = i.popup) == null ? void 0 : s.button,
-        icon: {
-          ...(n = (o = e.popup) == null ? void 0 : o.button) == null ? void 0 : n.icon,
-          ...(d = (h = i.popup) == null ? void 0 : h.button) == null ? void 0 : d.icon
-        },
-        unreadIndicator: {
-          ...(u = (c = e.popup) == null ? void 0 : c.button) == null ? void 0 : u.unreadIndicator,
-          ...(p = (m = i.popup) == null ? void 0 : m.button) == null ? void 0 : p.unreadIndicator
-        }
-      },
-      window: {
-        ...(x = e.popup) == null ? void 0 : x.window,
-        ...(_ = i.popup) == null ? void 0 : _.window
-      }
-    },
-    inbox: {
-      header: {
-        ...(b = e.inbox) == null ? void 0 : b.header,
-        ...(v = i.inbox) == null ? void 0 : v.header,
-        filters: {
-          ...(w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters,
-          ...(M = (S = i.inbox) == null ? void 0 : S.header) == null ? void 0 : M.filters,
-          inbox: {
-            ...(T = (I = (E = e.inbox) == null ? void 0 : E.header) == null ? void 0 : I.filters) == null ? void 0 : T.inbox,
-            ...(y = ($ = (P = i.inbox) == null ? void 0 : P.header) == null ? void 0 : $.filters) == null ? void 0 : y.inbox,
-            icon: {
-              ...(R = (H = (F = (B = e.inbox) == null ? void 0 : B.header) == null ? void 0 : F.filters) == null ? void 0 : H.inbox) == null ? void 0 : R.icon,
-              ...(U = (N = (O = (z = i.inbox) == null ? void 0 : z.header) == null ? void 0 : O.filters) == null ? void 0 : N.inbox) == null ? void 0 : U.icon
-            }
-          },
-          archive: {
-            ...(J = (Z = (V = e.inbox) == null ? void 0 : V.header) == null ? void 0 : Z.filters) == null ? void 0 : J.archive,
-            ...(Y = (X = (q = i.inbox) == null ? void 0 : q.header) == null ? void 0 : X.filters) == null ? void 0 : Y.archive,
-            icon: {
-              ...(ne = (oe = (se = (j = e.inbox) == null ? void 0 : j.header) == null ? void 0 : se.filters) == null ? void 0 : oe.archive) == null ? void 0 : ne.icon,
-              ...(ce = (he = (ae = (re = i.inbox) == null ? void 0 : re.header) == null ? void 0 : ae.filters) == null ? void 0 : he.archive) == null ? void 0 : ce.icon
-            }
-          },
-          unreadIndicator: {
-            ...(ue = (de = (le = e.inbox) == null ? void 0 : le.header) == null ? void 0 : de.filters) == null ? void 0 : ue.unreadIndicator,
-            ...(me = (ge = (pe = i.inbox) == null ? void 0 : pe.header) == null ? void 0 : ge.filters) == null ? void 0 : me.unreadIndicator
-          }
-        },
-        menus: {
-          ...(_e = (be = e.inbox) == null ? void 0 : be.header) == null ? void 0 : _e.menus,
-          ...(fe = (xe = i.inbox) == null ? void 0 : xe.header) == null ? void 0 : fe.menus,
-          popup: {
-            ...(ye = (ve = (Ce = e.inbox) == null ? void 0 : Ce.header) == null ? void 0 : ve.menus) == null ? void 0 : ye.popup,
-            ...(K = (D = (l = i.inbox) == null ? void 0 : l.header) == null ? void 0 : D.menus) == null ? void 0 : K.popup,
-            list: {
-              ...(Fe = (ke = (W = (Q = e.inbox) == null ? void 0 : Q.header) == null ? void 0 : W.menus) == null ? void 0 : ke.popup) == null ? void 0 : Fe.list,
-              ...(Oe = (ze = (Re = (He = i.inbox) == null ? void 0 : He.header) == null ? void 0 : Re.menus) == null ? void 0 : ze.popup) == null ? void 0 : Oe.list,
-              font: {
-                ...(We = (Ze = (Ve = (Ue = (Ne = e.inbox) == null ? void 0 : Ne.header) == null ? void 0 : Ue.menus) == null ? void 0 : Ve.popup) == null ? void 0 : Ze.list) == null ? void 0 : We.font,
-                ...(Xe = (qe = (Je = (Ge = (je = i.inbox) == null ? void 0 : je.header) == null ? void 0 : Ge.menus) == null ? void 0 : Je.popup) == null ? void 0 : qe.list) == null ? void 0 : Xe.font
-              },
-              selectionIcon: {
-                ...(tt = (et = (Qe = (Ke = (Ye = e.inbox) == null ? void 0 : Ye.header) == null ? void 0 : Ke.menus) == null ? void 0 : Qe.popup) == null ? void 0 : et.list) == null ? void 0 : tt.selectionIcon,
-                ...(rt = (nt = (ot = (st = (it = i.inbox) == null ? void 0 : it.header) == null ? void 0 : st.menus) == null ? void 0 : ot.popup) == null ? void 0 : nt.list) == null ? void 0 : rt.selectionIcon
-              }
-            }
-          },
-          filters: {
-            ...(ct = (ht = (at = e.inbox) == null ? void 0 : at.header) == null ? void 0 : ht.menus) == null ? void 0 : ct.filters,
-            ...(ut = (dt = (lt = i.inbox) == null ? void 0 : lt.header) == null ? void 0 : dt.menus) == null ? void 0 : ut.filters,
-            inbox: {
-              ...(bt = (mt = (gt = (pt = e.inbox) == null ? void 0 : pt.header) == null ? void 0 : gt.menus) == null ? void 0 : mt.filters) == null ? void 0 : bt.inbox,
-              ...(Ct = (ft = (xt = (_t = i.inbox) == null ? void 0 : _t.header) == null ? void 0 : xt.menus) == null ? void 0 : ft.filters) == null ? void 0 : Ct.inbox,
-              icon: {
-                ...(St = (wt = (kt = (yt = (vt = e.inbox) == null ? void 0 : vt.header) == null ? void 0 : yt.menus) == null ? void 0 : kt.filters) == null ? void 0 : wt.inbox) == null ? void 0 : St.icon,
-                ...(Tt = (Lt = (It = (Et = (Mt = i.inbox) == null ? void 0 : Mt.header) == null ? void 0 : Et.menus) == null ? void 0 : It.filters) == null ? void 0 : Lt.inbox) == null ? void 0 : Tt.icon
-              }
-            },
-            archive: {
-              ...(Pt = (Dt = (At = (Bt = e.inbox) == null ? void 0 : Bt.header) == null ? void 0 : At.menus) == null ? void 0 : Dt.filters) == null ? void 0 : Pt.archive,
-              ...(Rt = (Ht = (Ft = ($t = i.inbox) == null ? void 0 : $t.header) == null ? void 0 : Ft.menus) == null ? void 0 : Ht.filters) == null ? void 0 : Rt.archive,
-              icon: {
-                ...(Vt = (Ut = (Nt = (Ot = (zt = e.inbox) == null ? void 0 : zt.header) == null ? void 0 : Ot.menus) == null ? void 0 : Nt.filters) == null ? void 0 : Ut.archive) == null ? void 0 : Vt.icon,
-                ...(Jt = (Gt = (jt = (Wt = (Zt = i.inbox) == null ? void 0 : Zt.header) == null ? void 0 : Wt.menus) == null ? void 0 : jt.filters) == null ? void 0 : Gt.archive) == null ? void 0 : Jt.icon
-              }
-            }
-          },
-          actions: {
-            ...(Yt = (Xt = (qt = e.inbox) == null ? void 0 : qt.header) == null ? void 0 : Xt.menus) == null ? void 0 : Yt.actions,
-            ...(ei = (Qt = (Kt = i.inbox) == null ? void 0 : Kt.header) == null ? void 0 : Qt.menus) == null ? void 0 : ei.actions,
-            markAllRead: {
-              ...(oi = (si = (ii = (ti = e.inbox) == null ? void 0 : ti.header) == null ? void 0 : ii.menus) == null ? void 0 : si.actions) == null ? void 0 : oi.markAllRead,
-              ...(hi = (ai = (ri = (ni = i.inbox) == null ? void 0 : ni.header) == null ? void 0 : ri.menus) == null ? void 0 : ai.actions) == null ? void 0 : hi.markAllRead,
-              icon: {
-                ...(pi = (ui = (di = (li = (ci = e.inbox) == null ? void 0 : ci.header) == null ? void 0 : li.menus) == null ? void 0 : di.actions) == null ? void 0 : ui.markAllRead) == null ? void 0 : pi.icon,
-                ...(xi = (_i = (bi = (mi = (gi = i.inbox) == null ? void 0 : gi.header) == null ? void 0 : mi.menus) == null ? void 0 : bi.actions) == null ? void 0 : _i.markAllRead) == null ? void 0 : xi.icon
-              }
-            },
-            archiveAll: {
-              ...(yi = (vi = (Ci = (fi = e.inbox) == null ? void 0 : fi.header) == null ? void 0 : Ci.menus) == null ? void 0 : vi.actions) == null ? void 0 : yi.archiveAll,
-              ...(Mi = (Si = (wi = (ki = i.inbox) == null ? void 0 : ki.header) == null ? void 0 : wi.menus) == null ? void 0 : Si.actions) == null ? void 0 : Mi.archiveAll,
-              icon: {
-                ...(Bi = (Ti = (Li = (Ii = (Ei = e.inbox) == null ? void 0 : Ei.header) == null ? void 0 : Ii.menus) == null ? void 0 : Li.actions) == null ? void 0 : Ti.archiveAll) == null ? void 0 : Bi.icon,
-                ...(Fi = ($i = (Pi = (Di = (Ai = i.inbox) == null ? void 0 : Ai.header) == null ? void 0 : Di.menus) == null ? void 0 : Pi.actions) == null ? void 0 : $i.archiveAll) == null ? void 0 : Fi.icon
-              }
-            },
-            archiveRead: {
-              ...(Oi = (zi = (Ri = (Hi = e.inbox) == null ? void 0 : Hi.header) == null ? void 0 : Ri.menus) == null ? void 0 : zi.actions) == null ? void 0 : Oi.archiveRead,
-              ...(Zi = (Vi = (Ui = (Ni = i.inbox) == null ? void 0 : Ni.header) == null ? void 0 : Ui.menus) == null ? void 0 : Vi.actions) == null ? void 0 : Zi.archiveRead,
-              icon: {
-                ...(qi = (Ji = (Gi = (ji = (Wi = e.inbox) == null ? void 0 : Wi.header) == null ? void 0 : ji.menus) == null ? void 0 : Gi.actions) == null ? void 0 : Ji.archiveRead) == null ? void 0 : qi.icon,
-                ...(es = (Qi = (Ki = (Yi = (Xi = i.inbox) == null ? void 0 : Xi.header) == null ? void 0 : Yi.menus) == null ? void 0 : Ki.actions) == null ? void 0 : Qi.archiveRead) == null ? void 0 : es.icon
-              }
-            }
-          }
-        }
-      },
-      list: {
-        ...(ts = e.inbox) == null ? void 0 : ts.list,
-        ...(is = i.inbox) == null ? void 0 : is.list,
-        item: {
-          ...(os = (ss = e.inbox) == null ? void 0 : ss.list) == null ? void 0 : os.item,
-          ...(rs = (ns = i.inbox) == null ? void 0 : ns.list) == null ? void 0 : rs.item,
-          menu: {
-            ...(cs = (hs = (as = e.inbox) == null ? void 0 : as.list) == null ? void 0 : hs.item) == null ? void 0 : cs.menu,
-            ...(us = (ds = (ls = i.inbox) == null ? void 0 : ls.list) == null ? void 0 : ds.item) == null ? void 0 : us.menu,
-            item: {
-              ...(bs = (ms = (gs = (ps = e.inbox) == null ? void 0 : ps.list) == null ? void 0 : gs.item) == null ? void 0 : ms.menu) == null ? void 0 : bs.item,
-              ...(Cs = (fs = (xs = (_s = i.inbox) == null ? void 0 : _s.list) == null ? void 0 : xs.item) == null ? void 0 : fs.menu) == null ? void 0 : Cs.item,
-              read: {
-                ...(Ss = (ws = (ks = (ys = (vs = e.inbox) == null ? void 0 : vs.list) == null ? void 0 : ys.item) == null ? void 0 : ks.menu) == null ? void 0 : ws.item) == null ? void 0 : Ss.read,
-                ...(Ts = (Ls = (Is = (Es = (Ms = i.inbox) == null ? void 0 : Ms.list) == null ? void 0 : Es.item) == null ? void 0 : Is.menu) == null ? void 0 : Ls.item) == null ? void 0 : Ts.read
-              },
-              unread: {
-                ...($s = (Ps = (Ds = (As = (Bs = e.inbox) == null ? void 0 : Bs.list) == null ? void 0 : As.item) == null ? void 0 : Ds.menu) == null ? void 0 : Ps.item) == null ? void 0 : $s.unread,
-                ...(Os = (zs = (Rs = (Hs = (Fs = i.inbox) == null ? void 0 : Fs.list) == null ? void 0 : Hs.item) == null ? void 0 : Rs.menu) == null ? void 0 : zs.item) == null ? void 0 : Os.unread
-              },
-              archive: {
-                ...(Ws = (Zs = (Vs = (Us = (Ns = e.inbox) == null ? void 0 : Ns.list) == null ? void 0 : Us.item) == null ? void 0 : Vs.menu) == null ? void 0 : Zs.item) == null ? void 0 : Ws.archive,
-                ...(Xs = (qs = (Js = (Gs = (js = i.inbox) == null ? void 0 : js.list) == null ? void 0 : Gs.item) == null ? void 0 : Js.menu) == null ? void 0 : qs.item) == null ? void 0 : Xs.archive
-              },
-              unarchive: {
-                ...(to = (eo = (Qs = (Ks = (Ys = e.inbox) == null ? void 0 : Ys.list) == null ? void 0 : Ks.item) == null ? void 0 : Qs.menu) == null ? void 0 : eo.item) == null ? void 0 : to.unarchive,
-                ...(ro = (no = (oo = (so = (io = i.inbox) == null ? void 0 : io.list) == null ? void 0 : so.item) == null ? void 0 : oo.menu) == null ? void 0 : no.item) == null ? void 0 : ro.unarchive
-              }
-            }
-          }
-        }
-      },
-      loading: {
-        ...(ao = e.inbox) == null ? void 0 : ao.loading,
-        ...(ho = i.inbox) == null ? void 0 : ho.loading
-      },
-      empty: {
-        ...(co = e.inbox) == null ? void 0 : co.empty,
-        ...(lo = i.inbox) == null ? void 0 : lo.empty
-      },
-      error: {
-        ...(uo = e.inbox) == null ? void 0 : uo.error,
-        ...(po = i.inbox) == null ? void 0 : po.error
-      }
-    }
-  };
-};
-class Mo {
-  constructor(i) {
-    // Event IDs
-    a(this, "THEME_CHANGE_EVENT", "courier_inbox_theme_change");
-    // State
-    a(this, "_theme");
-    a(this, "_lightTheme", we);
-    a(this, "_darkTheme", Ae);
-    a(this, "_target");
-    a(this, "_subscriptions", []);
-    // System theme
-    a(this, "_userMode");
-    a(this, "_systemMode");
-    a(this, "_systemThemeCleanup");
-    this._theme = i, this._target = new EventTarget(), this._userMode = "system", this._systemMode = go(), this.setLightTheme(we), this.setDarkTheme(Ae), this._systemThemeCleanup = mo((e) => {
-      this._systemMode = e, this.updateTheme();
-    });
-  }
-  setLightTheme(i) {
-    this._lightTheme = i, this._systemMode === "light" && this.updateTheme();
-  }
-  setDarkTheme(i) {
-    this._darkTheme = i, this._systemMode === "dark" && this.updateTheme();
-  }
-  /**
-   * Get the current system theme
-   */
-  get currentSystemTheme() {
-    return this._systemMode;
-  }
-  /**
-   * Get the current theme
-   */
-  getTheme() {
-    return this._theme;
-  }
-  /**
-   * Update the theme
-   */
-  updateTheme() {
-    const i = this._userMode === "system" ? this._systemMode : this._userMode, e = i === "light" ? this._lightTheme : this._darkTheme, t = $o(i, e);
-    this.setTheme(t);
-  }
-  /**
-   * Set the theme and notify all listeners
-   */
-  setTheme(i) {
-    i !== this._theme && (this._theme = i, this._target.dispatchEvent(new CustomEvent(this.THEME_CHANGE_EVENT, {
-      detail: { theme: i }
-    })));
-  }
-  /**
-   * Set the mode and notify all listeners
-   */
-  setMode(i) {
-    this._userMode = i, this.updateTheme();
-  }
-  /**
-   * Subscribe to theme changes
-   * @param {Function} callback - Function to run when the theme changes
-   * @returns {CourierInboxThemeSubscription} - Object with remove method to stop listening
-   */
-  subscribe(i) {
-    const e = new AbortController();
-    this._target.addEventListener(this.THEME_CHANGE_EVENT, (s) => {
-      i(s.detail.theme);
-    }, { signal: e.signal });
-    const t = {
-      manager: this,
-      unsubscribe: () => {
-        e.abort();
-        const s = this._subscriptions.indexOf(t);
-        s > -1 && this._subscriptions.splice(s, 1);
-      }
-    };
-    return this._subscriptions.push(t), t;
-  }
-  /**
-   * Clean up event listeners
-   */
-  cleanup() {
-    this._systemThemeCleanup && this._systemThemeCleanup(), this._subscriptions.forEach((i) => i.unsubscribe()), this._subscriptions = [];
-  }
-}
-class Eo extends HTMLElement {
-  constructor(e) {
-    var t;
-    super();
-    // State
-    a(this, "_currentFeed", "inbox");
-    // Theming
-    a(this, "_themeManager");
-    // Components
-    a(this, "_shadow");
-    a(this, "_list");
-    a(this, "_datastoreListener");
-    a(this, "_authListener");
-    a(this, "_style");
-    // Header
-    a(this, "_header");
-    a(this, "_headerFactory");
-    // List
-    a(this, "_onMessageClick");
-    a(this, "_onMessageActionClick");
-    a(this, "_onMessageLongPress");
-    // Default props
-    a(this, "_defaultProps", {
-      title: "Inbox",
-      icon: f.inbox,
-      feedType: this._currentFeed,
-      height: "768px"
-    });
-    this._shadow = this.attachShadow({ mode: "open" }), this._themeManager = e ?? new Mo(we), this._header = new wo({
-      themeManager: this._themeManager,
-      onFeedTypeChange: (s) => {
-        this.setFeedType(s);
-      }
-    }), this._header.build(void 0), this._shadow.appendChild(this._header), this._list = new vo({
-      themeManager: this._themeManager,
-      onRefresh: () => {
-        this.refresh();
-      },
-      onPaginationTrigger: async (s) => {
-        var o, n;
-        try {
-          await A.shared.fetchNextPageOfMessages({
-            feedType: s
-          });
-        } catch (h) {
-          (n = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Failed to fetch next page of messages:", h);
-        }
-      },
-      onMessageClick: (s, o) => {
-        var n;
-        A.shared.clickMessage({ message: s }), this.dispatchEvent(new CustomEvent("message-click", {
-          detail: { message: s, index: o },
-          bubbles: !0,
-          composed: !0
-        })), (n = this._onMessageClick) == null || n.call(this, { message: s, index: o });
-      },
-      onMessageActionClick: (s, o, n) => {
-        var h;
-        this.dispatchEvent(new CustomEvent("message-action-click", {
-          detail: { message: s, action: o, index: n },
-          bubbles: !0,
-          composed: !0
-        })), (h = this._onMessageActionClick) == null || h.call(this, { message: s, action: o, index: n });
-      },
-      onMessageLongPress: (s, o) => {
-        var n;
-        this.dispatchEvent(new CustomEvent("message-long-press", {
-          detail: { message: s, index: o },
-          bubbles: !0,
-          composed: !0
-        })), (n = this._onMessageLongPress) == null || n.call(this, { message: s, index: o });
-      }
-    }), this._style = document.createElement("style"), this.refreshTheme(), this._shadow.appendChild(this._style), this._shadow.appendChild(this._list), this._datastoreListener = new So({
-      onError: (s) => {
-        this._list.setError(s);
-      },
-      onDataSetChange: (s, o) => {
-        this._currentFeed === o && (this._list.setDataSet(s), this.updateHeader());
-      },
-      onPageAdded: (s, o) => {
-        this._currentFeed === o && (this._list.addPage(s), this.updateHeader());
-      },
-      onMessageAdd: (s, o, n) => {
-        this._currentFeed === n && (this._list.addMessage(s, o), this.updateHeader());
-      },
-      onMessageRemove: (s, o, n) => {
-        this._currentFeed === n && (this._list.removeMessage(o), this.updateHeader());
-      },
-      onMessageUpdate: (s, o, n) => {
-        this._currentFeed === n && (this._list.updateMessage(s, o), this.updateHeader());
-      },
-      onUnreadCountChange: (s) => {
-        this.updateHeader();
-      }
-    }), A.shared.addDataStoreListener(this._datastoreListener), this._themeManager.subscribe((s) => {
-      this.refreshTheme();
-    }), this._authListener = C.shared.addAuthenticationListener((s) => {
-      this.refresh();
-    }), (t = C.shared.client) != null && t.options.userId && this.refresh();
-  }
-  get theme() {
-    return this._themeManager.getTheme();
-  }
-  setLightTheme(e) {
-    this._themeManager.setLightTheme(e);
-  }
-  setDarkTheme(e) {
-    this._themeManager.setDarkTheme(e);
-  }
-  static get observedAttributes() {
-    return ["height", "light-theme", "dark-theme", "mode", "message-click", "message-action-click", "message-long-press"];
-  }
-  refreshTheme() {
-    this._style.textContent = this.getStyles();
-  }
-  getStyles() {
-    return `
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: ${this._defaultProps.height};
-      }
-
-      courier-inbox-header {
-        flex-shrink: 0;
-      }
-
-      courier-inbox-list {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-      }
-    `;
-  }
-  setHeader(e) {
-    this._headerFactory = e, this.updateHeader();
-  }
-  removeHeader() {
-    this._headerFactory = null, this.updateHeader();
-  }
-  setLoadingState(e) {
-    this._list.setLoadingStateFactory(e);
-  }
-  setEmptyState(e) {
-    this._list.setEmptyStateFactory(e);
-  }
-  setErrorState(e) {
-    this._list.setErrorStateFactory(e);
-  }
-  setListItem(e) {
-    this._list.setListItemFactory(e);
-  }
-  setPaginationItem(e) {
-    this._list.setPaginationItemFactory(e);
-  }
-  onMessageClick(e) {
-    this._onMessageClick = e;
-  }
-  onMessageActionClick(e) {
-    this._onMessageActionClick = e;
-  }
-  onMessageLongPress(e) {
-    this._onMessageLongPress = e;
-  }
-  setFeedType(e) {
-    this._currentFeed = e, this._list.setFeedType(e), this.updateHeader(), this.load({
-      feedType: this._currentFeed,
-      canUseCache: !0
-    });
-  }
-  updateHeader() {
-    const e = {
-      feedType: this._currentFeed,
-      unreadCount: A.shared.unreadCount,
-      messageCount: this._list.messages.length
-    };
-    switch (this._headerFactory) {
-      case void 0:
-        this._header.render(e);
-        break;
-      case null:
-        this._header.build(null);
-        break;
-      default:
-        const t = this._headerFactory(e);
-        this._header.build(t);
-        break;
-    }
-  }
-  async load(e) {
-    await A.shared.load(e);
-  }
-  refresh() {
-    this.load({
-      feedType: this._currentFeed,
-      canUseCache: !1
-    });
-  }
-  connectedCallback() {
-    this.refresh();
-  }
-  disconnectedCallback() {
-    var e, t;
-    this._themeManager.cleanup(), (e = this._datastoreListener) == null || e.remove(), (t = this._authListener) == null || t.remove();
-  }
-  attributeChangedCallback(e, t, s) {
-    var o, n, h, d, c, u;
-    if (t !== s)
-      switch (e) {
-        case "height":
-          const m = s || this._defaultProps.height;
-          this.style.height = m;
-          break;
-        case "message-click":
-          if (s)
-            try {
-              this._onMessageClick = new Function("props", s);
-            } catch (p) {
-              (n = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Failed to parse message-click handler:", p);
-            }
-          else
-            this._onMessageClick = void 0;
-          break;
-        case "message-action-click":
-          if (s)
-            try {
-              this._onMessageActionClick = new Function("props", s);
-            } catch (p) {
-              (d = (h = C.shared.client) == null ? void 0 : h.options.logger) == null || d.error("Failed to parse message-action-click handler:", p);
-            }
-          else
-            this._onMessageActionClick = void 0;
-          break;
-        case "message-long-press":
-          if (s)
-            try {
-              this._onMessageLongPress = new Function("props", s);
-            } catch (p) {
-              (u = (c = C.shared.client) == null ? void 0 : c.options.logger) == null || u.error("Failed to parse message-long-press handler:", p);
-            }
-          else
-            this._onMessageLongPress = void 0;
-          break;
-        case "light-theme":
-          s && this.setLightTheme(JSON.parse(s));
-          break;
-        case "dark-theme":
-          s && this.setDarkTheme(JSON.parse(s));
-          break;
-        case "mode":
-          this._themeManager.setMode(s);
-          break;
-      }
-  }
-}
-customElements.get("courier-inbox") || customElements.define("courier-inbox", Eo);
-class Io extends Le {
-  constructor(e) {
-    super();
-    // Theme
-    a(this, "_themeSubscription");
-    // Components
-    a(this, "_container");
-    a(this, "_triggerButton");
-    a(this, "_unreadCountBadge");
-    this._themeSubscription = e.subscribe((t) => {
-      this.updateTheme();
-    });
-  }
-  defaultElement() {
-    this._container = document.createElement("div"), this._container.className = "menu-button-container", this._triggerButton = new Se(f.inbox), this._unreadCountBadge = new $e({
-      themeBus: this._themeSubscription.manager,
-      location: "button"
-    }), this._unreadCountBadge.id = "unread-badge";
-    const e = document.createElement("style");
-    return e.textContent = this.getStyles(), this._container.appendChild(e), this._container.appendChild(this._triggerButton), this._container.appendChild(this._unreadCountBadge), this.shadow.appendChild(this._container), this.updateTheme(), this._container;
-  }
-  getStyles() {
-    return `
-      .menu-button-container {
-        position: relative;
-        display: inline-block;
-      }
-        
-      #unread-badge {
-        position: absolute;
-        top: -8px;
-        left: 50%;
-        pointer-events: none;
-      }
-    `;
-  }
-  onUnreadCountChange(e) {
-    var t;
-    (t = this._unreadCountBadge) == null || t.setCount(e), this.updateTheme();
-  }
-  updateTheme() {
-    var t, s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, M;
-    const e = this._themeSubscription.manager.getTheme();
-    (n = this._triggerButton) == null || n.updateIconColor(((o = (s = (t = e == null ? void 0 : e.popup) == null ? void 0 : t.button) == null ? void 0 : s.icon) == null ? void 0 : o.color) ?? r.black[500]), (u = this._triggerButton) == null || u.updateIconSVG(((c = (d = (h = e == null ? void 0 : e.popup) == null ? void 0 : h.button) == null ? void 0 : d.icon) == null ? void 0 : c.svg) ?? f.inbox), (x = this._triggerButton) == null || x.updateBackgroundColor(((p = (m = e == null ? void 0 : e.popup) == null ? void 0 : m.button) == null ? void 0 : p.backgroundColor) ?? "transparent"), (v = this._triggerButton) == null || v.updateHoverBackgroundColor(((b = (_ = e == null ? void 0 : e.popup) == null ? void 0 : _.button) == null ? void 0 : b.hoverBackgroundColor) ?? r.black[50010]), (S = this._triggerButton) == null || S.updateActiveBackgroundColor(((w = (k = e == null ? void 0 : e.popup) == null ? void 0 : k.button) == null ? void 0 : w.activeBackgroundColor) ?? r.black[50020]), (M = this._unreadCountBadge) == null || M.refreshTheme("button");
-  }
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-customElements.get("courier-inbox-menu-button") || customElements.define("courier-inbox-menu-button", Io);
-class Fo extends HTMLElement {
-  constructor() {
-    super();
-    // State
-    a(this, "_width", "440px");
-    a(this, "_height", "440px");
-    a(this, "_popupAlignment", "top-right");
-    a(this, "_top", "40px");
-    a(this, "_right", "0");
-    a(this, "_bottom", "40px");
-    a(this, "_left", "0");
-    // Theming
-    a(this, "_themeManager", new Mo(we));
-    // Components
-    a(this, "_triggerButton");
-    a(this, "_popup");
-    a(this, "_inbox");
-    a(this, "_style");
-    // Listeners
-    a(this, "_datastoreListener");
-    // Factories
-    a(this, "_popupMenuButtonFactory");
-    const e = this.attachShadow({ mode: "open" });
-    this._triggerButton = new Io(this._themeManager), this._triggerButton.build(void 0), this._popup = document.createElement("div"), this._popup.className = "popup", this._inbox = new Eo(this._themeManager), this._inbox.setAttribute("height", "100%"), this._style = document.createElement("style"), this.refreshTheme(), e.appendChild(this._style), e.appendChild(this._triggerButton), e.appendChild(this._popup), this._popup.appendChild(this._inbox), this._triggerButton.addEventListener("click", this.togglePopup.bind(this)), document.addEventListener("click", this.handleOutsideClick.bind(this)), this.updatePopupPosition(), this._datastoreListener = new So(this), A.shared.addDataStoreListener(this._datastoreListener), this._themeManager.subscribe((t) => {
-      this.refreshTheme();
-    });
-  }
-  get theme() {
-    return this._themeManager.getTheme();
-  }
-  setLightTheme(e) {
-    this._themeManager.setLightTheme(e);
-  }
-  setDarkTheme(e) {
-    this._themeManager.setDarkTheme(e);
-  }
-  static get observedAttributes() {
-    return ["popup-alignment", "message-click", "message-action-click", "message-long-press", "popup-width", "popup-height", "top", "right", "bottom", "left", "light-theme", "dark-theme", "mode"];
-  }
-  refreshTheme() {
-    this._style.textContent = this.getStyles();
-  }
-  getStyles() {
-    var e, t, s, o, n, h, d, c;
-    return `
-      :host {
-        display: inline-block;
-        position: relative;
-      }
-
-      .menu-button-container {
-        position: relative;
-        display: inline-block;
-      }
-
-      .popup {
-        display: none;
-        position: absolute;
-        background: ${((t = (e = this.theme.popup) == null ? void 0 : e.window) == null ? void 0 : t.backgroundColor) ?? "red"};
-        border-radius: ${((o = (s = this.theme.popup) == null ? void 0 : s.window) == null ? void 0 : o.borderRadius) ?? "8px"};
-        border: ${((h = (n = this.theme.popup) == null ? void 0 : n.window) == null ? void 0 : h.border) ?? "1px solid red"};
-        box-shadow: ${((c = (d = this.theme.popup) == null ? void 0 : d.window) == null ? void 0 : c.shadow) ?? "0px 8px 16px -4px red"};
-        z-index: 1000;
-        width: ${this._width};
-        height: ${this._height};
-        overflow: hidden;
-        transform: translateZ(0);
-        will-change: transform;
-      }
-        
-      #unread-badge {
-        position: absolute;
-        top: -8px;
-        left: 50%;
-        pointer-events: none;
-      }
-
-      courier-inbox {
-        height: 100%;
-      }
-    `;
-  }
-  attributeChangedCallback(e, t, s) {
-    switch (e) {
-      case "popup-alignment":
-        this.isValidPosition(s) && (this._popupAlignment = s, this.updatePopupPosition());
-        break;
-      case "popup-width":
-        this._width = s, this.setSize(s, this._height);
-        break;
-      case "popup-height":
-        this._height = s, this.setSize(this._width, s);
-        break;
-      case "top":
-        this._top = s, this.updatePopupPosition();
-        break;
-      case "right":
-        this._right = s, this.updatePopupPosition();
-        break;
-      case "bottom":
-        this._bottom = s, this.updatePopupPosition();
-        break;
-      case "left":
-        this._left = s, this.updatePopupPosition();
-        break;
-      case "light-theme":
-        s && this.setLightTheme(JSON.parse(s));
-        break;
-      case "dark-theme":
-        s && this.setDarkTheme(JSON.parse(s));
-        break;
-      case "mode":
-        this._themeManager.setMode(s);
-        break;
-    }
-  }
-  onUnreadCountChange(e) {
-    this.render();
-  }
-  onMessageClick(e) {
-    this._inbox.onMessageClick(e);
-  }
-  onMessageActionClick(e) {
-    this._inbox.onMessageActionClick(e);
-  }
-  onMessageLongPress(e) {
-    this._inbox.onMessageLongPress(e);
-  }
-  isValidPosition(e) {
-    return [
-      "top-right",
-      "top-left",
-      "top-center",
-      "bottom-right",
-      "bottom-left",
-      "bottom-center",
-      "center-right",
-      "center-left",
-      "center-center"
-    ].includes(e);
-  }
-  updatePopupPosition() {
-    switch (this._popup.style.top = "", this._popup.style.bottom = "", this._popup.style.left = "", this._popup.style.right = "", this._popup.style.margin = "", this._popup.style.transform = "", this._popupAlignment) {
-      case "top-right":
-        this._popup.style.top = this._top, this._popup.style.right = this._right;
-        break;
-      case "top-left":
-        this._popup.style.top = this._top, this._popup.style.left = this._left;
-        break;
-      case "top-center":
-        this._popup.style.top = this._top, this._popup.style.left = "50%", this._popup.style.transform = "translateX(-50%)";
-        break;
-      case "bottom-right":
-        this._popup.style.bottom = this._bottom, this._popup.style.right = this._right;
-        break;
-      case "bottom-left":
-        this._popup.style.bottom = this._bottom, this._popup.style.left = this._left;
-        break;
-      case "bottom-center":
-        this._popup.style.bottom = this._bottom, this._popup.style.left = "50%", this._popup.style.transform = "translateX(-50%)";
-        break;
-      case "center-right":
-        this._popup.style.top = "50%", this._popup.style.right = this._right, this._popup.style.transform = "translateY(-50%)";
-        break;
-      case "center-left":
-        this._popup.style.top = "50%", this._popup.style.left = this._left, this._popup.style.transform = "translateY(-50%)";
-        break;
-      case "center-center":
-        this._popup.style.top = "50%", this._popup.style.left = "50%", this._popup.style.transform = "translate(-50%, -50%)";
-        break;
-    }
-  }
-  togglePopup(e) {
-    e.stopPropagation(), this._popup.style.display === "block" ? this._popup.style.display = "none" : this._popup.style.display = "block";
-  }
-  handleOutsideClick(e) {
-    this.contains(e.target) || (this._popup.style.display = "none");
-  }
-  setContent(e) {
-    this._inbox.innerHTML = "", this._inbox.appendChild(e);
-  }
-  setSize(e, t) {
-    this._width = e, this._height = t, this._popup.style.width = e, this._popup.style.height = t;
-  }
-  setPosition(e) {
-    var t, s;
-    this.isValidPosition(e) ? (this._popupAlignment = e, this.updatePopupPosition()) : (s = (t = C.shared.client) == null ? void 0 : t.options.logger) == null || s.error(`Invalid position: ${e}`);
-  }
-  setFeedType(e) {
-    this._inbox.setFeedType(e);
-  }
-  // Factory methods
-  setPopupHeader(e) {
-    this._inbox.setHeader(e);
-  }
-  removePopupHeader() {
-    this._inbox.removeHeader();
-  }
-  setPopupLoadingState(e) {
-    this._inbox.setLoadingState(e);
-  }
-  setPopupEmptyState(e) {
-    this._inbox.setEmptyState(e);
-  }
-  setPopupErrorState(e) {
-    this._inbox.setErrorState(e);
-  }
-  setPopupListItem(e) {
-    this._inbox.setListItem(e);
-  }
-  setPopupPaginationItem(e) {
-    this._inbox.setPaginationItem(e);
-  }
-  setPopupMenuButton(e) {
-    this._popupMenuButtonFactory = e, this.render();
-  }
-  render() {
-    const e = A.shared.unreadCount;
-    switch (this._popupMenuButtonFactory) {
-      case void 0:
-      case null:
-        this._triggerButton.build(void 0), this._triggerButton.onUnreadCountChange(e);
-        break;
-      default:
-        const t = this._popupMenuButtonFactory({ unreadCount: e });
-        this._triggerButton.build(t);
-        break;
-    }
-  }
-  disconnectedCallback() {
-    var e;
-    (e = this._datastoreListener) == null || e.remove(), this._themeManager.cleanup();
-  }
-}
-customElements.get("courier-inbox-menu") || customElements.define("courier-inbox-menu", Fo);
-class Zo {
-  onDataSetChange(i, e) {
-  }
-  onPageAdded(i, e) {
-  }
-  onUnreadCountChange(i) {
-  }
-  onMessageAdd(i, e, t) {
-  }
-  onMessageRemove(i, e, t) {
-  }
-  onMessageUpdate(i, e, t) {
-  }
-  onError(i) {
-  }
-}
-export {
-  Eo as CourierInbox,
-  So as CourierInboxDataStoreListener,
-  A as CourierInboxDatastore,
-  Zo as CourierInboxDatastoreEvents,
-  wo as CourierInboxHeader,
-  Fo as CourierInboxMenu,
-  Mo as CourierInboxThemeManager,
-  xo as CourierListItem,
-  Uo as archiveMessage,
-  No as clickMessage,
-  Ae as defaultDarkTheme,
-  we as defaultLightTheme,
-  Po as getMessageTime,
-  zo as markAsRead,
-  Oo as markAsUnread,
-  $o as mergeTheme,
-  Vo as openMessage
-};