@novu/js 2.2.1 → 2.3.0

package/dist/cjs/ui/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkHEC6BX2T_js = require('../chunk-HEC6BX2T.js');
+var chunkAALXN67T_js = require('../chunk-AALXN67T.js');
+var chunk7B52C2XE_js = require('../chunk-7B52C2XE.js');
 var web = require('solid-js/web');
 var solidJs = require('solid-js');
 var store = require('solid-js/store');
@@ -25,7 +26,7 @@ var defaultVariables = {
   colorCounterForeground: "white",
   colorBackground: "#FCFCFC",
   colorForeground: "#1A1523",
-  colorNeutral: "black",
+  colorNeutral: "#525252",
   colorShadow: "rgba(122,133,153,0.25)",
   fontSize: "inherit",
   borderRadius: "0.375rem"
@@ -203,7 +204,7 @@ function createInfiniteScroll(fetcher) {
       setData(content.data);
     });
   });
-  const reset = () => chunkHEC6BX2T_js.__async(this, null, function* () {
+  const reset = () => chunk7B52C2XE_js.__async(this, null, function* () {
     setData([]);
     setInitialLoading(true);
     setEnd(false);
@@ -441,14 +442,15 @@ var AppearanceProvider = (props) => {
     var _a;
     return ((_a = props.appearance) == null ? void 0 : _a.variables) || {};
   };
-  const elements = () => {
-    var _a;
-    return ((_a = props.appearance) == null ? void 0 : _a.elements) || {};
-  };
   const animations = () => {
     var _a, _b;
     return (_b = (_a = props.appearance) == null ? void 0 : _a.animations) != null ? _b : true;
   };
+  const allElements = solidJs.createMemo(() => {
+    var _a;
+    const baseElements = themes().reduce((acc, obj) => chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, acc), obj.elements || {}), {});
+    return chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, baseElements), ((_a = props.appearance) == null ? void 0 : _a.elements) || {});
+  });
   solidJs.onMount(() => {
     const el = document.getElementById(props.id);
     if (el) {
@@ -472,17 +474,16 @@ var AppearanceProvider = (props) => {
     if (!styleEl) {
       return;
     }
-    const baseVariables = chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, defaultVariables), themes().reduce((acc, obj) => chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, acc), obj.variables || {}), {}));
-    setVariableRules(parseVariables(chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, baseVariables), ((_a = props.appearance) == null ? void 0 : _a.variables) || {}), props.id));
+    const baseVariables = chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, defaultVariables), themes().reduce((acc, obj) => chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, acc), obj.variables || {}), {}));
+    setVariableRules(parseVariables(chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, baseVariables), ((_a = props.appearance) == null ? void 0 : _a.variables) || {}), props.id));
   });
   solidJs.createEffect(() => {
     const styleEl = styleElement();
     if (!styleEl) {
       return;
     }
-    const baseElements = themes().reduce((acc, obj) => chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, acc), obj.elements || {}), {});
-    const elementsStyleData = parseElements(chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, baseElements), elements()));
-    setStore("appearanceKeyToCssInJsClass", (obj) => chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, obj), elementsStyleData.reduce((acc, item) => {
+    const elementsStyleData = parseElements(allElements());
+    setStore("appearanceKeyToCssInJsClass", (obj) => chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, obj), elementsStyleData.reduce((acc, item) => {
       acc[item.key] = item.className;
       return acc;
     }, {})));
