@novu/js 3.0.0-canary.2 → 3.0.1

package/dist/cjs/ui/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWFFKLN6Q_js = require('../chunk-WFFKLN6Q.js');
+var chunkBD5JCEYL_js = require('../chunk-BD5JCEYL.js');
 var chunkERC62PGI_js = require('../chunk-ERC62PGI.js');
 var chunk7B52C2XE_js = require('../chunk-7B52C2XE.js');
 var web = require('solid-js/web');
@@ -256,7 +256,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
@@ -542,6 +543,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 }),
@@ -801,14 +803,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);
   };
   solidJs.onMount(() => {
     let cleanup;
-    const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
+    const resolveLock = requestLock(channelName, () => {
       cleanup = novu.on(webSocketEvent, updateReadCount);
     });
     solidJs.onCleanup(() => {
@@ -843,6 +846,7 @@ var InboxProvider = (props) => {
     tags: props.tabs.length > 0 ? getTagsFromTab(props.tabs[0]) : []
   }));
   const [hideBranding, setHideBranding] = solidJs.createSignal(false);
+  const [isDevelopmentMode, setIsDevelopmentMode] = solidJs.createSignal(false);
   const [preferencesFilter, setPreferencesFilter] = solidJs.createSignal(props.preferencesFilter);
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
@@ -898,6 +902,7 @@ var InboxProvider = (props) => {
         return;
       }
       setHideBranding(data.removeNovuBranding);
+      setIsDevelopmentMode(data.isDevelopmentMode);
     }
   });
   return web.createComponent(InboxContext.Provider, {
@@ -914,7 +919,8 @@ var InboxProvider = (props) => {
       setIsOpened,
       navigate,
       hideBranding,
-      preferencesFilter
+      preferencesFilter,
+      isDevelopmentMode
     },
     get children() {
       return props.children;
@@ -930,7 +936,7 @@ var useInboxContext = () => {
 };
 var NovuContext = solidJs.createContext(void 0);
 function NovuProvider(props) {
-  const novu = solidJs.createMemo(() => props.novu || new chunkWFFKLN6Q_js.Novu(props.options));
+  const novu = solidJs.createMemo(() => props.novu || new chunkBD5JCEYL_js.Novu(props.options));
   return web.createComponent(NovuContext.Provider, {
     get value() {
       return novu();
@@ -1435,21 +1441,61 @@ function isBrowser() {
 }
 
 // src/ui/components/elements/Footer.tsx
-var _tmpl$21 = /* @__PURE__ */ web.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__ */ web.template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">Development mode`);
+var _tmpl$22 = /* @__PURE__ */ web.template(`<span class="nt-z-10 nt-text-xs">\u2022`);
+var _tmpl$32 = /* @__PURE__ */ web.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__ */ web.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 web.createComponent(solidJs.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;
-      web.insert(_el$2, web.createComponent(Novu2, {
-        "class": "nt-size-4"
-      }), _el$4);
-      web.effect(() => web.setAttribute(_el$2, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
+      var _el$ = _tmpl$42();
+      _el$.style.setProperty("--stripes-size", "15px");
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return isDevelopmentMode();
+        },
+        get children() {
+          return _tmpl$21();
+        }
+      }), null);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return web.memo(() => !!isDevelopmentMode())() && !hideBranding();
+        },
+        get children() {
+          return _tmpl$22();
+        }
+      }), null);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return !hideBranding();
+        },
+        get children() {
+          var _el$4 = _tmpl$32(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+          web.insert(_el$4, web.createComponent(Novu2, {
+            "class": "nt-size-2.5"
+          }), _el$6);
+          web.effect(() => web.setAttribute(_el$4, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
+          return _el$4;
+        }
+      }), null);
+      web.effect(() => web.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$;
     }
   });
@@ -1460,7 +1506,7 @@ function getCurrentDomain() {
   }
   return "";
 }
-var _tmpl$22 = /* @__PURE__ */ web.template(`<button>`);
+var _tmpl$23 = /* @__PURE__ */ web.template(`<button>`);
 var buttonVariants = classVarianceAuthority.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: {
@@ -1487,7 +1533,7 @@ var Button = (props) => {
   const [local, rest] = solidJs.splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$22();
+    var _el$ = _tmpl$23();
     web.spread(_el$, web.mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -1505,7 +1551,7 @@ var Button = (props) => {
     return _el$;
   })();
 };
-var _tmpl$23 = /* @__PURE__ */ web.template(`<button>`);
+var _tmpl$24 = /* @__PURE__ */ web.template(`<button>`);
 var PopoverClose = (props) => {
   const {
     onClose
@@ -1526,14 +1572,14 @@ var PopoverClose = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$23();
+    var _el$ = _tmpl$24();
     _el$.$$click = handleClick;
     web.spread(_el$, rest, false, false);
     return _el$;
   })();
 };
 web.delegateEvents(["click"]);
