@novu/js 2.0.1 → 2.1.1

package/dist/cjs/ui/{index.cjs → index.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkPMLVIUWC_cjs = require('../chunk-PMLVIUWC.cjs');
+var chunkD7P7KCZI_js = require('../chunk-D7P7KCZI.js');
 var web = require('solid-js/web');
 var solidJs = require('solid-js');
 var store = require('solid-js/store');
@@ -98,7 +98,9 @@ var appearanceKeys = [
   "notification",
   "notificationDot",
   "notificationSubject",
+  "notificationSubject__strong",
   "notificationBody",
+  "notificationBody__strong",
   "notificationBodyContainer",
   "notificationImage",
   "notificationDate",
@@ -165,36 +167,13 @@ var appearanceKeys = [
   "preferencesHeader__back__button",
   "preferencesHeader__title",
   // Preferences Loading
-  "preferencesLoadingContainer"
+  "preferencesLoadingContainer",
+  // Text formatting
+  "strong"
 ];
-function createDelayedLoading(initialValue, delayInMs) {
-  const [debouncedValue, setDebouncedValue] = solidJs.createSignal(initialValue);
-  const [valueGiven, setValueGiven] = solidJs.createSignal(initialValue);
-  const [initialDelayHasPassed, setInitialDelayHasPassed] = solidJs.createSignal(false);
-  const timeout = setTimeout(() => {
-    setInitialDelayHasPassed(true);
-  }, delayInMs);
-  solidJs.onCleanup(() => {
-    clearTimeout(timeout);
-  });
-  solidJs.createEffect(() => {
-    if (initialDelayHasPassed()) {
-      setDebouncedValue(valueGiven());
-    }
-  });
-  const setValue = solidJs.createMemo(() => {
-    if (!initialDelayHasPassed()) {
-      return setValueGiven;
-    }
-    return setDebouncedValue;
-  });
-  return [debouncedValue, setValue()];
-}
-
-// src/ui/helpers/createInfiniteScroll.ts
 function createInfiniteScroll(fetcher) {
   const [data, setData] = solidJs.createSignal([]);
-  const [initialLoading, setInitialLoading] = createDelayedLoading(true, 300);
+  const [initialLoading, setInitialLoading] = solidJs.createSignal(true);
   const [offset3, setOffset] = solidJs.createSignal(0);
   const [end, setEnd] = solidJs.createSignal(false);
   const [contents, { mutate, refetch }] = solidJs.createResource(offset3, fetcher);
@@ -221,7 +200,7 @@ function createInfiniteScroll(fetcher) {
       setData(content.data);
     });
   });
-  const reset = () => chunkPMLVIUWC_cjs.__async(this, null, function* () {
+  const reset = () => chunkD7P7KCZI_js.__async(this, null, function* () {
     setData([]);
     setInitialLoading(true);
     setEnd(false);
@@ -472,8 +451,8 @@ var AppearanceProvider = (props) => {
     if (!styleEl) {
       return;
     }
-    const baseVariables = chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, defaultVariables), themes().reduce((acc, obj) => chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, acc), obj.variables || {}), {}));
-    setVariableRules(parseVariables(chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, baseVariables), ((_a = props.appearance) == null ? void 0 : _a.variables) || {}), props.id));
+    const baseVariables = chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, defaultVariables), themes().reduce((acc, obj) => chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, acc), obj.variables || {}), {}));
+    setVariableRules(parseVariables(chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, baseVariables), ((_a = props.appearance) == null ? void 0 : _a.variables) || {}), props.id));
   });
   solidJs.createEffect(() => {
     var _a;
@@ -481,9 +460,9 @@ var AppearanceProvider = (props) => {
     if (!styleEl) {
       return;
     }
-    const baseElements = themes().reduce((acc, obj) => chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, acc), obj.elements || {}), {});
-    const elementsStyleData = parseElements(chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, baseElements), ((_a = props.appearance) == null ? void 0 : _a.elements) || {}));
-    setStore("appearanceKeyToCssInJsClass", (obj) => chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, obj), elementsStyleData.reduce((acc, item) => {
+    const baseElements = themes().reduce((acc, obj) => chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, acc), obj.elements || {}), {});
+    const elementsStyleData = parseElements(chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, baseElements), ((_a = props.appearance) == null ? void 0 : _a.elements) || {}));
+    setStore("appearanceKeyToCssInJsClass", (obj) => chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, obj), elementsStyleData.reduce((acc, item) => {
       acc[item.key] = item.className;
       return acc;
     }, {})));
