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

package/dist/cjs/ui/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2C4L4ZUQ_cjs = require('../chunk-2C4L4ZUQ.cjs');
+var chunkNEEKTCEQ_cjs = require('../chunk-NEEKTCEQ.cjs');
 var web = require('solid-js/web');
 var solidJs = require('solid-js');
 var store = require('solid-js/store');
@@ -28,30 +28,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] = solidJs.createSignal({});
 
 // src/ui/config/appearanceKeys.ts
 var appearanceKeys = [
@@ -222,7 +221,7 @@ function createInfiniteScroll(fetcher) {
       setData(content.data);
     });
   });
-  const reset = () => chunk2C4L4ZUQ_cjs.__async(this, null, function* () {
+  const reset = () => chunkNEEKTCEQ_cjs.__async(this, null, function* () {
     setData([]);
     setInitialLoading(true);
     setEnd(false);
@@ -433,6 +432,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 = solidJs.createContext(void 0);
 var AppearanceProvider = (props) => {
@@ -469,8 +472,8 @@ var AppearanceProvider = (props) => {
     if (!styleEl) {
       return;
     }
-    const baseVariables = chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, defaultVariables), themes().reduce((acc, obj) => chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, acc), obj.variables || {}), {}));
-    setVariableRules(parseVariables(chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, baseVariables), ((_a = props.appearance) == null ? void 0 : _a.variables) || {}), props.id));
+    const baseVariables = chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues({}, defaultVariables), themes().reduce((acc, obj) => chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues({}, acc), obj.variables || {}), {}));
+    setVariableRules(parseVariables(chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues({}, baseVariables), ((_a = props.appearance) == null ? void 0 : _a.variables) || {}), props.id));
   });
   solidJs.createEffect(() => {
     var _a;
@@ -478,9 +481,9 @@ var AppearanceProvider = (props) => {
     if (!styleEl) {
       return;
     }
-    const baseElements = themes().reduce((acc, obj) => chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, acc), obj.elements || {}), {});
-    const elementsStyleData = parseElements(chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, baseElements), ((_a = props.appearance) == null ? void 0 : _a.elements) || {}));
-    setStore("appearanceKeyToCssInJsClass", (obj) => chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, obj), elementsStyleData.reduce((acc, item) => {
+    const baseElements = themes().reduce((acc, obj) => chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues({}, acc), obj.elements || {}), {});
+    const elementsStyleData = parseElements(chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues({}, baseElements), ((_a = props.appearance) == null ? void 0 : _a.elements) || {}));
+    setStore("appearanceKeyToCssInJsClass", (obj) => chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues({}, obj), elementsStyleData.reduce((acc, item) => {
       acc[item.key] = item.className;
       return acc;
     }, {})));
@@ -588,6 +591,41 @@ var useWebSocketEvent = ({
     });
   });
 };
