@novu/js 2.0.0-canary.1 → 2.0.0-canary.2

package/dist/esm/ui/index.mjs

@@ -1,6 +1,6 @@
-import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, Novu, __async, __objRest, isSameFilter } from '../chunk-Y6CIZNAK.mjs';
+import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, Novu, __async, isSameFilter } from '../chunk-YOLQVRKF.mjs';
 import { delegateEvents, render, createComponent, Portal, mergeProps, setAttribute, spread, template, insert, memo, effect, className, use, addEventListener, Dynamic, isServer } from 'solid-js/web';
-import { createContext, createSignal, onMount, onCleanup, For, createMemo, createEffect, splitProps, useContext, Show, Switch as Switch$1, Match, createResource, createComputed, batch } from 'solid-js';
+import { createSignal, createContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, useContext, Show, Switch as Switch$1, Match, createResource, createComputed, batch } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import clsx from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -22,30 +22,29 @@ var defaultVariables = {
   fontSize: "inherit",
   borderRadius: "0.375rem"
 };
-
-// src/ui/config/defaultLocalization.ts
 var defaultLocalization = {
   locale: "en-US",
-  "inbox.status.options.unread": "Unread only",
-  "inbox.status.options.unreadRead": "Unread & read",
-  "inbox.status.options.archived": "Archived",
-  "inbox.status.unread": "Unread",
-  "inbox.status.unreadRead": "Inbox",
-  "inbox.status.archived": "Archived",
+  "inbox.filters.dropdownOptions.unread": "Unread only",
+  "inbox.filters.dropdownOptions.default": "Unread & read",
+  "inbox.filters.dropdownOptions.archived": "Archived",
+  "inbox.filters.labels.unread": "Unread",
+  "inbox.filters.labels.default": "Inbox",
+  "inbox.filters.labels.archived": "Archived",
   "notifications.emptyNotice": "No notifications",
   "notifications.actions.readAll": "Mark all as read",
   "notifications.actions.archiveAll": "Archive all",
   "notifications.actions.archiveRead": "Archive read",
   "notifications.newNotifications": ({ notificationCount }) => `${notificationCount > 99 ? "99+" : notificationCount} new ${notificationCount === 1 ? "notification" : "notifications"}`,
-  "notification.actions.read.toolTip": "Mark as read",
-  "notification.actions.unread.toolTip": "Mark as unread",
-  "notification.actions.archive.toolTip": "Archive",
-  "notification.actions.unarchive.toolTip": "Unarchive",
+  "notification.actions.read.tooltip": "Mark as read",
+  "notification.actions.unread.tooltip": "Mark as unread",
+  "notification.actions.archive.tooltip": "Archive",
+  "notification.actions.unarchive.tooltip": "Unarchive",
   "preferences.title": "Notification Preferences",
   "preferences.global": "Global Preferences",
   "preferences.workflow.disabled.notice": "Contact admin to enable subscription management for this critical notification.",
   "preferences.workflow.disabled.tooltip": "Contact admin to edit"
 };
+var [dynamicLocalization, setDynamicLocalization] = createSignal({});
 
 // src/ui/config/appearanceKeys.ts
 var appearanceKeys = [
@@ -427,6 +426,10 @@ function useUncontrolledState(props) {
   return [uncontrolledValue, setUncontrolledValue];
 }
 
+// src/ui/helpers/constants.ts
+var DEFAULT_TARGET = "_blank";
+var DEFAULT_REFERRER = "noopener noreferrer";
+
 // src/ui/context/AppearanceContext.tsx
 var AppearanceContext = createContext(void 0);
 var AppearanceProvider = (props) => {
@@ -582,6 +585,41 @@ var useWebSocketEvent = ({
     });
   });
 };