@@ -596,10 +575,10 @@ var LocalizationProvider = (props) => {
   const localization = solidJs.createMemo(() => {
     const _a = props.localization || {}, {
       dynamic
-    } = _a, localizationObject = chunkPMLVIUWC_cjs.__objRest(_a, [
+    } = _a, localizationObject = chunkD7P7KCZI_js.__objRest(_a, [
       "dynamic"
     ]);
-    return chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
+    return chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
   });
   const t = (key, ...args) => {
     const value = localization()[key];
@@ -656,12 +635,12 @@ var InboxProvider = (props) => {
   const [activeTab, setActiveTab] = solidJs.createSignal((_a = props.tabs[0] && props.tabs[0].label) != null ? _a : "");
   const [status, setStatus] = solidJs.createSignal("unreadRead" /* UNREAD_READ */);
   const [limit, setLimit] = solidJs.createSignal(DEFAULT_LIMIT);
-  const [filter, setFilter] = solidJs.createSignal(chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
+  const [filter, setFilter] = solidJs.createSignal(chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
     tags: props.tabs.length > 0 ? props.tabs[0].value : []
   }));
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
-    setFilter((old) => chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
+    setFilter((old) => chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
       tags: old.tags
     }));
   };
@@ -672,7 +651,7 @@ var InboxProvider = (props) => {
       return;
     }
     setActiveTab(newActiveTab);
-    setFilter((old) => chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, old), {
+    setFilter((old) => chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, old), {
       tags
     }));
   };
@@ -700,7 +679,7 @@ var InboxProvider = (props) => {
     setActiveTab((_a2 = firstTab == null ? void 0 : firstTab.label) != null ? _a2 : "");
     setFilter((old) => {
       var _a3;
-      return chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, old), {
+      return chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, old), {
         tags: (_a3 = firstTab == null ? void 0 : firstTab.value) != null ? _a3 : []
       });
     });
