@novu/js 3.0.0-canary.2 → 3.0.1

package/dist/esm/ui/index.mjs

@@ -1,4 +1,4 @@
-import { Novu, isSameFilter } from '../chunk-54BVY6WN.mjs';
+import { Novu, isSameFilter } from '../chunk-MT6EQHGN.mjs';
 import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.mjs';
 import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
 import { delegateEvents, createComponent, mergeProps, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
@@ -250,7 +250,8 @@ var defaultVariables = {
   colorNeutral: "#525252",
   colorShadow: "rgb(0,0,0)",
   fontSize: "1rem",
-  borderRadius: "0.375rem"
+  borderRadius: "0.375rem",
+  colorStripes: "#FF9A68"
 };
 
 // src/ui/helpers/constants.ts
@@ -536,6 +537,7 @@ var parseVariables = (variables, id) => {
     generateDefaultColor({ color: variables.colorCounterForeground, key: "color-counter-foreground", id }),
     generateDefaultColor({ color: variables.colorShadow, key: "color-shadow", id }),
     generateDefaultColor({ color: variables.colorRing, key: "color-ring", id }),
+    generateDefaultColor({ color: variables.colorStripes, key: "color-stripes", id }),
     ...generateAlphaShadeRulesFromColor({ color: variables.colorBackground, key: "color-background-alpha", id }),
     ...generateAlphaShadeRulesFromColor({ color: variables.colorForeground, key: "color-foreground-alpha", id }),
     ...generateSolidShadeRulesFromColor({ color: variables.colorPrimary, key: "color-primary", id }),
@@ -795,14 +797,15 @@ var useWebSocketEvent = ({
   eventHandler: onMessage
 }) => {
   const novu = useNovu();
-  const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });
+  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}`;
+  const { postMessage } = useBrowserTabsChannel({ channelName, onMessage });
   const updateReadCount = (data) => {
     onMessage(data);
     postMessage(data);
   };
   onMount(() => {
     let cleanup;
-    const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
+    const resolveLock = requestLock(channelName, () => {
       cleanup = novu.on(webSocketEvent, updateReadCount);
     });
     onCleanup(() => {
@@ -837,6 +840,7 @@ var InboxProvider = (props) => {
     tags: props.tabs.length > 0 ? getTagsFromTab(props.tabs[0]) : []
   }));
   const [hideBranding, setHideBranding] = createSignal(false);
+  const [isDevelopmentMode, setIsDevelopmentMode] = createSignal(false);
   const [preferencesFilter, setPreferencesFilter] = createSignal(props.preferencesFilter);
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
@@ -892,6 +896,7 @@ var InboxProvider = (props) => {
         return;
       }
       setHideBranding(data.removeNovuBranding);
+      setIsDevelopmentMode(data.isDevelopmentMode);
     }
   });
   return createComponent(InboxContext.Provider, {
@@ -908,7 +913,8 @@ var InboxProvider = (props) => {
       setIsOpened,
       navigate,
       hideBranding,
-      preferencesFilter
+      preferencesFilter,
+      isDevelopmentMode
     },
     get children() {
       return props.children;
@@ -1429,21 +1435,61 @@ function isBrowser() {
 }
 
 // src/ui/components/elements/Footer.tsx
-var _tmpl$21 = /* @__PURE__ */ template(`<div class="nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-400"><a target=_blank class="nt-w-full nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
+var _tmpl$21 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">Development mode`);
+var _tmpl$22 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
+var _tmpl$32 = /* @__PURE__ */ template(`<a target=_blank class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
+var stripes = `before:nt-content-[""] before:nt-absolute before:nt-inset-0 before:-nt-right-[calc(0+var(--stripes-size))] before:[mask-image:linear-gradient(transparent_0%,black)] before:nt-bg-dev-stripes-gradient before:nt-bg-[length:var(--stripes-size)_var(--stripes-size)] before:nt-animate-stripes before:hover:[animation-play-state:running]`;
+var commonAfter = 'after:nt-content-[""] after:nt-absolute after:nt-inset-0 after:-nt-top-12';
+var devModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-stripes)_l_c_h_/_0.07)_55%,transparent),linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
+var prodModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
 var Footer = () => {
   const {
-    hideBranding
+    hideBranding,
+    isDevelopmentMode
   } = useInboxContext();
   return createComponent(Show, {
     get when() {
-      return !hideBranding();
+      return !hideBranding() || isDevelopmentMode();
     },
     get children() {
-      var _el$ = _tmpl$21(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-      insert(_el$2, createComponent(Novu2, {
-        "class": "nt-size-4"
-      }), _el$4);
-      effect(() => setAttribute(_el$2, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
+      var _el$ = _tmpl$42();
+      _el$.style.setProperty("--stripes-size", "15px");
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return isDevelopmentMode();
+        },
+        get children() {
+          return _tmpl$21();
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return memo(() => !!isDevelopmentMode())() && !hideBranding();
+        },
+        get children() {
+          return _tmpl$22();
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return !hideBranding();
+        },
+        get children() {
+          var _el$4 = _tmpl$32(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+          insert(_el$4, createComponent(Novu2, {
+            "class": "nt-size-2.5"
+          }), _el$6);
+          effect(() => setAttribute(_el$4, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
+          return _el$4;
+        }
+      }), null);
+      effect(() => className(_el$, cn(`nt-relative nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-400`, {
+        [stripes]: isDevelopmentMode(),
+        [devModeGradient]: isDevelopmentMode(),
+        "nt-bg-[oklch(from_var(--nv-color-stripes)_l_c_h_/_0.1)]": isDevelopmentMode(),
+        [prodModeGradient]: !isDevelopmentMode()
+      })));
       return _el$;
     }
   });
@@ -1454,7 +1500,7 @@ function getCurrentDomain() {
   }
   return "";
 }
-var _tmpl$22 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<button>`);
 var buttonVariants = cva(cn('nt-inline-flex nt-gap-4 nt-items-center nt-justify-center nt-whitespace-nowrap nt-text-sm nt-font-medium nt-transition-colors disabled:nt-pointer-events-none disabled:nt-opacity-50 after:nt-absolute after:nt-content-[""] before:nt-content-[""] before:nt-absolute [&_svg]:nt-pointer-events-none [&_svg]:nt-shrink-0', `focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
   variants: {
     variant: {
@@ -1481,7 +1527,7 @@ var Button = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$22();
+    var _el$ = _tmpl$23();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -1499,7 +1545,7 @@ var Button = (props) => {
     return _el$;
   })();
 };
-var _tmpl$23 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<button>`);
 var PopoverClose = (props) => {
   const {
     onClose
@@ -1520,14 +1566,14 @@ var PopoverClose = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$23();
+    var _el$ = _tmpl$24();
     _el$.$$click = handleClick;
     spread(_el$, rest, false, false);
     return _el$;
   })();
 };
 delegateEvents(["click"]);