+var LocalizationContext = createContext(void 0);
+var LocalizationProvider = (props) => {
+  const localization = createMemo(() => {
+    const _a = props.localization || {}, {
+      dynamic
+    } = _a, localizationObject = __objRest(_a, [
+      "dynamic"
+    ]);
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
+  });
+  const t = (key, ...args) => {
+    const value = localization()[key];
+    if (typeof value === "function") {
+      return value(args[0]);
+    }
+    return value;
+  };
+  const locale = createMemo(() => localization().locale);
+  return createComponent(LocalizationContext.Provider, {
+    value: {
+      t,
+      locale
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useLocalization() {
+  const context = useContext(LocalizationContext);
+  if (!context) {
+    throw new Error("useLocalization must be used within an LocalizationProvider");
+  }
+  return context;
+}
 
 // src/ui/types.ts
 var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
@@ -911,44 +949,16 @@ function useFocusManager() {
   }
   return context;
 }
-var LocalizationContext = createContext(void 0);
-var LocalizationProvider = (props) => {
-  const localization = createMemo(() => __spreadValues(__spreadValues({}, defaultLocalization), props.localization || {}));
-  const t = (key, ...args) => {
-    const value = localization()[key];
-    if (typeof value === "function") {
-      return value(args[0]);
-    }
-    return value;
-  };
-  const locale = createMemo(() => localization().locale);
-  return createComponent(LocalizationContext.Provider, {
-    value: {
-      t,
-      locale
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-function useLocalization() {
-  const context = useContext(LocalizationContext);
-  if (!context) {
-    throw new Error("useLocalization must be used within an LocalizationProvider");
-  }
-  return context;
-}
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var ExternalElementMounter = (_a) => {
+var ExternalElementRenderer = (_a) => {
   var _b = _a, {
-    mount
+    render: render2
   } = _b, rest = __objRest(_b, [
-    "mount"
+    "render"
   ]);
   let ref;
-  onMount(() => {
-    const unmount = mount(ref);
+  createEffect(() => {
+    const unmount = render2(ref);
     onCleanup(() => {
       unmount();
     });
@@ -1144,7 +1154,7 @@ var Bell = (props) => {
   } = useTotalUnreadCount();
   return createComponent(Show, {
     get when() {
-      return props.mountBell;
+      return props.renderBell;
     },
     get fallback() {
       return createComponent(BellContainer, {
@@ -1154,8 +1164,8 @@ var Bell = (props) => {
       });
     },
     get children() {
-      return createComponent(ExternalElementMounter, {
-        mount: (el) => props.mountBell(el, totalUnreadCount())
+      return createComponent(ExternalElementRenderer, {
+        render: (el) => props.renderBell(el, totalUnreadCount())
       });
     }
   });
@@ -1721,14 +1731,14 @@ var Tabs = {
 
 // src/ui/components/elements/InboxStatus/constants.ts
 var notificationStatusOptionsLocalizationKeys = {
-  unreadRead: "inbox.status.options.unreadRead",
-  unread: "inbox.status.options.unread",
-  archived: "inbox.status.options.archived"
+  unreadRead: "inbox.filters.dropdownOptions.default",
+  unread: "inbox.filters.dropdownOptions.unread",
+  archived: "inbox.filters.dropdownOptions.archived"
 };
-var inboxStatusLocalizationKeys = {
-  unreadRead: "inbox.status.unreadRead",
-  unread: "inbox.status.unread",
-  archived: "inbox.status.archived"
+var inboxFilterLocalizationKeys = {
+  unreadRead: "inbox.filters.labels.default",
+  unread: "inbox.filters.labels.unread",
+  archived: "inbox.filters.labels.archived"
 };
 var _tmpl$31 = /* @__PURE__ */ template(`<span><span></span><span>`);
 var _tmpl$210 = /* @__PURE__ */ template(`<span>`);
@@ -1743,14 +1753,11 @@ var cases = [{
   icon: Archive
 }];
 var StatusOptions = (props) => {
-  const {
-    t
-  } = useLocalization();
   return createComponent(For, {
     each: cases,
     children: (c) => createComponent(StatusItem, {
-      get label() {
-        return t(notificationStatusOptionsLocalizationKeys[c.status]);
+      get localizationKey() {
+        return notificationStatusOptionsLocalizationKeys[c.status];
       },
       onClick: () => {
         props.setStatus(c.status);
@@ -1766,6 +1773,9 @@ var StatusOptions = (props) => {
 };
 var StatusItem = (props) => {
   const style = useStyle();
+  const {
+    t
+  } = useLocalization();
   return createComponent(Dropdown.Item, {
     get ["class"]() {
       return style("inboxStatus__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-8 nt-justify-between"));
@@ -1777,17 +1787,19 @@ var StatusItem = (props) => {
       return [(() => {
         var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         insert(_el$2, () => props.icon());
-        insert(_el$3, () => props.label);
+        insert(_el$3, () => t(props.localizationKey));
         effect((_p$) => {
-          var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon"), _v$3 = style("inboxStatus__dropdownItemLabel");
+          var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon"), _v$3 = props.localizationKey, _v$4 = style("inboxStatus__dropdownItemLabel");
           _v$ !== _p$.e && className(_el$, _p$.e = _v$);
           _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-          _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+          _v$3 !== _p$.a && setAttribute(_el$3, "data-localization", _p$.a = _v$3);
+          _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
-          a: void 0
+          a: void 0,
+          o: void 0
         });
         return _el$;
       })(), createComponent(Show, {
@@ -1832,8 +1844,16 @@ var StatusDropdown = () => {
           get children() {
             return [(() => {
               var _el$ = _tmpl$32();
-              insert(_el$, () => t(inboxStatusLocalizationKeys[status()]));
-              effect(() => className(_el$, style("inboxStatus__title", "nt-text-xl nt-font-semibold")));
+              insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
+              effect((_p$) => {
+                var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-xl nt-font-semibold");
+                _v$ !== _p$.e && setAttribute(_el$, "data-localization", _p$.e = _v$);
+                _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
               return _el$;
             })(), (() => {
               var _el$2 = _tmpl$32();
@@ -1956,9 +1976,6 @@ var useArchiveAllRead = (props) => {
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
 var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
 var MoreActionsOptions = () => {
-  const {
-    t
-  } = useLocalization();
   const {
     filter
   } = useInboxContext();
@@ -1972,25 +1989,19 @@ var MoreActionsOptions = () => {
     archiveAllRead
   } = useArchiveAllRead();
   return [createComponent(ActionsItem, {
-    get label() {
-      return t("notifications.actions.readAll");
-    },
+    localizationKey: "notifications.actions.readAll",
     onClick: () => readAll({
       tags: filter().tags
     }),
     icon: ReadAll
   }), createComponent(ActionsItem, {
-    get label() {
-      return t("notifications.actions.archiveAll");
-    },
+    localizationKey: "notifications.actions.archiveAll",
     onClick: () => archiveAll({
       tags: filter().tags
     }),
     icon: Archive
   }), createComponent(ActionsItem, {
-    get label() {
-      return t("notifications.actions.archiveRead");
-    },
+    localizationKey: "notifications.actions.archiveRead",
     onClick: () => archiveAllRead({
       tags: filter().tags
     }),
@@ -1999,6 +2010,9 @@ var MoreActionsOptions = () => {
 };
 var ActionsItem = (props) => {
   const style = useStyle();
+  const {
+    t
+  } = useLocalization();
   return createComponent(Dropdown.Item, {
     get ["class"]() {
       return style("moreActions__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-2"));
@@ -2014,8 +2028,16 @@ var ActionsItem = (props) => {
         return _el$;
       })(), (() => {
         var _el$2 = _tmpl$33();
-        insert(_el$2, () => props.label);
-        effect(() => className(_el$2, style("moreActions__dropdownItemLabel")));
+        insert(_el$2, () => t(props.localizationKey));
+        effect((_p$) => {
+          var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel");
+          _v$ !== _p$.e && setAttribute(_el$2, "data-localization", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
         return _el$2;
       })()];
     }
@@ -2107,7 +2129,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$36 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
 var _tmpl$211 = /* @__PURE__ */ template(`<button>`);
 var PreferencesHeader = (props) => {
   const style = useStyle();
@@ -2502,12 +2524,10 @@ var LoadingSkeleton = () => {
 // src/ui/components/elements/Preferences/Preferences.tsx
 var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<span data-localization=preferences.workflow.disabled.notice>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
 var Preferences = () => {
   const style = useStyle();
-  const {
-    t
-  } = useLocalization();
   const {
     preferences,
     loading,
@@ -2522,6 +2542,15 @@ var Preferences = () => {
       workflowPreferences
     };
   });
+  createEffect(() => {
+    setDynamicLocalization((prev) => {
+      var _a;
+      return __spreadValues(__spreadValues({}, prev), (_a = allPreferences().workflowPreferences) == null ? void 0 : _a.reduce((acc, preference) => {
+        acc[preference.workflow.identifier] = preference.workflow.name;
+        return acc;
+      }, {}));
+    });
+  });
   const optimisticUpdate = ({
     channel,
     enabled,
@@ -2551,9 +2580,7 @@ var Preferences = () => {
       },
       get children() {
         return [createComponent(PreferencesRow, {
-          get label() {
-            return t("preferences.global");
-          },
+          localizationKey: "preferences.global",
           get channels() {
             var _a;
             return ((_a = allPreferences().globalPreference) == null ? void 0 : _a.channels) || {};
@@ -2564,9 +2591,8 @@ var Preferences = () => {
             return allPreferences().workflowPreferences;
           },
           children: (preference) => createComponent(PreferencesRow, {
-            get label() {
-              var _a;
-              return (_a = preference.workflow) == null ? void 0 : _a.name;
+            get localizationKey() {
+              return preference.workflow.identifier;
             },
             get channels() {
               return preference.channels;
@@ -2626,7 +2652,7 @@ var PreferencesRow = (props) => {
       return channels().length > 0;
     },
     get children() {
-      var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling;
+      var _el$4 = _tmpl$45(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling;
       _el$5.$$click = () => setIsOpen((prev) => !prev);
       insert(_el$7, createComponent(Show, {
         get when() {
@@ -2647,6 +2673,7 @@ var PreferencesRow = (props) => {
                   return _el$11;
                 })()
               }), createComponent(Tooltip.Content, {
+                "data-localization": "preferences.workflow.disabled.tooltip",
                 get children() {
                   return t("preferences.workflow.disabled.tooltip");
                 }
@@ -2655,7 +2682,7 @@ var PreferencesRow = (props) => {
           });
         }
       }), null);
-      insert(_el$7, () => props.label, null);
+      insert(_el$7, () => t(props.localizationKey), null);
       insert(_el$6, createComponent(ChannelsLabel, {
         get channels() {
           return props.channels;
@@ -2677,7 +2704,7 @@ var PreferencesRow = (props) => {
               return props.isCritical;
             },
             get children() {
-              var _el$10 = _tmpl$212();
+              var _el$10 = _tmpl$310();
               insert(_el$10, () => t("preferences.workflow.disabled.notice"));
               effect(() => className(_el$10, style("workflowContainerDisabledNotice", "nt-text-sm nt-text-foreground-alpha-600 nt-text-start")));
               return _el$10;
@@ -2709,7 +2736,7 @@ var PreferencesRow = (props) => {
       }), null);
       effect((_p$) => {
         var _v$ = style("workflowContainer", `nt-p-4 nt-flex nt-flex-col nt-gap-1 nt-items-start nt-self-stretch 
-          hover:nt-bg-neutral-100 nt-rounded-lg data-[disabled=true]:nt-bg-neutral-alpha-50`), _v$2 = props.isCritical, _v$3 = isOpen(), _v$4 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center"), _v$5 = props.isCritical, _v$6 = isOpen(), _v$7 = style("workflowLabel", "nt-text-base nt-font-semibold nt-text-start nt-flex nt-items-center nt-gap-1"), _v$8 = props.isCritical, _v$9 = isOpen(), _v$10 = style("workflowContainerRight__icon", `nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180`), _v$11 = props.isCritical, _v$12 = isOpen();
+          hover:nt-bg-neutral-100 nt-rounded-lg data-[disabled=true]:nt-bg-neutral-alpha-50`), _v$2 = props.isCritical, _v$3 = isOpen(), _v$4 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center"), _v$5 = props.isCritical, _v$6 = isOpen(), _v$7 = style("workflowLabel", "nt-text-base nt-font-semibold nt-text-start nt-flex nt-items-center nt-gap-1"), _v$8 = props.isCritical, _v$9 = props.localizationKey, _v$10 = isOpen(), _v$11 = style("workflowContainerRight__icon", `nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180`), _v$12 = props.isCritical, _v$13 = isOpen();
         _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
         _v$2 !== _p$.t && setAttribute(_el$4, "data-disabled", _p$.t = _v$2);
         _v$3 !== _p$.a && setAttribute(_el$4, "data-open", _p$.a = _v$3);
@@ -2718,10 +2745,11 @@ var PreferencesRow = (props) => {
         _v$6 !== _p$.n && setAttribute(_el$5, "data-open", _p$.n = _v$6);
         _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
         _v$8 !== _p$.h && setAttribute(_el$7, "data-disabled", _p$.h = _v$8);
-        _v$9 !== _p$.r && setAttribute(_el$7, "data-open", _p$.r = _v$9);
-        _v$10 !== _p$.d && className(_el$8, _p$.d = _v$10);
-        _v$11 !== _p$.l && setAttribute(_el$8, "data-disabled", _p$.l = _v$11);
-        _v$12 !== _p$.u && setAttribute(_el$8, "data-open", _p$.u = _v$12);
+        _v$9 !== _p$.r && setAttribute(_el$7, "data-localization", _p$.r = _v$9);
+        _v$10 !== _p$.d && setAttribute(_el$7, "data-open", _p$.d = _v$10);
+        _v$11 !== _p$.l && className(_el$8, _p$.l = _v$11);
+        _v$12 !== _p$.u && setAttribute(_el$8, "data-disabled", _p$.u = _v$12);
+        _v$13 !== _p$.c && setAttribute(_el$8, "data-open", _p$.c = _v$13);
         return _p$;
       }, {
         e: void 0,
@@ -2735,17 +2763,18 @@ var PreferencesRow = (props) => {
         r: void 0,
         d: void 0,
         l: void 0,
-        u: void 0
+        u: void 0,
+        c: void 0
       });
       return _el$4;
     }
   });
 };
 delegateEvents(["click"]);
-var _tmpl$45 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$213 = /* @__PURE__ */ template(`<img>`);
 var _tmpl$311 = /* @__PURE__ */ template(`<p>`);
-var _tmpl$46 = /* @__PURE__ */ template(`<a><div><div class="nt-relative nt-shrink-0 nt-float-right"><p></p><div></div></div><p></p><div>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<a><div><div class="nt-relative nt-shrink-0 nt-float-right"><p></p><div></div></div><p></p><div>`);
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -2770,7 +2799,7 @@ var DefaultNotification = (props) => {
     return () => clearInterval(interval);
   });
   const handleNotificationClick = (e) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     e.stopPropagation();
     e.preventDefault();
     if (!props.notification.isRead) {
@@ -2778,29 +2807,38 @@ var DefaultNotification = (props) => {
     }
     (_a = props.onNotificationClick) == null ? void 0 : _a.call(props, props.notification);
     if ((_b = props.notification.redirect) == null ? void 0 : _b.url) {
-      window.open((_c = props.notification.redirect) == null ? void 0 : _c.url, "_blank", "noreferrer noopener");
+      const target = ((_c = props.notification.redirect) == null ? void 0 : _c.target) || DEFAULT_TARGET;
+      window.open((_d = props.notification.redirect) == null ? void 0 : _d.url, target, DEFAULT_REFERRER);
     }
   };
   const handleActionButtonClick = (action, e) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     e.stopPropagation();
     if (action === "primary" /* PRIMARY */) {
       props.notification.completePrimary();
       (_a = props.onPrimaryActionClick) == null ? void 0 : _a.call(props, props.notification);
+      if ((_c = (_b = props.notification.primaryAction) == null ? void 0 : _b.redirect) == null ? void 0 : _c.url) {
+        const target = ((_e = (_d = props.notification.primaryAction) == null ? void 0 : _d.redirect) == null ? void 0 : _e.target) || DEFAULT_TARGET;
+        window.open((_g = (_f = props.notification.primaryAction) == null ? void 0 : _f.redirect) == null ? void 0 : _g.url, target, DEFAULT_REFERRER);
+      }
     } else {
       props.notification.completeSecondary();
-      (_b = props.onSecondaryActionClick) == null ? void 0 : _b.call(props, props.notification);
+      (_h = props.onSecondaryActionClick) == null ? void 0 : _h.call(props, props.notification);
+      if ((_j = (_i = props.notification.secondaryAction) == null ? void 0 : _i.redirect) == null ? void 0 : _j.url) {
+        const target = ((_l = (_k = props.notification.secondaryAction) == null ? void 0 : _k.redirect) == null ? void 0 : _l.target) || DEFAULT_TARGET;
+        window.open((_n = (_m = props.notification.secondaryAction) == null ? void 0 : _m.redirect) == null ? void 0 : _n.url, target, DEFAULT_REFERRER);
+      }
     }
   };
   return (() => {
-    var _el$ = _tmpl$46(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling, _el$10 = _el$9.nextSibling;
+    var _el$ = _tmpl$47(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling, _el$10 = _el$9.nextSibling;
     _el$.$$click = handleNotificationClick;
     insert(_el$, createComponent(Show, {
       get when() {
         return !props.notification.isRead;
       },
       get children() {
-        var _el$2 = _tmpl$45();
+        var _el$2 = _tmpl$46();
         effect(() => className(_el$2, style("notificationDot", "nt-absolute -nt-translate-x-[1.0625rem] nt-translate-y-1/2 nt-size-2.5 nt-bg-primary nt-rounded-full nt-border")));
         return _el$2;
       }
@@ -2852,8 +2890,9 @@ var DefaultNotification = (props) => {
                     }
                   }))
                 }), createComponent(Tooltip.Content, {
+                  "data-localization": "notification.actions.read.tooltip",
                   get children() {
-                    return t("notification.actions.read.toolTip");
+                    return t("notification.actions.read.tooltip");
                   }
                 })];
               }
@@ -2878,8 +2917,9 @@ var DefaultNotification = (props) => {
                     }
                   }))
                 }), createComponent(Tooltip.Content, {
+                  "data-localization": "notification.actions.unread.tooltip",
                   get children() {
-                    return t("notification.actions.unread.toolTip");
+                    return t("notification.actions.unread.tooltip");
                   }
                 })];
               }
@@ -2911,8 +2951,9 @@ var DefaultNotification = (props) => {
                 }
               }))
             }), createComponent(Tooltip.Content, {
+              "data-localization": "notification.actions.archive.tooltip",
               get children() {
-                return t("notification.actions.archive.toolTip");
+                return t("notification.actions.archive.tooltip");
               }
             })];
           }
@@ -2937,8 +2978,9 @@ var DefaultNotification = (props) => {
                 }
               }))
             }), createComponent(Tooltip.Content, {
+              "data-localization": "notification.actions.unarchive.tooltip",
               get children() {
-                return t("notification.actions.unarchive.toolTip");
+                return t("notification.actions.unarchive.tooltip");
               }
             })];
           }
@@ -2952,7 +2994,7 @@ var DefaultNotification = (props) => {
       get children() {
         var _el$8 = _tmpl$311();
         insert(_el$8, () => props.notification.subject);
-        effect(() => className(_el$8, style("notificationSubject", "nt-font-semibold")));
+        effect(() => className(_el$8, style("notificationSubject", "nt-text-start nt-font-semibold")));
         return _el$8;
       }
     }), _el$9);
@@ -2992,7 +3034,7 @@ var DefaultNotification = (props) => {
       })), _v$4 = style("notificationBody", "nt-overflow-hidden nt-w-full"), _v$5 = style("notificationDate", `nt-transition nt-duration-100 nt-ease-out nt-text-foreground-alpha-400 nt-shrink-0 
               nt-float-right nt-text-right group-hover:nt-opacity-0`), _v$6 = style("notificationDefaultActions", `nt-transition nt-duration-100 nt-ease-out nt-gap-2 nt-flex nt-shrink-0 
               nt-opacity-0 group-hover:nt-opacity-100 nt-justify-center nt-items-center 
-              nt-absolute nt-top-0 nt-right-0  nt-bg-neutral-100 nt-p-0.5 nt-rounded nt-z-50`), _v$7 = style("notificationBody"), _v$8 = style("notificationCustomActions", "nt-flex nt-gap-4 nt-mt-4");
+              nt-absolute nt-top-0 nt-right-0  nt-bg-neutral-100 nt-p-0.5 nt-rounded nt-z-50`), _v$7 = style("notificationBody", "nt-text-start"), _v$8 = style("notificationCustomActions", "nt-flex nt-gap-4 nt-mt-4");
       _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
       _v$4 !== _p$.t && className(_el$4, _p$.t = _v$4);
       _v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
@@ -3017,7 +3059,7 @@ delegateEvents(["click"]);
 var Notification = (props) => {
   return createComponent(Show, {
     get when() {
-      return props.mountNotification;
+      return props.renderNotification;
     },
     get fallback() {
       return createComponent(DefaultNotification, {
@@ -3036,25 +3078,25 @@ var Notification = (props) => {
       });
     },
     get children() {
-      return createComponent(ExternalElementMounter, {
-        mount: (el) => props.mountNotification(el, props.notification)
+      return createComponent(ExternalElementRenderer, {
+        render: (el) => props.renderNotification(el, props.notification)
       });
     }
   });
 };
-var _tmpl$47 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=48 height=48 viewBox="0 0 48 48"fill=none><path fill=currentColor d="M35.2 21.62L32.38 18.8L39.5 11.7L42.32 14.52C42.1 14.58 35.2 21.62 35.2 21.62ZM26 6H22V16H26V6ZM12.8 21.62L15.62 18.8L8.52 11.68L5.68 14.52C5.9 14.58 12.8 21.62 12.8 21.62ZM40 28H33.16C31.62 31.52 28.08 34 24 34C19.92 34 16.38 31.52 14.84 28H8V38H40V28ZM40 24C42.2 24 44 25.8 44 28V38C44 40.2 42.2 42 40 42H8C5.8 42 4 40.2 4 38V28C4 25.8 5.8 24 8 24H18C18 27.32 20.68 30 24 30C27.32 30 30 27.32 30 24H40Z">`);
+var _tmpl$48 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=48 height=48 viewBox="0 0 48 48"fill=none><path fill=currentColor d="M35.2 21.62L32.38 18.8L39.5 11.7L42.32 14.52C42.1 14.58 35.2 21.62 35.2 21.62ZM26 6H22V16H26V6ZM12.8 21.62L15.62 18.8L8.52 11.68L5.68 14.52C5.9 14.58 12.8 21.62 12.8 21.62ZM40 28H33.16C31.62 31.52 28.08 34 24 34C19.92 34 16.38 31.52 14.84 28H8V38H40V28ZM40 24C42.2 24 44 25.8 44 28V38C44 40.2 42.2 42 40 42H8C5.8 42 4 40.2 4 38V28C4 25.8 5.8 24 8 24H18C18 27.32 20.68 30 24 30C27.32 30 30 27.32 30 24H40Z">`);
 function EmptyIcon(props) {
   return (() => {
-    var _el$ = _tmpl$47();
+    var _el$ = _tmpl$48();
     spread(_el$, props, true, true);
     return _el$;
   })();
 }
 var NewMessagesCta = (props) => {
+  const shouldRender = createMemo(() => !!props.count);
   const {
     t
   } = useLocalization();
-  const shouldRender = createMemo(() => !!props.count);
   return createComponent(Show, {
     get when() {
       return shouldRender();
@@ -3066,6 +3108,7 @@ var NewMessagesCta = (props) => {
         get onClick() {
           return props.onClick;
         },
+        "data-localization": "notifications.newNotifications",
         get children() {
           return t("notifications.newNotifications", {
             notificationCount: props.count
@@ -3075,10 +3118,10 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$48 = /* @__PURE__ */ template(`<div class="nt-flex nt-gap-2 nt-p-4 nt-w-full"><div class="nt-flex nt-flex-col nt-self-stretch nt-gap-3 nt-flex-1"><div class="nt-flex nt-gap-1"></div><div class="nt-flex nt-gap-1">`);
+var _tmpl$49 = /* @__PURE__ */ template(`<div class="nt-flex nt-gap-2 nt-p-4 nt-w-full"><div class="nt-flex nt-flex-col nt-self-stretch nt-gap-3 nt-flex-1"><div class="nt-flex nt-gap-1"></div><div class="nt-flex nt-gap-1">`);
 var NotificationSkeleton = () => {
   return (() => {
-    var _el$ = _tmpl$48(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    var _el$ = _tmpl$49(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
     insert(_el$, createComponent(SkeletonAvatar, {
       appearanceKey: "skeletonAvatar"
     }), _el$2);
@@ -3115,7 +3158,7 @@ var NotificationListSkeleton = (props) => {
 };
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$49 = /* @__PURE__ */ template(`<div><p>`);
+var _tmpl$50 = /* @__PURE__ */ template(`<div><p data-localization=notifications.emptyNotice>`);
 var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$312 = /* @__PURE__ */ template(`<div><div>`);
 var EmptyNotificationList = () => {
@@ -3124,7 +3167,7 @@ var EmptyNotificationList = () => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$49(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$50(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(EmptyIcon, {
       get ["class"]() {
         return style("notificationListEmptyNoticeIcon");
@@ -3212,8 +3255,8 @@ var NotificationList = (props) => {
               },
               children: (notification) => createComponent(Notification, {
                 notification,
-                get mountNotification() {
-                  return props.mountNotification;
+                get renderNotification() {
+                  return props.renderNotification;
                 },
                 get onNotificationClick() {
                   return props.onNotificationClick;
@@ -3259,13 +3302,13 @@ var NotificationList = (props) => {
     return _el$3;
   })();
 };
-var _tmpl$50 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$51 = /* @__PURE__ */ template(`<span>`);
 var getDisplayCount = (count) => count >= 100 ? "99+" : count;
 var InboxTabUnreadNotificationsCount = (props) => {
   const style = useStyle();
   const displayCount = createMemo(() => getDisplayCount(props.count));
   return (() => {
-    var _el$ = _tmpl$50();
+    var _el$ = _tmpl$51();
     insert(_el$, displayCount);
     effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
     return _el$;
@@ -3290,7 +3333,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$50();
+        var _el$2 = _tmpl$51();
         insert(_el$2, () => props.label);
         effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -3325,7 +3368,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$50();
+        var _el$3 = _tmpl$51();
         insert(_el$3, () => props.label);
         effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -3500,6 +3543,18 @@ var InboxTabs = (props) => {
         },
         get children() {
           return createComponent(NotificationList, {
+            get renderNotification() {
+              return props.renderNotification;
+            },
+            get onNotificationClick() {
+              return props.onNotificationClick;
+            },
+            get onPrimaryActionClick() {
+              return props.onPrimaryActionClick;
+            },
+            get onSecondaryActionClick() {
+              return props.onSecondaryActionClick;
+            },
             get filter() {
               return __spreadProps(__spreadValues({}, filter()), {
                 tags: tab.value
@@ -3513,7 +3568,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -3535,7 +3590,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$51();
+    var _el$ = _tmpl$52();
     insert(_el$, createComponent(Switch$1, {
       get children() {
         return [createComponent(Match, {
@@ -3554,8 +3609,8 @@ var InboxContent = (props) => {
               },
               get fallback() {
                 return createComponent(NotificationList, {
-                  get mountNotification() {
-                    return props.mountNotification;
+                  get renderNotification() {
+                    return props.renderNotification;
                   },
                   get onNotificationClick() {
                     return props.onNotificationClick;
@@ -3573,6 +3628,18 @@ var InboxContent = (props) => {
               },
               get children() {
                 return createComponent(InboxTabs, {
+                  get renderNotification() {
+                    return props.renderNotification;
+                  },
+                  get onNotificationClick() {
+                    return props.onNotificationClick;
+                  },
+                  get onPrimaryActionClick() {
+                    return props.onPrimaryActionClick;
+                  },
+                  get onSecondaryActionClick() {
+                    return props.onSecondaryActionClick;
+                  },
                   get tabs() {
                     return tabs();
                   }
@@ -3616,8 +3683,8 @@ var Inbox2 = (props) => {
         }, triggerProps, {
           get children() {
             return createComponent(Bell, {
-              get mountBell() {
-                return props.mountBell;
+              get renderBell() {
+                return props.renderBell;
               }
             });
           }
@@ -3626,8 +3693,8 @@ var Inbox2 = (props) => {
         appearanceKey: "inbox__popoverContent",
         get children() {
           return createComponent(InboxContent, {
-            get mountNotification() {
-              return props.mountNotification;
+            get renderNotification() {
+              return props.renderNotification;
             },
             get onNotificationClick() {
               return props.onNotificationClick;
@@ -3749,7 +3816,7 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "2.0.0-canary.1";
+var version = "2.0.0-canary.2";
 var cssHref = `https://cdn.jsdelivr.net/npm/@novu/js@${version}/dist/index.css`;
 var _dispose, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
 var NovuUI = class {