-var _tmpl$24 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ web.template(`<div>`);
 var Root = (props) => {
   const [_, rest] = solidJs.splitProps(props, ["class"]);
   const {
@@ -1549,7 +1595,7 @@ var Root = (props) => {
     },
     children: new Comment(" Powered by Novu - https://novu.co ")
   }), (() => {
-    var _el$ = _tmpl$24();
+    var _el$ = _tmpl$25();
     web.spread(_el$, web.mergeProps({
       get id() {
         return `novu-root-${id()}`;
@@ -1622,7 +1668,7 @@ function usePopover() {
 }
 
 // src/ui/components/primitives/Popover/PopoverContent.tsx
-var _tmpl$25 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$26 = /* @__PURE__ */ web.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 {
@@ -1645,7 +1691,7 @@ var PopoverContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$25();
+    var _el$ = _tmpl$26();
     web.use(setFloating, _el$);
     web.spread(_el$, web.mergeProps({
       get ["class"]() {
@@ -1725,7 +1771,7 @@ var PopoverContent = (props) => {
     }
   });
 };
-var _tmpl$26 = /* @__PURE__ */ web.template(`<button>`);
+var _tmpl$27 = /* @__PURE__ */ web.template(`<button>`);
 var PopoverTrigger = (props) => {
   const {
     setReference,
@@ -1749,7 +1795,7 @@ var PopoverTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$26();
+    var _el$ = _tmpl$27();
     _el$.$$click = handleClick;
     web.use(setReference, _el$);
     web.spread(_el$, web.mergeProps({
@@ -1913,7 +1959,7 @@ var useKeyboardNavigation = ({
 };
 
 // src/ui/components/primitives/Tabs/TabsRoot.tsx
-var _tmpl$27 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$28 = /* @__PURE__ */ web.template(`<div>`);
 var TabsContext = solidJs.createContext(void 0);
 var useTabsContext = () => {
   const context = solidJs.useContext(TabsContext);
@@ -1952,7 +1998,7 @@ var TabsRoot = (props) => {
       setVisibleTabs
     },
     get children() {
-      var _el$ = _tmpl$27();
+      var _el$ = _tmpl$28();
       web.use(setTabsContainer, _el$);
       web.spread(_el$, web.mergeProps({
         get ["class"]() {
@@ -1966,7 +2012,7 @@ var TabsRoot = (props) => {
 };
 
 // src/ui/components/primitives/Tabs/TabsContent.tsx
-var _tmpl$28 = /* @__PURE__ */ web.template(`<div role=tabpanel>`);
+var _tmpl$29 = /* @__PURE__ */ web.template(`<div role=tabpanel>`);
 var TabsContent = (props) => {
   const [local, rest] = solidJs.splitProps(props, ["value", "class", "appearanceKey", "children"]);
   const style = useStyle();
@@ -1978,7 +2024,7 @@ var TabsContent = (props) => {
       return activeTab() === local.value;
     },
     get children() {
-      var _el$ = _tmpl$28();
+      var _el$ = _tmpl$29();
       web.spread(_el$, web.mergeProps({
         get ["class"]() {
           return web.memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
@@ -1998,14 +2044,14 @@ var TabsContent = (props) => {
     }
   });
 };
-var _tmpl$29 = /* @__PURE__ */ web.template(`<div role=tablist>`);
+var _tmpl$30 = /* @__PURE__ */ web.template(`<div role=tablist>`);
 var _tmpl$210 = /* @__PURE__ */ web.template(`<div class="nt-relative nt-z-[-1]">`);
 var tabsListVariants = () => "nt-flex nt-gap-6";
 var TabsList = (props) => {
   const [local, rest] = solidJs.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" ? web.use(_ref$, _el$) : local.ref = _el$;
     web.spread(_el$, web.mergeProps({
@@ -2084,7 +2130,7 @@ var inboxFilterLocalizationKeys = {
   unread: "inbox.filters.labels.unread",
   archived: "inbox.filters.labels.archived"
 };
-var _tmpl$30 = /* @__PURE__ */ web.template(`<span><span></span><span>`);
+var _tmpl$31 = /* @__PURE__ */ web.template(`<span><span></span><span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
   icon: UnreadRead
@@ -2128,7 +2174,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;
         web.insert(_el$2, () => props.icon());
         web.insert(_el$3, () => t(props.localizationKey));
         web.effect((_p$) => {
@@ -2162,7 +2208,7 @@ var StatusItem = (props) => {
 };
 
 // src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
-var _tmpl$31 = /* @__PURE__ */ web.template(`<span>`);
+var _tmpl$33 = /* @__PURE__ */ web.template(`<span>`);
 var StatusDropdown = () => {
   const style = useStyle();
   const {
@@ -2187,7 +2233,7 @@ var StatusDropdown = () => {
         }, triggerProps, {
           get children() {
             return [(() => {
-              var _el$ = _tmpl$31();
+              var _el$ = _tmpl$33();
               web.insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               web.effect((_p$) => {
                 var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
@@ -2265,7 +2311,7 @@ var useNotificationsInfiniteScroll = (props) => {
   );
   solidJs.onMount(() => {
     const listener = ({ data: data2 }) => {
-      if (!data2 || !chunkWFFKLN6Q_js.isSameFilter(filter, data2.filter)) {
+      if (!data2 || !chunkBD5JCEYL_js.isSameFilter(filter, data2.filter)) {
         return;
       }
       mutate({ data: data2.notifications, hasMore: data2.hasMore });
@@ -2275,7 +2321,7 @@ var useNotificationsInfiniteScroll = (props) => {
   });
   solidJs.createEffect(() => chunk7B52C2XE_js.__async(void 0, null, function* () {
     const newFilter = chunk7B52C2XE_js.__spreadValues({}, props.options());
-    if (chunkWFFKLN6Q_js.isSameFilter(filter, newFilter)) {
+    if (chunkBD5JCEYL_js.isSameFilter(filter, newFilter)) {
       return;
     }
     novu.notifications.clearCache();
@@ -2332,7 +2378,7 @@ var useReadAll = (props) => {
 };
 
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
-var _tmpl$32 = /* @__PURE__ */ web.template(`<span>`);
+var _tmpl$34 = /* @__PURE__ */ web.template(`<span>`);
 var MoreActionsOptions = () => {
   const {
     filter
@@ -2380,12 +2426,12 @@ var ActionsItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$32();
+        var _el$ = _tmpl$34();
         web.insert(_el$, () => props.icon());
         web.effect(() => web.className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-4")));
         return _el$;
       })(), (() => {
-        var _el$2 = _tmpl$32();
+        var _el$2 = _tmpl$34();
         web.insert(_el$2, () => t(props.localizationKey));
         web.effect((_p$) => {
           var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
@@ -2444,11 +2490,11 @@ var MoreActionsDropdown = () => {
 };
 
 // src/ui/components/elements/Header/ActionsContainer.tsx
-var _tmpl$33 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$35 = /* @__PURE__ */ web.template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$33();
+    var _el$ = _tmpl$35();
     web.insert(_el$, web.createComponent(MoreActionsDropdown, {}), null);
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
@@ -2476,11 +2522,11 @@ var ActionsContainer = (props) => {
 };
 
 // src/ui/components/elements/Header/Header.tsx
-var _tmpl$34 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$36 = /* @__PURE__ */ web.template(`<div>`);
 var Header = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$34();
+    var _el$ = _tmpl$36();
     web.insert(_el$, web.createComponent(StatusDropdown, {}), null);
     web.insert(_el$, web.createComponent(ActionsContainer, {
       get showPreferences() {
@@ -2491,7 +2537,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$35 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$37 = /* @__PURE__ */ web.template(`<div>`);
 var Collapsible = (props) => {
   const style = useStyle();
   let contentRef;
@@ -2500,7 +2546,7 @@ var Collapsible = (props) => {
     requestAnimationFrame(() => setEnableTransition(true));
   });
   return (() => {
-    var _el$ = _tmpl$35();
+    var _el$ = _tmpl$37();
     var _ref$ = contentRef;
     typeof _ref$ === "function" ? web.use(_ref$, _el$) : contentRef = _el$;
     web.spread(_el$, web.mergeProps({
@@ -2519,11 +2565,11 @@ var Collapsible = (props) => {
     return _el$;
   })();
 };
-var _tmpl$36 = /* @__PURE__ */ web.template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
+var _tmpl$38 = /* @__PURE__ */ web.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);
     });
@@ -2544,7 +2590,7 @@ var Switch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/ChannelRow.tsx
-var _tmpl$37 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span></div><div>`);
+var _tmpl$39 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
   const updatePreference = (enabled) => chunk7B52C2XE_js.__async(void 0, null, function* () {
@@ -2558,7 +2604,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;
     web.insert(_el$3, web.createComponent(ChannelIcon, {
       appearanceKey: "channel__icon",
       get channel() {
@@ -2644,12 +2690,12 @@ var getLabel = (channel) => {
       return "";
   }
 };
-var _tmpl$38 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$40 = /* @__PURE__ */ web.template(`<div>`);
 var _tmpl$211 = /* @__PURE__ */ web.template(`<div><div></div><div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$38();
+    var _el$ = _tmpl$40();
     web.effect(() => web.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$;
   })();
@@ -2657,7 +2703,7 @@ var SkeletonText = (props) => {
 var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$2 = _tmpl$38();
+    var _el$2 = _tmpl$40();
     web.effect(() => web.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;
   })();
@@ -2682,7 +2728,7 @@ var SkeletonSwitch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
-var _tmpl$39 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$41 = /* @__PURE__ */ web.template(`<div>`);
 var channelIcons = [InApp, Email, Sms, Push, Chat];
 var PreferencesListSkeleton = (props) => {
   const style = useStyle();
@@ -2690,7 +2736,7 @@ var PreferencesListSkeleton = (props) => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$39();
+    var _el$ = _tmpl$41();
     web.insert(_el$, web.createComponent(Motion.div, {
       get animate() {
         return {
@@ -2732,7 +2778,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();
                 web.insert(_el$3, web.createComponent(SkeletonText, {
                   appearanceKey: "notificationList__skeletonText",
                   "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -2750,7 +2796,7 @@ var PreferencesListSkeleton = (props) => {
             }
           });
         })), (() => {
-          var _el$2 = _tmpl$39();
+          var _el$2 = _tmpl$41();
           web.effect(() => web.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;
         })()];
@@ -2795,7 +2841,7 @@ var PreferencesListSkeleton = (props) => {
 };
 
 // src/ui/components/elements/Preferences/Preferences.tsx
-var _tmpl$40 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$43 = /* @__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 Preferences = () => {
@@ -2844,7 +2890,7 @@ var Preferences = () => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$40();
+    var _el$ = _tmpl$43();
     web.insert(_el$, web.createComponent(PreferencesRow, {
       localizationKey: "preferences.global",
       get channels() {
@@ -2923,7 +2969,7 @@ var WorkflowDescription = (props) => {
     return channels.map((c, index) => [c, web.memo(() => index < channels.length - 1 && ", ")]);
   };
   return (() => {
-    var _el$3 = _tmpl$40();
+    var _el$3 = _tmpl$43();
     web.insert(_el$3, channelNames);
     web.effect(() => web.className(_el$3, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
     return _el$3;
@@ -2972,7 +3018,7 @@ var PreferencesRow = (props) => {
           return isOpenChannels();
         },
         get children() {
-          var _el$9 = _tmpl$40();
+          var _el$9 = _tmpl$43();
           web.insert(_el$9, web.createComponent(solidJs.For, {
             get each() {
               return channels();
@@ -3022,14 +3068,14 @@ var PreferencesRow = (props) => {
   });
 };
 web.delegateEvents(["click"]);
-var _tmpl$41 = /* @__PURE__ */ web.template(`<div><div data-localization=preferences.title>`);
+var _tmpl$44 = /* @__PURE__ */ web.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;
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
         return props.navigateToNotifications;
@@ -3093,20 +3139,20 @@ var useTabsDropdown = ({ tabs }) => {
   });
   return { dropdownTabs, setTabsList, visibleTabs };
 };
-var _tmpl$42 = /* @__PURE__ */ web.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__ */ web.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();
     web.spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$43 = /* @__PURE__ */ web.template(`<strong>`);
+var _tmpl$46 = /* @__PURE__ */ web.template(`<strong>`);
 var _tmpl$213 = /* @__PURE__ */ web.template(`<p>`);
 var Bold = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$43();
+    var _el$ = _tmpl$46();
     web.insert(_el$, () => props.children);
     web.effect(() => web.className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
     return _el$;
@@ -3197,7 +3243,7 @@ function useTooltip() {
 }
 
 // src/ui/components/primitives/Tooltip/TooltipContent.tsx
-var _tmpl$44 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$47 = /* @__PURE__ */ web.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 {
@@ -3220,7 +3266,7 @@ var TooltipContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$44();
+    var _el$ = _tmpl$47();
     web.use(setFloating, _el$);
     web.spread(_el$, web.mergeProps({
       get ["class"]() {
@@ -3259,7 +3305,7 @@ var TooltipContent = (props) => {
     }
   });
 };
-var _tmpl$45 = /* @__PURE__ */ web.template(`<button>`);
+var _tmpl$48 = /* @__PURE__ */ web.template(`<button>`);
 var TooltipTrigger = (props) => {
   const {
     setReference,
@@ -3282,7 +3328,7 @@ var TooltipTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$45();
+    var _el$ = _tmpl$48();
     _el$.addEventListener("mouseleave", () => {
       setOpen(false);
     });
@@ -3314,10 +3360,10 @@ var Tooltip = {
 };
 
 // src/ui/components/Notification/DefaultNotification.tsx
-var _tmpl$46 = /* @__PURE__ */ web.template(`<img>`);
+var _tmpl$49 = /* @__PURE__ */ web.template(`<img>`);
 var _tmpl$214 = /* @__PURE__ */ web.template(`<div>`);
 var _tmpl$311 = /* @__PURE__ */ web.template(`<span>`);
-var _tmpl$47 = /* @__PURE__ */ web.template(`<a><div><div></div><div></div><p>`);
+var _tmpl$410 = /* @__PURE__ */ web.template(`<a><div><div></div><div></div><p>`);
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -3366,7 +3412,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;
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
@@ -3380,7 +3426,7 @@ var DefaultNotification = (props) => {
         })();
       },
       get children() {
-        var _el$2 = _tmpl$46();
+        var _el$2 = _tmpl$49();
         web.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 && web.className(_el$2, _p$.e = _v$);
@@ -3704,14 +3750,14 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$48 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$50 = /* @__PURE__ */ web.template(`<div>`);
 var NotificationListSkeleton = (props) => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$48();
+    var _el$ = _tmpl$50();
     web.insert(_el$, web.createComponent(Motion.div, {
       get animate() {
         return {
@@ -3750,7 +3796,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();
               web.insert(_el$3, web.createComponent(SkeletonText, {
                 appearanceKey: "notificationList__skeletonText",
                 "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -3764,7 +3810,7 @@ var NotificationListSkeleton = (props) => {
             })()];
           }
         }))), (() => {
-          var _el$2 = _tmpl$48();
+          var _el$2 = _tmpl$50();
           web.effect(() => web.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;
         })()];
@@ -3809,7 +3855,7 @@ var NotificationListSkeleton = (props) => {
 };
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$49 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$51 = /* @__PURE__ */ web.template(`<div>`);
 var _tmpl$215 = /* @__PURE__ */ web.template(`<div><div>`);
 var NotificationList = (props) => {
   var _a, _b;
@@ -3910,7 +3956,7 @@ var NotificationList = (props) => {
             return !end();
           },
           get children() {
-            var _el$3 = _tmpl$49();
+            var _el$3 = _tmpl$51();
             web.use(setEl, _el$3);
             web.insert(_el$3, web.createComponent(NotificationListSkeleton, {
               loading: true
@@ -3932,13 +3978,13 @@ var NotificationList = (props) => {
     return _el$;
   })();
 };
-var _tmpl$50 = /* @__PURE__ */ web.template(`<span>`);
+var _tmpl$52 = /* @__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$52();
     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$;
@@ -3963,7 +4009,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$50();
+        var _el$2 = _tmpl$52();
         web.insert(_el$2, () => props.label);
         web.effect(() => web.className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -4001,7 +4047,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$50();
+        var _el$3 = _tmpl$52();
         web.insert(_el$3, () => props.label);
         web.effect(() => web.className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -4182,7 +4228,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$51 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$53 = /* @__PURE__ */ web.template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -4204,7 +4250,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$51();
+    var _el$ = _tmpl$53();
     web.insert(_el$, web.createComponent(solidJs.Switch, {
       get children() {
         return [web.createComponent(solidJs.Match, {
@@ -4531,7 +4577,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 {