@novu/js 2.3.0 → 2.4.0

package/dist/esm/ui/index.mjs

@@ -1,4 +1,5 @@
-import { Novu, isSameFilter } from '../chunk-QIWP6QB5.mjs';
+import { Novu, isSameFilter } from '../chunk-VCUP7D3X.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, addEventListener, setAttribute, Dynamic, isServer } from 'solid-js/web';
 import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, createComputed, batch } from 'solid-js';
@@ -247,7 +248,7 @@ function formatToRelativeTime({
   } else if (diffInSeconds < SECONDS.inMonth) {
     return formatter.format(Math.floor(-diffInSeconds / SECONDS.inDay), "day");
   } else {
-    return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(toDate);
+    return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(fromDate);
   }
 }
 var twMerge = extendTailwindMerge({
@@ -1042,7 +1043,7 @@ var ExternalElementRenderer = (props) => {
     return _el$;
   })();
 };
-var _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 fill=none viewBox="0 0 20 20"><path fill=currentColor d="M17.117 4.358l-1.159-1.4A1.21 1.21 0 0015 2.5H5c-.392 0-.733.175-.967.458l-1.15 1.4A1.632 1.632 0 002.5 5.417v10.416c0 .917.75 1.667 1.667 1.667h11.666c.917 0 1.667-.75 1.667-1.667V5.417c0-.4-.142-.775-.383-1.059zM5.2 4.167h9.6l.675.808H4.533l.667-.808zM4.167 15.833V6.667h11.666v9.166H4.167zm7.041-7.5H8.792v2.5H6.667L10 14.167l3.333-3.334h-2.125v-2.5z">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 fill=none viewBox="0 0 20 20"><path fill=currentColor d="M16.25 15V6.875L15 4.375H5L3.75 6.877V15c0 .345.28.625.625.625h11.25c.345 0 .625-.28.625-.625zM5 8.125h10v6.25H5v-6.25zm.772-2.5h8.455l.625 1.25H5.148l.625-1.25zm6.103 3.75h-3.75v1.25h3.75v-1.25z">`);
 var Archive = (props) => {
   return (() => {
     var _el$ = _tmpl$2();
@@ -1178,7 +1179,7 @@ var Unarchive = (props) => {
     return _el$;
   })();
 };
-var _tmpl$19 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 fill=none viewBox="0 0 20 20"><path fill=currentColor d="M18.334 5.817v7.516c0 .917-.75 1.667-1.667 1.667H5l-3.333 3.333v-15c0-.916.75-1.666 1.667-1.666h8.416c-.05.266-.083.55-.083.833 0 .283.033.567.083.833H3.334v10h13.333v-6.75a4.127 4.127 0 001.667-.766zm-5-3.317c0 1.383 1.116 2.5 2.5 2.5 1.383 0 2.5-1.117 2.5-2.5S17.217 0 15.834 0a2.497 2.497 0 00-2.5 2.5z">`);
+var _tmpl$19 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 fill=none viewBox="0 0 20 20"><path fill=currentColor d="M10 15v1.25H4.996a.625.625 0 01-.621-.62V4.37c0-.342.28-.62.624-.62H12.5l3.125 3.125v4.375h-1.25V7.5h-2.5V5h-6.25v10H10zm1.54-.335l2.21 2.21 3.094-3.093-.884-.884-2.21 2.21-1.326-1.326-.884.883z">`);
 var Unread = (props) => {
   return (() => {
     var _el$ = _tmpl$19();
@@ -1186,17 +1187,13 @@ var Unread = (props) => {
     return _el$;
   })();
 };
-var _tmpl$20 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=16 height=16 fill=none viewBox="0 0 16 16"><path fill=currentColor d="M8 11.333c.733 0 1.333-.6 1.333-1.333S8.733 8.667 8 8.667s-1.333.6-1.333 1.333.6 1.333 1.333 1.333zm4-6h-.667V4a3.335 3.335 0 00-6.666 0v1.333H4c-.733 0-1.333.6-1.333 1.334v6.666c0 .734.6 1.334 1.333 1.334h8c.733 0 1.333-.6 1.333-1.334V6.667c0-.734-.6-1.334-1.333-1.334zM5.933 4c0-1.14.927-2.067 2.067-2.067 1.14 0 2.067.927 2.067 2.067v1.333H5.933V4zM12 13.333H4V6.667h8v6.666z">`);
-var Lock = () => {
-  return _tmpl$20();
-};
 
 // src/ui/components/elements/Bell/DefaultBellContainer.tsx
-var _tmpl$21 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
 var BellContainer = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$21();