-var _tmpl$24 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
 var Root = (props) => {
   const [_, rest] = splitProps(props, ["class"]);
   const {
@@ -1543,7 +1589,7 @@ var Root = (props) => {
     },
     children: new Comment(" Powered by Novu - https://novu.co ")
   }), (() => {
-    var _el$ = _tmpl$24();
+    var _el$ = _tmpl$25();
     spread(_el$, mergeProps({
       get id() {
         return `novu-root-${id()}`;
@@ -1616,7 +1662,7 @@ function usePopover() {
 }
 
 // src/ui/components/primitives/Popover/PopoverContent.tsx
-var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
 var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-z-10 nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border");
 var PopoverContentBody = (props) => {
   const {
@@ -1639,7 +1685,7 @@ var PopoverContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$25();
+    var _el$ = _tmpl$26();
     use(setFloating, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -1719,7 +1765,7 @@ var PopoverContent = (props) => {
     }
   });
 };
-var _tmpl$26 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<button>`);
 var PopoverTrigger = (props) => {
   const {
     setReference,
@@ -1743,7 +1789,7 @@ var PopoverTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$26();
+    var _el$ = _tmpl$27();
     _el$.$$click = handleClick;
     use(setReference, _el$);
     spread(_el$, mergeProps({
@@ -1907,7 +1953,7 @@ var useKeyboardNavigation = ({
 };
 
 // src/ui/components/primitives/Tabs/TabsRoot.tsx
-var _tmpl$27 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div>`);
 var TabsContext = createContext(void 0);
 var useTabsContext = () => {
   const context = useContext(TabsContext);
@@ -1946,7 +1992,7 @@ var TabsRoot = (props) => {
       setVisibleTabs
     },
     get children() {
-      var _el$ = _tmpl$27();
+      var _el$ = _tmpl$28();
       use(setTabsContainer, _el$);
       spread(_el$, mergeProps({
         get ["class"]() {
@@ -1960,7 +2006,7 @@ var TabsRoot = (props) => {
 };
 
 // src/ui/components/primitives/Tabs/TabsContent.tsx
-var _tmpl$28 = /* @__PURE__ */ template(`<div role=tabpanel>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div role=tabpanel>`);
 var TabsContent = (props) => {
   const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
   const style = useStyle();
@@ -1972,7 +2018,7 @@ var TabsContent = (props) => {
       return activeTab() === local.value;
     },
     get children() {
-      var _el$ = _tmpl$28();
+      var _el$ = _tmpl$29();
       spread(_el$, mergeProps({
         get ["class"]() {
           return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
@@ -1992,14 +2038,14 @@ var TabsContent = (props) => {
     }
   });
 };
-var _tmpl$29 = /* @__PURE__ */ template(`<div role=tablist>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<div role=tablist>`);
 var _tmpl$210 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
 var tabsListVariants = () => "nt-flex nt-gap-6";
 var TabsList = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey", "ref", "children"]);
   const style = useStyle();
   return [(() => {
-    var _el$ = _tmpl$29();
+    var _el$ = _tmpl$30();
     var _ref$ = local.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
     spread(_el$, mergeProps({
@@ -2078,7 +2124,7 @@ var inboxFilterLocalizationKeys = {
   unread: "inbox.filters.labels.unread",
   archived: "inbox.filters.labels.archived"
 };
-var _tmpl$30 = /* @__PURE__ */ template(`<span><span></span><span>`);
+var _tmpl$31 = /* @__PURE__ */ template(`<span><span></span><span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
   icon: UnreadRead
@@ -2122,7 +2168,7 @@ var StatusItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$30(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         insert(_el$2, () => props.icon());
         insert(_el$3, () => t(props.localizationKey));
         effect((_p$) => {
@@ -2156,7 +2202,7 @@ var StatusItem = (props) => {
 };
 
 // src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
-var _tmpl$31 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
 var StatusDropdown = () => {
   const style = useStyle();
   const {
@@ -2181,7 +2227,7 @@ var StatusDropdown = () => {
         }, triggerProps, {
           get children() {
             return [(() => {
-              var _el$ = _tmpl$31();
+              var _el$ = _tmpl$33();
               insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               effect((_p$) => {
                 var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
@@ -2326,7 +2372,7 @@ var useReadAll = (props) => {
 };
 
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
-var _tmpl$32 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<span>`);
 var MoreActionsOptions = () => {
   const {
     filter
@@ -2374,12 +2420,12 @@ var ActionsItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$32();
+        var _el$ = _tmpl$34();
         insert(_el$, () => props.icon());
         effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-4")));
         return _el$;
       })(), (() => {
-        var _el$2 = _tmpl$32();
+        var _el$2 = _tmpl$34();
         insert(_el$2, () => t(props.localizationKey));
         effect((_p$) => {
           var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
@@ -2438,11 +2484,11 @@ var MoreActionsDropdown = () => {
 };
 
 // src/ui/components/elements/Header/ActionsContainer.tsx
-var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$33();
+    var _el$ = _tmpl$35();
     insert(_el$, createComponent(MoreActionsDropdown, {}), null);
     insert(_el$, createComponent(Show, {
       get when() {
@@ -2470,11 +2516,11 @@ var ActionsContainer = (props) => {
 };
 
 // src/ui/components/elements/Header/Header.tsx
-var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div>`);
 var Header = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$34();
+    var _el$ = _tmpl$36();
     insert(_el$, createComponent(StatusDropdown, {}), null);
     insert(_el$, createComponent(ActionsContainer, {
       get showPreferences() {
@@ -2485,7 +2531,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
 var Collapsible = (props) => {
   const style = useStyle();
   let contentRef;
@@ -2494,7 +2540,7 @@ var Collapsible = (props) => {
     requestAnimationFrame(() => setEnableTransition(true));
   });
   return (() => {
-    var _el$ = _tmpl$35();
+    var _el$ = _tmpl$37();
     var _ref$ = contentRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : contentRef = _el$;
     spread(_el$, mergeProps({
@@ -2513,11 +2559,11 @@ var Collapsible = (props) => {
     return _el$;
   })();
 };
-var _tmpl$36 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
 var Switch = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$36(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$38(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", (e) => {
       props.onChange(e.target.checked);
     });
@@ -2538,7 +2584,7 @@ var Switch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/ChannelRow.tsx
-var _tmpl$37 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
+var _tmpl$39 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
   const updatePreference = (enabled) => __async(void 0, null, function* () {
@@ -2552,7 +2598,7 @@ var ChannelRow = (props) => {
     yield updatePreference(checked);
   });
   return (() => {
-    var _el$ = _tmpl$37(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
+    var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
     insert(_el$3, createComponent(ChannelIcon, {
       appearanceKey: "channel__icon",
       get channel() {
@@ -2638,12 +2684,12 @@ var getLabel = (channel) => {
       return "";
   }
 };
-var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$211 = /* @__PURE__ */ template(`<div><div></div><div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$38();
+    var _el$ = _tmpl$40();
     effect(() => className(_el$, style(props.appearanceKey, cn("nt-w-full nt-h-3 nt-rounded nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
     return _el$;
   })();
@@ -2651,7 +2697,7 @@ var SkeletonText = (props) => {
 var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$2 = _tmpl$38();
+    var _el$2 = _tmpl$40();
     effect(() => className(_el$2, style(props.appearanceKey, cn("nt-size-8 nt-rounded-lg nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
     return _el$2;
   })();
@@ -2676,7 +2722,7 @@ var SkeletonSwitch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
-var _tmpl$39 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$41 = /* @__PURE__ */ template(`<div>`);
 var channelIcons = [InApp, Email, Sms, Push, Chat];
 var PreferencesListSkeleton = (props) => {
   const style = useStyle();
@@ -2684,7 +2730,7 @@ var PreferencesListSkeleton = (props) => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$39();
+    var _el$ = _tmpl$41();
     insert(_el$, createComponent(Motion.div, {
       get animate() {
         return {
@@ -2726,7 +2772,7 @@ var PreferencesListSkeleton = (props) => {
                   return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
                 }
               }), (() => {
-                var _el$3 = _tmpl$39();
+                var _el$3 = _tmpl$41();
                 insert(_el$3, createComponent(SkeletonText, {
                   appearanceKey: "notificationList__skeletonText",
                   "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -2744,7 +2790,7 @@ var PreferencesListSkeleton = (props) => {
             }
           });
         })), (() => {
-          var _el$2 = _tmpl$39();
+          var _el$2 = _tmpl$41();
           effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
           return _el$2;
         })()];
@@ -2789,7 +2835,7 @@ var PreferencesListSkeleton = (props) => {
 };
 
 // src/ui/components/elements/Preferences/Preferences.tsx
-var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
 var Preferences = () => {
@@ -2838,7 +2884,7 @@ var Preferences = () => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$40();
+    var _el$ = _tmpl$43();
     insert(_el$, createComponent(PreferencesRow, {
       localizationKey: "preferences.global",
       get channels() {
@@ -2917,7 +2963,7 @@ var WorkflowDescription = (props) => {
     return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
   };
   return (() => {
-    var _el$3 = _tmpl$40();
+    var _el$3 = _tmpl$43();
     insert(_el$3, channelNames);
     effect(() => className(_el$3, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
     return _el$3;
@@ -2966,7 +3012,7 @@ var PreferencesRow = (props) => {
           return isOpenChannels();
         },
         get children() {
-          var _el$9 = _tmpl$40();
+          var _el$9 = _tmpl$43();
           insert(_el$9, createComponent(For, {
             get each() {
               return channels();
@@ -3016,14 +3062,14 @@ var PreferencesRow = (props) => {
   });
 };
 delegateEvents(["click"]);
-var _tmpl$41 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
+var _tmpl$44 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
 var PreferencesHeader = (props) => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$41(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$44(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return props.navigateToNotifications;
@@ -3087,20 +3133,20 @@ var useTabsDropdown = ({ tabs }) => {
   });
   return { dropdownTabs, setTabsList, visibleTabs };
 };
-var _tmpl$42 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
 var ArrowDown = (props) => {
   return (() => {
-    var _el$ = _tmpl$42();
+    var _el$ = _tmpl$45();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$43 = /* @__PURE__ */ template(`<strong>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<strong>`);
 var _tmpl$213 = /* @__PURE__ */ template(`<p>`);
 var Bold = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$43();
+    var _el$ = _tmpl$46();
     insert(_el$, () => props.children);
     effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
     return _el$;
@@ -3191,7 +3237,7 @@ function useTooltip() {
 }
 
 // src/ui/components/primitives/Tooltip/TooltipContent.tsx
-var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<div>`);
 var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
 var TooltipContentBody = (props) => {
   const {
@@ -3214,7 +3260,7 @@ var TooltipContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$44();
+    var _el$ = _tmpl$47();
     use(setFloating, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -3253,7 +3299,7 @@ var TooltipContent = (props) => {
     }
   });
 };
-var _tmpl$45 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$48 = /* @__PURE__ */ template(`<button>`);
 var TooltipTrigger = (props) => {
   const {
     setReference,
@@ -3276,7 +3322,7 @@ var TooltipTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$45();
+    var _el$ = _tmpl$48();
     _el$.addEventListener("mouseleave", () => {
       setOpen(false);
     });
@@ -3308,10 +3354,10 @@ var Tooltip = {
 };
 
 // src/ui/components/Notification/DefaultNotification.tsx
-var _tmpl$46 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$49 = /* @__PURE__ */ template(`<img>`);
 var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$47 = /* @__PURE__ */ template(`<a><div><div></div><div></div><p>`);
+var _tmpl$410 = /* @__PURE__ */ template(`<a><div><div></div><div></div><p>`);
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -3360,7 +3406,7 @@ var DefaultNotification = (props) => {
     }
   });
   return (() => {
-    var _el$ = _tmpl$47(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling;
+    var _el$ = _tmpl$410(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling;
     _el$.$$click = handleNotificationClick;
     insert(_el$, createComponent(Show, {
       get when() {
@@ -3374,7 +3420,7 @@ var DefaultNotification = (props) => {
         })();
       },
       get children() {
-        var _el$2 = _tmpl$46();
+        var _el$2 = _tmpl$49();
         effect((_p$) => {
           var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
           _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
@@ -3698,14 +3744,14 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$48 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$50 = /* @__PURE__ */ template(`<div>`);
 var NotificationListSkeleton = (props) => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$48();
+    var _el$ = _tmpl$50();
     insert(_el$, createComponent(Motion.div, {
       get animate() {
         return {
@@ -3744,7 +3790,7 @@ var NotificationListSkeleton = (props) => {
               appearanceKey: "notificationList__skeletonAvatar",
               "class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
             }), (() => {
-              var _el$3 = _tmpl$48();
+              var _el$3 = _tmpl$50();
               insert(_el$3, createComponent(SkeletonText, {
                 appearanceKey: "notificationList__skeletonText",
                 "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -3758,7 +3804,7 @@ var NotificationListSkeleton = (props) => {
             })()];
           }
         }))), (() => {
-          var _el$2 = _tmpl$48();
+          var _el$2 = _tmpl$50();
           effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
           return _el$2;
         })()];
@@ -3803,7 +3849,7 @@ var NotificationListSkeleton = (props) => {
 };
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$49 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$215 = /* @__PURE__ */ template(`<div><div>`);
 var NotificationList = (props) => {
   var _a, _b;
@@ -3904,7 +3950,7 @@ var NotificationList = (props) => {
             return !end();
           },
           get children() {
-            var _el$3 = _tmpl$49();
+            var _el$3 = _tmpl$51();
             use(setEl, _el$3);
             insert(_el$3, createComponent(NotificationListSkeleton, {
               loading: true
@@ -3926,13 +3972,13 @@ var NotificationList = (props) => {
     return _el$;
   })();
 };
-var _tmpl$50 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<span>`);
 var getDisplayCount = (count) => count >= 100 ? "99+" : count;
 var InboxTabUnreadNotificationsCount = (props) => {
   const style = useStyle();
   const displayCount = createMemo(() => getDisplayCount(props.count));
   return (() => {
-    var _el$ = _tmpl$50();
+    var _el$ = _tmpl$52();
     insert(_el$, displayCount);
     effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
     return _el$;
@@ -3957,7 +4003,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$50();
+        var _el$2 = _tmpl$52();
         insert(_el$2, () => props.label);
         effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -3995,7 +4041,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$50();
+        var _el$3 = _tmpl$52();
         insert(_el$3, () => props.label);
         effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -4176,7 +4222,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -4198,7 +4244,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$51();
+    var _el$ = _tmpl$53();
     insert(_el$, createComponent(Switch$1, {
       get children() {
         return [createComponent(Match, {
@@ -4525,7 +4571,7 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "3.0.0-canary.2";
+var version = "3.0.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, _preferencesFilter, _setPreferencesFilter, _predefinedNovu, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
 var NovuUI = class {