@trycourier/courier-ui-inbox 1.0.9-beta → 1.0.12-beta

package/dist/index.mjs

@@ -157,29 +157,35 @@ const baseButtonStyles = {
   fontSize: "14px"
 };
 const CourierButtonVariants = {
-  primary: (mode) => ({
-    ...baseButtonStyles,
-    backgroundColor: theme[mode].colors.primary,
-    textColor: theme[mode].colors.secondary,
-    fontWeight: "500",
-    shadow: "none"
-  }),
-  secondary: (mode) => ({
-    ...baseButtonStyles,
-    backgroundColor: theme[mode].colors.secondary,
-    textColor: theme[mode].colors.primary,
-    fontWeight: "500",
-    border: `1px solid ${theme[mode].colors.border}`,
-    shadow: mode === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
-  }),
-  tertiary: (mode) => ({
-    ...baseButtonStyles,
-    backgroundColor: theme[mode].colors.border,
-    textColor: theme[mode].colors.primary,
-    fontWeight: "500",
-    border: "none",
-    shadow: "none"
-  })
+  primary: (mode) => {
+    return {
+      ...baseButtonStyles,
+      backgroundColor: theme[mode].colors.primary,
+      textColor: theme[mode].colors.secondary,
+      fontWeight: "500",
+      shadow: "none"
+    };
+  },
+  secondary: (mode) => {
+    return {
+      ...baseButtonStyles,
+      backgroundColor: theme[mode].colors.secondary,
+      textColor: theme[mode].colors.primary,
+      fontWeight: "500",
+      border: `1px solid ${theme[mode].colors.border}`,
+      shadow: mode === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
+    };
+  },
+  tertiary: (mode) => {
+    return {
+      ...baseButtonStyles,
+      backgroundColor: theme[mode].colors.border,
+      textColor: theme[mode].colors.primary,
+      fontWeight: "500",
+      border: "none",
+      shadow: "none"
+    };
+  }
 };
 class CourierButton extends CourierSystemThemeElement {
   constructor(props) {
@@ -206,32 +212,33 @@ class CourierButton extends CourierSystemThemeElement {
     return "courier-button";
   }
   getStyles(props) {
+    const mode = props.mode === "system" ? this.currentSystemTheme : props.mode;
     const defaultTextColor = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.textColor;
     };
     const defaultBackgroundColor = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.backgroundColor;
     };
     const defaultBorder = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.border;
     };
     const defaultShadow = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.shadow;
     };
     const defaultBorderRadius = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.borderRadius;
     };
     const defaultFontSize = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.fontSize;
     };
     const defaultFontWeight = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.fontWeight;
     };
     return `
@@ -1571,13 +1578,16 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
 class CourierInboxListItem extends CourierBaseElement {
-  constructor(theme2) {
+  constructor(themeManager, canClick, _canLongPress) {
     super();
     // State
+    __publicField(this, "_themeManager");
     __publicField(this, "_theme");
     __publicField(this, "_message", null);
     __publicField(this, "_feedType", "inbox");
     __publicField(this, "_isMobile", false);
+    __publicField(this, "_canClick", false);
+    // private _canLongPress: boolean = false; // Unused for now. But we can use this in the future if needed.
     // Elements
     __publicField(this, "_titleElement");
     __publicField(this, "_subtitleElement");
@@ -1592,7 +1602,9 @@ class CourierInboxListItem extends CourierBaseElement {
     __publicField(this, "onItemClick", null);
     __publicField(this, "onItemLongPress", null);
     __publicField(this, "onItemActionClick", null);
-    this._theme = theme2;
+    this._canClick = canClick;
+    this._themeManager = themeManager;
+    this._theme = themeManager.getTheme();
     this._isMobile = "ontouchstart" in window;
     this.render();
   }
@@ -1626,6 +1638,7 @@ class CourierInboxListItem extends CourierBaseElement {
     this._menu.addEventListener("pointerdown", cancelPropagation);
     this._menu.addEventListener("click", cancelPropagation);
     this.addEventListener("click", (e) => {
+      if (!this._canClick) return;
       if (this._menu && (this._menu.contains(e.target) || e.composedPath().includes(this._menu))) {
         return;
       }
@@ -1635,6 +1648,9 @@ class CourierInboxListItem extends CourierBaseElement {
     });
     this._setupHoverBehavior();
     this._setupLongPressBehavior();
+    if (this._canClick) {
+      this.classList.add("clickable");
+    }
   }
   static getStyles(theme2) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -1647,7 +1663,7 @@ class CourierInboxListItem extends CourierBaseElement {
         justify-content: space-between;
         border-bottom: ${((_b = list == null ? void 0 : list.item) == null ? void 0 : _b.divider) ?? "1px solid red"};
         font-family: inherit;
-        cursor: pointer;
+        cursor: default;
         transition: background-color 0.2s ease;
         margin: 0;
         width: 100%;
@@ -1662,25 +1678,27 @@ class CourierInboxListItem extends CourierBaseElement {
         touch-action: manipulation;
       }
 
-      /* Base hover / active */
+      /* Only apply hover/active background if clickable */
       @media (hover: hover) {
-        ${CourierInboxListItem.id}:hover {
+        ${CourierInboxListItem.id}.clickable:hover {
+          cursor: pointer;
           background-color: ${((_d = list == null ? void 0 : list.item) == null ? void 0 : _d.hoverBackgroundColor) ?? "red"};
         }
       }
 
-      ${CourierInboxListItem.id}:active {
+      ${CourierInboxListItem.id}.clickable:active {
+        cursor: pointer;
         background-color: ${((_e = list == null ? void 0 : list.item) == null ? void 0 : _e.activeBackgroundColor) ?? "red"};
       }
 
       /* Menu hover / active */
       @media (hover: hover) {
-        ${CourierInboxListItem.id}:hover:has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
+        ${CourierInboxListItem.id}.clickable:hover:has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
           background-color: ${((_f = list == null ? void 0 : list.item) == null ? void 0 : _f.backgroundColor) ?? "transparent"};
         }
       }
 
-      ${CourierInboxListItem.id}:active:has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
+      ${CourierInboxListItem.id}.clickable:active:has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
         background-color: ${((_g = list == null ? void 0 : list.item) == null ? void 0 : _g.backgroundColor) ?? "transparent"};
       }
 
@@ -1913,9 +1931,11 @@ class CourierInboxListItem extends CourierBaseElement {
     }
     const actionsTheme = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.actions;
     if (this._actionsContainer && this._message.actions) {
+      this._actionsContainer.innerHTML = "";
       this._message.actions.forEach((action) => {
         var _a2, _b2, _c2, _d, _e;
         const actionButton = new CourierButton({
+          mode: this._themeManager.mode,
           text: action.content,
           variant: "secondary",
           backgroundColor: actionsTheme == null ? void 0 : actionsTheme.backgroundColor,
@@ -2194,6 +2214,8 @@ class CourierInboxList extends CourierBaseElement {
     __publicField(this, "_isLoading", true);
     __publicField(this, "_error", null);
     __publicField(this, "_canPaginate", false);
+    __publicField(this, "_canClickListItems", false);
+    __publicField(this, "_canLongPressListItems", false);
     // Callbacks
     __publicField(this, "_onMessageClick", null);
     __publicField(this, "_onMessageActionClick", null);
@@ -2210,6 +2232,8 @@ class CourierInboxList extends CourierBaseElement {
     __publicField(this, "_listStyles");
     __publicField(this, "_listItemStyles");
     __publicField(this, "_listItemMenuStyles");
+    __publicField(this, "_errorContainer");
+    __publicField(this, "_emptyContainer");
     this._onRefresh = props.onRefresh;
     this._onPaginationTrigger = props.onPaginationTrigger;
     this._onMessageClick = props.onMessageClick;
@@ -2242,6 +2266,12 @@ class CourierInboxList extends CourierBaseElement {
     (_b = this._listItemStyles) == null ? void 0 : _b.remove();
     (_c = this._listItemMenuStyles) == null ? void 0 : _c.remove();
   }
+  setCanClickListItems(canClick) {
+    this._canClickListItems = canClick;
+  }
+  setCanLongPressListItems(canLongPress) {
+    this._canLongPressListItems = canLongPress;
+  }
   static getStyles(theme2) {
     var _a;
     const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
@@ -2312,10 +2342,75 @@ class CourierInboxList extends CourierBaseElement {
   handleRefresh() {
     this._onRefresh();
   }
+  refreshInfoStateThemes() {
+    var _a, _b;
+    (_a = this._emptyContainer) == null ? void 0 : _a.updateStyles(this.errorProps);
+    (_b = this._emptyContainer) == null ? void 0 : _b.updateStyles(this.emptyProps);
+  }
+  get errorProps() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    const error = (_a = this.theme.inbox) == null ? void 0 : _a.error;
+    const themeMode = this._themeSubscription.manager.mode;
+    return {
+      title: {
+        text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? ((_c = this._error) == null ? void 0 : _c.message),
+        textColor: (_e = (_d = error == null ? void 0 : error.title) == null ? void 0 : _d.font) == null ? void 0 : _e.color,
+        fontFamily: (_g = (_f = error == null ? void 0 : error.title) == null ? void 0 : _f.font) == null ? void 0 : _g.family,
+        fontSize: (_i = (_h = error == null ? void 0 : error.title) == null ? void 0 : _h.font) == null ? void 0 : _i.size,
+        fontWeight: (_k = (_j = error == null ? void 0 : error.title) == null ? void 0 : _j.font) == null ? void 0 : _k.weight
+      },
+      button: {
+        mode: themeMode,
+        text: (_l = error == null ? void 0 : error.button) == null ? void 0 : _l.text,
+        backgroundColor: (_m = error == null ? void 0 : error.button) == null ? void 0 : _m.backgroundColor,
+        hoverBackgroundColor: (_n = error == null ? void 0 : error.button) == null ? void 0 : _n.hoverBackgroundColor,
+        activeBackgroundColor: (_o = error == null ? void 0 : error.button) == null ? void 0 : _o.activeBackgroundColor,
+        textColor: (_q = (_p = error == null ? void 0 : error.button) == null ? void 0 : _p.font) == null ? void 0 : _q.color,
+        fontFamily: (_s = (_r = error == null ? void 0 : error.button) == null ? void 0 : _r.font) == null ? void 0 : _s.family,
+        fontSize: (_u = (_t = error == null ? void 0 : error.button) == null ? void 0 : _t.font) == null ? void 0 : _u.size,
+        fontWeight: (_w = (_v = error == null ? void 0 : error.button) == null ? void 0 : _v.font) == null ? void 0 : _w.weight,
+        shadow: (_x = error == null ? void 0 : error.button) == null ? void 0 : _x.shadow,
+        border: (_y = error == null ? void 0 : error.button) == null ? void 0 : _y.border,
+        borderRadius: (_z = error == null ? void 0 : error.button) == null ? void 0 : _z.borderRadius,
+        onClick: () => this.handleRetry()
+      }
+    };
+  }
+  get emptyProps() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const empty = (_a = this.theme.inbox) == null ? void 0 : _a.empty;
+    const themeMode = this._themeSubscription.manager.mode;
+    return {
+      title: {
+        text: ((_b = empty == null ? void 0 : empty.title) == null ? void 0 : _b.text) ?? `No ${this._feedType} messages yet`,
+        textColor: (_d = (_c = empty == null ? void 0 : empty.title) == null ? void 0 : _c.font) == null ? void 0 : _d.color,
+        fontFamily: (_f = (_e = empty == null ? void 0 : empty.title) == null ? void 0 : _e.font) == null ? void 0 : _f.family,
+        fontSize: (_h = (_g = empty == null ? void 0 : empty.title) == null ? void 0 : _g.font) == null ? void 0 : _h.size,
+        fontWeight: (_j = (_i = empty == null ? void 0 : empty.title) == null ? void 0 : _i.font) == null ? void 0 : _j.weight
+      },
+      button: {
+        mode: themeMode,
+        text: (_k = empty == null ? void 0 : empty.button) == null ? void 0 : _k.text,
+        backgroundColor: (_l = empty == null ? void 0 : empty.button) == null ? void 0 : _l.backgroundColor,
+        hoverBackgroundColor: (_m = empty == null ? void 0 : empty.button) == null ? void 0 : _m.hoverBackgroundColor,
+        activeBackgroundColor: (_n = empty == null ? void 0 : empty.button) == null ? void 0 : _n.activeBackgroundColor,
+        textColor: (_p = (_o = empty == null ? void 0 : empty.button) == null ? void 0 : _o.font) == null ? void 0 : _p.color,
+        fontFamily: (_r = (_q = empty == null ? void 0 : empty.button) == null ? void 0 : _q.font) == null ? void 0 : _r.family,
+        fontSize: (_t = (_s = empty == null ? void 0 : empty.button) == null ? void 0 : _s.font) == null ? void 0 : _t.size,
+        fontWeight: (_v = (_u = empty == null ? void 0 : empty.button) == null ? void 0 : _u.font) == null ? void 0 : _v.weight,
+        shadow: (_w = empty == null ? void 0 : empty.button) == null ? void 0 : _w.shadow,
+        border: (_x = empty == null ? void 0 : empty.button) == null ? void 0 : _x.border,
+        borderRadius: (_y = empty == null ? void 0 : empty.button) == null ? void 0 : _y.borderRadius,
+        onClick: () => this.handleRefresh()
+      }
+    };
+  }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$;
+    var _a, _b, _c, _d;
     while (this.firstChild) {
       this.removeChild(this.firstChild);
+      this._errorContainer = void 0;
+      this._emptyContainer = void 0;
     }
     if (this._listStyles) {
       this._listStyles.textContent = CourierInboxList.getStyles(this.theme);
@@ -2327,67 +2422,21 @@ class CourierInboxList extends CourierBaseElement {
       this._listItemMenuStyles.textContent = CourierInboxListItemMenu.getStyles(this.theme);
     }
     if (this._error) {
-      const error = (_a = this.theme.inbox) == null ? void 0 : _a.error;
-      const errorElement = new CourierInfoState({
-        title: {
-          text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? this._error.message,
-          textColor: (_d = (_c = error == null ? void 0 : error.title) == null ? void 0 : _c.font) == null ? void 0 : _d.color,
-          fontFamily: (_f = (_e = error == null ? void 0 : error.title) == null ? void 0 : _e.font) == null ? void 0 : _f.family,
-          fontSize: (_h = (_g = error == null ? void 0 : error.title) == null ? void 0 : _g.font) == null ? void 0 : _h.size,
-          fontWeight: (_j = (_i = error == null ? void 0 : error.title) == null ? void 0 : _i.font) == null ? void 0 : _j.weight
-        },
-        button: {
-          text: (_k = error == null ? void 0 : error.button) == null ? void 0 : _k.text,
-          backgroundColor: (_l = error == null ? void 0 : error.button) == null ? void 0 : _l.backgroundColor,
-          hoverBackgroundColor: (_m = error == null ? void 0 : error.button) == null ? void 0 : _m.hoverBackgroundColor,
-          activeBackgroundColor: (_n = error == null ? void 0 : error.button) == null ? void 0 : _n.activeBackgroundColor,
-          textColor: (_p = (_o = error == null ? void 0 : error.button) == null ? void 0 : _o.font) == null ? void 0 : _p.color,
-          fontFamily: (_r = (_q = error == null ? void 0 : error.button) == null ? void 0 : _q.font) == null ? void 0 : _r.family,
-          fontSize: (_t = (_s = error == null ? void 0 : error.button) == null ? void 0 : _s.font) == null ? void 0 : _t.size,
-          fontWeight: (_v = (_u = error == null ? void 0 : error.button) == null ? void 0 : _u.font) == null ? void 0 : _v.weight,
-          shadow: (_w = error == null ? void 0 : error.button) == null ? void 0 : _w.shadow,
-          border: (_x = error == null ? void 0 : error.button) == null ? void 0 : _x.border,
-          borderRadius: (_y = error == null ? void 0 : error.button) == null ? void 0 : _y.borderRadius,
-          onClick: () => this.handleRetry()
-        }
-      });
-      errorElement.build((_z = this._errorStateFactory) == null ? void 0 : _z.call(this, { feedType: this._feedType, error: this._error }));
-      this.appendChild(errorElement);
+      this._errorContainer = new CourierInfoState(this.errorProps);
+      this._errorContainer.build((_a = this._errorStateFactory) == null ? void 0 : _a.call(this, { feedType: this._feedType, error: this._error }));
+      this.appendChild(this._errorContainer);
       return;
     }
     if (this._isLoading) {
       const loadingElement = new CourierInboxSkeletonList(this.theme);
-      loadingElement.build((_A = this._loadingStateFactory) == null ? void 0 : _A.call(this, { feedType: this._feedType }));
+      loadingElement.build((_b = this._loadingStateFactory) == null ? void 0 : _b.call(this, { feedType: this._feedType }));
       this.appendChild(loadingElement);
       return;
     }
     if (this._messages.length === 0) {
-      const empty = (_B = this.theme.inbox) == null ? void 0 : _B.empty;
-      const emptyElement = new CourierInfoState({
-        title: {
-          text: ((_C = empty == null ? void 0 : empty.title) == null ? void 0 : _C.text) ?? `No ${this._feedType} messages yet`,
-          textColor: (_E = (_D = empty == null ? void 0 : empty.title) == null ? void 0 : _D.font) == null ? void 0 : _E.color,
-          fontFamily: (_G = (_F = empty == null ? void 0 : empty.title) == null ? void 0 : _F.font) == null ? void 0 : _G.family,
-          fontSize: (_I = (_H = empty == null ? void 0 : empty.title) == null ? void 0 : _H.font) == null ? void 0 : _I.size,
-          fontWeight: (_K = (_J = empty == null ? void 0 : empty.title) == null ? void 0 : _J.font) == null ? void 0 : _K.weight
-        },
-        button: {
-          text: (_L = empty == null ? void 0 : empty.button) == null ? void 0 : _L.text,
-          backgroundColor: (_M = empty == null ? void 0 : empty.button) == null ? void 0 : _M.backgroundColor,
-          hoverBackgroundColor: (_N = empty == null ? void 0 : empty.button) == null ? void 0 : _N.hoverBackgroundColor,
-          activeBackgroundColor: (_O = empty == null ? void 0 : empty.button) == null ? void 0 : _O.activeBackgroundColor,
-          textColor: (_Q = (_P = empty == null ? void 0 : empty.button) == null ? void 0 : _P.font) == null ? void 0 : _Q.color,
-          fontFamily: (_S = (_R = empty == null ? void 0 : empty.button) == null ? void 0 : _R.font) == null ? void 0 : _S.family,
-          fontSize: (_U = (_T = empty == null ? void 0 : empty.button) == null ? void 0 : _T.font) == null ? void 0 : _U.size,
-          fontWeight: (_W = (_V = empty == null ? void 0 : empty.button) == null ? void 0 : _V.font) == null ? void 0 : _W.weight,
-          shadow: (_X = empty == null ? void 0 : empty.button) == null ? void 0 : _X.shadow,
-          border: (_Y = empty == null ? void 0 : empty.button) == null ? void 0 : _Y.border,
-          borderRadius: (_Z = empty == null ? void 0 : empty.button) == null ? void 0 : _Z.borderRadius,
-          onClick: () => this.handleRefresh()
-        }
-      });
-      emptyElement.build((__ = this._emptyStateFactory) == null ? void 0 : __.call(this, { feedType: this._feedType }));
-      this.appendChild(emptyElement);
+      this._emptyContainer = new CourierInfoState(this.emptyProps);
+      this._emptyContainer.build((_c = this._emptyStateFactory) == null ? void 0 : _c.call(this, { feedType: this._feedType }));
+      this.appendChild(this._emptyContainer);
       return;
     }
     const list = document.createElement("ul");
@@ -2397,7 +2446,7 @@ class CourierInboxList extends CourierBaseElement {
         list.appendChild(this._listItemFactory({ message, index }));
         return;
       }
-      const listItem = new CourierInboxListItem(this.theme);
+      const listItem = new CourierInboxListItem(this._themeSubscription.manager, this._canClickListItems, this._canLongPressListItems);
       listItem.setMessage(message, this._feedType);
       listItem.setOnItemClick((message2) => {
         var _a2;
@@ -2416,7 +2465,7 @@ class CourierInboxList extends CourierBaseElement {
     if (this._canPaginate) {
       const paginationItem = new CourierInboxPaginationListItem({
         theme: this.theme,
-        customItem: (_$ = this._paginationItemFactory) == null ? void 0 : _$.call(this, { feedType: this._feedType }),
+        customItem: (_d = this._paginationItemFactory) == null ? void 0 : _d.call(this, { feedType: this._feedType }),
         onPaginationTrigger: () => {
           var _a2;
           return (_a2 = this._onPaginationTrigger) == null ? void 0 : _a2.call(this, this._feedType);
@@ -2717,31 +2766,27 @@ class CourierUnreadCountBadge extends CourierBaseElement {
     (_a = this._style) == null ? void 0 : _a.remove();
   }
   static getStyles(theme2) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
     return `
       ${CourierUnreadCountBadge.id} {
         display: inline-block;
       }
 
       ${CourierUnreadCountBadge.id} .unread-badge {
-        padding: 4px 8px;
+        padding: 3px 8px;
+        font-size: 12px;
         text-align: center;
         display: none;
         pointer-events: none;
-      }
-
-      ${CourierUnreadCountBadge.id} .button {
-        background-color: ${(_c = (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadIndicator) == null ? void 0 : _c.backgroundColor};
-        color: ${(_g = (_f = (_e = (_d = theme2.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadIndicator) == null ? void 0 : _f.font) == null ? void 0 : _g.color};
-        border-radius: ${(_j = (_i = (_h = theme2.popup) == null ? void 0 : _h.button) == null ? void 0 : _i.unreadIndicator) == null ? void 0 : _j.borderRadius};
-        font-size: ${(_n = (_m = (_l = (_k = theme2.popup) == null ? void 0 : _k.button) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.font) == null ? void 0 : _n.size};
+        min-width: 20px;
       }
 
       ${CourierUnreadCountBadge.id} .header {
-        background-color: ${(_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.unreadIndicator) == null ? void 0 : _r.backgroundColor};
-        color: ${(_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.font) == null ? void 0 : _w.color};
-        border-radius: ${(_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.unreadIndicator) == null ? void 0 : _A.borderRadius};
-        font-size: ${(_F = (_E = (_D = (_C = (_B = theme2.inbox) == null ? void 0 : _B.header) == null ? void 0 : _C.filters) == null ? void 0 : _D.unreadIndicator) == null ? void 0 : _E.font) == null ? void 0 : _F.size};
+        background-color: ${(_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.unreadIndicator) == null ? void 0 : _d.backgroundColor};
+        color: ${(_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.unreadIndicator) == null ? void 0 : _h.font) == null ? void 0 : _i.color};
+        border-radius: ${(_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.borderRadius};
+        font-size: ${(_r = (_q = (_p = (_o = (_n = theme2.inbox) == null ? void 0 : _n.header) == null ? void 0 : _o.filters) == null ? void 0 : _p.unreadIndicator) == null ? void 0 : _q.font) == null ? void 0 : _r.size};
+        padding: ${(_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.padding};
       }
     `;
   }
@@ -3096,15 +3141,11 @@ const defaultLightTheme = {
       backgroundColor: "transparent",
       hoverBackgroundColor: CourierColors.black[50010],
       activeBackgroundColor: CourierColors.black[50020],
-      unreadIndicator: {
-        font: {
-          color: CourierColors.white[500],
-          size: "14px",
-          family: void 0,
-          weight: void 0
-        },
+      unreadDotIndicator: {
         backgroundColor: CourierColors.blue[500],
-        borderRadius: "12px"
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px"
       }
     },
     window: {
@@ -3142,10 +3183,11 @@ const defaultLightTheme = {
           font: {
             color: CourierColors.white[500],
             family: void 0,
-            size: "14px"
+            size: "12px"
           },
           backgroundColor: CourierColors.blue[500],
-          borderRadius: "12px"
+          borderRadius: "4px",
+          padding: "2px 6px"
         }
       },
       menus: {
@@ -3343,15 +3385,11 @@ const defaultDarkTheme = {
       backgroundColor: "transparent",
       hoverBackgroundColor: CourierColors.white[50010],
       activeBackgroundColor: CourierColors.white[50020],
-      unreadIndicator: {
-        font: {
-          color: CourierColors.white[500],
-          size: "14px",
-          family: void 0,
-          weight: void 0
-        },
+      unreadDotIndicator: {
         backgroundColor: CourierColors.blue[500],
-        borderRadius: "12px"
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px"
       }
     },
     window: {
@@ -3389,10 +3427,11 @@ const defaultDarkTheme = {
           font: {
             color: CourierColors.white[500],
             family: void 0,
-            size: "14px"
+            size: "12px"
           },
           backgroundColor: CourierColors.blue[500],
-          borderRadius: "12px"
+          borderRadius: "4px",
+          padding: "3px 8px"
         }
       },
       menus: {
@@ -3592,9 +3631,9 @@ const mergeTheme = (mode, theme2) => {
           ...(_d = (_c = defaultTheme.popup) == null ? void 0 : _c.button) == null ? void 0 : _d.icon,
           ...(_f = (_e = theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon
         },
-        unreadIndicator: {
-          ...(_h = (_g = defaultTheme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadIndicator,
-          ...(_j = (_i = theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadIndicator
+        unreadDotIndicator: {
+          ...(_h = (_g = defaultTheme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator,
+          ...(_j = (_i = theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadDotIndicator
         }
       },
       window: {
@@ -3821,6 +3860,9 @@ class CourierInboxThemeManager {
     this._userMode = mode;
     this.updateTheme();
   }
+  get mode() {
+    return this._userMode;
+  }
   /**
    * Subscribe to theme changes
    * @param {Function} callback - Function to run when the theme changes
@@ -3916,6 +3958,8 @@ class CourierInbox extends CourierBaseElement {
     this.appendChild(this._header);
     this._list = new CourierInboxList({
       themeManager: this._themeManager,
+      canClickListItems: false,
+      canLongPressListItems: false,
       onRefresh: () => {
         this.refresh();
       },
@@ -4026,6 +4070,8 @@ class CourierInbox extends CourierBaseElement {
     (_d = this._unreadIndicatorStyle) == null ? void 0 : _d.remove();
   }
   refreshTheme() {
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.refreshInfoStateThemes();
     if (this._inboxStyle) {
       this._inboxStyle.textContent = this.getStyles();
     }
@@ -4078,13 +4124,17 @@ class CourierInbox extends CourierBaseElement {
     (_a = this._list) == null ? void 0 : _a.setPaginationItemFactory(factory);
   }
   onMessageClick(handler) {
+    var _a;
     this._onMessageClick = handler;
+    (_a = this._list) == null ? void 0 : _a.setCanClickListItems(handler !== void 0);
   }
   onMessageActionClick(handler) {
     this._onMessageActionClick = handler;
   }
   onMessageLongPress(handler) {
+    var _a;
     this._onMessageLongPress = handler;
+    (_a = this._list) == null ? void 0 : _a.setCanLongPressListItems(handler !== void 0);
   }
   setFeedType(feedType) {
     var _a;
@@ -4191,7 +4241,7 @@ class CourierInboxMenuButton extends CourierFactoryElement {
     __publicField(this, "_style");
     __publicField(this, "_container");
     __publicField(this, "_triggerButton");
-    __publicField(this, "_unreadCountBadge");
+    __publicField(this, "_unreadBadge");
     this._themeSubscription = themeBus.subscribe((_) => {
       this.refreshTheme();
     });
@@ -4214,45 +4264,50 @@ class CourierInboxMenuButton extends CourierFactoryElement {
     this._container = document.createElement("div");
     this._container.className = "menu-button-container";
     this._triggerButton = new CourierIconButton(CourierIconSVGs.inbox);
-    this._unreadCountBadge = new CourierUnreadCountBadge({
-      themeBus: this._themeSubscription.manager,
-      location: "button"
-    });
-    this._unreadCountBadge.id = "unread-badge";
+    this._unreadBadge = document.createElement("div");
+    this._unreadBadge.className = "unread-badge";
+    this._unreadBadge.style.display = "none";
     this._container.appendChild(this._triggerButton);
-    this._container.appendChild(this._unreadCountBadge);
+    this._container.appendChild(this._unreadBadge);
     this.appendChild(this._container);
     this.refreshTheme();
     return this._container;
   }
-  static getStyles(_theme) {
+  static getStyles(theme2) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     return `
       ${CourierInboxMenuButton.id} .menu-button-container {
         position: relative;
         display: inline-block;
       }
         
-      ${CourierInboxMenuButton.id} #unread-badge {
+      ${CourierInboxMenuButton.id} .unread-badge {
         position: absolute;
-        top: -8px;
-        left: 50%;
+        top: 2px;
+        right: 2px;
         pointer-events: none;
+        width: ${((_c = (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadDotIndicator) == null ? void 0 : _c.height) ?? "8px"};
+        height: ${((_f = (_e = (_d = theme2.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadDotIndicator) == null ? void 0 : _f.width) ?? "8px"};
+        background: ${((_i = (_h = (_g = theme2.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator) == null ? void 0 : _i.backgroundColor) ?? "red"};
+        border-radius: ${((_l = (_k = (_j = theme2.popup) == null ? void 0 : _j.button) == null ? void 0 : _k.unreadDotIndicator) == null ? void 0 : _l.borderRadius) ?? "50%"};
+        display: none;
+        z-index: 1;
       }
     `;
   }
   onUnreadCountChange(unreadCount) {
-    var _a;
-    (_a = this._unreadCountBadge) == null ? void 0 : _a.setCount(unreadCount);
+    if (this._unreadBadge) {
+      this._unreadBadge.style.display = unreadCount > 0 ? "block" : "none";
+    }
     this.refreshTheme();
   }
   refreshTheme() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
     (_e = this._triggerButton) == null ? void 0 : _e.updateIconColor(((_d = (_c = (_b = (_a = this.theme) == null ? void 0 : _a.popup) == null ? void 0 : _b.button) == null ? void 0 : _c.icon) == null ? void 0 : _d.color) ?? CourierColors.black[500]);
     (_j = this._triggerButton) == null ? void 0 : _j.updateIconSVG(((_i = (_h = (_g = (_f = this.theme) == null ? void 0 : _f.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
     (_n = this._triggerButton) == null ? void 0 : _n.updateBackgroundColor(((_m = (_l = (_k = this.theme) == null ? void 0 : _k.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.backgroundColor) ?? "transparent");
     (_r = this._triggerButton) == null ? void 0 : _r.updateHoverBackgroundColor(((_q = (_p = (_o = this.theme) == null ? void 0 : _o.popup) == null ? void 0 : _p.button) == null ? void 0 : _q.hoverBackgroundColor) ?? CourierColors.black[50010]);
     (_v = this._triggerButton) == null ? void 0 : _v.updateActiveBackgroundColor(((_u = (_t = (_s = this.theme) == null ? void 0 : _s.popup) == null ? void 0 : _t.button) == null ? void 0 : _u.activeBackgroundColor) ?? CourierColors.black[50020]);
-    (_w = this._unreadCountBadge) == null ? void 0 : _w.refreshTheme("button");
   }
 }
 registerElement(CourierInboxMenuButton);
@@ -4274,6 +4329,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     __publicField(this, "_popup");
     __publicField(this, "_inbox");
     __publicField(this, "_style");
+    // Inbox Handlers
+    __publicField(this, "_onMessageClick");
+    __publicField(this, "_onMessageActionClick");
+    __publicField(this, "_onMessageLongPress");
     // Listeners
     __publicField(this, "_datastoreListener");
     // Factories
@@ -4321,6 +4380,26 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this._popup.className = "popup";
     this._inbox = new CourierInbox(this._themeManager);
     this._inbox.setAttribute("height", "100%");
+    if (this._inbox) {
+      this._inbox.onMessageClick((props) => {
+        if (this._onMessageClick) {
+          this._onMessageClick(props);
+        }
+        this.closePopup();
+      });
+      this._inbox.onMessageActionClick((props) => {
+        if (this._onMessageActionClick) {
+          this._onMessageActionClick(props);
+        }
+        this.closePopup();
+      });
+      this._inbox.onMessageLongPress((props) => {
+        if (this._onMessageLongPress) {
+          this._onMessageLongPress(props);
+        }
+        this.closePopup();
+      });
+    }
     this.refreshTheme();
     this.appendChild(this._triggerButton);
     this.appendChild(this._popup);
@@ -4433,16 +4512,13 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this.render();
   }
   onMessageClick(handler) {
-    var _a;
-    (_a = this._inbox) == null ? void 0 : _a.onMessageClick(handler);
+    this._onMessageClick = handler;
   }
   onMessageActionClick(handler) {
-    var _a;
-    (_a = this._inbox) == null ? void 0 : _a.onMessageActionClick(handler);
+    this._onMessageActionClick = handler;
   }
   onMessageLongPress(handler) {
-    var _a;
-    (_a = this._inbox) == null ? void 0 : _a.onMessageLongPress(handler);
+    this._onMessageLongPress = handler;
   }
   isValidPosition(value) {
     const validPositions = [
@@ -4516,6 +4592,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     const isVisible = this._popup.style.display === "block";
     this._popup.style.display = isVisible ? "none" : "block";
   }
+  closePopup() {
+    if (!this._popup) return;
+    this._popup.style.display = "none";
+  }
   setContent(element) {
     if (!this._inbox) return;
     this._inbox.innerHTML = "";