@@ -733,7 +712,7 @@ var useInboxContext = () => {
 };
 var NovuContext = solidJs.createContext(void 0);
 function NovuProvider(props) {
-  const novu = solidJs.createMemo(() => new chunkPMLVIUWC_cjs.Novu(props.options));
+  const novu = solidJs.createMemo(() => props.novu || new chunkD7P7KCZI_js.Novu(props.options));
   return web.createComponent(NovuContext.Provider, {
     get value() {
       return novu();
@@ -765,7 +744,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 = () => chunkPMLVIUWC_cjs.__async(void 0, null, function* () {
+  const updateTabCounts = () => chunkD7P7KCZI_js.__async(void 0, null, function* () {
     if (tabs().length === 0) {
       return;
     }
@@ -816,7 +795,7 @@ var CountProvider = (props) => {
   const updateNewNotificationCountsOrCache = (notification, tags) => {
     const notificationsCache = novu.notifications.cache;
     const limitValue = limit();
-    const tabFilter = chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, filter()), {
+    const tabFilter = chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, filter()), {
       tags,
       offset: 0,
       limit: limitValue
@@ -832,7 +811,7 @@ var CountProvider = (props) => {
     };
     const hasLessThenMinAmount = ((cachedData == null ? void 0 : cachedData.notifications.length) || 0) < MIN_AMOUNT_OF_NOTIFICATIONS;
     if (hasLessThenMinAmount) {
-      notificationsCache.update(tabFilter, chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, cachedData), {
+      notificationsCache.update(tabFilter, chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, cachedData), {
         notifications: [notification, ...cachedData.notifications]
       }));
       return;
@@ -846,7 +825,7 @@ var CountProvider = (props) => {
   };
   useWebSocketEvent({
     event: "notifications.notification_received",
-    eventHandler: (_0) => chunkPMLVIUWC_cjs.__async(void 0, [_0], function* ({
+    eventHandler: (_0) => chunkD7P7KCZI_js.__async(void 0, [_0], function* ({
       result: notification
     }) {
       if (filter().archived) {
@@ -1017,7 +996,7 @@ var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
 var ExternalElementRenderer = (_a) => {
   var _b = _a, {
     render: render2
-  } = _b, rest = chunkPMLVIUWC_cjs.__objRest(_b, [
+  } = _b, rest = chunkD7P7KCZI_js.__objRest(_b, [
     "render"
   ]);
   let ref;
@@ -1949,15 +1928,15 @@ var StatusDropdown = () => {
 };
 var useNotificationsInfiniteScroll = (props) => {
   const novu = useNovu();
-  let filter = chunkPMLVIUWC_cjs.__spreadValues({}, props.options());
-  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => chunkPMLVIUWC_cjs.__async(void 0, null, function* () {
+  let filter = chunkD7P7KCZI_js.__spreadValues({}, props.options());
+  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => chunkD7P7KCZI_js.__async(void 0, null, function* () {
     var _a, _b;
-    const { data: data2 } = yield novu.notifications.list(chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, props.options() || {}), { offset: offset3 }));
+    const { data: data2 } = yield novu.notifications.list(chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__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 || !chunkPMLVIUWC_cjs.isSameFilter(filter, data2.filter)) {
+      if (!data2 || !chunkD7P7KCZI_js.isSameFilter(filter, data2.filter)) {
         return;
       }
       mutate({ data: data2.notifications, hasMore: data2.hasMore });
@@ -1966,8 +1945,8 @@ var useNotificationsInfiniteScroll = (props) => {
     solidJs.onCleanup(() => novu.off("notifications.list.updated", listener));
   });
   solidJs.createEffect(() => {
-    const newFilter = chunkPMLVIUWC_cjs.__spreadValues({}, props.options());
-    if (chunkPMLVIUWC_cjs.isSameFilter(filter, newFilter)) {
+    const newFilter = chunkD7P7KCZI_js.__spreadValues({}, props.options());
+    if (chunkD7P7KCZI_js.isSameFilter(filter, newFilter)) {
       return;
     }
     novu.notifications.clearCache();
@@ -1982,8 +1961,8 @@ var useNotificationsInfiniteScroll = (props) => {
 };
 var usePreferences = (options) => {
   const novu = useNovu();
-  const [loading, setLoading] = createDelayedLoading(true, 300);
-  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, () => chunkPMLVIUWC_cjs.__async(void 0, null, function* () {
+  const [loading, setLoading] = solidJs.createSignal(true);
+  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, () => chunkD7P7KCZI_js.__async(void 0, null, function* () {
     try {
       const response = yield novu.preferences.list();
       return response.data;
@@ -2011,7 +1990,7 @@ var usePreferences = (options) => {
 // src/ui/api/hooks/useReadAll.ts
 var useReadAll = (props) => {
   const novu = useNovu();
-  const readAll = (..._0) => chunkPMLVIUWC_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const readAll = (..._0) => chunkD7P7KCZI_js.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.readAll({ tags });
@@ -2026,7 +2005,7 @@ var useReadAll = (props) => {
 // src/ui/api/hooks/useArchiveAll.ts
 var useArchiveAll = (props) => {
   const novu = useNovu();
-  const archiveAll = (..._0) => chunkPMLVIUWC_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const archiveAll = (..._0) => chunkD7P7KCZI_js.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.archiveAll({ tags });
@@ -2041,7 +2020,7 @@ var useArchiveAll = (props) => {
 // src/ui/api/hooks/useArchiveAllRead.ts
 var useArchiveAllRead = (props) => {
   const novu = useNovu();
-  const archiveAllRead = (..._0) => chunkPMLVIUWC_cjs.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const archiveAllRead = (..._0) => chunkD7P7KCZI_js.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.archiveAllRead({ tags });
@@ -2462,7 +2441,7 @@ var Switch = (props) => {
 var _tmpl$41 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
-  const updatePreference = (enabled) => chunkPMLVIUWC_cjs.__async(void 0, null, function* () {
+  const updatePreference = (enabled) => chunkD7P7KCZI_js.__async(void 0, null, function* () {
     if (props.isCritical) {
       return;
     }
@@ -2613,7 +2592,7 @@ var Preferences = () => {
   solidJs.createEffect(() => {
     setDynamicLocalization((prev) => {
       var _a;
-      return chunkPMLVIUWC_cjs.__spreadValues(chunkPMLVIUWC_cjs.__spreadValues({}, prev), (_a = allPreferences().workflowPreferences) == null ? void 0 : _a.reduce((acc, preference) => {
+      return chunkD7P7KCZI_js.__spreadValues(chunkD7P7KCZI_js.__spreadValues({}, prev), (_a = allPreferences().workflowPreferences) == null ? void 0 : _a.reduce((acc, preference) => {
         acc[preference.workflow.identifier] = preference.workflow.name;
         return acc;
       }, {}));
@@ -2840,10 +2819,90 @@ var PreferencesRow = (props) => {
   });
 };
 web.delegateEvents(["click"]);
-var _tmpl$46 = /* @__PURE__ */ web.template(`<span>`);
-var _tmpl$213 = /* @__PURE__ */ web.template(`<img>`);
-var _tmpl$311 = /* @__PURE__ */ web.template(`<p>`);
-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 _tmpl$46 = /* @__PURE__ */ web.template(`<strong>`);
+var _tmpl$213 = /* @__PURE__ */ web.template(`<p>`);
+var parseMarkdownIntoTokens = (text) => {
+  const tokens = [];
+  let buffer = "";
+  let inBold = false;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] === "\\" && text[i + 1] === "*") {
+      buffer += "*";
+      i += 1;
+    } else if (text[i] === "*" && text[i + 1] === "*") {
+      if (buffer) {
+        tokens.push({
+          type: inBold ? "bold" : "text",
+          content: buffer
+        });
+        buffer = "";
+      }
+      inBold = !inBold;
+      i += 1;
+    } else {
+      buffer += text[i];
+    }
+  }
+  if (buffer) {
+    tokens.push({
+      type: inBold ? "bold" : "text",
+      content: buffer
+    });
+  }
+  return tokens;
+};
+var Bold = (props) => {
+  const style = useStyle();
+  return (() => {
+    var _el$ = _tmpl$46();
+    web.insert(_el$, () => props.children);
+    web.effect(() => web.className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
+    return _el$;
+  })();
+};
+var Text = (props) => props.children;
+var Markdown = (props) => {
+  const _a = props, {
+    children,
+    strongAppearanceKey
+  } = _a, rest = chunkD7P7KCZI_js.__objRest(_a, [
+    "children",
+    "strongAppearanceKey"
+  ]);
+  const tokens = solidJs.createMemo(() => parseMarkdownIntoTokens(children));
+  return (() => {
+    var _el$2 = _tmpl$213();
+    web.spread(_el$2, rest, false, true);
+    web.insert(_el$2, web.createComponent(solidJs.For, {
+      get each() {
+        return tokens();
+      },
+      children: (token) => {
+        if (token.type === "bold") {
+          return web.createComponent(Bold, {
+            appearanceKey: strongAppearanceKey,
+            get children() {
+              return token.content;
+            }
+          });
+        } else {
+          return web.createComponent(Text, {
+            get children() {
+              return token.content;
+            }
+          });
+        }
+      }
+    }));
+    return _el$2;
+  })();
+};
+var Markdown_default = Markdown;
+
+// src/ui/components/Notification/DefaultNotification.tsx
+var _tmpl$47 = /* @__PURE__ */ web.template(`<span>`);
+var _tmpl$214 = /* @__PURE__ */ web.template(`<img>`);
+var _tmpl$311 = /* @__PURE__ */ web.template(`<a><div><div class="nt-relative nt-shrink-0 nt-float-right"><p></p><div></div></div><div>`);
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -2892,14 +2951,14 @@ var DefaultNotification = (props) => {
     }
   };
   return (() => {
-    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;
+    var _el$ = _tmpl$311(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling;
     _el$.$$click = handleNotificationClick;
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
         return !props.notification.isRead;
       },
       get children() {
-        var _el$2 = _tmpl$46();
+        var _el$2 = _tmpl$47();
         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;
       }
@@ -2909,7 +2968,7 @@ var DefaultNotification = (props) => {
         return props.notification.avatar;
       },
       get children() {
-        var _el$3 = _tmpl$213();
+        var _el$3 = _tmpl$214();
         web.effect((_p$) => {
           var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg"), _v$2 = props.notification.avatar;
           _v$ !== _p$.e && web.className(_el$3, _p$.e = _v$);
@@ -3052,15 +3111,26 @@ var DefaultNotification = (props) => {
       get when() {
         return props.notification.subject;
       },
+      children: (subject) => web.createComponent(Markdown_default, {
+        get ["class"]() {
+          return style("notificationSubject", "nt-text-start");
+        },
+        strongAppearanceKey: "notificationSubject__strong",
+        get children() {
+          return subject();
+        }
+      })
+    }), _el$8);
+    web.insert(_el$4, web.createComponent(Markdown_default, {
+      get ["class"]() {
+        return style("notificationBody", "nt-text-start");
+      },
+      strongAppearanceKey: "notificationBody__strong",
       get children() {
-        var _el$8 = _tmpl$311();
-        web.insert(_el$8, () => props.notification.subject);
-        web.effect(() => web.className(_el$8, style("notificationSubject", "nt-text-start nt-font-semibold")));
-        return _el$8;
+        return props.notification.body;
       }
-    }), _el$9);
-    web.insert(_el$9, () => props.notification.body);
-    web.insert(_el$10, web.createComponent(solidJs.Show, {
+    }), _el$8);
+    web.insert(_el$8, web.createComponent(solidJs.Show, {
       get when() {
         return props.notification.primaryAction;
       },
@@ -3074,7 +3144,7 @@ var DefaultNotification = (props) => {
         }
       })
     }), null);
-    web.insert(_el$10, web.createComponent(solidJs.Show, {
+    web.insert(_el$8, web.createComponent(solidJs.Show, {
       get when() {
         return props.notification.secondaryAction;
       },
@@ -3095,21 +3165,19 @@ 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", "nt-text-start"), _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("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);
       _v$6 !== _p$.o && web.className(_el$7, _p$.o = _v$6);
-      _v$7 !== _p$.i && web.className(_el$9, _p$.i = _v$7);
-      _v$8 !== _p$.n && web.className(_el$10, _p$.n = _v$8);
+      _v$7 !== _p$.i && web.className(_el$8, _p$.i = _v$7);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0,
-      n: void 0
+      i: void 0
     });
     return _el$;
   })();
@@ -3220,7 +3288,7 @@ var NotificationListSkeleton = (props) => {
 
 // src/ui/components/Notification/NotificationList.tsx
 var _tmpl$50 = /* @__PURE__ */ web.template(`<div><p data-localization=notifications.emptyNotice>`);
-var _tmpl$214 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$215 = /* @__PURE__ */ web.template(`<div>`);
 var _tmpl$312 = /* @__PURE__ */ web.template(`<div><div>`);
 var EmptyNotificationList = () => {
   const style = useStyle();
@@ -3249,7 +3317,7 @@ var EmptyNotificationList = () => {
 };
 var NotificationList = (props) => {
   var _a, _b;
-  const options = solidJs.createMemo(() => chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, props.filter), {
+  const options = solidJs.createMemo(() => chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, props.filter), {
     limit: props.limit
   }));
   const style = useStyle();
@@ -3278,7 +3346,7 @@ var NotificationList = (props) => {
   solidJs.createEffect(() => {
     setLimit(props.limit || DEFAULT_LIMIT);
   });
-  const handleOnNewMessagesClick = (e) => chunkPMLVIUWC_cjs.__async(void 0, null, function* () {
+  const handleOnNewMessagesClick = (e) => chunkD7P7KCZI_js.__async(void 0, null, function* () {
     e.stopPropagation();
     resetNewMessagesCount();
     refetch({
@@ -3346,7 +3414,7 @@ var NotificationList = (props) => {
                 return !end();
               },
               get children() {
-                var _el$5 = _tmpl$214();
+                var _el$5 = _tmpl$215();
                 web.use(setEl, _el$5);
                 web.insert(_el$5, web.createComponent(solidJs.For, {
                   get each() {
@@ -3512,7 +3580,7 @@ var InboxTabs = (props) => {
       tags: tab.value
     }))
   });
-  const options = solidJs.createMemo(() => dropdownTabs().map((tab) => chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, tab), {
+  const options = solidJs.createMemo(() => dropdownTabs().map((tab) => chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, tab), {
     rightIcon: tab.label === activeTab() ? web.createComponent(Check, {
       get ["class"]() {
         return style("moreTabs__dropdownItemRight__icon");
@@ -3629,7 +3697,7 @@ var InboxTabs = (props) => {
               return props.onSecondaryActionClick;
             },
             get filter() {
-              return chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, filter()), {
+              return chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, filter()), {
                 tags: tab.value
               });
             }
@@ -3834,6 +3902,9 @@ var Renderer = (props) => {
     get options() {
       return props.options;
     },
+    get novu() {
+      return props.novu;
+    },
     get children() {
       return web.createComponent(LocalizationProvider, {
         get localization() {
@@ -3903,26 +3974,27 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "2.0.1";
+var version = "2.1.1";
 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, _routerPush, _setRouterPush, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
+var _dispose, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _predefinedNovu, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
 var NovuUI = class {
   constructor(props) {
-    chunkPMLVIUWC_cjs.__privateAdd(this, _NovuUI_instances);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _dispose, null);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _rootElement);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _mountedElements);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _setMountedElements);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _appearance);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _setAppearance);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _localization);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _setLocalization);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _options);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _setOptions);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _tabs);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _setTabs);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _routerPush);
-    chunkPMLVIUWC_cjs.__privateAdd(this, _setRouterPush);
+    chunkD7P7KCZI_js.__privateAdd(this, _NovuUI_instances);
+    chunkD7P7KCZI_js.__privateAdd(this, _dispose, null);
+    chunkD7P7KCZI_js.__privateAdd(this, _rootElement);
+    chunkD7P7KCZI_js.__privateAdd(this, _mountedElements);
+    chunkD7P7KCZI_js.__privateAdd(this, _setMountedElements);
+    chunkD7P7KCZI_js.__privateAdd(this, _appearance);
+    chunkD7P7KCZI_js.__privateAdd(this, _setAppearance);
+    chunkD7P7KCZI_js.__privateAdd(this, _localization);
+    chunkD7P7KCZI_js.__privateAdd(this, _setLocalization);
+    chunkD7P7KCZI_js.__privateAdd(this, _options);
+    chunkD7P7KCZI_js.__privateAdd(this, _setOptions);
+    chunkD7P7KCZI_js.__privateAdd(this, _tabs);
+    chunkD7P7KCZI_js.__privateAdd(this, _setTabs);
+    chunkD7P7KCZI_js.__privateAdd(this, _routerPush);
+    chunkD7P7KCZI_js.__privateAdd(this, _setRouterPush);
+    chunkD7P7KCZI_js.__privateAdd(this, _predefinedNovu);
     var _a;
     this.id = generateRandomString(16);
     const [appearance, setAppearance] = solidJs.createSignal(props.appearance);
@@ -3931,29 +4003,30 @@ var NovuUI = class {
     const [mountedElements, setMountedElements] = solidJs.createSignal(/* @__PURE__ */ new Map());
     const [tabs, setTabs] = solidJs.createSignal((_a = props.tabs) != null ? _a : []);
     const [routerPush, setRouterPush] = solidJs.createSignal(props.routerPush);
-    chunkPMLVIUWC_cjs.__privateSet(this, _mountedElements, mountedElements);
-    chunkPMLVIUWC_cjs.__privateSet(this, _setMountedElements, setMountedElements);
-    chunkPMLVIUWC_cjs.__privateSet(this, _appearance, appearance);
-    chunkPMLVIUWC_cjs.__privateSet(this, _setAppearance, setAppearance);
-    chunkPMLVIUWC_cjs.__privateSet(this, _localization, localization);
-    chunkPMLVIUWC_cjs.__privateSet(this, _setLocalization, setLocalization);
-    chunkPMLVIUWC_cjs.__privateSet(this, _options, options);
-    chunkPMLVIUWC_cjs.__privateSet(this, _setOptions, setOptions);
-    chunkPMLVIUWC_cjs.__privateSet(this, _tabs, tabs);
-    chunkPMLVIUWC_cjs.__privateSet(this, _setTabs, setTabs);
-    chunkPMLVIUWC_cjs.__privateSet(this, _routerPush, routerPush);
-    chunkPMLVIUWC_cjs.__privateSet(this, _setRouterPush, setRouterPush);
-    chunkPMLVIUWC_cjs.__privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
+    chunkD7P7KCZI_js.__privateSet(this, _mountedElements, mountedElements);
+    chunkD7P7KCZI_js.__privateSet(this, _setMountedElements, setMountedElements);
+    chunkD7P7KCZI_js.__privateSet(this, _appearance, appearance);
+    chunkD7P7KCZI_js.__privateSet(this, _setAppearance, setAppearance);
+    chunkD7P7KCZI_js.__privateSet(this, _localization, localization);
+    chunkD7P7KCZI_js.__privateSet(this, _setLocalization, setLocalization);
+    chunkD7P7KCZI_js.__privateSet(this, _options, options);
+    chunkD7P7KCZI_js.__privateSet(this, _setOptions, setOptions);
+    chunkD7P7KCZI_js.__privateSet(this, _tabs, tabs);
+    chunkD7P7KCZI_js.__privateSet(this, _setTabs, setTabs);
+    chunkD7P7KCZI_js.__privateSet(this, _routerPush, routerPush);
+    chunkD7P7KCZI_js.__privateSet(this, _setRouterPush, setRouterPush);
+    chunkD7P7KCZI_js.__privateSet(this, _predefinedNovu, props.novu);
+    chunkD7P7KCZI_js.__privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
   }
   mountComponent({
     name,
     element,
     props: componentProps
   }) {
-    if (chunkPMLVIUWC_cjs.__privateGet(this, _mountedElements).call(this).has(element)) {
-      return chunkPMLVIUWC_cjs.__privateMethod(this, _NovuUI_instances, updateComponentProps_fn).call(this, element, componentProps);
+    if (chunkD7P7KCZI_js.__privateGet(this, _mountedElements).call(this).has(element)) {
+      return chunkD7P7KCZI_js.__privateMethod(this, _NovuUI_instances, updateComponentProps_fn).call(this, element, componentProps);
     }
-    chunkPMLVIUWC_cjs.__privateGet(this, _setMountedElements).call(this, (oldNodes) => {
+    chunkD7P7KCZI_js.__privateGet(this, _setMountedElements).call(this, (oldNodes) => {
       const newNodes = new Map(oldNodes);
       newNodes.set(element, {
         name,
@@ -3963,32 +4036,32 @@ var NovuUI = class {
     });
   }
   unmountComponent(element) {
-    chunkPMLVIUWC_cjs.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
+    chunkD7P7KCZI_js.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
       const newMountedElements = new Map(oldMountedElements);
       newMountedElements.delete(element);
       return newMountedElements;
     });
   }
   updateAppearance(appearance) {
-    chunkPMLVIUWC_cjs.__privateGet(this, _setAppearance).call(this, appearance);
+    chunkD7P7KCZI_js.__privateGet(this, _setAppearance).call(this, appearance);
   }
   updateLocalization(localization) {
-    chunkPMLVIUWC_cjs.__privateGet(this, _setLocalization).call(this, localization);
+    chunkD7P7KCZI_js.__privateGet(this, _setLocalization).call(this, localization);
   }
   updateOptions(options) {
-    chunkPMLVIUWC_cjs.__privateGet(this, _setOptions).call(this, options);
+    chunkD7P7KCZI_js.__privateGet(this, _setOptions).call(this, options);
   }
   updateTabs(tabs) {
-    chunkPMLVIUWC_cjs.__privateGet(this, _setTabs).call(this, tabs != null ? tabs : []);
+    chunkD7P7KCZI_js.__privateGet(this, _setTabs).call(this, tabs != null ? tabs : []);
   }
   updateRouterPush(routerPush) {
-    chunkPMLVIUWC_cjs.__privateGet(this, _setRouterPush).call(this, () => routerPush);
+    chunkD7P7KCZI_js.__privateGet(this, _setRouterPush).call(this, () => routerPush);
   }
   unmount() {
     var _a, _b;
-    (_a = chunkPMLVIUWC_cjs.__privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
-    chunkPMLVIUWC_cjs.__privateSet(this, _dispose, null);
-    (_b = chunkPMLVIUWC_cjs.__privateGet(this, _rootElement)) == null ? void 0 : _b.remove();
+    (_a = chunkD7P7KCZI_js.__privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+    chunkD7P7KCZI_js.__privateSet(this, _dispose, null);
+    (_b = chunkD7P7KCZI_js.__privateGet(this, _rootElement)) == null ? void 0 : _b.remove();
   }
 };
 _dispose = new WeakMap();
@@ -4005,14 +4078,15 @@ _tabs = new WeakMap();
 _setTabs = new WeakMap();
 _routerPush = new WeakMap();
 _setRouterPush = new WeakMap();
+_predefinedNovu = new WeakMap();
 _NovuUI_instances = new WeakSet();
 mountComponentRenderer_fn = function() {
-  if (chunkPMLVIUWC_cjs.__privateGet(this, _dispose) !== null) {
+  if (chunkD7P7KCZI_js.__privateGet(this, _dispose) !== null) {
     return;
   }
-  chunkPMLVIUWC_cjs.__privateSet(this, _rootElement, document.createElement("div"));
-  chunkPMLVIUWC_cjs.__privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
-  document.body.appendChild(chunkPMLVIUWC_cjs.__privateGet(this, _rootElement));
+  chunkD7P7KCZI_js.__privateSet(this, _rootElement, document.createElement("div"));
+  chunkD7P7KCZI_js.__privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
+  document.body.appendChild(chunkD7P7KCZI_js.__privateGet(this, _rootElement));
   const dispose = web.render(() => {
     const _self$ = this;
     return web.createComponent(Renderer, {
@@ -4020,38 +4094,41 @@ mountComponentRenderer_fn = function() {
       novuUI: _self$,
       get nodes() {
         var _a;
-        return chunkPMLVIUWC_cjs.__privateGet(_a = _self$, _mountedElements).call(_a);
+        return chunkD7P7KCZI_js.__privateGet(_a = _self$, _mountedElements).call(_a);
       },
       get options() {
         var _a;
-        return chunkPMLVIUWC_cjs.__privateGet(_a = _self$, _options).call(_a);
+        return chunkD7P7KCZI_js.__privateGet(_a = _self$, _options).call(_a);
       },
       get appearance() {
         var _a;
-        return chunkPMLVIUWC_cjs.__privateGet(_a = _self$, _appearance).call(_a);
+        return chunkD7P7KCZI_js.__privateGet(_a = _self$, _appearance).call(_a);
       },
       get localization() {
         var _a;
-        return chunkPMLVIUWC_cjs.__privateGet(_a = _self$, _localization).call(_a);
+        return chunkD7P7KCZI_js.__privateGet(_a = _self$, _localization).call(_a);
       },
       get tabs() {
         var _a;
-        return chunkPMLVIUWC_cjs.__privateGet(_a = _self$, _tabs).call(_a);
+        return chunkD7P7KCZI_js.__privateGet(_a = _self$, _tabs).call(_a);
       },
       get routerPush() {
         var _a;
-        return chunkPMLVIUWC_cjs.__privateGet(_a = _self$, _routerPush).call(_a);
+        return chunkD7P7KCZI_js.__privateGet(_a = _self$, _routerPush).call(_a);
+      },
+      get novu() {
+        return chunkD7P7KCZI_js.__privateGet(_self$, _predefinedNovu);
       }
     });
-  }, chunkPMLVIUWC_cjs.__privateGet(this, _rootElement));
-  chunkPMLVIUWC_cjs.__privateSet(this, _dispose, dispose);
+  }, chunkD7P7KCZI_js.__privateGet(this, _rootElement));
+  chunkD7P7KCZI_js.__privateSet(this, _dispose, dispose);
 };
 updateComponentProps_fn = function(element, props) {
-  chunkPMLVIUWC_cjs.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
+  chunkD7P7KCZI_js.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
     const newMountedElements = new Map(oldMountedElements);
     const mountedElement = newMountedElements.get(element);
     if (mountedElement) {
-      newMountedElements.set(element, chunkPMLVIUWC_cjs.__spreadProps(chunkPMLVIUWC_cjs.__spreadValues({}, mountedElement), {
+      newMountedElements.set(element, chunkD7P7KCZI_js.__spreadProps(chunkD7P7KCZI_js.__spreadValues({}, mountedElement), {
         props
       }));
     }