@@ -498,7 +499,7 @@ var AppearanceProvider = (props) => {
   return web.createComponent(AppearanceContext.Provider, {
     get value() {
       return {
-        elements,
+        elements: allElements,
         variables,
         appearanceKeyToCssInJsClass: store$1.appearanceKeyToCssInJsClass,
         // stores are reactive
@@ -597,10 +598,10 @@ var LocalizationProvider = (props) => {
   const localization = solidJs.createMemo(() => {
     const _a = props.localization || {}, {
       dynamic
-    } = _a, localizationObject = chunkHEC6BX2T_js.__objRest(_a, [
+    } = _a, localizationObject = chunk7B52C2XE_js.__objRest(_a, [
       "dynamic"
     ]);
-    return chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
+    return chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
   });
   const t = (key, ...args) => {
     const value = localization()[key];
@@ -657,14 +658,14 @@ 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(chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
+  const [filter, setFilter] = solidJs.createSignal(chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
     tags: props.tabs.length > 0 ? getTagsFromTab(props.tabs[0]) : []
   }));
   const [hideBranding, setHideBranding] = solidJs.createSignal(false);
   const [preferencesFilter, setPreferencesFilter] = solidJs.createSignal(props.preferencesFilter);
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
-    setFilter((old) => chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
+    setFilter((old) => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
       tags: old.tags
     }));
   };
@@ -675,7 +676,7 @@ var InboxProvider = (props) => {
       return;
     }
     setActiveTab(newActiveTab);
-    setFilter((old) => chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, old), {
+    setFilter((old) => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, old), {
       tags
     }));
   };
@@ -702,7 +703,7 @@ var InboxProvider = (props) => {
     const firstTab = props.tabs[0];
     const tags = getTagsFromTab(firstTab);
     setActiveTab((_a2 = firstTab == null ? void 0 : firstTab.label) != null ? _a2 : "");
-    setFilter((old) => chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, old), {
+    setFilter((old) => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, old), {
       tags
     }));
     setPreferencesFilter(props.preferencesFilter);
@@ -748,7 +749,7 @@ var useInboxContext = () => {
 };
 var NovuContext = solidJs.createContext(void 0);
 function NovuProvider(props) {
-  const novu = solidJs.createMemo(() => props.novu || new chunkHEC6BX2T_js.Novu(props.options));
+  const novu = solidJs.createMemo(() => props.novu || new chunkAALXN67T_js.Novu(props.options));
   return web.createComponent(NovuContext.Provider, {
     get value() {
       return novu();
@@ -780,7 +781,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 = () => chunkHEC6BX2T_js.__async(void 0, null, function* () {
+  const updateTabCounts = () => chunk7B52C2XE_js.__async(void 0, null, function* () {
     if (tabs().length === 0) {
       return;
     }
@@ -831,7 +832,7 @@ var CountProvider = (props) => {
   const updateNewNotificationCountsOrCache = (notification, tags) => {
     const notificationsCache = novu.notifications.cache;
     const limitValue = limit();
-    const tabFilter = chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, filter()), {
+    const tabFilter = chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, filter()), {
       tags,
       offset: 0,
       limit: limitValue
@@ -847,7 +848,7 @@ var CountProvider = (props) => {
     };
     const hasLessThenMinAmount = ((cachedData == null ? void 0 : cachedData.notifications.length) || 0) < MIN_AMOUNT_OF_NOTIFICATIONS;
     if (hasLessThenMinAmount) {
-      notificationsCache.update(tabFilter, chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, cachedData), {
+      notificationsCache.update(tabFilter, chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, cachedData), {
         notifications: [notification, ...cachedData.notifications]
       }));
       return;
@@ -861,7 +862,7 @@ var CountProvider = (props) => {
   };
   useWebSocketEvent({
     event: "notifications.notification_received",
-    eventHandler: (_0) => chunkHEC6BX2T_js.__async(void 0, [_0], function* ({
+    eventHandler: (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({
       result: notification
     }) {
       if (filter().archived) {
@@ -1029,15 +1030,11 @@ function useFocusManager() {
   return context;
 }
 var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-var ExternalElementRenderer = (_a) => {
-  var _b = _a, {
-    render: render2
-  } = _b, rest = chunkHEC6BX2T_js.__objRest(_b, [
-    "render"
-  ]);
+var ExternalElementRenderer = (props) => {
   let ref;
+  const [local, rest] = solidJs.splitProps(props, ["render"]);
   solidJs.createEffect(() => {
-    const unmount = render2(ref);
+    const unmount = local.render(ref);
     solidJs.onCleanup(() => {
       unmount();
     });
@@ -1221,7 +1218,7 @@ var BellContainer = (props) => {
         return _el$2;
       }
     }), null);
-    web.effect(() => web.className(_el$, style("bellContainer", `nt-h-6 nt-w-6 nt-flex nt-justify-center nt-items-center nt-rounded-md nt-relative nt-text-foreground-alpha-600 nt-cursor-pointer`)));
+    web.effect(() => web.className(_el$, style("bellContainer", `nt-h-6 nt-w-6 nt-flex nt-justify-center nt-items-center nt-rounded-md nt-relative nt-text-foreground nt-cursor-pointer`)));
     return _el$;
   })();
 };
@@ -1271,8 +1268,8 @@ var buttonVariants = classVarianceAuthority.cva("nt-inline-flex nt-gap-4 nt-item
     variant: {
       default: "nt-bg-primary nt-text-primary-foreground hover:nt-bg-primary-alpha-900",
       secondary: "nt-bg-secondary nt-text-secondary-foreground hover:nt-bg-secondary-alpha-800",
-      icon: "nt-text-secondary-foreground-alpha-500 hover:nt-bg-neutral-100",
-      ghost: "hover:nt-bg-neutral-100",
+      icon: "nt-text-secondary-foreground-alpha-500 hover:nt-bg-neutral-alpha-50",
+      ghost: "hover:nt-bg-neutral-alpha-50",
       unstyled: ""
     },
     size: {
@@ -1369,11 +1366,24 @@ function PopoverRoot(props) {
   const [floating, setFloating] = solidJs.createSignal(null);
   const position = solidFloatingUi.useFloating(reference, floating, {
     placement: props.placement || "bottom-start",
-    whileElementsMounted: dom.autoUpdate,
+    whileElementsMounted: (reference2, floating2, update) => dom.autoUpdate(reference2, floating2, update, {
+      elementResize: false,
+      ancestorScroll: false,
+      animationFrame: false,
+      layoutShift: false
+    }),
     middleware: [dom.offset(10), dom.flip({
       fallbackPlacements: props.fallbackPlacements || ["top-start"]
     }), dom.shift()]
   });
+  const floatingStyles = solidJs.createMemo(() => {
+    var _a2, _b;
+    return {
+      position: position.strategy,
+      top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
+      left: `${(_b = position.x) != null ? _b : 0}px`
+    };
+  });
   const onClose = () => {
     onOpenChange()(false);
   };
@@ -1389,14 +1399,7 @@ function PopoverRoot(props) {
       floating,
       setFloating,
       open,
-      floatingStyles: () => {
-        var _a2, _b;
-        return {
-          position: position.strategy,
-          top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
-          left: `${(_b = position.x) != null ? _b : 0}px`
-        };
-      }
+      floatingStyles
     },
     get children() {
       return props.children;
@@ -1455,6 +1458,7 @@ var PopoverContentBody = (props) => {
   }, rest));
 };
 var PopoverContent = (props) => {
+  const [local, rest] = solidJs.splitProps(props, ["portal"]);
   const {
     open,
     onClose,
@@ -1495,11 +1499,21 @@ var PopoverContent = (props) => {
       return open();
     },
     get children() {
-      return web.createComponent(web.Portal, {
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return local.portal;
+        },
+        get fallback() {
+          return web.createComponent(PopoverContentBody, rest);
+        },
         get children() {
-          return web.createComponent(Root, {
+          return web.createComponent(web.Portal, {
             get children() {
-              return web.createComponent(PopoverContentBody, props);
+              return web.createComponent(Root, {
+                get children() {
+                  return web.createComponent(PopoverContentBody, rest);
+                }
+              });
             }
           });
         }
@@ -1990,15 +2004,15 @@ var StatusDropdown = () => {
 };
 var useNotificationsInfiniteScroll = (props) => {
   const novu = useNovu();
-  let filter = chunkHEC6BX2T_js.__spreadValues({}, props.options());
-  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => chunkHEC6BX2T_js.__async(void 0, null, function* () {
+  let filter = chunk7B52C2XE_js.__spreadValues({}, props.options());
+  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => chunk7B52C2XE_js.__async(void 0, null, function* () {
     var _a, _b;
-    const { data: data2 } = yield novu.notifications.list(chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, props.options() || {}), { offset: offset3 }));
+    const { data: data2 } = yield novu.notifications.list(chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_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 || !chunkHEC6BX2T_js.isSameFilter(filter, data2.filter)) {
+      if (!data2 || !chunkAALXN67T_js.isSameFilter(filter, data2.filter)) {
         return;
       }
       mutate({ data: data2.notifications, hasMore: data2.hasMore });
@@ -2007,8 +2021,8 @@ var useNotificationsInfiniteScroll = (props) => {
     solidJs.onCleanup(() => novu.off("notifications.list.updated", listener));
   });
   solidJs.createEffect(() => {
-    const newFilter = chunkHEC6BX2T_js.__spreadValues({}, props.options());
-    if (chunkHEC6BX2T_js.isSameFilter(filter, newFilter)) {
+    const newFilter = chunk7B52C2XE_js.__spreadValues({}, props.options());
+    if (chunkAALXN67T_js.isSameFilter(filter, newFilter)) {
       return;
     }
     novu.notifications.clearCache();
@@ -2024,7 +2038,7 @@ var useNotificationsInfiniteScroll = (props) => {
 var usePreferences = (options) => {
   const novu = useNovu();
   const [loading, setLoading] = solidJs.createSignal(true);
-  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, (_0) => chunkHEC6BX2T_js.__async(void 0, [_0], function* ({ tags }) {
+  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({ tags }) {
     try {
       const response = yield novu.preferences.list({ tags });
       return response.data;
@@ -2052,7 +2066,7 @@ var usePreferences = (options) => {
 // src/ui/api/hooks/useReadAll.ts
 var useReadAll = (props) => {
   const novu = useNovu();
-  const readAll = (..._0) => chunkHEC6BX2T_js.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const readAll = (..._0) => chunk7B52C2XE_js.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.readAll({ tags });
@@ -2067,7 +2081,7 @@ var useReadAll = (props) => {
 // src/ui/api/hooks/useArchiveAll.ts
 var useArchiveAll = (props) => {
   const novu = useNovu();
-  const archiveAll = (..._0) => chunkHEC6BX2T_js.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const archiveAll = (..._0) => chunk7B52C2XE_js.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.archiveAll({ tags });
@@ -2082,7 +2096,7 @@ var useArchiveAll = (props) => {
 // src/ui/api/hooks/useArchiveAllRead.ts
 var useArchiveAllRead = (props) => {
   const novu = useNovu();
-  const archiveAllRead = (..._0) => chunkHEC6BX2T_js.__async(void 0, [..._0], function* ({ tags } = {}) {
+  const archiveAllRead = (..._0) => chunk7B52C2XE_js.__async(void 0, [..._0], function* ({ tags } = {}) {
     var _a, _b;
     try {
       yield novu.notifications.archiveAllRead({ tags });
@@ -2352,7 +2366,7 @@ function useTooltip() {
 
 // src/ui/components/primitives/Tooltip/TooltipContent.tsx
 var _tmpl$37 = /* @__PURE__ */ web.template(`<div>`);
-var tooltipContentVariants = () => "nt-bg-foreground nt-p-4 nt-shadow-tooltip nt-z-10 nt-rounded-lg nt-text-background nt-text-sm";
+var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
 var TooltipContentBody = (props) => {
   const {
     open,
@@ -2381,7 +2395,9 @@ var TooltipContentBody = (props) => {
         return web.memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
       },
       get style() {
-        return floatingStyles();
+        return chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, floatingStyles()), {
+          "z-index": 99999
+        });
       },
       get ["data-open"]() {
         return open();
@@ -2474,13 +2490,13 @@ var Switch = (props) => {
     });
     web.effect((_p$) => {
       var _v$ = style("channelSwitch", `nt-relative
-    nt-inline-flex nt-cursor-pointer nt-items-center`), _v$2 = props.disabled, _v$3 = props.disabled, _v$4 = style("channelSwitchThumb", `nt-peer nt-h-6 nt-w-11 nt-rounded-full nt-border nt-bg-slate-200
+    nt-inline-flex nt-cursor-pointer nt-items-center data-[disabled=true]:nt-cursor-not-allowed`), _v$2 = props.disabled, _v$3 = props.disabled, _v$4 = style("channelSwitchThumb", `nt-peer nt-h-6 nt-w-11 nt-rounded-full nt-border nt-border-neutral-alpha-200 peer-checked:nt-border-neutral-alpha-400 nt-bg-neutral-alpha-300
           after:nt-absolute after:nt-left-[2px] after:nt-top-0.5 after:nt-h-5
           after:nt-w-5 after:nt-rounded-full after:nt-border
-          after:nt-border-gray-300
-          after:nt-bg-white after:nt-transition-all after:nt-content-['']
+          after:nt-border-neutral-alpha-400
+          after:nt-bg-background after:nt-transition-all after:nt-content-['']
           peer-checked:nt-bg-primary peer-checked:after:nt-translate-x-full
-          peer-checked:after:nt-border-white
+          peer-checked:after:nt-border-background
           nt-transition-all nt-duration-200 after:nt-duration-200
           data-[disabled=true]:nt-opacity-40`), _v$5 = props.disabled, _v$6 = props.checked;
       _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
@@ -2507,7 +2523,7 @@ var Switch = (props) => {
 var _tmpl$40 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
-  const updatePreference = (enabled) => chunkHEC6BX2T_js.__async(void 0, null, function* () {
+  const updatePreference = (enabled) => chunk7B52C2XE_js.__async(void 0, null, function* () {
     if (props.isCritical) {
       return;
     }
@@ -2669,7 +2685,7 @@ var Preferences = () => {
   solidJs.createEffect(() => {
     setDynamicLocalization((prev) => {
       var _a2;
-      return chunkHEC6BX2T_js.__spreadValues(chunkHEC6BX2T_js.__spreadValues({}, prev), (_a2 = allPreferences().workflowPreferences) == null ? void 0 : _a2.reduce((acc, preference) => {
+      return chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, prev), (_a2 = allPreferences().workflowPreferences) == null ? void 0 : _a2.reduce((acc, preference) => {
         acc[preference.workflow.identifier] = preference.workflow.name;
         return acc;
       }, {}));
@@ -2759,7 +2775,7 @@ var ChannelsLabel = (props) => {
           var _el$2 = _tmpl$212();
           web.setAttribute(_el$2, "data-disabled", isDisabled);
           web.insert(_el$2, () => getLabel(key));
-          web.effect(() => web.className(_el$2, style("channelName", "data-[disabled=true]:nt-text-foreground-alpha-200")));
+          web.effect(() => web.className(_el$2, style("channelName", "data-[disabled=true]:nt-text-foreground-alpha-400")));
           return _el$2;
         })();
         channels.push(element);
@@ -2847,7 +2863,7 @@ var PreferencesRow = (props) => {
                   easing: "ease-out"
                 },
                 get ["class"]() {
-                  return style("channelsContainerCollapsible", "nt-grid");
+                  return style("channelsContainerCollapsible", "nt-grid nt-self-stretch");
                 },
                 get children() {
                   var _el$9 = _tmpl$43();
@@ -2892,7 +2908,7 @@ var PreferencesRow = (props) => {
       }), null);
       web.effect((_p$) => {
         var _v$ = style("workflowContainer", `nt-p-4 nt-flex nt-flex-col nt-gap-1 nt-items-start nt-self-stretch 
-          hover:nt-bg-neutral-100 nt-rounded-lg data-[disabled=true]:nt-bg-neutral-alpha-50`), _v$2 = props.isCritical, _v$3 = isOpen(), _v$4 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center"), _v$5 = props.isCritical, _v$6 = isOpen(), _v$7 = style("workflowLabel", "nt-text-base nt-font-semibold nt-text-start nt-flex nt-items-center nt-gap-1"), _v$8 = props.isCritical, _v$9 = props.localizationKey, _v$10 = isOpen(), _v$11 = style("workflowContainerRight__icon", `nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180`), _v$12 = props.isCritical, _v$13 = isOpen();
+          hover:nt-bg-neutral-alpha-50 nt-rounded-lg data-[disabled=true]:nt-bg-neutral-alpha-50`), _v$2 = props.isCritical, _v$3 = isOpen(), _v$4 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center"), _v$5 = props.isCritical, _v$6 = isOpen(), _v$7 = style("workflowLabel", "nt-text-base nt-font-semibold nt-text-start nt-flex nt-items-center nt-gap-1"), _v$8 = props.isCritical, _v$9 = props.localizationKey, _v$10 = isOpen(), _v$11 = style("workflowContainerRight__icon", `nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180`), _v$12 = props.isCritical, _v$13 = isOpen();
         _v$ !== _p$.e && web.className(_el$4, _p$.e = _v$);
         _v$2 !== _p$.t && web.setAttribute(_el$4, "data-disabled", _p$.t = _v$2);
         _v$3 !== _p$.a && web.setAttribute(_el$4, "data-open", _p$.a = _v$3);
@@ -2973,7 +2989,7 @@ var Markdown = (props) => {
   const _a = props, {
     children,
     strongAppearanceKey
-  } = _a, rest = chunkHEC6BX2T_js.__objRest(_a, [
+  } = _a, rest = chunk7B52C2XE_js.__objRest(_a, [
     "children",
     "strongAppearanceKey"
   ]);
@@ -3067,7 +3083,7 @@ var DefaultNotification = (props) => {
       },
       get children() {
         var _el$2 = _tmpl$46();
-        web.effect(() => web.className(_el$2, style("notificationDot", "nt-absolute -nt-translate-x-[1.0625rem] nt-translate-y-1/2 nt-size-2.5 nt-bg-primary nt-rounded-full nt-border")));
+        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 nt-border-neutral-alpha-200")));
         return _el$2;
       }
     }), _el$4);
@@ -3112,7 +3128,7 @@ var DefaultNotification = (props) => {
                       e.stopPropagation();
                       props.notification.read();
                     },
-                    "class": "hover:nt-bg-neutral-200",
+                    "class": "hover:nt-bg-neutral-alpha-50",
                     get children() {
                       return web.createComponent(ReadAll, {});
                     }
@@ -3139,7 +3155,7 @@ var DefaultNotification = (props) => {
                       e.stopPropagation();
                       props.notification.unread();
                     },
-                    "class": "hover:nt-bg-neutral-200",
+                    "class": "hover:nt-bg-neutral-alpha-50",
                     get children() {
                       return web.createComponent(Unread, {});
                     }
@@ -3173,7 +3189,7 @@ var DefaultNotification = (props) => {
                   e.stopPropagation();
                   props.notification.archive();
                 },
-                "class": "hover:nt-bg-neutral-200",
+                "class": "hover:nt-bg-neutral-alpha-50",
                 get children() {
                   return web.createComponent(Archive, {});
                 }
@@ -3200,7 +3216,7 @@ var DefaultNotification = (props) => {
                   e.stopPropagation();
                   props.notification.unarchive();
                 },
-                "class": "hover:nt-bg-neutral-200",
+                "class": "hover:nt-bg-neutral-alpha-50",
                 get children() {
                   return web.createComponent(Unarchive, {});
                 }
@@ -3268,12 +3284,12 @@ var DefaultNotification = (props) => {
     }), null);
     web.effect((_p$) => {
       var _a;
-      var _v$3 = style("notification", cn("nt-w-full nt-text-sm hover:nt-bg-neutral-100 nt-group nt-relative nt-flex nt-py-4 nt-px-6 nt-gap-2", {
+      var _v$3 = style("notification", cn("nt-w-full nt-text-sm hover:nt-bg-neutral-alpha-50 nt-group nt-relative nt-flex nt-py-4 nt-px-6 nt-gap-2", {
         "nt-cursor-pointer": !props.notification.isRead || !!((_a = props.notification.redirect) == null ? void 0 : _a.url)
       })), _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-py-0.5 nt-rounded nt-z-50`), _v$7 = style("notificationCustomActions", "nt-flex nt-flex-wrap nt-gap-4 nt-mt-4");
+              nt-absolute nt-top-0 nt-right-0 nt-bg-neutral-alpha-50 nt-py-0.5 nt-rounded`), _v$7 = style("notificationCustomActions", "nt-flex nt-flex-wrap 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);
@@ -3425,7 +3441,7 @@ var EmptyNotificationList = () => {
 };
 var NotificationList = (props) => {
   var _a, _b;
-  const options = solidJs.createMemo(() => chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, props.filter), {
+  const options = solidJs.createMemo(() => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, props.filter), {
     limit: props.limit
   }));
   const style = useStyle();
@@ -3454,7 +3470,7 @@ var NotificationList = (props) => {
   solidJs.createEffect(() => {
     setLimit(props.limit || DEFAULT_LIMIT);
   });
-  const handleOnNewMessagesClick = (e) => chunkHEC6BX2T_js.__async(void 0, null, function* () {
+  const handleOnNewMessagesClick = (e) => chunk7B52C2XE_js.__async(void 0, null, function* () {
     e.stopPropagation();
     resetNewMessagesCount();
     refetch({
@@ -3688,7 +3704,7 @@ var InboxTabs = (props) => {
       tags: getTagsFromTab(tab)
     }))
   });
-  const options = solidJs.createMemo(() => dropdownTabs().map((tab) => chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, tab), {
+  const options = solidJs.createMemo(() => dropdownTabs().map((tab) => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, tab), {
     rightIcon: tab.label === activeTab() ? web.createComponent(Check, {
       get ["class"]() {
         return style("moreTabs__dropdownItemRight__icon");
@@ -3805,7 +3821,7 @@ var InboxTabs = (props) => {
               return props.onSecondaryActionClick;
             },
             get filter() {
-              return chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, filter()), {
+              return chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, filter()), {
                 tags: getTagsFromTab(tab)
               });
             }
@@ -3949,6 +3965,7 @@ var Inbox2 = (props) => {
         }))
       }), web.createComponent(Popover.Content, {
         appearanceKey: "inbox__popoverContent",
+        portal: true,
         get children() {
           return web.createComponent(InboxContent, {
             get renderNotification() {
@@ -3973,7 +3990,7 @@ var Inbox2 = (props) => {
 // src/ui/components/Renderer.tsx
 var novuComponents = {
   Inbox: Inbox2,
-  // InboxContent, //enable this to also allow the whole inbox content as a component
+  InboxContent,
   Bell,
   Notifications: (props) => web.createComponent(InboxContent, web.mergeProps(props, {
     hideNav: true,
@@ -4085,29 +4102,29 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "2.2.1";
+var version = "2.3.0";
 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 {
   constructor(props) {
-    chunkHEC6BX2T_js.__privateAdd(this, _NovuUI_instances);
-    chunkHEC6BX2T_js.__privateAdd(this, _dispose, null);
-    chunkHEC6BX2T_js.__privateAdd(this, _rootElement);
-    chunkHEC6BX2T_js.__privateAdd(this, _mountedElements);
-    chunkHEC6BX2T_js.__privateAdd(this, _setMountedElements);
-    chunkHEC6BX2T_js.__privateAdd(this, _appearance);
-    chunkHEC6BX2T_js.__privateAdd(this, _setAppearance);
-    chunkHEC6BX2T_js.__privateAdd(this, _localization);
-    chunkHEC6BX2T_js.__privateAdd(this, _setLocalization);
-    chunkHEC6BX2T_js.__privateAdd(this, _options);
-    chunkHEC6BX2T_js.__privateAdd(this, _setOptions);
-    chunkHEC6BX2T_js.__privateAdd(this, _tabs);
-    chunkHEC6BX2T_js.__privateAdd(this, _setTabs);
-    chunkHEC6BX2T_js.__privateAdd(this, _routerPush);
-    chunkHEC6BX2T_js.__privateAdd(this, _setRouterPush);
-    chunkHEC6BX2T_js.__privateAdd(this, _preferencesFilter);
-    chunkHEC6BX2T_js.__privateAdd(this, _setPreferencesFilter);
-    chunkHEC6BX2T_js.__privateAdd(this, _predefinedNovu);
+    chunk7B52C2XE_js.__privateAdd(this, _NovuUI_instances);
+    chunk7B52C2XE_js.__privateAdd(this, _dispose, null);
+    chunk7B52C2XE_js.__privateAdd(this, _rootElement);
+    chunk7B52C2XE_js.__privateAdd(this, _mountedElements);
+    chunk7B52C2XE_js.__privateAdd(this, _setMountedElements);
+    chunk7B52C2XE_js.__privateAdd(this, _appearance);
+    chunk7B52C2XE_js.__privateAdd(this, _setAppearance);
+    chunk7B52C2XE_js.__privateAdd(this, _localization);
+    chunk7B52C2XE_js.__privateAdd(this, _setLocalization);
+    chunk7B52C2XE_js.__privateAdd(this, _options);
+    chunk7B52C2XE_js.__privateAdd(this, _setOptions);
+    chunk7B52C2XE_js.__privateAdd(this, _tabs);
+    chunk7B52C2XE_js.__privateAdd(this, _setTabs);
+    chunk7B52C2XE_js.__privateAdd(this, _routerPush);
+    chunk7B52C2XE_js.__privateAdd(this, _setRouterPush);
+    chunk7B52C2XE_js.__privateAdd(this, _preferencesFilter);
+    chunk7B52C2XE_js.__privateAdd(this, _setPreferencesFilter);
+    chunk7B52C2XE_js.__privateAdd(this, _predefinedNovu);
     var _a;
     this.id = generateRandomString(16);
     const [appearance, setAppearance] = solidJs.createSignal(props.appearance);
@@ -4117,32 +4134,32 @@ var NovuUI = class {
     const [tabs, setTabs] = solidJs.createSignal((_a = props.tabs) != null ? _a : []);
     const [preferencesFilter, setPreferencesFilter] = solidJs.createSignal(props.preferencesFilter);
     const [routerPush, setRouterPush] = solidJs.createSignal(props.routerPush);
-    chunkHEC6BX2T_js.__privateSet(this, _mountedElements, mountedElements);
-    chunkHEC6BX2T_js.__privateSet(this, _setMountedElements, setMountedElements);
-    chunkHEC6BX2T_js.__privateSet(this, _appearance, appearance);
-    chunkHEC6BX2T_js.__privateSet(this, _setAppearance, setAppearance);
-    chunkHEC6BX2T_js.__privateSet(this, _localization, localization);
-    chunkHEC6BX2T_js.__privateSet(this, _setLocalization, setLocalization);
-    chunkHEC6BX2T_js.__privateSet(this, _options, options);
-    chunkHEC6BX2T_js.__privateSet(this, _setOptions, setOptions);
-    chunkHEC6BX2T_js.__privateSet(this, _tabs, tabs);
-    chunkHEC6BX2T_js.__privateSet(this, _setTabs, setTabs);
-    chunkHEC6BX2T_js.__privateSet(this, _routerPush, routerPush);
-    chunkHEC6BX2T_js.__privateSet(this, _setRouterPush, setRouterPush);
-    chunkHEC6BX2T_js.__privateSet(this, _predefinedNovu, props.novu);
-    chunkHEC6BX2T_js.__privateSet(this, _preferencesFilter, preferencesFilter);
-    chunkHEC6BX2T_js.__privateSet(this, _setPreferencesFilter, setPreferencesFilter);
-    chunkHEC6BX2T_js.__privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
+    chunk7B52C2XE_js.__privateSet(this, _mountedElements, mountedElements);
+    chunk7B52C2XE_js.__privateSet(this, _setMountedElements, setMountedElements);
+    chunk7B52C2XE_js.__privateSet(this, _appearance, appearance);
+    chunk7B52C2XE_js.__privateSet(this, _setAppearance, setAppearance);
+    chunk7B52C2XE_js.__privateSet(this, _localization, localization);
+    chunk7B52C2XE_js.__privateSet(this, _setLocalization, setLocalization);
+    chunk7B52C2XE_js.__privateSet(this, _options, options);
+    chunk7B52C2XE_js.__privateSet(this, _setOptions, setOptions);
+    chunk7B52C2XE_js.__privateSet(this, _tabs, tabs);
+    chunk7B52C2XE_js.__privateSet(this, _setTabs, setTabs);
+    chunk7B52C2XE_js.__privateSet(this, _routerPush, routerPush);
+    chunk7B52C2XE_js.__privateSet(this, _setRouterPush, setRouterPush);
+    chunk7B52C2XE_js.__privateSet(this, _predefinedNovu, props.novu);
+    chunk7B52C2XE_js.__privateSet(this, _preferencesFilter, preferencesFilter);
+    chunk7B52C2XE_js.__privateSet(this, _setPreferencesFilter, setPreferencesFilter);
+    chunk7B52C2XE_js.__privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
   }
   mountComponent({
     name,
     element,
     props: componentProps
   }) {
-    if (chunkHEC6BX2T_js.__privateGet(this, _mountedElements).call(this).has(element)) {
-      return chunkHEC6BX2T_js.__privateMethod(this, _NovuUI_instances, updateComponentProps_fn).call(this, element, componentProps);
+    if (chunk7B52C2XE_js.__privateGet(this, _mountedElements).call(this).has(element)) {
+      return chunk7B52C2XE_js.__privateMethod(this, _NovuUI_instances, updateComponentProps_fn).call(this, element, componentProps);
     }
-    chunkHEC6BX2T_js.__privateGet(this, _setMountedElements).call(this, (oldNodes) => {
+    chunk7B52C2XE_js.__privateGet(this, _setMountedElements).call(this, (oldNodes) => {
       const newNodes = new Map(oldNodes);
       newNodes.set(element, {
         name,
@@ -4152,35 +4169,35 @@ var NovuUI = class {
     });
   }
   unmountComponent(element) {
-    chunkHEC6BX2T_js.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
+    chunk7B52C2XE_js.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
       const newMountedElements = new Map(oldMountedElements);
       newMountedElements.delete(element);
       return newMountedElements;
     });
   }
   updateAppearance(appearance) {
-    chunkHEC6BX2T_js.__privateGet(this, _setAppearance).call(this, appearance);
+    chunk7B52C2XE_js.__privateGet(this, _setAppearance).call(this, appearance);
   }
   updateLocalization(localization) {
-    chunkHEC6BX2T_js.__privateGet(this, _setLocalization).call(this, localization);
+    chunk7B52C2XE_js.__privateGet(this, _setLocalization).call(this, localization);
   }
   updateOptions(options) {
-    chunkHEC6BX2T_js.__privateGet(this, _setOptions).call(this, options);
+    chunk7B52C2XE_js.__privateGet(this, _setOptions).call(this, options);
   }
   updateTabs(tabs) {
-    chunkHEC6BX2T_js.__privateGet(this, _setTabs).call(this, tabs != null ? tabs : []);
+    chunk7B52C2XE_js.__privateGet(this, _setTabs).call(this, tabs != null ? tabs : []);
   }
   updatePreferencesFilter(preferencesFilter) {
-    chunkHEC6BX2T_js.__privateGet(this, _setPreferencesFilter).call(this, preferencesFilter);
+    chunk7B52C2XE_js.__privateGet(this, _setPreferencesFilter).call(this, preferencesFilter);
   }
   updateRouterPush(routerPush) {
-    chunkHEC6BX2T_js.__privateGet(this, _setRouterPush).call(this, () => routerPush);
+    chunk7B52C2XE_js.__privateGet(this, _setRouterPush).call(this, () => routerPush);
   }
   unmount() {
     var _a, _b;
-    (_a = chunkHEC6BX2T_js.__privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
-    chunkHEC6BX2T_js.__privateSet(this, _dispose, null);
-    (_b = chunkHEC6BX2T_js.__privateGet(this, _rootElement)) == null ? void 0 : _b.remove();
+    (_a = chunk7B52C2XE_js.__privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+    chunk7B52C2XE_js.__privateSet(this, _dispose, null);
+    (_b = chunk7B52C2XE_js.__privateGet(this, _rootElement)) == null ? void 0 : _b.remove();
   }
 };
 _dispose = new WeakMap();
@@ -4202,12 +4219,12 @@ _setPreferencesFilter = new WeakMap();
 _predefinedNovu = new WeakMap();
 _NovuUI_instances = new WeakSet();
 mountComponentRenderer_fn = function() {
-  if (chunkHEC6BX2T_js.__privateGet(this, _dispose) !== null) {
+  if (chunk7B52C2XE_js.__privateGet(this, _dispose) !== null) {
     return;
   }
-  chunkHEC6BX2T_js.__privateSet(this, _rootElement, document.createElement("div"));
-  chunkHEC6BX2T_js.__privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
-  document.body.appendChild(chunkHEC6BX2T_js.__privateGet(this, _rootElement));
+  chunk7B52C2XE_js.__privateSet(this, _rootElement, document.createElement("div"));
+  chunk7B52C2XE_js.__privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
+  document.body.appendChild(chunk7B52C2XE_js.__privateGet(this, _rootElement));
   const dispose = web.render(() => {
     const _self$ = this;
     return web.createComponent(Renderer, {
@@ -4215,45 +4232,45 @@ mountComponentRenderer_fn = function() {
       novuUI: _self$,
       get nodes() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _mountedElements).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _mountedElements).call(_a);
       },
       get options() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _options).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _options).call(_a);
       },
       get appearance() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _appearance).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _appearance).call(_a);
       },
       get localization() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _localization).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _localization).call(_a);
       },
       get tabs() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _tabs).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _tabs).call(_a);
       },
       get preferencesFilter() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _preferencesFilter).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _preferencesFilter).call(_a);
       },
       get routerPush() {
         var _a;
-        return chunkHEC6BX2T_js.__privateGet(_a = _self$, _routerPush).call(_a);
+        return chunk7B52C2XE_js.__privateGet(_a = _self$, _routerPush).call(_a);
       },
       get novu() {
-        return chunkHEC6BX2T_js.__privateGet(_self$, _predefinedNovu);
+        return chunk7B52C2XE_js.__privateGet(_self$, _predefinedNovu);
       }
     });
-  }, chunkHEC6BX2T_js.__privateGet(this, _rootElement));
-  chunkHEC6BX2T_js.__privateSet(this, _dispose, dispose);
+  }, chunk7B52C2XE_js.__privateGet(this, _rootElement));
+  chunk7B52C2XE_js.__privateSet(this, _dispose, dispose);
 };
 updateComponentProps_fn = function(element, props) {
-  chunkHEC6BX2T_js.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
+  chunk7B52C2XE_js.__privateGet(this, _setMountedElements).call(this, (oldMountedElements) => {
     const newMountedElements = new Map(oldMountedElements);
     const mountedElement = newMountedElements.get(element);
     if (mountedElement) {
-      newMountedElements.set(element, chunkHEC6BX2T_js.__spreadProps(chunkHEC6BX2T_js.__spreadValues({}, mountedElement), {
+      newMountedElements.set(element, chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, mountedElement), {
         props
       }));
     }