+    var _el$ = _tmpl$20();
     insert(_el$, createComponent(BellIcon, {
       get ["class"]() {
         return style("bellIcon");
@@ -1207,7 +1204,7 @@ var BellContainer = (props) => {
         return props.unreadCount > 0;
       },
       get children() {
-        var _el$2 = _tmpl$21();
+        var _el$2 = _tmpl$20();
         effect(() => className(_el$2, style("bellDot", "nt-absolute nt-top-2 nt-right-2 nt-block nt-size-2 nt-transform nt-translate-x-1/2 -nt-translate-y-1/2 nt-bg-primary nt-rounded-full nt-border nt-border-background")));
         return _el$2;
       }
@@ -1240,7 +1237,7 @@ var Bell = (props) => {
     }
   });
 };
-var _tmpl$22 = /* @__PURE__ */ template(`<div class="nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-pt-9 nt-pb-3 nt-text-foreground-alpha-200"><span class=nt-text-xs>Powered by Novu`);
+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-pt-9 nt-pb-3 nt-text-foreground-alpha-200"><span class=nt-text-xs>Powered by Novu`);
 var Footer = () => {
   const {
     hideBranding
@@ -1250,13 +1247,13 @@ var Footer = () => {
       return !hideBranding();
     },
     get children() {
-      var _el$ = _tmpl$22(), _el$2 = _el$.firstChild;
+      var _el$ = _tmpl$21(), _el$2 = _el$.firstChild;
       insert(_el$, createComponent(Novu2, {}), _el$2);
       return _el$;
     }
   });
 };
-var _tmpl$23 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<button>`);
 var buttonVariants = cva("nt-inline-flex nt-gap-4 nt-items-center nt-justify-center nt-whitespace-nowrap nt-rounded-lg nt-text-sm nt-font-medium nt-ring-offset-background nt-transition-colors focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-ring-primary nt-focus-visible:nt-ring-offset-2 disabled:nt-pointer-events-none disabled:nt-opacity-50", {
   variants: {
     variant: {
@@ -1283,7 +1280,7 @@ var Button = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$23();
+    var _el$ = _tmpl$22();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -1301,7 +1298,7 @@ var Button = (props) => {
     return _el$;
   })();
 };
-var _tmpl$24 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<button>`);
 var PopoverClose = (props) => {
   const {
     onClose
@@ -1322,7 +1319,7 @@ var PopoverClose = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$24();
+    var _el$ = _tmpl$23();
     _el$.$$click = handleClick;
     spread(_el$, rest, false, false);
     return _el$;
@@ -1515,7 +1512,7 @@ var PopoverContent = (props) => {
     }
   });
 };