+var LocalizationContext = solidJs.createContext(void 0);
+var LocalizationProvider = (props) => {
+  const localization = solidJs.createMemo(() => {
+    const _a = props.localization || {}, {
+      dynamic
+    } = _a, localizationObject = chunkNEEKTCEQ_cjs.__objRest(_a, [
+      "dynamic"
+    ]);
+    return chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__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 = solidJs.createMemo(() => localization().locale);
+  return web.createComponent(LocalizationContext.Provider, {
+    value: {
+      t,
+      locale
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useLocalization() {
+  const context = solidJs.useContext(LocalizationContext);
+  if (!context) {
+    throw new Error("useLocalization must be used within an LocalizationProvider");
+  }
+  return context;
+}
 
 // src/ui/types.ts
 var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
@@ -615,12 +653,12 @@ var InboxProvider = (props) => {
   const [tabs, setTabs] = solidJs.createSignal(props.tabs);
   const [activeTab, setActiveTab] = solidJs.createSignal((_a = props.tabs[0] && props.tabs[0].label) != null ? _a : "");
   const [status, setStatus] = solidJs.createSignal("unreadRead" /* UNREAD_READ */);
-  const [filter, setFilter] = solidJs.createSignal(chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
+  const [filter, setFilter] = solidJs.createSignal(chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
     tags: props.tabs.length > 0 ? props.tabs[0].value : []
   }));
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
-    setFilter((old) => chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
+    setFilter((old) => chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
       tags: old.tags
     }));
   };
@@ -631,7 +669,7 @@ var InboxProvider = (props) => {
       return;
     }
     setActiveTab(newActiveTab);
-    setFilter((old) => chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, old), {
+    setFilter((old) => chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, old), {
       tags
     }));
   };
@@ -642,7 +680,7 @@ var InboxProvider = (props) => {
     setActiveTab((_a2 = firstTab == null ? void 0 : firstTab.label) != null ? _a2 : "");
     setFilter((old) => {
       var _a3;
-      return chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, old), {
+      return chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, old), {
         tags: (_a3 = firstTab == null ? void 0 : firstTab.value) != null ? _a3 : []
       });
     });
@@ -670,7 +708,7 @@ var useInboxContext = () => {
 };
 var NovuContext = solidJs.createContext(void 0);
 function NovuProvider(props) {
-  const novu = solidJs.createMemo(() => new chunk2C4L4ZUQ_cjs.Novu(props.options));
+  const novu = solidJs.createMemo(() => new chunkNEEKTCEQ_cjs.Novu(props.options));
   return web.createComponent(NovuContext.Provider, {
     get value() {
       return novu();
@@ -698,7 +736,7 @@ var CountProvider = (props) => {
   const [totalUnreadCount, setTotalUnreadCount] = solidJs.createSignal(0);
   const [unreadCounts, setUnreadCounts] = solidJs.createSignal(/* @__PURE__ */ new Map());
   const [newNotificationCounts, setNewNotificationCounts] = solidJs.createSignal(/* @__PURE__ */ new Map());
-  const updateTabCounts = () => chunk2C4L4ZUQ_cjs.__async(void 0, null, function* () {
+  const updateTabCounts = () => chunkNEEKTCEQ_cjs.__async(void 0, null, function* () {
     if (tabs().length === 0) {
       return;
     }
@@ -746,7 +784,7 @@ var CountProvider = (props) => {
   });
   useWebSocketEvent({
     event: "notifications.notification_received",
-    eventHandler: (data) => chunk2C4L4ZUQ_cjs.__async(void 0, null, function* () {
+    eventHandler: (data) => chunkNEEKTCEQ_cjs.__async(void 0, null, function* () {
       var _a;
       const notification = data.result;
       const allTabs = tabs();
@@ -917,44 +955,16 @@ function useFocusManager() {
   }
   return context;
 }
-var LocalizationContext = solidJs.createContext(void 0);
-var LocalizationProvider = (props) => {
-  const localization = solidJs.createMemo(() => chunk2C4L4ZUQ_cjs.__spreadValues(chunk2C4L4ZUQ_cjs.__spreadValues({}, defaultLocalization), props.localization || {}));
-  const t = (key, ...args) => {
-    const value = localization()[key];
-    if (typeof value === "function") {
-      return value(args[0]);
-    }
-    return value;
-  };
-  const locale = solidJs.createMemo(() => localization().locale);
-  return web.createComponent(LocalizationContext.Provider, {
-    value: {
-      t,
-      locale
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-function useLocalization() {
-  const context = solidJs.useContext(LocalizationContext);
-  if (!context) {
-    throw new Error("useLocalization must be used within an LocalizationProvider");
-  }
-  return context;
-}
 var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-var ExternalElementMounter = (_a) => {
+var ExternalElementRenderer = (_a) => {
   var _b = _a, {
-    mount
-  } = _b, rest = chunk2C4L4ZUQ_cjs.__objRest(_b, [
-    "mount"
+    render: render2
+  } = _b, rest = chunkNEEKTCEQ_cjs.__objRest(_b, [
+    "render"
   ]);
   let ref;
-  solidJs.onMount(() => {
-    const unmount = mount(ref);
+  solidJs.createEffect(() => {
+    const unmount = render2(ref);
     solidJs.onCleanup(() => {
       unmount();
     });
@@ -1150,7 +1160,7 @@ var Bell = (props) => {
   } = useTotalUnreadCount();
   return web.createComponent(solidJs.Show, {
     get when() {
-      return props.mountBell;
+      return props.renderBell;
     },
     get fallback() {
       return web.createComponent(BellContainer, {
@@ -1160,8 +1170,8 @@ var Bell = (props) => {
       });
     },
     get children() {
-      return web.createComponent(ExternalElementMounter, {
-        mount: (el) => props.mountBell(el, totalUnreadCount())
+      return web.createComponent(ExternalElementRenderer, {
+        render: (el) => props.renderBell(el, totalUnreadCount())
       });
     }
   });
@@ -1727,14 +1737,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__ */ web.template(`<span><span></span><span>`);
 var _tmpl$210 = /* @__PURE__ */ web.template(`<span>`);
@@ -1749,14 +1759,11 @@ var cases = [{
   icon: Archive
 }];
 var StatusOptions = (props) => {
-  const {
-    t
-  } = useLocalization();
   return web.createComponent(solidJs.For, {
     each: cases,
     children: (c) => web.createComponent(StatusItem, {
-      get label() {
-        return t(notificationStatusOptionsLocalizationKeys[c.status]);
+      get localizationKey() {
+        return notificationStatusOptionsLocalizationKeys[c.status];
       },
       onClick: () => {
         props.setStatus(c.status);
@@ -1772,6 +1779,9 @@ var StatusOptions = (props) => {
 };
 var StatusItem = (props) => {
   const style = useStyle();
+  const {
+    t
+  } = useLocalization();
   return web.createComponent(Dropdown.Item, {
     get ["class"]() {
       return style("inboxStatus__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-8 nt-justify-between"));
@@ -1783,17 +1793,19 @@ var StatusItem = (props) => {
       return [(() => {
         var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         web.insert(_el$2, () => props.icon());
-        web.insert(_el$3, () => props.label);
+        web.insert(_el$3, () => t(props.localizationKey));
         web.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 && web.className(_el$, _p$.e = _v$);
           _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-          _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
+          _v$3 !== _p$.a && web.setAttribute(_el$3, "data-localization", _p$.a = _v$3);
+          _v$4 !== _p$.o && web.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$;
       })(), web.createComponent(solidJs.Show, {
@@ -1838,8 +1850,16 @@ var StatusDropdown = () => {
           get children() {
             return [(() => {
               var _el$ = _tmpl$32();
-              web.insert(_el$, () => t(inboxStatusLocalizationKeys[status()]));
-              web.effect(() => web.className(_el$, style("inboxStatus__title", "nt-text-xl nt-font-semibold")));
+              web.insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
+              web.effect((_p$) => {
+                var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-xl nt-font-semibold");
+                _v$ !== _p$.e && web.setAttribute(_el$, "data-localization", _p$.e = _v$);
+                _v$2 !== _p$.t && web.className(_el$, _p$.t = _v$2);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
               return _el$;
             })(), (() => {
               var _el$2 = _tmpl$32();
@@ -1865,15 +1885,15 @@ var StatusDropdown = () => {
 };
 var useNotificationsInfiniteScroll = (props) => {
   const novu = useNovu();
-  let filter = chunk2C4L4ZUQ_cjs.__spreadValues({}, props.options());
-  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => chunk2C4L4ZUQ_cjs.__async(void 0, null, function* () {
+  let filter = chunkNEEKTCEQ_cjs.__spreadValues({}, props.options());
+  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => chunkNEEKTCEQ_cjs.__async(void 0, null, function* () {
     var _a, _b;
-    const { data: data2 } = yield novu.notifications.list(chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, props.options() || {}), { offset: offset3 }));
+    const { data: data2 } = yield novu.notifications.list(chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, props.options() || {}), { offset: offset3 }));
     return { data: (_a = data2 == null ? void 0 : data2.notifications) != null ? _a : [], hasMore: (_b = data2 == null ? void 0 : data2.hasMore) != null ? _b : false };
   }));
   solidJs.onMount(() => {
     const listener = ({ data: data2 }) => {
-      if (!data2 || !chunk2C4L4ZUQ_cjs.isSameFilter(filter, data2.filter)) {
+      if (!data2 || !chunkNEEKTCEQ_cjs.isSameFilter(filter, data2.filter)) {
         return;
       }
       mutate({ data: data2.notifications, hasMore: data2.hasMore });
@@ -1882,8 +1902,8 @@ var useNotificationsInfiniteScroll = (props) => {
     solidJs.onCleanup(() => novu.off("notifications.list.updated", listener));
   });
   solidJs.createEffect(() => {
-    const newFilter = chunk2C4L4ZUQ_cjs.__spreadValues({}, props.options());
-    if (chunk2C4L4ZUQ_cjs.isSameFilter(filter, newFilter)) {
+    const newFilter = chunkNEEKTCEQ_cjs.__spreadValues({}, props.options());
+    if (chunkNEEKTCEQ_cjs.isSameFilter(filter, newFilter)) {
       return;
     }
     novu.notifications.clearCache();
@@ -1899,7 +1919,7 @@ var useNotificationsInfiniteScroll = (props) => {
 var usePreferences = (options) => {
   const novu = useNovu();
   const [loading, setLoading] = createDelayedLoading(true, 300);
-  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, () => chunk2C4L4ZUQ_cjs.__async(void 0, null, function* () {
+  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, () => chunkNEEKTCEQ_cjs.__async(void 0, null, function* () {
     try {
       const response = yield novu.preferences.list();
       return response.data;
@@ -1917,7 +1937,7 @@ var usePreferences = (options) => {
 // src/ui/api/hooks/useReadAll.ts
 var useReadAll = (props) => {
   const novu = useNovu();
-  const readAll = (..._0) => chunk2C4L4ZUQ_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const readAll = (..._0) => chunkNEEKTCEQ_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.readAll({ tags });
@@ -1932,7 +1952,7 @@ var useReadAll = (props) => {
 // src/ui/api/hooks/useArchiveAll.ts
 var useArchiveAll = (props) => {
   const novu = useNovu();
-  const archiveAll = (..._0) => chunk2C4L4ZUQ_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const archiveAll = (..._0) => chunkNEEKTCEQ_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.archiveAll({ tags });
@@ -1947,7 +1967,7 @@ var useArchiveAll = (props) => {
 // src/ui/api/hooks/useArchiveAllRead.ts
 var useArchiveAllRead = (props) => {
   const novu = useNovu();
-  const archiveAllRead = (..._0) => chunk2C4L4ZUQ_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const archiveAllRead = (..._0) => chunkNEEKTCEQ_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.archiveAllRead({ tags });
@@ -1962,9 +1982,6 @@ var useArchiveAllRead = (props) => {
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
 var _tmpl$33 = /* @__PURE__ */ web.template(`<span>`);
 var MoreActionsOptions = () => {
-  const {
-    t
-  } = useLocalization();
   const {
     filter
   } = useInboxContext();
@@ -1978,25 +1995,19 @@ var MoreActionsOptions = () => {
     archiveAllRead
   } = useArchiveAllRead();
   return [web.createComponent(ActionsItem, {
-    get label() {
-      return t("notifications.actions.readAll");
-    },
+    localizationKey: "notifications.actions.readAll",
     onClick: () => readAll({
       tags: filter().tags
     }),
     icon: ReadAll
   }), web.createComponent(ActionsItem, {
-    get label() {
-      return t("notifications.actions.archiveAll");
-    },
+    localizationKey: "notifications.actions.archiveAll",
     onClick: () => archiveAll({
       tags: filter().tags
     }),
     icon: Archive
   }), web.createComponent(ActionsItem, {
-    get label() {
-      return t("notifications.actions.archiveRead");
-    },
+    localizationKey: "notifications.actions.archiveRead",
     onClick: () => archiveAllRead({
       tags: filter().tags
     }),
@@ -2005,6 +2016,9 @@ var MoreActionsOptions = () => {
 };
 var ActionsItem = (props) => {
   const style = useStyle();
+  const {
+    t
+  } = useLocalization();
   return web.createComponent(Dropdown.Item, {
     get ["class"]() {
       return style("moreActions__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-2"));
@@ -2020,8 +2034,16 @@ var ActionsItem = (props) => {
         return _el$;
       })(), (() => {
         var _el$2 = _tmpl$33();
-        web.insert(_el$2, () => props.label);
-        web.effect(() => web.className(_el$2, style("moreActions__dropdownItemLabel")));
+        web.insert(_el$2, () => t(props.localizationKey));
+        web.effect((_p$) => {
+          var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel");
+          _v$ !== _p$.e && web.setAttribute(_el$2, "data-localization", _p$.e = _v$);
+          _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
         return _el$2;
       })()];
     }
@@ -2113,7 +2135,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$36 = /* @__PURE__ */ web.template(`<div><div>`);
+var _tmpl$36 = /* @__PURE__ */ web.template(`<div><div data-localization=preferences.title>`);
 var _tmpl$211 = /* @__PURE__ */ web.template(`<button>`);
 var PreferencesHeader = (props) => {
   const style = useStyle();
@@ -2367,7 +2389,7 @@ var _tmpl$41 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span><
 var ChannelRow = (props) => {
   const novu = useNovu();
   const style = useStyle();
-  const updatePreference = (enabled) => chunk2C4L4ZUQ_cjs.__async(void 0, null, function* () {
+  const updatePreference = (enabled) => chunkNEEKTCEQ_cjs.__async(void 0, null, function* () {
     if (props.isCritical) {
       return;
     }
@@ -2508,12 +2530,10 @@ var LoadingSkeleton = () => {
 // src/ui/components/elements/Preferences/Preferences.tsx
 var _tmpl$44 = /* @__PURE__ */ web.template(`<div>`);
 var _tmpl$212 = /* @__PURE__ */ web.template(`<span>`);
-var _tmpl$310 = /* @__PURE__ */ web.template(`<div><div><div><div></div></div><span>`);
+var _tmpl$310 = /* @__PURE__ */ web.template(`<span data-localization=preferences.workflow.disabled.notice>`);
+var _tmpl$45 = /* @__PURE__ */ web.template(`<div><div><div><div></div></div><span>`);
 var Preferences = () => {
   const style = useStyle();
-  const {
-    t
-  } = useLocalization();
   const {
     preferences,
     loading,
@@ -2528,6 +2548,15 @@ var Preferences = () => {
       workflowPreferences
     };
   });
+  solidJs.createEffect(() => {
+    setDynamicLocalization((prev) => {
+      var _a;
+      return chunkNEEKTCEQ_cjs.__spreadValues(chunkNEEKTCEQ_cjs.__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,
@@ -2557,9 +2586,7 @@ var Preferences = () => {
       },
       get children() {
         return [web.createComponent(PreferencesRow, {
-          get label() {
-            return t("preferences.global");
-          },
+          localizationKey: "preferences.global",
           get channels() {
             var _a;
             return ((_a = allPreferences().globalPreference) == null ? void 0 : _a.channels) || {};
@@ -2570,9 +2597,8 @@ var Preferences = () => {
             return allPreferences().workflowPreferences;
           },
           children: (preference) => web.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;
@@ -2632,7 +2658,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);
       web.insert(_el$7, web.createComponent(solidJs.Show, {
         get when() {
@@ -2653,6 +2679,7 @@ var PreferencesRow = (props) => {
                   return _el$11;
                 })()
               }), web.createComponent(Tooltip.Content, {
+                "data-localization": "preferences.workflow.disabled.tooltip",
                 get children() {
                   return t("preferences.workflow.disabled.tooltip");
                 }
@@ -2661,7 +2688,7 @@ var PreferencesRow = (props) => {
           });
         }
       }), null);
-      web.insert(_el$7, () => props.label, null);
+      web.insert(_el$7, () => t(props.localizationKey), null);
       web.insert(_el$6, web.createComponent(ChannelsLabel, {
         get channels() {
           return props.channels;
@@ -2683,7 +2710,7 @@ var PreferencesRow = (props) => {
               return props.isCritical;
             },
             get children() {
-              var _el$10 = _tmpl$212();
+              var _el$10 = _tmpl$310();
               web.insert(_el$10, () => t("preferences.workflow.disabled.notice"));
               web.effect(() => web.className(_el$10, style("workflowContainerDisabledNotice", "nt-text-sm nt-text-foreground-alpha-600 nt-text-start")));
               return _el$10;
@@ -2715,7 +2742,7 @@ var PreferencesRow = (props) => {
       }), null);
       web.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 && web.className(_el$4, _p$.e = _v$);
         _v$2 !== _p$.t && web.setAttribute(_el$4, "data-disabled", _p$.t = _v$2);
         _v$3 !== _p$.a && web.setAttribute(_el$4, "data-open", _p$.a = _v$3);
@@ -2724,10 +2751,11 @@ var PreferencesRow = (props) => {
         _v$6 !== _p$.n && web.setAttribute(_el$5, "data-open", _p$.n = _v$6);
         _v$7 !== _p$.s && web.className(_el$7, _p$.s = _v$7);
         _v$8 !== _p$.h && web.setAttribute(_el$7, "data-disabled", _p$.h = _v$8);
-        _v$9 !== _p$.r && web.setAttribute(_el$7, "data-open", _p$.r = _v$9);
-        _v$10 !== _p$.d && web.className(_el$8, _p$.d = _v$10);
-        _v$11 !== _p$.l && web.setAttribute(_el$8, "data-disabled", _p$.l = _v$11);
-        _v$12 !== _p$.u && web.setAttribute(_el$8, "data-open", _p$.u = _v$12);
+        _v$9 !== _p$.r && web.setAttribute(_el$7, "data-localization", _p$.r = _v$9);
+        _v$10 !== _p$.d && web.setAttribute(_el$7, "data-open", _p$.d = _v$10);
+        _v$11 !== _p$.l && web.className(_el$8, _p$.l = _v$11);
+        _v$12 !== _p$.u && web.setAttribute(_el$8, "data-disabled", _p$.u = _v$12);
+        _v$13 !== _p$.c && web.setAttribute(_el$8, "data-open", _p$.c = _v$13);
         return _p$;
       }, {
         e: void 0,
@@ -2741,17 +2769,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;
     }
   });
 };
 web.delegateEvents(["click"]);
-var _tmpl$45 = /* @__PURE__ */ web.template(`<span>`);
+var _tmpl$46 = /* @__PURE__ */ web.template(`<span>`);
 var _tmpl$213 = /* @__PURE__ */ web.template(`<img>`);
 var _tmpl$311 = /* @__PURE__ */ web.template(`<p>`);
-var _tmpl$46 = /* @__PURE__ */ web.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__ */ web.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 {
@@ -2776,7 +2805,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) {
@@ -2784,29 +2813,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;
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
         return !props.notification.isRead;
       },
       get children() {
-        var _el$2 = _tmpl$45();
+        var _el$2 = _tmpl$46();
         web.effect(() => web.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;
       }
@@ -2858,8 +2896,9 @@ var DefaultNotification = (props) => {
                     }
                   }))
                 }), web.createComponent(Tooltip.Content, {
+                  "data-localization": "notification.actions.read.tooltip",
                   get children() {
-                    return t("notification.actions.read.toolTip");
+                    return t("notification.actions.read.tooltip");
                   }
                 })];
               }
@@ -2884,8 +2923,9 @@ var DefaultNotification = (props) => {
                     }
                   }))
                 }), web.createComponent(Tooltip.Content, {
+                  "data-localization": "notification.actions.unread.tooltip",
                   get children() {
-                    return t("notification.actions.unread.toolTip");
+                    return t("notification.actions.unread.tooltip");
                   }
                 })];
               }
@@ -2917,8 +2957,9 @@ var DefaultNotification = (props) => {
                 }
               }))
             }), web.createComponent(Tooltip.Content, {
+              "data-localization": "notification.actions.archive.tooltip",
               get children() {
-                return t("notification.actions.archive.toolTip");
+                return t("notification.actions.archive.tooltip");
               }
             })];
           }
@@ -2943,8 +2984,9 @@ var DefaultNotification = (props) => {
                 }
               }))
             }), web.createComponent(Tooltip.Content, {
+              "data-localization": "notification.actions.unarchive.tooltip",
               get children() {
-                return t("notification.actions.unarchive.toolTip");
+                return t("notification.actions.unarchive.tooltip");
               }
             })];
           }
@@ -2958,7 +3000,7 @@ var DefaultNotification = (props) => {
       get children() {
         var _el$8 = _tmpl$311();
         web.insert(_el$8, () => props.notification.subject);
-        web.effect(() => web.className(_el$8, style("notificationSubject", "nt-font-semibold")));
+        web.effect(() => web.className(_el$8, style("notificationSubject", "nt-text-start nt-font-semibold")));
         return _el$8;
       }
     }), _el$9);
@@ -2998,7 +3040,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 && web.className(_el$, _p$.e = _v$3);
       _v$4 !== _p$.t && web.className(_el$4, _p$.t = _v$4);
       _v$5 !== _p$.a && web.className(_el$6, _p$.a = _v$5);
@@ -3023,7 +3065,7 @@ web.delegateEvents(["click"]);
 var Notification = (props) => {
   return web.createComponent(solidJs.Show, {
     get when() {
-      return props.mountNotification;
+      return props.renderNotification;
     },
     get fallback() {
       return web.createComponent(DefaultNotification, {
@@ -3042,25 +3084,25 @@ var Notification = (props) => {
       });
     },
     get children() {
-      return web.createComponent(ExternalElementMounter, {
-        mount: (el) => props.mountNotification(el, props.notification)
+      return web.createComponent(ExternalElementRenderer, {
+        render: (el) => props.renderNotification(el, props.notification)
       });
     }
   });
 };
-var _tmpl$47 = /* @__PURE__ */ web.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__ */ web.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();
     web.spread(_el$, props, true, true);
     return _el$;
   })();
 }
 var NewMessagesCta = (props) => {
+  const shouldRender = solidJs.createMemo(() => !!props.count);
   const {
     t
   } = useLocalization();
-  const shouldRender = solidJs.createMemo(() => !!props.count);
   return web.createComponent(solidJs.Show, {
     get when() {
       return shouldRender();
@@ -3072,6 +3114,7 @@ var NewMessagesCta = (props) => {
         get onClick() {
           return props.onClick;
         },
+        "data-localization": "notifications.newNotifications",
         get children() {
           return t("notifications.newNotifications", {
             notificationCount: props.count
@@ -3081,10 +3124,10 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$48 = /* @__PURE__ */ web.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__ */ web.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;
     web.insert(_el$, web.createComponent(SkeletonAvatar, {
       appearanceKey: "skeletonAvatar"
     }), _el$2);
@@ -3121,7 +3164,7 @@ var NotificationListSkeleton = (props) => {
 };
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$49 = /* @__PURE__ */ web.template(`<div><p>`);
+var _tmpl$50 = /* @__PURE__ */ web.template(`<div><p data-localization=notifications.emptyNotice>`);
 var _tmpl$214 = /* @__PURE__ */ web.template(`<div>`);
 var _tmpl$312 = /* @__PURE__ */ web.template(`<div><div>`);
 var EmptyNotificationList = () => {
@@ -3130,7 +3173,7 @@ var EmptyNotificationList = () => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$49(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$50(), _el$2 = _el$.firstChild;
     web.insert(_el$, web.createComponent(EmptyIcon, {
       get ["class"]() {
         return style("notificationListEmptyNoticeIcon");
@@ -3151,7 +3194,7 @@ var EmptyNotificationList = () => {
 };
 var NotificationList = (props) => {
   var _a, _b;
-  const options = solidJs.createMemo(() => chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, props.filter), {
+  const options = solidJs.createMemo(() => chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, props.filter), {
     limit: props.limit
   }));
   const style = useStyle();
@@ -3173,7 +3216,7 @@ var NotificationList = (props) => {
     }
   });
   let notificationListElement;
-  const handleOnNewMessagesClick = (e) => chunk2C4L4ZUQ_cjs.__async(void 0, null, function* () {
+  const handleOnNewMessagesClick = (e) => chunkNEEKTCEQ_cjs.__async(void 0, null, function* () {
     e.stopPropagation();
     resetNewMessagesCount();
     refetch({
@@ -3218,8 +3261,8 @@ var NotificationList = (props) => {
               },
               children: (notification) => web.createComponent(Notification, {
                 notification,
-                get mountNotification() {
-                  return props.mountNotification;
+                get renderNotification() {
+                  return props.renderNotification;
                 },
                 get onNotificationClick() {
                   return props.onNotificationClick;
@@ -3265,13 +3308,13 @@ var NotificationList = (props) => {
     return _el$3;
   })();
 };
-var _tmpl$50 = /* @__PURE__ */ web.template(`<span>`);
+var _tmpl$51 = /* @__PURE__ */ web.template(`<span>`);
 var getDisplayCount = (count) => count >= 100 ? "99+" : count;
 var InboxTabUnreadNotificationsCount = (props) => {
   const style = useStyle();
   const displayCount = solidJs.createMemo(() => getDisplayCount(props.count));
   return (() => {
-    var _el$ = _tmpl$50();
+    var _el$ = _tmpl$51();
     web.insert(_el$, displayCount);
     web.effect(() => web.className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
     return _el$;
@@ -3296,7 +3339,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$50();
+        var _el$2 = _tmpl$51();
         web.insert(_el$2, () => props.label);
         web.effect(() => web.className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -3331,7 +3374,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$50();
+        var _el$3 = _tmpl$51();
         web.insert(_el$3, () => props.label);
         web.effect(() => web.className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -3402,7 +3445,7 @@ var InboxTabs = (props) => {
       tags: tab.value
     }))
   });
-  const options = solidJs.createMemo(() => dropdownTabs().map((tab) => chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, tab), {
+  const options = solidJs.createMemo(() => dropdownTabs().map((tab) => chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, tab), {
     rightIcon: tab.label === activeTab() ? web.createComponent(Check, {
       get ["class"]() {
         return style("moreTabs__dropdownItemRight__icon");
@@ -3506,8 +3549,20 @@ var InboxTabs = (props) => {
         },
         get children() {
           return web.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 chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, filter()), {
+              return chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, filter()), {
                 tags: tab.value
               });
             }
@@ -3519,7 +3574,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$51 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$52 = /* @__PURE__ */ web.template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -3541,7 +3596,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$51();
+    var _el$ = _tmpl$52();
     web.insert(_el$, web.createComponent(solidJs.Switch, {
       get children() {
         return [web.createComponent(solidJs.Match, {
@@ -3560,8 +3615,8 @@ var InboxContent = (props) => {
               },
               get fallback() {
                 return web.createComponent(NotificationList, {
-                  get mountNotification() {
-                    return props.mountNotification;
+                  get renderNotification() {
+                    return props.renderNotification;
                   },
                   get onNotificationClick() {
                     return props.onNotificationClick;
@@ -3579,6 +3634,18 @@ var InboxContent = (props) => {
               },
               get children() {
                 return web.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();
                   }
@@ -3622,8 +3689,8 @@ var Inbox2 = (props) => {
         }, triggerProps, {
           get children() {
             return web.createComponent(Bell, {
-              get mountBell() {
-                return props.mountBell;
+              get renderBell() {
+                return props.renderBell;
               }
             });
           }
@@ -3632,8 +3699,8 @@ var Inbox2 = (props) => {
         appearanceKey: "inbox__popoverContent",
         get children() {
           return web.createComponent(InboxContent, {
-            get mountNotification() {
-              return props.mountNotification;
+            get renderNotification() {
+              return props.renderNotification;
             },
             get onNotificationClick() {
               return props.onNotificationClick;
@@ -3755,24 +3822,24 @@ 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 {
   constructor(props) {
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _NovuUI_instances);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _dispose, null);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _rootElement);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _mountedElements);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _setMountedElements);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _appearance);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _setAppearance);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _localization);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _setLocalization);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _options);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _setOptions);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _tabs);
-    chunk2C4L4ZUQ_cjs.__privateAdd(this, _setTabs);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _NovuUI_instances);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _dispose, null);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _rootElement);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _mountedElements);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _setMountedElements);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _appearance);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _setAppearance);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _localization);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _setLocalization);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _options);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _setOptions);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _tabs);
+    chunkNEEKTCEQ_cjs.__privateAdd(this, _setTabs);
     var _a;
     this.id = generateRandomString(16);
     const [appearance, setAppearance] = solidJs.createSignal(props.appearance);
@@ -3780,27 +3847,27 @@ var NovuUI = class {
     const [options, setOptions] = solidJs.createSignal(props.options);
     const [mountedElements, setMountedElements] = solidJs.createSignal(/* @__PURE__ */ new Map());
     const [tabs, setTabs] = solidJs.createSignal((_a = props.tabs) != null ? _a : []);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _mountedElements, mountedElements);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _setMountedElements, setMountedElements);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _appearance, appearance);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _setAppearance, setAppearance);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _localization, localization);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _setLocalization, setLocalization);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _options, options);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _setOptions, setOptions);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _tabs, tabs);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _setTabs, setTabs);
-    chunk2C4L4ZUQ_cjs.__privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _mountedElements, mountedElements);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _setMountedElements, setMountedElements);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _appearance, appearance);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _setAppearance, setAppearance);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _localization, localization);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _setLocalization, setLocalization);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _options, options);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _setOptions, setOptions);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _tabs, tabs);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _setTabs, setTabs);
+    chunkNEEKTCEQ_cjs.__privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
   }
   mountComponent({
     name,
     element,
     props: componentProps
   }) {
-    if (chunk2C4L4ZUQ_cjs.__privateGet(this, _mountedElements).call(this).has(element)) {
-      return chunk2C4L4ZUQ_cjs.__privateMethod(this, _NovuUI_instances, updateComponentProps_fn).call(this, element, componentProps);
+    if (chunkNEEKTCEQ_cjs.__privateGet(this, _mountedElements).call(this).has(element)) {
+      return chunkNEEKTCEQ_cjs.__privateMethod(this, _NovuUI_instances, updateComponentProps_fn).call(this, element, componentProps);
     }
-    chunk2C4L4ZUQ_cjs.__privateGet(this, _setMountedElements).call(this, (oldNodes) => {
+    chunkNEEKTCEQ_cjs.__privateGet(this, _setMountedElements).call(this, (oldNodes) => {
       const newNodes = new Map(oldNodes);
       newNodes.set(element, {
         name,
@@ -3810,29 +3877,29 @@ var NovuUI = class {
     });
   }
   unmountComponent(element) {
-    chunk2C4L4ZUQ_cjs.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
+    chunkNEEKTCEQ_cjs.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
       const newMountedElements = new Map(oldMountedElements);
       newMountedElements.delete(element);
       return newMountedElements;
     });
   }
   updateAppearance(appearance) {
-    chunk2C4L4ZUQ_cjs.__privateGet(this, _setAppearance).call(this, appearance);
+    chunkNEEKTCEQ_cjs.__privateGet(this, _setAppearance).call(this, appearance);
   }
   updateLocalization(localization) {
-    chunk2C4L4ZUQ_cjs.__privateGet(this, _setLocalization).call(this, localization);
+    chunkNEEKTCEQ_cjs.__privateGet(this, _setLocalization).call(this, localization);
   }
   updateOptions(options) {
-    chunk2C4L4ZUQ_cjs.__privateGet(this, _setOptions).call(this, options);
+    chunkNEEKTCEQ_cjs.__privateGet(this, _setOptions).call(this, options);
   }
   updateTabs(tabs) {
-    chunk2C4L4ZUQ_cjs.__privateGet(this, _setTabs).call(this, tabs != null ? tabs : []);
+    chunkNEEKTCEQ_cjs.__privateGet(this, _setTabs).call(this, tabs != null ? tabs : []);
   }
   unmount() {
     var _a, _b;
-    (_a = chunk2C4L4ZUQ_cjs.__privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
-    chunk2C4L4ZUQ_cjs.__privateSet(this, _dispose, null);
-    (_b = chunk2C4L4ZUQ_cjs.__privateGet(this, _rootElement)) == null ? void 0 : _b.remove();
+    (_a = chunkNEEKTCEQ_cjs.__privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+    chunkNEEKTCEQ_cjs.__privateSet(this, _dispose, null);
+    (_b = chunkNEEKTCEQ_cjs.__privateGet(this, _rootElement)) == null ? void 0 : _b.remove();
   }
 };
 _dispose = new WeakMap();
@@ -3849,12 +3916,12 @@ _tabs = new WeakMap();
 _setTabs = new WeakMap();
 _NovuUI_instances = new WeakSet();
 mountComponentRenderer_fn = function() {
-  if (chunk2C4L4ZUQ_cjs.__privateGet(this, _dispose) !== null) {
+  if (chunkNEEKTCEQ_cjs.__privateGet(this, _dispose) !== null) {
     return;
   }
-  chunk2C4L4ZUQ_cjs.__privateSet(this, _rootElement, document.createElement("div"));
-  chunk2C4L4ZUQ_cjs.__privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
-  document.body.appendChild(chunk2C4L4ZUQ_cjs.__privateGet(this, _rootElement));
+  chunkNEEKTCEQ_cjs.__privateSet(this, _rootElement, document.createElement("div"));
+  chunkNEEKTCEQ_cjs.__privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
+  document.body.appendChild(chunkNEEKTCEQ_cjs.__privateGet(this, _rootElement));
   const dispose = web.render(() => {
     const _self$ = this;
     return web.createComponent(Renderer, {
@@ -3862,34 +3929,34 @@ mountComponentRenderer_fn = function() {
       novuUI: _self$,
       get nodes() {
         var _a;
-        return chunk2C4L4ZUQ_cjs.__privateGet(_a = _self$, _mountedElements).call(_a);
+        return chunkNEEKTCEQ_cjs.__privateGet(_a = _self$, _mountedElements).call(_a);
       },
       get options() {
         var _a;
-        return chunk2C4L4ZUQ_cjs.__privateGet(_a = _self$, _options).call(_a);
+        return chunkNEEKTCEQ_cjs.__privateGet(_a = _self$, _options).call(_a);
       },
       get appearance() {
         var _a;
-        return chunk2C4L4ZUQ_cjs.__privateGet(_a = _self$, _appearance).call(_a);
+        return chunkNEEKTCEQ_cjs.__privateGet(_a = _self$, _appearance).call(_a);
       },
       get localization() {
         var _a;
-        return chunk2C4L4ZUQ_cjs.__privateGet(_a = _self$, _localization).call(_a);
+        return chunkNEEKTCEQ_cjs.__privateGet(_a = _self$, _localization).call(_a);
       },
       get tabs() {
         var _a;
-        return chunk2C4L4ZUQ_cjs.__privateGet(_a = _self$, _tabs).call(_a);
+        return chunkNEEKTCEQ_cjs.__privateGet(_a = _self$, _tabs).call(_a);
       }
     });
-  }, chunk2C4L4ZUQ_cjs.__privateGet(this, _rootElement));
-  chunk2C4L4ZUQ_cjs.__privateSet(this, _dispose, dispose);
+  }, chunkNEEKTCEQ_cjs.__privateGet(this, _rootElement));
+  chunkNEEKTCEQ_cjs.__privateSet(this, _dispose, dispose);
 };
 updateComponentProps_fn = function(element, props) {
-  chunk2C4L4ZUQ_cjs.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
+  chunkNEEKTCEQ_cjs.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
     const newMountedElements = new Map(oldMountedElements);
     const mountedElement = newMountedElements.get(element);
     if (mountedElement) {
-      newMountedElements.set(element, chunk2C4L4ZUQ_cjs.__spreadProps(chunk2C4L4ZUQ_cjs.__spreadValues({}, mountedElement), {
+      newMountedElements.set(element, chunkNEEKTCEQ_cjs.__spreadProps(chunkNEEKTCEQ_cjs.__spreadValues({}, mountedElement), {
         props
       }));
     }