-var _tmpl$25 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<button>`);
 var PopoverTrigger = (props) => {
   const {
     setReference,
@@ -1539,7 +1536,7 @@ var PopoverTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$25();
+    var _el$ = _tmpl$24();
     _el$.$$click = handleClick;
     use(setReference, _el$);
     spread(_el$, mergeProps({
@@ -1639,14 +1636,14 @@ var Dropdown = {
    */
   Item: DropdownItem
 };
-var _tmpl$26 = /* @__PURE__ */ template(`<div role=tablist>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<div class="nt-border-t nt-border-secondary nt-mt-[-0.25rem] nt-relative nt-z-[-1]">`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div role=tablist>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div class="nt-border-t nt-border-secondary nt-mt-[-0.25rem] nt-relative nt-z-[-1]">`);
 var tabsListVariants = () => "nt-flex nt-gap-6 nt-px-6 nt-py-1 nt-overflow-hidden";
 var TabsList = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey", "ref", "children"]);
   const style = useStyle();
   return [(() => {
-    var _el$ = _tmpl$26();
+    var _el$ = _tmpl$25();
     var _ref$ = local.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
     spread(_el$, mergeProps({
@@ -1656,7 +1653,7 @@ var TabsList = (props) => {
     }, rest), false, true);
     insert(_el$, () => local.children);
     return _el$;
-  })(), _tmpl$27()];
+  })(), _tmpl$26()];
 };
 var useKeyboardNavigation = ({
   activeTab,
@@ -1707,7 +1704,7 @@ var useKeyboardNavigation = ({
 };
 
 // src/ui/components/primitives/Tabs/TabsRoot.tsx
-var _tmpl$28 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<div>`);
 var TabsContext = createContext(void 0);
 var useTabsContext = () => {
   const context = useContext(TabsContext);
@@ -1746,7 +1743,7 @@ var TabsRoot = (props) => {
       setVisibleTabs
     },
     get children() {
-      var _el$ = _tmpl$28();
+      var _el$ = _tmpl$27();
       use(setTabsContainer, _el$);
       spread(_el$, mergeProps({
         get ["class"]() {
@@ -1760,7 +1757,7 @@ var TabsRoot = (props) => {
 };
 
 // src/ui/components/primitives/Tabs/TabsContent.tsx
-var _tmpl$29 = /* @__PURE__ */ template(`<div role=tabpanel>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div role=tabpanel>`);
 var TabsContent = (props) => {
   const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
   const style = useStyle();
@@ -1772,7 +1769,7 @@ var TabsContent = (props) => {
       return activeTab() === local.value;
     },
     get children() {
-      var _el$ = _tmpl$29();
+      var _el$ = _tmpl$28();
       spread(_el$, mergeProps({
         get ["class"]() {
           return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
@@ -1859,7 +1856,7 @@ var inboxFilterLocalizationKeys = {
   unread: "inbox.filters.labels.unread",
   archived: "inbox.filters.labels.archived"
 };
-var _tmpl$30 = /* @__PURE__ */ template(`<span><span></span><span>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<span><span></span><span>`);
 var _tmpl$210 = /* @__PURE__ */ template(`<span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
@@ -1904,7 +1901,7 @@ var StatusItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$30(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        var _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         insert(_el$2, () => props.icon());
         insert(_el$3, () => t(props.localizationKey));
         effect((_p$) => {
@@ -1937,7 +1934,7 @@ var StatusItem = (props) => {
 };
 
 // src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
-var _tmpl$31 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<span>`);
 var StatusDropdown = () => {
   const style = useStyle();
   const {
@@ -1962,7 +1959,7 @@ var StatusDropdown = () => {
         }, triggerProps, {
           get children() {
             return [(() => {
-              var _el$ = _tmpl$31();
+              var _el$ = _tmpl$30();
               insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               effect((_p$) => {
                 var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-xl nt-font-semibold");
@@ -1975,7 +1972,7 @@ var StatusDropdown = () => {
               });
               return _el$;
             })(), (() => {
-              var _el$2 = _tmpl$31();
+              var _el$2 = _tmpl$30();
               insert(_el$2, createComponent(ArrowDropDown, {}));
               effect(() => className(_el$2, style("inboxStatus__dropdownItemRight__icon", "nt-text-foreground-alpha-600")));
               return _el$2;
@@ -2103,7 +2100,7 @@ var useArchiveAllRead = (props) => {
 };
 
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
-var _tmpl$32 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$31 = /* @__PURE__ */ template(`<span>`);
 var MoreActionsOptions = () => {
   const {
     filter
@@ -2151,12 +2148,12 @@ var ActionsItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$32();
+        var _el$ = _tmpl$31();
         insert(_el$, () => props.icon());
         effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-text-foreground-alpha-600")));
         return _el$;
       })(), (() => {
-        var _el$2 = _tmpl$32();
+        var _el$2 = _tmpl$31();
         insert(_el$2, () => t(props.localizationKey));
         effect((_p$) => {
           var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel");
@@ -2215,11 +2212,11 @@ var MoreActionsDropdown = () => {
 };
 
 // src/ui/components/elements/Header/ActionsContainer.tsx
-var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$33();
+    var _el$ = _tmpl$32();
     insert(_el$, createComponent(MoreActionsDropdown, {}), null);
     insert(_el$, createComponent(Show, {
       get when() {
@@ -2243,11 +2240,11 @@ var ActionsContainer = (props) => {
 };
 
 // src/ui/components/elements/Header/Header.tsx
-var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
 var Header = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$34();
+    var _el$ = _tmpl$33();
     insert(_el$, createComponent(StatusDropdown, {}), null);
     insert(_el$, createComponent(ActionsContainer, {
       get showPreferences() {
@@ -2258,7 +2255,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$35 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
 var _tmpl$211 = /* @__PURE__ */ template(`<button>`);
 var PreferencesHeader = (props) => {
   const style = useStyle();
@@ -2266,7 +2263,7 @@ var PreferencesHeader = (props) => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$35(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$34(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return props.navigateToNotifications;
@@ -2293,15 +2290,23 @@ var PreferencesHeader = (props) => {
   })();
 };
 delegateEvents(["click"]);
-var _tmpl$36 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
 var Root = (props) => {
   const [_, rest] = splitProps(props, ["class"]);
   const {
     id
   } = useAppearance();
   const style = useStyle();
-  return (() => {
-    var _el$ = _tmpl$36();
+  const {
+    hideBranding
+  } = useInboxContext();
+  return [createComponent(Show, {
+    get when() {
+      return !hideBranding();
+    },
+    children: new Comment(" Powered by Novu - https://novu.co ")
+  }), (() => {
+    var _el$ = _tmpl$35();
     spread(_el$, mergeProps({
       get id() {
         return `novu-root-${id()}`;
@@ -2311,202 +2316,26 @@ var Root = (props) => {
       }
     }, rest), false, false);
     return _el$;
-  })();
+  })()];
 };
-var TooltipContext = createContext(void 0);
-function TooltipRoot(props) {
-  const [reference, setReference] = createSignal(null);
-  const [floating, setFloating] = createSignal(null);
-  const position = useFloating(reference, floating, {
-    placement: props.placement || "top",
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(10), flip({
-      fallbackPlacements: props.fallbackPlacements || ["bottom"]
-    }), shift()]
-  });
-  const [isOpen, setIsOpen] = useUncontrolledState({
-    value: props.open,
-    fallbackValue: false
-  });
-  return createComponent(TooltipContext.Provider, {
-    value: {
-      reference,
-      setReference,
-      floating,
-      setFloating,
-      open: isOpen,
-      setOpen: setIsOpen,
-      floatingStyles: () => {
-        var _a, _b;
-        return {
-          position: position.strategy,
-          top: `${(_a = position.y) != null ? _a : 0}px`,
-          left: `${(_b = position.x) != null ? _b : 0}px`
-        };
-      }
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function useTooltip() {
-  const context = useContext(TooltipContext);
-  if (!context) {
-    throw new Error("useTooltip must be used within Tooltip.Root component");
-  }
-  return context;
-}
-
-// src/ui/components/primitives/Tooltip/TooltipContent.tsx
-var _tmpl$37 = /* @__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 {
-    open,
-    setFloating,
-    floating,
-    floatingStyles
-  } = useTooltip();
-  const {
-    setActive,
-    removeActive
-  } = useFocusManager();
-  const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
-  const style = useStyle();
-  onMount(() => {
-    const floatingEl = floating();
-    setActive(floatingEl);
-    onCleanup(() => {
-      removeActive(floatingEl);
-    });
-  });
-  return (() => {
-    var _el$ = _tmpl$37();
-    use(setFloating, _el$);
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
-      },
-      get style() {
-        return __spreadProps(__spreadValues({}, floatingStyles()), {
-          "z-index": 99999
-        });
-      },
-      get ["data-open"]() {
-        return open();
-      }
-    }, rest), false, false);
-    return _el$;
-  })();
-};
-var TooltipContent = (props) => {
-  const {
-    open
-  } = useTooltip();
-  return createComponent(Show, {
-    get when() {
-      return open();
-    },
-    get children() {
-      return createComponent(Portal, {
-        get children() {
-          return createComponent(Root, {
-            get children() {
-              return createComponent(TooltipContentBody, props);
-            }
-          });
-        }
-      });
-    }
-  });
-};
-var _tmpl$38 = /* @__PURE__ */ template(`<button>`);
-var TooltipTrigger = (props) => {
-  const {
-    setReference,
-    setOpen
-  } = useTooltip();
-  const style = useStyle();
-  const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick"]);
-  if (local.asChild) {
-    return createComponent(Dynamic, mergeProps({
-      get component() {
-        return local.asChild;
-      },
-      ref: setReference,
-      onMouseEnter: () => {
-        setOpen(true);
-      },
-      onMouseLeave: () => {
-        setOpen(false);
-      }
-    }, rest));
-  }
-  return (() => {
-    var _el$ = _tmpl$38();
-    _el$.addEventListener("mouseleave", () => {
-      setOpen(false);
-    });
-    _el$.addEventListener("mouseenter", () => {
-      setOpen(true);
-    });
-    use(setReference, _el$);
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return style(local.appearanceKey || "tooltipTrigger");
-      }
-    }, rest), false, true);
-    insert(_el$, () => props.children);
-    return _el$;
-  })();
-};
-
-// src/ui/components/primitives/Tooltip/index.ts
-var Tooltip = {
-  Root: TooltipRoot,
-  /**
-   * Tooltip.Trigger renders a `button` and has no default styling.
-   */
-  Trigger: TooltipTrigger,
-  /**
-   * Tooltip.Content renders a `div` and has popover specific styling.
-   */
-  Content: TooltipContent
-};
-var _tmpl$39 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
 var Switch = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$36(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", (e) => {
       props.onChange(e.target.checked);
     });
     effect((_p$) => {
-      var _v$ = style("channelSwitch", `nt-relative
-    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-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-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;
+      var _v$ = style("channelSwitch", `nt-relative nt-inline-flex nt-cursor-pointer nt-items-center`), _v$2 = 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-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-background nt-transition-all nt-duration-200 after:nt-duration-200`), _v$3 = props.checked;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
-      _v$3 !== _p$.a && (_el$2.disabled = _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
-      _v$5 !== _p$.i && setAttribute(_el$3, "data-disabled", _p$.i = _v$5);
-      _v$6 !== _p$.n && setAttribute(_el$3, "data-checked", _p$.n = _v$6);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      _v$3 !== _p$.a && setAttribute(_el$3, "data-checked", _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0
+      a: void 0
     });
     effect(() => _el$2.checked = props.checked);
     return _el$;
@@ -2514,13 +2343,10 @@ var Switch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/ChannelRow.tsx
-var _tmpl$40 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
   const updatePreference = (enabled) => __async(void 0, null, function* () {
-    if (props.isCritical) {
-      return;
-    }
     props.onChange({
       channel: props.channel,
       enabled,
@@ -2531,7 +2357,7 @@ var ChannelRow = (props) => {
     updatePreference(checked);
   };
   return (() => {
-    var _el$ = _tmpl$40(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
+    var _el$ = _tmpl$37(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
     insert(_el$3, createComponent(ChannelIcon, {
       get channel() {
         return props.channel;
@@ -2542,25 +2368,20 @@ var ChannelRow = (props) => {
       get checked() {
         return props.enabled;
       },
-      onChange: (checked) => onChange(checked),
-      get disabled() {
-        return props.isCritical;
-      }
+      onChange: (checked) => onChange(checked)
     }));
     effect((_p$) => {
-      var _v$ = style("channelContainer", "nt-flex nt-justify-between nt-items-center nt-h-11 nt-gap-2 data-[disabled=true]:nt-text-foreground-alpha-600"), _v$2 = props.isCritical, _v$3 = style("channelLabelContainer", "nt-flex nt-items-center nt-gap-2"), _v$4 = style("channelLabel", "nt-text-base nt-font-semibold"), _v$5 = style("channelSwitchContainer", "nt-flex nt-items-center");
+      var _v$ = style("channelContainer", "nt-flex nt-justify-between nt-items-center nt-h-11 nt-gap-2 data-[disabled=true]:nt-text-foreground-alpha-600"), _v$2 = style("channelLabelContainer", "nt-flex nt-items-center nt-gap-2"), _v$3 = style("channelLabel", "nt-text-base nt-font-semibold"), _v$4 = style("channelSwitchContainer", "nt-flex nt-items-center");
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
-      _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0,
-      i: void 0
+      o: void 0
     });
     return _el$;
   })();
@@ -2597,11 +2418,11 @@ var getLabel = (channel) => {
       return "";
   }
 };
-var _tmpl$41 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$41();
+    var _el$ = _tmpl$38();
     effect(() => className(_el$, style(props.appearanceKey, cn("nt-w-full nt-h-3 nt-rounded nt-bg-foreground-alpha-100", props.class))));
     return _el$;
   })();
@@ -2609,14 +2430,14 @@ var SkeletonText = (props) => {
 var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$2 = _tmpl$41();
+    var _el$2 = _tmpl$38();
     effect(() => className(_el$2, style(props.appearanceKey, cn("nt-size-8 nt-rounded-lg nt-bg-foreground-alpha-100", props.class))));
     return _el$2;
   })();
 };
 
 // src/ui/components/elements/Preferences/LoadingScreen.tsx
-var _tmpl$42 = /* @__PURE__ */ template(`<div><div class="nt-flex nt-flex-col nt-self-stretch nt-gap-1 nt-flex-1"></div><div>`);
+var _tmpl$39 = /* @__PURE__ */ template(`<div><div class="nt-flex nt-flex-col nt-self-stretch nt-gap-1 nt-flex-1"></div><div>`);
 var LoadingScreen = () => {
   return createComponent(For, {
     get each() {
@@ -2630,7 +2451,7 @@ var LoadingScreen = () => {
 var LoadingSkeleton = () => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$42(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     insert(_el$2, createComponent(SkeletonText, {
       appearanceKey: "skeletonText",
       "class": "nt-w-1/3"
@@ -2646,10 +2467,9 @@ var LoadingSkeleton = () => {
 };
 
 // src/ui/components/elements/Preferences/Preferences.tsx
-var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<span data-localization=preferences.workflow.disabled.notice>`);
-var _tmpl$44 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
 var Preferences = () => {
   var _a;
   const style = useStyle();
@@ -2696,7 +2516,7 @@ var Preferences = () => {
     });
   };
   return (() => {
-    var _el$ = _tmpl$43();
+    var _el$ = _tmpl$40();
     insert(_el$, createComponent(Show, {
       get when() {
         return loading();
@@ -2744,10 +2564,6 @@ var Preferences = () => {
               },
               get onChange() {
                 return optimisticUpdate(preference());
-              },
-              get isCritical() {
-                var _a2;
-                return (_a2 = preference().workflow) == null ? void 0 : _a2.critical;
               }
             });
           }
@@ -2778,7 +2594,7 @@ var ChannelsLabel = (props) => {
     return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
   };
   return (() => {
-    var _el$3 = _tmpl$43();
+    var _el$3 = _tmpl$40();
     insert(_el$3, channelNames);
     effect(() => className(_el$3, style("channelDescription", "nt-text-sm nt-text-foreground-alpha-600 nt-text-start")));
     return _el$3;
@@ -2796,37 +2612,9 @@ var PreferencesRow = (props) => {
       return channels().length > 0;
     },
     get children() {
-      var _el$4 = _tmpl$44(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling;
+      var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling;
       _el$5.$$click = () => setIsOpen((prev) => !prev);
-      insert(_el$7, createComponent(Show, {
-        get when() {
-          return props.isCritical;
-        },
-        get children() {
-          return createComponent(Tooltip.Root, {
-            get children() {
-              return [createComponent(Tooltip.Trigger, {
-                asChild: (childProps) => (() => {
-                  var _el$11 = _tmpl$212();
-                  spread(_el$11, mergeProps({
-                    get ["class"]() {
-                      return style("workflowLabelDisabled__icon", "nt-text-foreground-alpha-600");
-                    }
-                  }, childProps), false, true);
-                  insert(_el$11, createComponent(Lock, {}));
-                  return _el$11;
-                })()
-              }), createComponent(Tooltip.Content, {
-                "data-localization": "preferences.workflow.disabled.tooltip",
-                get children() {
-                  return t("preferences.workflow.disabled.tooltip");
-                }
-              })];
-            }
-          });
-        }
-      }), null);
-      insert(_el$7, () => t(props.localizationKey), null);
+      insert(_el$7, () => t(props.localizationKey));
       insert(_el$6, createComponent(ChannelsLabel, {
         get channels() {
           return props.channels;
@@ -2860,18 +2648,7 @@ var PreferencesRow = (props) => {
                   return style("channelsContainerCollapsible", "nt-grid nt-self-stretch");
                 },
                 get children() {
-                  var _el$9 = _tmpl$43();
-                  insert(_el$9, createComponent(Show, {
-                    get when() {
-                      return props.isCritical;
-                    },
-                    get children() {
-                      var _el$10 = _tmpl$310();
-                      insert(_el$10, () => t("preferences.workflow.disabled.notice"));
-                      effect(() => className(_el$10, style("workflowContainerDisabledNotice", "nt-text-sm nt-text-foreground-alpha-600 nt-text-start")));
-                      return _el$10;
-                    }
-                  }), null);
+                  var _el$9 = _tmpl$40();
                   insert(_el$9, createComponent(For, {
                     get each() {
                       return channels();
@@ -2886,12 +2663,9 @@ var PreferencesRow = (props) => {
                       },
                       get onChange() {
                         return props.onChange;
-                      },
-                      get isCritical() {
-                        return props.isCritical;
                       }
                     })
-                  }), null);
+                  }));
                   effect(() => className(_el$9, style("channelsContainer", "nt-overflow-hidden nt-flex-col nt-gap-1")));
                   return _el$9;
                 }
@@ -2901,21 +2675,16 @@ var PreferencesRow = (props) => {
         }
       }), null);
       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-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();
+        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-alpha-50 nt-rounded-lg data-[disabled=true]:nt-bg-neutral-alpha-50`), _v$2 = isOpen(), _v$3 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center"), _v$4 = isOpen(), _v$5 = style("workflowLabel", "nt-text-base nt-font-semibold nt-text-start nt-flex nt-items-center nt-gap-1"), _v$6 = props.localizationKey, _v$7 = isOpen(), _v$8 = 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$9 = isOpen();
         _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$4, "data-disabled", _p$.t = _v$2);
-        _v$3 !== _p$.a && setAttribute(_el$4, "data-open", _p$.a = _v$3);
-        _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
-        _v$5 !== _p$.i && setAttribute(_el$5, "data-disabled", _p$.i = _v$5);
-        _v$6 !== _p$.n && setAttribute(_el$5, "data-open", _p$.n = _v$6);
-        _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
-        _v$8 !== _p$.h && setAttribute(_el$7, "data-disabled", _p$.h = _v$8);
-        _v$9 !== _p$.r && setAttribute(_el$7, "data-localization", _p$.r = _v$9);
-        _v$10 !== _p$.d && setAttribute(_el$7, "data-open", _p$.d = _v$10);
-        _v$11 !== _p$.l && className(_el$8, _p$.l = _v$11);
-        _v$12 !== _p$.u && setAttribute(_el$8, "data-disabled", _p$.u = _v$12);
-        _v$13 !== _p$.c && setAttribute(_el$8, "data-open", _p$.c = _v$13);
+        _v$2 !== _p$.t && setAttribute(_el$4, "data-open", _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+        _v$4 !== _p$.o && setAttribute(_el$5, "data-open", _p$.o = _v$4);
+        _v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
+        _v$6 !== _p$.n && setAttribute(_el$7, "data-localization", _p$.n = _v$6);
+        _v$7 !== _p$.s && setAttribute(_el$7, "data-open", _p$.s = _v$7);
+        _v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
+        _v$9 !== _p$.r && setAttribute(_el$8, "data-open", _p$.r = _v$9);
         return _p$;
       }, {
         e: void 0,
@@ -2926,53 +2695,19 @@ var PreferencesRow = (props) => {
         n: void 0,
         s: void 0,
         h: void 0,
-        r: void 0,
-        d: void 0,
-        l: void 0,
-        u: void 0,
-        c: void 0
+        r: void 0
       });
       return _el$4;
     }
   });
 };
 delegateEvents(["click"]);
-var _tmpl$45 = /* @__PURE__ */ template(`<strong>`);
+var _tmpl$41 = /* @__PURE__ */ template(`<strong>`);
 var _tmpl$213 = /* @__PURE__ */ template(`<p>`);
-var parseMarkdownIntoTokens = (text) => {
-  const tokens = [];
-  let buffer = "";
-  let inBold = false;
-  for (let i = 0; i < text.length; i += 1) {
-    if (text[i] === "\\" && text[i + 1] === "*") {
-      buffer += "*";
-      i += 1;
-    } else if (text[i] === "*" && text[i + 1] === "*") {
-      if (buffer) {
-        tokens.push({
-          type: inBold ? "bold" : "text",
-          content: buffer
-        });
-        buffer = "";
-      }
-      inBold = !inBold;
-      i += 1;
-    } else {
-      buffer += text[i];
-    }
-  }
-  if (buffer) {
-    tokens.push({
-      type: inBold ? "bold" : "text",
-      content: buffer
-    });
-  }
-  return tokens;
-};
 var Bold = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$45();
+    var _el$ = _tmpl$41();
     insert(_el$, () => props.children);
     effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
     return _el$;
@@ -3016,9 +2751,170 @@ var Markdown = (props) => {
   })();
 };
 var Markdown_default = Markdown;
+var TooltipContext = createContext(void 0);
+function TooltipRoot(props) {
+  const [reference, setReference] = createSignal(null);
+  const [floating, setFloating] = createSignal(null);
+  const position = useFloating(reference, floating, {
+    placement: props.placement || "top",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(10), flip({
+      fallbackPlacements: props.fallbackPlacements || ["bottom"]
+    }), shift()]
+  });
+  const [isOpen, setIsOpen] = useUncontrolledState({
+    value: props.open,
+    fallbackValue: false
+  });
+  return createComponent(TooltipContext.Provider, {
+    value: {
+      reference,
+      setReference,
+      floating,
+      setFloating,
+      open: isOpen,
+      setOpen: setIsOpen,
+      floatingStyles: () => {
+        var _a, _b;
+        return {
+          position: position.strategy,
+          top: `${(_a = position.y) != null ? _a : 0}px`,
+          left: `${(_b = position.x) != null ? _b : 0}px`
+        };
+      }
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useTooltip() {
+  const context = useContext(TooltipContext);
+  if (!context) {
+    throw new Error("useTooltip must be used within Tooltip.Root component");
+  }
+  return context;
+}
+
+// src/ui/components/primitives/Tooltip/TooltipContent.tsx
+var _tmpl$42 = /* @__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 {
+    open,
+    setFloating,
+    floating,
+    floatingStyles
+  } = useTooltip();
+  const {
+    setActive,
+    removeActive
+  } = useFocusManager();
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
+  const style = useStyle();
+  onMount(() => {
+    const floatingEl = floating();
+    setActive(floatingEl);
+    onCleanup(() => {
+      removeActive(floatingEl);
+    });
+  });
+  return (() => {
+    var _el$ = _tmpl$42();
+    use(setFloating, _el$);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
+      },
+      get style() {
+        return __spreadProps(__spreadValues({}, floatingStyles()), {
+          "z-index": 99999
+        });
+      },
+      get ["data-open"]() {
+        return open();
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
+};
+var TooltipContent = (props) => {
+  const {
+    open
+  } = useTooltip();
+  return createComponent(Show, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          return createComponent(Root, {
+            get children() {
+              return createComponent(TooltipContentBody, props);
+            }
+          });
+        }
+      });
+    }
+  });
+};
+var _tmpl$43 = /* @__PURE__ */ template(`<button>`);
+var TooltipTrigger = (props) => {
+  const {
+    setReference,
+    setOpen
+  } = useTooltip();
+  const style = useStyle();
+  const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick"]);
+  if (local.asChild) {
+    return createComponent(Dynamic, mergeProps({
+      get component() {
+        return local.asChild;
+      },
+      ref: setReference,
+      onMouseEnter: () => {
+        setOpen(true);
+      },
+      onMouseLeave: () => {
+        setOpen(false);
+      }
+    }, rest));
+  }
+  return (() => {
+    var _el$ = _tmpl$43();
+    _el$.addEventListener("mouseleave", () => {
+      setOpen(false);
+    });
+    _el$.addEventListener("mouseenter", () => {
+      setOpen(true);
+    });
+    use(setReference, _el$);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return style(local.appearanceKey || "tooltipTrigger");
+      }
+    }, rest), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+};
+
+// src/ui/components/primitives/Tooltip/index.ts
+var Tooltip = {
+  Root: TooltipRoot,
+  /**
+   * Tooltip.Trigger renders a `button` and has no default styling.
+   */
+  Trigger: TooltipTrigger,
+  /**
+   * Tooltip.Content renders a `div` and has popover specific styling.
+   */
+  Content: TooltipContent
+};
 
 // src/ui/components/Notification/DefaultNotification.tsx
-var _tmpl$46 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$44 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$214 = /* @__PURE__ */ template(`<img>`);
 var _tmpl$311 = /* @__PURE__ */ template(`<a><div><div class="nt-relative nt-shrink-0 nt-float-right nt-ml-1 nt-pr-1.5"><p></p><div></div></div><div>`);
 var DefaultNotification = (props) => {
@@ -3076,7 +2972,7 @@ var DefaultNotification = (props) => {
         return !props.notification.isRead;
       },
       get children() {
-        var _el$2 = _tmpl$46();
+        var _el$2 = _tmpl$44();
         effect(() => 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;
       }
@@ -3122,7 +3018,7 @@ var DefaultNotification = (props) => {
                       e.stopPropagation();
                       props.notification.read();
                     },
-                    "class": "hover:nt-bg-neutral-alpha-50",
+                    "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
                     get children() {
                       return createComponent(ReadAll, {});
                     }
@@ -3149,7 +3045,7 @@ var DefaultNotification = (props) => {
                       e.stopPropagation();
                       props.notification.unread();
                     },
-                    "class": "hover:nt-bg-neutral-alpha-50",
+                    "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
                     get children() {
                       return createComponent(Unread, {});
                     }
@@ -3183,7 +3079,7 @@ var DefaultNotification = (props) => {
                   e.stopPropagation();
                   props.notification.archive();
                 },
-                "class": "hover:nt-bg-neutral-alpha-50",
+                "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
                 get children() {
                   return createComponent(Archive, {});
                 }
@@ -3210,7 +3106,7 @@ var DefaultNotification = (props) => {
                   e.stopPropagation();
                   props.notification.unarchive();
                 },
-                "class": "hover:nt-bg-neutral-alpha-50",
+                "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
                 get children() {
                   return createComponent(Unarchive, {});
                 }
@@ -3280,10 +3176,7 @@ var DefaultNotification = (props) => {
       var _a;
       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-alpha-50 nt-py-0.5 nt-rounded`), _v$7 = style("notificationCustomActions", "nt-flex nt-flex-wrap nt-gap-4 nt-mt-4");
+      })), _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-alpha-50 nt-rounded-lg nt-backdrop-blur-md nt-p-0.5`), _v$7 = style("notificationCustomActions", "nt-flex nt-flex-wrap nt-gap-4 nt-mt-4");
       _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
       _v$4 !== _p$.t && className(_el$4, _p$.t = _v$4);
       _v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
@@ -3331,10 +3224,10 @@ var Notification = (props) => {
     }
   });
 };
-var _tmpl$47 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=48 height=48 viewBox="0 0 48 48"fill=none><path fill=currentColor d="M35.2 21.62L32.38 18.8L39.5 11.7L42.32 14.52C42.1 14.58 35.2 21.62 35.2 21.62ZM26 6H22V16H26V6ZM12.8 21.62L15.62 18.8L8.52 11.68L5.68 14.52C5.9 14.58 12.8 21.62 12.8 21.62ZM40 28H33.16C31.62 31.52 28.08 34 24 34C19.92 34 16.38 31.52 14.84 28H8V38H40V28ZM40 24C42.2 24 44 25.8 44 28V38C44 40.2 42.2 42 40 42H8C5.8 42 4 40.2 4 38V28C4 25.8 5.8 24 8 24H18C18 27.32 20.68 30 24 30C27.32 30 30 27.32 30 24H40Z">`);
+var _tmpl$45 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=48 height=48 viewBox="0 0 48 48"fill=none><path fill=currentColor d="M35.2 21.62L32.38 18.8L39.5 11.7L42.32 14.52C42.1 14.58 35.2 21.62 35.2 21.62ZM26 6H22V16H26V6ZM12.8 21.62L15.62 18.8L8.52 11.68L5.68 14.52C5.9 14.58 12.8 21.62 12.8 21.62ZM40 28H33.16C31.62 31.52 28.08 34 24 34C19.92 34 16.38 31.52 14.84 28H8V38H40V28ZM40 24C42.2 24 44 25.8 44 28V38C44 40.2 42.2 42 40 42H8C5.8 42 4 40.2 4 38V28C4 25.8 5.8 24 8 24H18C18 27.32 20.68 30 24 30C27.32 30 30 27.32 30 24H40Z">`);
 function EmptyIcon(props) {
   return (() => {
-    var _el$ = _tmpl$47();
+    var _el$ = _tmpl$45();
     spread(_el$, props, true, true);
     return _el$;
   })();
@@ -3365,10 +3258,10 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$48 = /* @__PURE__ */ template(`<div class="nt-flex nt-gap-2 nt-px-6 nt-py-4 nt-w-full"><div class="nt-flex nt-flex-col nt-self-stretch nt-gap-3 nt-flex-1"><div class="nt-flex nt-gap-1"></div><div class="nt-flex nt-gap-1">`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div class="nt-flex nt-gap-2 nt-px-6 nt-py-4 nt-w-full"><div class="nt-flex nt-flex-col nt-self-stretch nt-gap-3 nt-flex-1"><div class="nt-flex nt-gap-1"></div><div class="nt-flex nt-gap-1">`);
 var NotificationSkeleton = () => {
   return (() => {
-    var _el$ = _tmpl$48(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    var _el$ = _tmpl$46(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
     insert(_el$, createComponent(SkeletonAvatar, {
       appearanceKey: "skeletonAvatar"
     }), _el$2);
@@ -3405,7 +3298,7 @@ var NotificationListSkeleton = (props) => {
 };
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$49 = /* @__PURE__ */ template(`<div><p data-localization=notifications.emptyNotice>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<div><p data-localization=notifications.emptyNotice>`);
 var _tmpl$215 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$312 = /* @__PURE__ */ template(`<div><div>`);
 var EmptyNotificationList = () => {
@@ -3414,7 +3307,7 @@ var EmptyNotificationList = () => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$49(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$47(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(EmptyIcon, {
       get ["class"]() {
         return style("notificationListEmptyNoticeIcon");
@@ -3561,13 +3454,13 @@ var NotificationList = (props) => {
     return _el$3;
   })();
 };
-var _tmpl$50 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$48 = /* @__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$48();
     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$;
@@ -3592,7 +3485,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$50();
+        var _el$2 = _tmpl$48();
         insert(_el$2, () => props.label);
         effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -3627,7 +3520,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$50();
+        var _el$3 = _tmpl$48();
         insert(_el$3, () => props.label);
         effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -3827,7 +3720,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$49 = /* @__PURE__ */ template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -3849,7 +3742,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$51();
+    var _el$ = _tmpl$49();
     insert(_el$, createComponent(Switch$1, {
       get children() {
         return [createComponent(Match, {
@@ -4096,7 +3989,7 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "2.3.0";
+var version = "2.4.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 {