@novu/js 2.6.6 → 3.0.0-canary.0

package/dist/esm/ui/index.mjs

@@ -1,31 +1,16 @@
-import { Novu, isSameFilter } from '../chunk-JJC36NOH.mjs';
+import { Novu, isSameFilter } from '../chunk-B2OUPMZV.mjs';
 import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.mjs';
 import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
-import { delegateEvents, createComponent, mergeProps, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, addEventListener, 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';
+import { delegateEvents, createComponent, mergeProps, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
+import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, batch } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import clsx from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { Motion as Motion$1, Presence } from 'solid-motionone';
 import { autoUpdate, offset, flip, shift } from '@floating-ui/dom';
 import { useFloating } from 'solid-floating-ui';
+import { Motion as Motion$1 } from 'solid-motionone';
 
-// src/ui/config/defaultVariables.ts
-var defaultVariables = {
-  colorPrimary: "#0081F1",
-  colorPrimaryForeground: "white",
-  colorSecondary: "#F3F3F3",
-  colorSecondaryForeground: "#1A1523",
-  colorCounter: "#E5484D",
-  colorCounterForeground: "white",
-  colorBackground: "#FCFCFC",
-  colorForeground: "#1A1523",
-  colorNeutral: "#525252",
-  colorShadow: "rgba(122,133,153,0.25)",
-  fontSize: "inherit",
-  borderRadius: "0.375rem"
-};
 var defaultLocalization = {
   locale: "en-US",
   "inbox.filters.dropdownOptions.unread": "Unread only",
@@ -34,7 +19,7 @@ var defaultLocalization = {
   "inbox.filters.labels.unread": "Unread",
   "inbox.filters.labels.default": "Inbox",
   "inbox.filters.labels.archived": "Archived",
-  "notifications.emptyNotice": "No notifications",
+  "notifications.emptyNotice": "Quiet for now. Check back later.",
   "notifications.actions.readAll": "Mark all as read",
   "notifications.actions.archiveAll": "Archive all",
   "notifications.actions.archiveRead": "Archive read",
@@ -43,17 +28,64 @@ var defaultLocalization = {
   "notification.actions.unread.tooltip": "Mark as unread",
   "notification.actions.archive.tooltip": "Archive",
   "notification.actions.unarchive.tooltip": "Unarchive",
-  "preferences.title": "Notification Preferences",
+  "preferences.title": "Preferences",
+  "preferences.emptyNotice": "No notification specific preferences yet.",
   "preferences.global": "Global Preferences",
   "preferences.workflow.disabled.notice": "Contact admin to enable subscription management for this critical notification.",
   "preferences.workflow.disabled.tooltip": "Contact admin to edit"
 };
 var [dynamicLocalization, setDynamicLocalization] = createSignal({});
 
+// src/ui/context/LocalizationContext.tsx
+var LocalizationContext = createContext(void 0);
+var LocalizationProvider = (props) => {
+  const localization = createMemo(() => {
+    const _a = props.localization || {}, {
+      dynamic
+    } = _a, localizationObject = __objRest(_a, [
+      "dynamic"
+    ]);
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
+  });
+  const t = (key, ...args) => {
+    const value = localization()[key];
+    if (typeof value === "function") {
+      return value(args[0]);
+    }
+    return value;
+  };
+  const locale = createMemo(() => localization().locale);
+  return createComponent(LocalizationContext.Provider, {
+    value: {
+      t,
+      locale
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useLocalization() {
+  const context = useContext(LocalizationContext);
+  if (!context) {
+    throw new Error("useLocalization must be used within an LocalizationProvider");
+  }
+  return context;
+}
+
+// src/ui/types.ts
+var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
+  NotificationStatus2["UNREAD_READ"] = "unreadRead";
+  NotificationStatus2["UNREAD"] = "unread";
+  NotificationStatus2["ARCHIVED"] = "archived";
+  return NotificationStatus2;
+})(NotificationStatus || {});
+
 // src/ui/config/appearanceKeys.ts
 var appearanceKeys = [
   // Primitives
   "button",
+  "icon",
   "popoverContent",
   "popoverTrigger",
   "dropdownContent",
@@ -61,13 +93,17 @@ var appearanceKeys = [
   "dropdownItem",
   "dropdownItemLabel",
   "dropdownItemLabelContainer",
-  "dropdownItemLeftIcon",
-  "dropdownItemRightIcon",
+  "dropdownItemLeft__icon",
+  "dropdownItemRight__icon",
+  "dropdownItem__icon",
+  "collapsible",
   "tooltipContent",
   "tooltipTrigger",
   "back__button",
   "skeletonText",
   "skeletonAvatar",
+  "skeletonSwitch",
+  "skeletonSwitchThumb",
   "tabsRoot",
   "tabsList",
   "tabsContent",
@@ -90,10 +126,18 @@ var appearanceKeys = [
   "notificationListContainer",
   "notificationList",
   "notificationListEmptyNoticeContainer",
-  "notificationListEmptyNotice",
+  "notificationListEmptyNoticeOverlay",
   "notificationListEmptyNoticeIcon",
+  "notificationListEmptyNotice",
+  "notificationList__skeleton",
+  "notificationList__skeletonContent",
+  "notificationList__skeletonItem",
+  "notificationList__skeletonAvatar",
+  "notificationList__skeletonText",
   "notificationListNewNotificationsNotice__button",
   "notification",
+  "notificationContent",
+  "notificationTextContainer",
   "notificationDot",
   "notificationSubject",
   "notificationSubject__strong",
@@ -101,7 +145,9 @@ var appearanceKeys = [
   "notificationBody__strong",
   "notificationBodyContainer",
   "notificationImage",
+  "notificationImageLoadingFallback",
   "notificationDate",
+  "notificationDateActionsContainer",
   "notificationDefaultActions",
   "notificationCustomActions",
   "notificationPrimaryAction__button",
@@ -110,6 +156,10 @@ var appearanceKeys = [
   "notificationUnread__button",
   "notificationArchive__button",
   "notificationUnarchive__button",
+  "notificationRead__icon",
+  "notificationUnread__icon",
+  "notificationArchive__icon",
+  "notificationUnarchive__icon",
   // Notifications tabs
   "notificationsTabs__tabsRoot",
   "notificationsTabs__tabsList",
@@ -126,6 +176,8 @@ var appearanceKeys = [
   "inboxStatus__dropdownItemLabelContainer",
   "inboxStatus__dropdownItemLeft__icon",
   "inboxStatus__dropdownItemRight__icon",
+  "inboxStatus__dropdownItem__icon",
+  "inboxStatus__dropdownItemCheck__icon",
   // More actions
   "moreActionsContainer",
   "moreActions__dropdownTrigger",
@@ -136,7 +188,7 @@ var appearanceKeys = [
   "moreActions__dots",
   // More tabs
   "moreTabs__button",
-  "moreTabs__dots",
+  "moreTabs__icon",
   "moreTabs__dropdownTrigger",
   "moreTabs__dropdownContent",
   "moreTabs__dropdownItem",
@@ -151,13 +203,15 @@ var appearanceKeys = [
   "workflowLabelDisabled__icon",
   "workflowContainerRight__icon",
   "workflowArrow__icon",
+  "workflowDescription",
   // channel
   "channelContainer",
+  "channelIconContainer",
+  "channel__icon",
   "channelsContainerCollapsible",
   "channelsContainer",
   "channelLabel",
   "channelLabelContainer",
-  "channelDescription",
   "channelName",
   "channelSwitchContainer",
   "channelSwitch",
@@ -165,47 +219,133 @@ var appearanceKeys = [
   // Preferences Header
   "preferencesHeader",
   "preferencesHeader__back__button",
+  "preferencesHeader__back__button__icon",
   "preferencesHeader__title",
+  "preferencesHeader__icon",
   // Preferences Loading
-  "preferencesLoadingContainer",
+  "preferencesListEmptyNoticeContainer",
+  "preferencesListEmptyNotice",
+  "preferencesList__skeleton",
+  "preferencesList__skeletonContent",
+  "preferencesList__skeletonItem",
+  "preferencesList__skeletonIcon",
+  "preferencesList__skeletonSwitch",
+  "preferencesList__skeletonSwitchThumb",
+  "preferencesList__skeletonText",
   // Text formatting
   "strong"
 ];
-function createInfiniteScroll(fetcher) {
+
+// src/ui/config/defaultVariables.ts
+var defaultVariables = {
+  colorPrimary: "#7D52F4",
+  colorPrimaryForeground: "white",
+  colorSecondary: "#FFFFFF",
+  colorSecondaryForeground: "#646464",
+  colorCounter: "#FB3748",
+  colorCounterForeground: "white",
+  colorBackground: "#FCFCFC",
+  colorRing: "#E1E4EA",
+  colorForeground: "#1A1523",
+  colorNeutral: "#525252",
+  colorShadow: "rgb(0,0,0)",
+  fontSize: "1rem",
+  borderRadius: "0.375rem"
+};
+
+// src/ui/helpers/constants.ts
+var DEFAULT_TARGET = "_blank";
+var DEFAULT_REFERRER = "noopener noreferrer";
+function createInfiniteScroll(fetcher, options) {
   const [data, setData] = createSignal([]);
   const [initialLoading, setInitialLoading] = createSignal(true);
-  const [offset3, setOffset] = createSignal(0);
+  const [after, setAfter] = createSignal(void 0);
   const [end, setEnd] = createSignal(false);
-  const [contents, { mutate, refetch }] = createResource(offset3, fetcher);
-  let setEl = () => {
-  };
-  if (!isServer) {
-    const io = new IntersectionObserver((e) => {
-      if (e.length > 0 && e[0].isIntersecting && !end() && !contents.loading) {
-        setOffset(setOffset(data().length));
+  const [contents, { mutate, refetch }] = createResource(
+    () => ({ trigger: true, after: after() }),
+    (params) => fetcher(params.after)
+  );
+  let observedElement = null;
+  let io = null;
+  onMount(() => {
+    io = new IntersectionObserver(
+      (entries) => {
+        var _a;
+        const entry = entries[0];
+        if (entry && entry.isIntersecting && !end() && !contents.loading) {
+          const data2 = (_a = contents.latest) == null ? void 0 : _a.data;
+          if (data2) {
+            setAfter(data2[data2.length - 1][options.paginationField]);
+          }
+        }
+      },
+      {
+        threshold: 0.1
       }
+    );
+    if (observedElement && io) {
+      io.observe(observedElement);
+    }
+    onCleanup(() => {
+      io == null ? void 0 : io.disconnect();
+      io = null;
     });
-    onCleanup(() => io.disconnect());
-    setEl = (el) => {
-      io.observe(el);
-      onCleanup(() => io.unobserve(el));
-    };
-  }
-  createComputed(() => {
+  });
+  createEffect(() => {
+    if (contents.loading) return;
     const content = contents.latest;
     if (!content) return;
     setInitialLoading(false);
     batch(() => {
       if (!content.hasMore) setEnd(true);
       setData(content.data);
+      requestAnimationFrame(() => {
+        checkVisibilityAndLoadMore();
+      });
     });
   });
+  const checkVisibilityAndLoadMore = () => {
+    if (observedElement && !end() && !contents.loading) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          var _a;
+          const entry = entries[0];
+          if (entry.isIntersecting) {
+            const data2 = (_a = contents.latest) == null ? void 0 : _a.data;
+            if (data2) {
+              setAfter(data2[data2.length - 1][options.paginationField]);
+            }
+          }
+          observer.disconnect();
+        },
+        {
+          threshold: [0.1]
+        }
+      );
+      observer.observe(observedElement);
+      onCleanup(() => {
+        observer.disconnect();
+      });
+    }
+  };
+  const setEl = (el) => {
+    if (io && observedElement) {
+      io.unobserve(observedElement);
+    }
+    observedElement = el;
+    if (io && el) {
+      io.observe(el);
+    }
+    onCleanup(() => {
+      if (io && el) io.unobserve(el);
+    });
+  };
   const reset = () => __async(this, null, function* () {
     setData([]);
     setInitialLoading(true);
     setEnd(false);
-    if (offset3() !== 0) {
-      setOffset(0);
+    if (after() !== void 0) {
+      setAfter(void 0);
     } else {
       yield refetch();
     }
@@ -215,7 +355,7 @@ function createInfiniteScroll(fetcher) {
     {
       initialLoading,
       setEl,
-      offset: offset3,
+      after,
       end,
       mutate,
       reset
@@ -255,6 +395,7 @@ function formatToRelativeTime({
 var twMerge = extendTailwindMerge({
   prefix: "nt-"
 });
+var publicFacingTwMerge = extendTailwindMerge({});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -286,31 +427,105 @@ function createClassAndRuleFromCssString(classNameSet, styles) {
   classNameSet.add(className);
   return { className, rule };
 }
-var shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+var shades = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 function generateDefaultColor(props) {
   const cssVariableDefaultRule = `.${props.id} { --nv-${props.key}: oklch(from ${props.color} l c h); }`;
   return cssVariableDefaultRule;
 }
-function generatesSolidShadesFromColor(props) {
+function generateSolidShadeRulesFromColor({ color, key, id }) {
   const rules = [];
-  for (let i = 0; i < shades.length; i += 1) {
-    const shade = shades[i];
-    const cssVariableSolidRule = `.${props.id} { --nv-${props.key}-${shade}: oklch(from ${props.color} calc(l - ${(shade - 500) / 1e3}) c h); }`;
-    rules.push(cssVariableSolidRule);
-  }
+  const adjustLightness = (factor) => {
+    if (factor >= 0) {
+      return `min(1, calc(l + ${factor} * (1 - l)))`;
+    } else {
+      return `max(0, calc(l * (1 + ${factor})))`;
+    }
+  };
+  const lightnessOffsets = {
+    25: adjustLightness(0.475),
+    50: adjustLightness(0.45),
+    100: adjustLightness(0.4),
+    200: adjustLightness(0.3),
+    300: adjustLightness(0.2),
+    400: adjustLightness(0.1),
+    500: "l",
+    600: adjustLightness(-0.1),
+    700: adjustLightness(-0.2),
+    800: adjustLightness(-0.3),
+    900: adjustLightness(-0.4)
+  };
+  shades.forEach((shade) => {
+    const newLightness = lightnessOffsets[shade];
+    const cssVariableRule = `.${id} { --nv-${key}-${shade}: oklch(from ${color} ${newLightness} c h); }`;
+    rules.push(cssVariableRule);
+  });
   return rules;
 }
-function generatesAlphaShadesFromColor(props) {
+function generateAlphaShadeRulesFromColor({ color, key, id }) {
   const rules = [];
-  for (let i = 0; i < shades.length; i += 1) {
-    const shade = shades[i];
-    const cssVariableAlphaRule = `.${props.id} { --nv-${props.key}-${shade}: oklch(from ${props.color} l c h / ${shade / 1e3}); }`;
+  const alphaMap = {
+    25: 0.025,
+    50: 0.05,
+    100: 0.1,
+    200: 0.2,
+    300: 0.3,
+    400: 0.4,
+    500: 0.5,
+    600: 0.6,
+    700: 0.7,
+    800: 0.8,
+    900: 0.9
+  };
+  Object.entries(alphaMap).forEach(([shade, alpha]) => {
+    const cssVariableAlphaRule = `.${id} { --nv-${key}-${shade}: oklch(from ${color} l c h / ${alpha}); }`;
     rules.push(cssVariableAlphaRule);
-  }
+  });
+  return rules;
+}
+function generateFontSizeRules(props) {
+  const { id, baseFontSize } = props;
+  const sizeRatios = {
+    xs: 0.65625,
+    sm: 0.765625,
+    base: 0.875,
+    lg: 0.984375,
+    xl: 1.09375,
+    "2xl": 1.3125,
+    "3xl": 1.640625,
+    "4xl": 1.96875
+  };
+  const rules = [];
+  Object.entries(sizeRatios).forEach(([key, ratio]) => {
+    const size = `calc(${baseFontSize} * ${ratio})`;
+    const lineHeight = `calc(${baseFontSize} * ${ratio} * 1.33)`;
+    const cssVariableRule = `.${id} { --nv-font-size-${key}: ${size}; --nv-line-height-${key}: ${lineHeight}; }`;
+    rules.push(cssVariableRule);
+  });
+  return rules;
+}
+function generateBorderRadiusRules(props) {
+  const { id, baseRadius } = props;
+  const radiusRatios = {
+    none: 0,
+    xs: 0.333,
+    sm: 0.667,
+    md: 1,
+    lg: 1.333,
+    xl: 2,
+    "2xl": 2.667,
+    "3xl": 4,
+    full: 9999
+  };
+  const rules = [];
+  Object.entries(radiusRatios).forEach(([key, ratio]) => {
+    const value = key === "none" ? "0px" : key === "full" ? "9999px" : `calc(${baseRadius} * ${ratio})`;
+    const cssVariableRule = `.${id} { --nv-radius-${key}: ${value}; }`;
+    rules.push(cssVariableRule);
+  });
   return rules;
 }
 var parseVariables = (variables, id) => {
-  return [
+  const rules = [
     generateDefaultColor({ color: variables.colorBackground, key: "color-background", id }),
     generateDefaultColor({ color: variables.colorForeground, key: "color-foreground", id }),
     generateDefaultColor({ color: variables.colorPrimary, key: "color-primary", id }),
@@ -320,24 +535,28 @@ var parseVariables = (variables, id) => {
     generateDefaultColor({ color: variables.colorCounter, key: "color-counter", id }),
     generateDefaultColor({ color: variables.colorCounterForeground, key: "color-counter-foreground", id }),
     generateDefaultColor({ color: variables.colorShadow, key: "color-shadow", id }),
-    ...generatesAlphaShadesFromColor({ color: variables.colorBackground, key: "color-background-alpha", id }),
-    ...generatesAlphaShadesFromColor({ color: variables.colorForeground, key: "color-foreground-alpha", id }),
-    ...generatesSolidShadesFromColor({ color: variables.colorPrimary, key: "color-primary", id }),
-    ...generatesAlphaShadesFromColor({ color: variables.colorPrimary, key: "color-primary-alpha", id }),
-    ...generatesAlphaShadesFromColor({
+    generateDefaultColor({ color: variables.colorRing, key: "color-ring", id }),
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorBackground, key: "color-background-alpha", id }),
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorForeground, key: "color-foreground-alpha", id }),
+    ...generateSolidShadeRulesFromColor({ color: variables.colorPrimary, key: "color-primary", id }),
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorPrimary, key: "color-primary-alpha", id }),
+    ...generateAlphaShadeRulesFromColor({
       color: variables.colorPrimaryForeground,
       key: "color-primary-foreground-alpha",
       id
     }),
-    ...generatesSolidShadesFromColor({ color: variables.colorSecondary, key: "color-secondary", id }),
-    ...generatesAlphaShadesFromColor({ color: variables.colorSecondary, key: "color-secondary-alpha", id }),
-    ...generatesAlphaShadesFromColor({
+    ...generateSolidShadeRulesFromColor({ color: variables.colorSecondary, key: "color-secondary", id }),
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorSecondary, key: "color-secondary-alpha", id }),
+    ...generateAlphaShadeRulesFromColor({
       color: variables.colorSecondaryForeground,
       key: "color-secondary-foreground-alpha",
       id
     }),
-    ...generatesAlphaShadesFromColor({ color: variables.colorNeutral, key: "color-neutral-alpha", id })
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorNeutral, key: "color-neutral-alpha", id }),
+    ...generateFontSizeRules({ id, baseFontSize: variables.fontSize }),
+    ...generateBorderRadiusRules({ id, baseRadius: variables.borderRadius })
   ];
+  return rules;
 };
 var parseElements = (elements) => {
   const elementsStyleData = [];
@@ -352,7 +571,12 @@ var parseElements = (elements) => {
       }
     }
   }
-  return elementsStyleData;
+  const sortedElementsStyleData = elementsStyleData.sort((a, b) => {
+    const countA = (a.key.match(/__/g) || []).length;
+    const countB = (b.key.match(/__/g) || []).length;
+    return countA - countB;
+  });
+  return sortedElementsStyleData;
 };
 var getTagsFromTab = (tab) => {
   var _a;
@@ -362,7 +586,7 @@ var getTagsFromTab = (tab) => {
 // src/ui/helpers/useStyle.ts
 var useStyle = () => {
   const appearance = useAppearance();
-  const [isServer2, setIsServer] = createSignal(true);
+  const [isServer, setIsServer] = createSignal(true);
   onMount(() => {
     setIsServer(false);
   });
@@ -389,13 +613,14 @@ var useStyle = () => {
       return countB - countA;
     });
     const finalClassName = classes.filter((className2) => !finalAppearanceKeys.includes(className2)).join(" ");
-    const appearanceClassnames = [];
-    for (let i = 0; i < finalAppearanceKeys.length; i += 1) {
+    let appearanceClassnames = [];
+    for (let i = 0; i < finalAppearanceKeys.reverse().length; i += 1) {
       if (typeof ((_a = appearance.elements()) == null ? void 0 : _a[finalAppearanceKeys[i]]) === "string") {
         appearanceClassnames.push((_b = appearance.elements()) == null ? void 0 : _b[finalAppearanceKeys[i]]);
       }
     }
-    const cssInJsClasses = !!finalAppearanceKeys.length && !isServer2() ? finalAppearanceKeys.map((appKey) => appearance.appearanceKeyToCssInJsClass[appKey]) : [];
+    appearanceClassnames = [publicFacingTwMerge(appearanceClassnames)];
+    const cssInJsClasses = !!finalAppearanceKeys.length && !isServer() ? finalAppearanceKeys.map((appKey) => appearance.appearanceKeyToCssInJsClass[appKey]) : [];
     return cn(
       ...finalAppearanceKeys.map((key) => `nv-${key}`),
       "\u{1F514}",
@@ -416,10 +641,6 @@ function useUncontrolledState(props) {
   return [uncontrolledValue, setUncontrolledValue];
 }
 
-// src/ui/helpers/constants.ts
-var DEFAULT_TARGET = "_blank";
-var DEFAULT_REFERRER = "noopener noreferrer";
-
 // src/ui/context/AppearanceContext.tsx
 var AppearanceContext = createContext(void 0);
 var AppearanceProvider = (props) => {
@@ -592,51 +813,6 @@ var useWebSocketEvent = ({
     });
   });
 };
-var LocalizationContext = createContext(void 0);
-var LocalizationProvider = (props) => {
-  const localization = createMemo(() => {
-    const _a = props.localization || {}, {
-      dynamic
-    } = _a, localizationObject = __objRest(_a, [
-      "dynamic"
-    ]);
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, defaultLocalization), dynamicLocalization()), dynamic || {}), localizationObject);
-  });
-  const t = (key, ...args) => {
-    const value = localization()[key];
-    if (typeof value === "function") {
-      return value(args[0]);
-    }
-    return value;
-  };
-  const locale = createMemo(() => localization().locale);
-  return createComponent(LocalizationContext.Provider, {
-    value: {
-      t,
-      locale
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-function useLocalization() {
-  const context = useContext(LocalizationContext);
-  if (!context) {
-    throw new Error("useLocalization must be used within an LocalizationProvider");
-  }
-  return context;
-}
-
-// src/ui/types.ts
-var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
-  NotificationStatus2["UNREAD_READ"] = "unreadRead";
-  NotificationStatus2["UNREAD"] = "unread";
-  NotificationStatus2["ARCHIVED"] = "archived";
-  return NotificationStatus2;
-})(NotificationStatus || {});
-
-// src/ui/context/InboxContext.tsx
 var InboxContext = createContext(void 0);
 var STATUS_TO_FILTER = {
   ["unreadRead" /* UNREAD_READ */]: {
@@ -833,7 +1009,7 @@ var CountProvider = (props) => {
     const limitValue = limit();
     const tabFilter = __spreadProps(__spreadValues({}, filter()), {
       tags,
-      offset: 0,
+      after: void 0,
       limit: limitValue
     });
     const hasEmptyCache = !notificationsCache.has(tabFilter);
@@ -867,11 +1043,16 @@ var CountProvider = (props) => {
       if (filter().archived) {
         return;
       }
-      const allTabs = tabs();
-      if (allTabs.length > 0) {
-        for (let i = 0; i < allTabs.length; i += 1) {
-          const tab = allTabs[i];
-          const tags = getTagsFromTab(tab);
+      const tagsMap = tabs().reduce((acc, tab) => {
+        const tags = getTagsFromTab(tab);
+        const tagsKey = createKey(tags);
+        acc.set(tagsKey, tags);
+        return acc;
+      }, /* @__PURE__ */ new Map());
+      const uniqueTags = Array.from(tagsMap.values());
+      if (uniqueTags.length > 0) {
+        for (let i = 0; i < uniqueTags.length; i += 1) {
+          const tags = uniqueTags[i];
           const allNotifications = tags.length === 0;
           const includesAtLeastOneTag = tags.some((tag) => {
             var _a;
@@ -1047,144 +1228,144 @@ 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="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) => {
+var _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path fill=currentColor d="M5.833 8.333L10 12.5l4.166-4.167H5.833z">`);
+var ArrowDropDown = (props) => {
   return (() => {
     var _el$ = _tmpl$2();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$3 = /* @__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.059zM10 14.583L5.417 10h2.916V8.333h3.334V10h2.916L10 14.583zM4.267 4.167l.675-.834h10l.783.834H4.267z">`);
-var ArchiveRead = (props) => {
+var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M9.20425 9.99907L12.9168 13.7116L11.8563 14.7721L7.08325 9.99907L11.8563 5.22607L12.9168 6.28657L9.20425 9.99907Z"fill=currentColor>`);
+var ArrowLeft = (props) => {
   return (() => {
     var _el$ = _tmpl$3();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$4 = /* @__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="M5.833 8.333L10 12.5l4.166-4.167H5.833z">`);
-var ArrowDropDown = (props) => {
+var _tmpl$4 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5 12C5.6875 12 6.25 11.4462 6.25 10.7692H3.75C3.75 11.4462 4.3125 12 5 12ZM8.75 8.30769V5.23077C8.75 3.34154 7.73125 1.76 5.9375 1.34154V0.923077C5.9375 0.412308 5.51875 0 5 0C4.48125 0 4.0625 0.412308 4.0625 0.923077V1.34154C2.275 1.76 1.25 3.33538 1.25 5.23077V8.30769L0 9.53846V10.1538H10V9.53846L8.75 8.30769ZM7.5 8.92308H2.5V5.23077C2.5 3.70462 3.44375 2.46154 5 2.46154C6.55625 2.46154 7.5 3.70462 7.5 5.23077V8.92308Z"fill=currentColor>`);
+function Bell(props) {
   return (() => {
     var _el$ = _tmpl$4();
     spread(_el$, props, true, true);
     return _el$;
   })();
-};
-var _tmpl$5 = /* @__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 16.667l1.175-1.175-4.65-4.659h10.142V9.167H6.525l4.659-4.65L10 3.333 3.334 10 10 16.667z">`);
-var ArrowLeft = (props) => {
+}
+var _tmpl$5 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M0.625 9.375L2.93989 8.86059C3.5538 9.18889 4.25516 9.375 5 9.375C7.41622 9.375 9.375 7.41622 9.375 5C9.375 2.58375 7.41622 0.625 5 0.625C2.58375 0.625 0.625 2.58375 0.625 5C0.625 5.74484 0.81113 6.4462 1.13942 7.0601L0.625 9.375ZM6.50881 2.8125L6.43224 3.68761H7.1875V4.56259H6.35568L6.27912 5.43759H7.1875V6.31259H6.2026L6.12604 7.1875H5.24771L5.32423 6.31259H4.44591L4.36934 7.1875H3.49101L3.56755 6.31259H2.8125V5.43759H3.64411L3.72066 4.56259H2.8125V3.68761H3.79721L3.87377 2.8125H4.75211L4.67555 3.68761H5.55392L5.63048 2.8125H6.50881ZM4.59899 4.56259L4.52247 5.43759H5.40079L5.47736 4.56259H4.59899Z"fill=currentColor>`);
+var Chat = (props) => {
   return (() => {
     var _el$ = _tmpl$5();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$6 = /* @__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 18.333c.916 0 1.666-.75 1.666-1.666H8.333c0 .916.75 1.666 1.667 1.666zm5-5V9.167c0-2.559-1.359-4.7-3.75-5.267v-.567c0-.691-.559-1.25-1.25-1.25-.692 0-1.25.559-1.25 1.25V3.9C6.366 4.467 5 6.6 5 9.167v4.166L3.333 15v.833h13.333V15L15 13.333zm-1.667.834H6.666v-5c0-2.067 1.259-3.75 3.334-3.75s3.333 1.683 3.333 3.75v5z">`);
-function BellIcon(props) {
+var _tmpl$6 = /* @__PURE__ */ template(`<svg viewBox="0 0 8 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.99994 4.58847L7.33298 0L8 0.705765L2.99994 6L0 2.82356L0.666549 2.11779L2.99994 4.58847Z"fill=currentColor>`);
+var Check = (props) => {
   return (() => {
     var _el$ = _tmpl$6();
     spread(_el$, props, true, true);
     return _el$;
   })();
-}
-var _tmpl$7 = /* @__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="M12.5 3.333v5.834H4.31l-.975.975V3.333H12.5zm.834-1.666H2.5a.836.836 0 00-.833.833v11.667L5 10.833h8.334a.836.836 0 00.833-.833V2.5a.836.836 0 00-.833-.833zM17.5 5h-1.666v7.5H5v1.667c0 .458.375.833.834.833H15l3.334 3.333v-12.5A.836.836 0 0017.5 5z">`);
-var Chat = (props) => {
+};
+var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path fill=currentColor d="M5 8.333c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S5.916 8.333 5 8.333zm10 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S15.916 8.333 15 8.333zm-5 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S10.916 8.333 10 8.333z">`);
+var Dots = (props) => {
   return (() => {
     var _el$ = _tmpl$7();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$8 = /* @__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="M7.5 13.475L4.025 10l-1.183 1.175L7.5 15.833l10-10-1.175-1.175L7.5 13.475z">`);
-var Check = (props) => {
+var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.20703 1.875H2.8125H2.10547H1.875V2.04688V2.8125V3.60156V5.33984L0.00390625 3.95508C0.0351562 3.60156 0.216797 3.27344 0.505859 3.06055L0.9375 2.74023V1.875C0.9375 1.35742 1.35742 0.9375 1.875 0.9375H3.37109L4.3457 0.216797C4.53516 0.0761719 4.76367 0 5 0C5.23633 0 5.46484 0.0761719 5.6543 0.214844L6.62891 0.9375H8.125C8.64258 0.9375 9.0625 1.35742 9.0625 1.875V2.74023L9.49414 3.06055C9.7832 3.27344 9.96484 3.60156 9.99609 3.95508L8.125 5.33984V3.60156V2.8125V2.04688V1.875H7.89453H7.1875H5.79297H4.20508H4.20703ZM0 8.75V4.72852L4.25 7.87695C4.4668 8.03711 4.73047 8.125 5 8.125C5.26953 8.125 5.5332 8.03906 5.75 7.87695L10 4.72852V8.75C10 9.43945 9.43945 10 8.75 10H1.25C0.560547 10 0 9.43945 0 8.75ZM3.4375 3.125H6.5625C6.73438 3.125 6.875 3.26562 6.875 3.4375C6.875 3.60938 6.73438 3.75 6.5625 3.75H3.4375C3.26562 3.75 3.125 3.60938 3.125 3.4375C3.125 3.26562 3.26562 3.125 3.4375 3.125ZM3.4375 4.375H6.5625C6.73438 4.375 6.875 4.51562 6.875 4.6875C6.875 4.85938 6.73438 5 6.5625 5H3.4375C3.26562 5 3.125 4.85938 3.125 4.6875C3.125 4.51562 3.26562 4.375 3.4375 4.375Z"fill=currentColor>`);
+var Email = (props) => {
   return (() => {
     var _el$ = _tmpl$8();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$9 = /* @__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="M5 8.333c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S5.916 8.333 5 8.333zm10 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S15.916 8.333 15 8.333zm-5 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S10.916 8.333 10 8.333z">`);
-var Dots = (props) => {
+var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99962 0.856934C4.64404 0.856934 4.35676 1.14421 4.35676 1.49979V1.88551C2.89024 2.18283 1.78533 3.48059 1.78533 5.03551V5.41318C1.78533 6.35738 1.43779 7.26943 0.810999 7.97658L0.662339 8.14332C0.493589 8.33216 0.45341 8.60336 0.555865 8.83439C0.658321 9.06542 0.889348 9.21408 1.14247 9.21408H8.85676C9.10988 9.21408 9.3389 9.06542 9.44337 8.83439C9.54783 8.60336 9.50564 8.33216 9.33689 8.14332L9.18823 7.97658C8.56145 7.26943 8.2139 6.35939 8.2139 5.41318V5.03551C8.2139 3.48059 7.10899 2.18283 5.64247 1.88551V1.49979C5.64247 1.14421 5.3552 0.856934 4.99962 0.856934ZM5.90966 10.767C6.15073 10.5259 6.28533 10.1985 6.28533 9.85693H4.99962H3.7139C3.7139 10.1985 3.8485 10.5259 4.08957 10.767C4.33064 11.008 4.6581 11.1426 4.99962 11.1426C5.34113 11.1426 5.66859 11.008 5.90966 10.767Z"fill=currentColor>`);
+var InApp = (props) => {
   return (() => {
     var _el$ = _tmpl$9();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$10 = /* @__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.667 3.333H3.334c-.917 0-1.659.75-1.659 1.667l-.008 10c0 .917.75 1.667 1.667 1.667h13.333c.917 0 1.667-.75 1.667-1.667V5c0-.917-.75-1.667-1.667-1.667zm0 11.667H3.334V6.667L10 10.833l6.667-4.166V15zM10 9.167L3.334 5h13.333L10 9.167z">`);
-var Email = (props) => {
+var _tmpl$10 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.29671 10C1.78742 10 1.39807 9.85716 1.12864 9.57149C0.862497 9.28581 0.729426 8.86623 0.729426 8.31274V2.64594H1.69543V8.29668C1.69543 8.52163 1.74964 8.69487 1.85806 8.81624C1.96978 8.93408 2.12914 8.99301 2.33614 8.99301H7.66389C7.86764 8.99301 8.02366 8.93408 8.13209 8.81624C8.24384 8.69487 8.29965 8.52163 8.29965 8.29668V2.64594H9.27059V8.31274C9.27059 8.8627 9.13591 9.28048 8.86648 9.56608C8.59705 9.85536 8.20931 10 7.70333 10H2.29671ZM3.41056 5.34543C3.29556 5.34543 3.20028 5.30438 3.1247 5.22226C3.04913 5.14015 3.01134 5.03304 3.01134 4.90089V4.72949C3.01134 4.59737 3.04749 4.49204 3.11977 4.41348C3.19535 4.33492 3.29227 4.29564 3.41056 4.29564H6.5944C6.71271 4.29564 6.80795 4.33492 6.88026 4.41348C6.95582 4.49204 6.9936 4.59737 6.9936 4.72949V4.90089C6.9936 5.03304 6.95582 5.14015 6.88026 5.22226C6.8047 5.30438 6.70939 5.34543 6.5944 5.34543H3.41056ZM1.05964 3.16014C0.724502 3.16014 0.463285 3.05301 0.276004 2.83877C0.0920037 2.62095 0 2.33172 0 1.97107V1.18907C0 0.824846 0.0952841 0.535614 0.28586 0.321373C0.476428 0.107124 0.734358 0 1.05964 0H8.94536C9.27715 0 9.53511 0.107124 9.71911 0.321373C9.90642 0.535614 10 0.824846 10 1.18907V1.97107C10 2.33172 9.90642 2.62095 9.71911 2.83877C9.53511 3.05301 9.27715 3.16014 8.94536 3.16014H1.05964ZM1.24693 2.19067H8.75805C8.87304 2.19067 8.95516 2.16211 9.00448 2.10497C9.05372 2.04427 9.07838 1.95322 9.07838 1.83181V1.32833C9.07838 1.20335 9.05372 1.1123 9.00448 1.05517C8.95516 0.99803 8.87304 0.969462 8.75805 0.969462H1.24693C1.13193 0.969462 1.04814 0.99803 0.995567 1.05517C0.946281 1.1123 0.921638 1.20335 0.921638 1.32833V1.83181C0.921638 1.95322 0.946281 2.04427 0.995567 2.10497C1.04814 2.16211 1.13193 2.19067 1.24693 2.19067Z"fill=currentColor>`);
+var MarkAsArchived = (props) => {
   return (() => {
     var _el$ = _tmpl$10();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 20 20"fill=none><path fill=currentColor d="M9.99967 18.3334C10.9163 18.3334 11.6663 17.5834 11.6663 16.6667H8.33301C8.33301 17.5834 9.08301 18.3334 9.99967 18.3334ZM14.9997 13.3334V9.16671C14.9997 6.60837 13.6413 4.46671 11.2497 3.90004V3.33337C11.2497 2.64171 10.6913 2.08337 9.99967 2.08337C9.30801 2.08337 8.74967 2.64171 8.74967 3.33337V3.90004C6.36634 4.46671 4.99967 6.60004 4.99967 9.16671V13.3334L3.33301 15V15.8334H16.6663V15L14.9997 13.3334ZM13.333 14.1667H6.66634V9.16671C6.66634 7.10004 7.92467 5.41671 9.99967 5.41671C12.0747 5.41671 13.333 7.10004 13.333 9.16671V14.1667Z">`);
-var InApp = (props) => {
+var _tmpl$11 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.29671 10C1.78742 10 1.39807 9.85716 1.12864 9.57149C0.862497 9.28581 0.729426 8.86623 0.729426 8.31274V2.64594H1.69543V8.29668C1.69543 8.52163 1.74964 8.69487 1.85806 8.81624C1.96978 8.93408 2.12914 8.99301 2.33614 8.99301H7.66389C7.86764 8.99301 8.02366 8.93408 8.13209 8.81624C8.24384 8.69487 8.29965 8.52163 8.29965 8.29668V2.64594H9.27059V8.31274C9.27059 8.8627 9.13591 9.28048 8.86648 9.56608C8.59705 9.85536 8.20931 10 7.70333 10H2.29671ZM1.05964 3.16014C0.724502 3.16014 0.463285 3.05301 0.276004 2.83877C0.0920037 2.62095 0 2.33172 0 1.97107V1.18907C0 0.824846 0.0952841 0.535614 0.28586 0.321373C0.476428 0.107124 0.734358 0 1.05964 0H8.94536C9.27715 0 9.53511 0.107124 9.71911 0.321373C9.90642 0.535614 10 0.824846 10 1.18907V1.97107C10 2.33172 9.90642 2.62095 9.71911 2.83877C9.53511 3.05301 9.27715 3.16014 8.94536 3.16014H1.05964ZM1.24693 2.19067H8.75805C8.87304 2.19067 8.95516 2.16211 9.00448 2.10497C9.05372 2.04427 9.07838 1.95322 9.07838 1.83181V1.32833C9.07838 1.20335 9.05372 1.1123 9.00448 1.05517C8.95516 0.99803 8.87304 0.969462 8.75805 0.969462H1.24693C1.13193 0.969462 1.04814 0.99803 0.995567 1.05517C0.946281 1.1123 0.921638 1.20335 0.921638 1.32833V1.83181C0.921638 1.95322 0.946281 2.04427 0.995567 2.10497C1.04814 2.16211 1.13193 2.19067 1.24693 2.19067Z"fill=currentColor>`);
+var MarkAsArchivedRead = (props) => {
   return (() => {
     var _el$ = _tmpl$11();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$12 = /* @__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="M15.833 2.5H4.158c-.925 0-1.65.742-1.65 1.667L2.5 15.833A1.66 1.66 0 004.158 17.5h11.675c.917 0 1.667-.75 1.667-1.667V4.167A1.667 1.667 0 0015.833 2.5zm0 10H12.5c0 1.383-1.125 2.5-2.5 2.5a2.502 2.502 0 01-2.5-2.5H4.158V4.167h11.675V12.5z">`);
-var Inbox = (props) => {
+var _tmpl$12 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1.75683 10C1.17837 10 0.740942 9.85182 0.444565 9.55546C0.148188 9.26266 0 8.83065 0 8.25932V1.74077C0 1.16587 0.148188 0.732023 0.444565 0.43921C0.740942 0.146407 1.17837 0 1.75683 0H8.24315C8.82161 0 9.25901 0.146407 9.55546 0.43921C9.85182 0.732023 10 1.16587 10 1.74077V8.25932C10 8.83065 9.85182 9.26266 9.55546 9.55546C9.25901 9.85182 8.82161 10 8.24315 10H1.75683ZM1.8211 8.94491H8.17889C8.42524 8.94491 8.61456 8.88056 8.74665 8.75204C8.87874 8.62351 8.94483 8.42889 8.94483 8.16818V1.82647C8.94483 1.56937 8.87874 1.37655 8.74665 1.248C8.61456 1.11945 8.42524 1.05518 8.17889 1.05518H1.8211C1.57115 1.05518 1.38011 1.11945 1.248 1.248C1.11944 1.37655 1.05517 1.56937 1.05517 1.82647V8.16818C1.05517 8.42889 1.11944 8.62351 1.248 8.75204C1.38011 8.88056 1.57115 8.94491 1.8211 8.94491ZM4.42957 7.53616C4.32958 7.53616 4.24032 7.51477 4.16176 7.47189C4.0832 7.42546 4.00643 7.35763 3.93144 7.26841L2.66738 5.72579C2.57454 5.60795 2.52812 5.48833 2.52812 5.36693C2.52812 5.23481 2.57276 5.12232 2.66202 5.02949C2.75487 4.93307 2.86556 4.88486 2.99411 4.88486C3.07624 4.88486 3.14944 4.90272 3.21371 4.93843C3.28156 4.97056 3.34762 5.02949 3.4119 5.11518L4.40814 6.37925L6.52383 2.98876C6.63453 2.80666 6.77379 2.7156 6.94162 2.7156C7.06658 2.7156 7.17911 2.75667 7.27903 2.83879C7.37903 2.92093 7.42903 3.02804 7.42903 3.16016C7.42903 3.22087 7.41477 3.28336 7.38616 3.34763C7.3612 3.40834 7.33086 3.46547 7.29511 3.51903L4.90091 7.26301C4.78664 7.44511 4.62953 7.53616 4.42957 7.53616Z"fill=currentColor>`);
+var MarkAsRead = (props) => {
   return (() => {
     var _el$ = _tmpl$12();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=13 height=12 fill=none viewBox="0 0 13 12"><path fill=currentColor d="M9.787.98A5.972 5.972 0 006.5 0c-.668 0-1.31.11-1.911.31L9.187 4.94c.221.222.6.065.6-.248V.98z"></path><path fill=currentColor d="M2.879 1.216A5.99 5.99 0 00.5 6c0 1.134.315 2.195.862 3.1V7.309c0-1.966 2.379-2.946 3.764-1.552l4.995 5.027A5.99 5.99 0 0012.5 6a5.972 5.972 0 00-.862-3.1v1.791c0 1.966-2.379 2.946-3.764 1.552L2.879 1.216z"></path><path fill=currentColor d="M8.411 11.69L3.813 7.06a.351.351 0 00-.6.248v3.711c.944.62 2.073.98 3.287.98.668 0 1.31-.11 1.911-.31z">`);
-var Novu2 = (props) => {
+var _tmpl$13 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M3.15789 2.99902V4.99902L0 2.49902L3.15789 -0.000976562V1.99902H5.78947C6.90618 1.99902 7.97714 2.42045 8.76677 3.1706C9.55639 3.92074 10 4.93816 10 5.99902C10 7.05989 9.55639 8.0773 8.76677 8.82745C7.97714 9.5776 6.90618 9.99902 5.78947 9.99902H1.05263V8.99902H5.78947C6.627 8.99902 7.43022 8.68295 8.02244 8.12034C8.61466 7.55773 8.94737 6.79467 8.94737 5.99902C8.94737 5.20337 8.61466 4.44031 8.02244 3.8777C7.43022 3.31509 6.627 2.99902 5.78947 2.99902H3.15789Z"fill=currentColor>`);
+var MarkAsUnarchived = (props) => {
   return (() => {
     var _el$ = _tmpl$13();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$14 = /* @__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="M15.833.833H7.5c-.917 0-1.667.75-1.667 1.667V5H7.5V3.333h8.333v13.334H7.5V15H5.833v2.5c0 .917.75 1.667 1.667 1.667h8.333c.917 0 1.667-.75 1.667-1.667v-15c0-.917-.75-1.667-1.667-1.667zM5.842 11.225L3.717 9.1l-1.059 1.058 3.175 3.175 5.992-5.991-1.058-1.059-4.925 4.942z">`);
-var Push = (props) => {
+var _tmpl$14 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6.8 1.5H1.5C0.947715 1.5 0.5 1.94772 0.5 2.5V9.5C0.5 10.0523 0.947715 10.5 1.5 10.5H8.5C9.05228 10.5 9.5 10.0523 9.5 9.5V4.2"stroke=currentColor stroke-miterlimit=1 stroke-linecap=round></path><circle cx=9.25 cy=1.75 r=1.25 fill=currentColor>`);
+var MarkAsUnread = (props) => {
   return (() => {
     var _el$ = _tmpl$14();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$15 = /* @__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="M15.833 2.5H4.167C3.25 2.5 2.5 3.25 2.5 4.167v11.666c0 .917.75 1.667 1.667 1.667h11.666c.917 0 1.667-.75 1.667-1.667V4.167c0-.917-.75-1.667-1.667-1.667zm0 13.333H4.167V4.167h11.666v11.666zM14.992 7.5l-1.175-1.183-5.492 5.491-2.15-2.141-1.183 1.175 3.333 3.325L14.992 7.5z">`);
-var ReadAll = (props) => {
+var _tmpl$15 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 13 12"><path fill=currentColor d="M9.787.98A5.972 5.972 0 006.5 0c-.668 0-1.31.11-1.911.31L9.187 4.94c.221.222.6.065.6-.248V.98z"></path><path fill=currentColor d="M2.879 1.216A5.99 5.99 0 00.5 6c0 1.134.315 2.195.862 3.1V7.309c0-1.966 2.379-2.946 3.764-1.552l4.995 5.027A5.99 5.99 0 0012.5 6a5.972 5.972 0 00-.862-3.1v1.791c0 1.966-2.379 2.946-3.764 1.552L2.879 1.216z"></path><path fill=currentColor d="M8.411 11.69L3.813 7.06a.351.351 0 00-.6.248v3.711c.944.62 2.073.98 3.287.98.668 0 1.31-.11 1.911-.31z">`);
+var Novu2 = (props) => {
   return (() => {
     var _el$ = _tmpl$15();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$16 = /* @__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="M15.95 10.783c.033-.25.05-.508.05-.783a4.81 4.81 0 00-.059-.783L17.633 7.9a.408.408 0 00.1-.508l-1.6-2.767a.407.407 0 00-.492-.183l-1.991.8a5.885 5.885 0 00-1.35-.784L12 2.342A.403.403 0 0011.6 2H8.4c-.2 0-.359.142-.392.342l-.3 2.116c-.492.2-.942.475-1.35.784l-1.992-.8a.398.398 0 00-.491.183L2.283 7.392c-.1.175-.067.391.1.508l1.692 1.317A4.89 4.89 0 004 10c0 .258.016.533.058.783L2.366 12.1a.408.408 0 00-.1.508l1.6 2.767c.1.183.309.242.492.183l1.992-.8c.416.317.858.584 1.35.784l.3 2.116c.041.2.2.342.4.342h3.2c.2 0 .366-.142.391-.342l.3-2.116c.492-.2.942-.467 1.35-.784l1.992.8c.183.067.392 0 .492-.183l1.6-2.767c.1-.183.058-.391-.1-.508l-1.675-1.317zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z">`);
-var Settings = (props) => {
+var _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.12531 1.8999C3.94958 1.8999 3.80713 2.04235 3.80713 2.21808C3.80713 2.39382 3.94958 2.53627 4.12531 2.53627H6.0344C6.21013 2.53627 6.35258 2.39382 6.35258 2.21808C6.35258 2.04235 6.21013 1.8999 6.0344 1.8999H4.12531Z"fill=currentColor></path><path d="M4.12531 1.8999C3.94958 1.8999 3.80713 2.04235 3.80713 2.21808C3.80713 2.39382 3.94958 2.53627 4.12531 2.53627H6.0344C6.21013 2.53627 6.35258 2.39382 6.35258 2.21808C6.35258 2.04235 6.21013 1.8999 6.0344 1.8999H4.12531Z"stroke=currentColor></path><path d="M2.69329 1.46818H7.30693C7.75127 1.46818 8.11147 1.82839 8.11147 2.27273V13.7273C8.11147 14.1716 7.75127 14.5318 7.30693 14.5318H2.69329C2.24896 14.5318 1.88875 14.1716 1.88875 13.7273V2.27273C1.88875 1.82839 2.24896 1.46818 2.69329 1.46818ZM2.69329 0.85C1.90754 0.85 1.27057 1.48698 1.27057 2.27273V2.95695C1.17568 3.00972 1.11147 3.111 1.11147 3.22727V3.54545C1.11147 3.64155 1.15532 3.7274 1.22411 3.78409C1.15532 3.84078 1.11147 3.92663 1.11147 4.02273V4.65909C1.11147 4.75519 1.15532 4.84104 1.22411 4.89773C1.15532 4.95442 1.11147 5.04027 1.11147 5.13636V6.09091C1.11147 6.20718 1.17568 6.30846 1.27057 6.36123V13.7273C1.27057 14.513 1.90754 15.15 2.69329 15.15H7.30693C8.09268 15.15 8.72966 14.513 8.72966 13.7273V6.36123C8.82454 6.30846 8.88875 6.20718 8.88875 6.09091V4.81818C8.88875 4.70191 8.82454 4.60063 8.72966 4.54786V2.27273C8.72966 1.48698 8.09268 0.85 7.30693 0.85H2.69329Z"fill=currentColor stroke=currentColor stroke-width=0.3>`);
+var Push = (props) => {
   return (() => {
     var _el$ = _tmpl$16();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$17 = /* @__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.667 1.667H3.334c-.917 0-1.667.75-1.667 1.666v15L5 15h11.667c.917 0 1.667-.75 1.667-1.667v-10c0-.916-.75-1.666-1.667-1.666zm0 11.666H4.309l-.975.975V3.333h13.333v10zM5.834 7.5H7.5v1.667H5.834V7.5zm6.666 0h1.667v1.667H12.5V7.5zm-3.333 0h1.667v1.667H9.167V7.5z">`);
-var Sms = (props) => {
+var _tmpl$17 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10 1.75L17.125 5.875V14.125L10 18.25L2.875 14.125V5.875L10 1.75ZM10 3.48325L4.375 6.73975V13.2603L10 16.5167L15.625 13.2603V6.73975L10 3.48325ZM10 13C9.20435 13 8.44129 12.6839 7.87868 12.1213C7.31607 11.5587 7 10.7956 7 10C7 9.20435 7.31607 8.44129 7.87868 7.87868C8.44129 7.31607 9.20435 7 10 7C10.7956 7 11.5587 7.31607 12.1213 7.87868C12.6839 8.44129 13 9.20435 13 10C13 10.7956 12.6839 11.5587 12.1213 12.1213C11.5587 12.6839 10.7956 13 10 13ZM10 11.5C10.3978 11.5 10.7794 11.342 11.0607 11.0607C11.342 10.7794 11.5 10.3978 11.5 10C11.5 9.60218 11.342 9.22064 11.0607 8.93934C10.7794 8.65804 10.3978 8.5 10 8.5C9.60218 8.5 9.22064 8.65804 8.93934 8.93934C8.65804 9.22064 8.5 9.60218 8.5 10C8.5 10.3978 8.65804 10.7794 8.93934 11.0607C9.22064 11.342 9.60218 11.5 10 11.5Z"fill=currentColor>`);
+var Settings = (props) => {
   return (() => {
     var _el$ = _tmpl$17();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$18 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 20 20"fill=none><path fill=currentColor d="M17.1167 4.35833L15.9583 2.95833C15.7333 2.675 15.3917 2.5 15 2.5H5C4.60833 2.5 4.26667 2.675 4.03333 2.95833L2.88333 4.35833C2.64167 4.64167 2.5 5.01667 2.5 5.41667V15.8333C2.5 16.75 3.25 17.5 4.16667 17.5H15.8333C16.75 17.5 17.5 16.75 17.5 15.8333V5.41667C17.5 5.01667 17.3583 4.64167 17.1167 4.35833ZM5.2 4.16667H14.8L15.4917 5H4.51667L5.2 4.16667ZM4.16667 15.8333V6.66667H15.8333V15.8333H4.16667ZM6.66667 11.6667H8.79167V14.1667H11.2083V11.6667H13.3333L10 8.33333L6.66667 11.6667Z">`);
-var Unarchive = (props) => {
+var _tmpl$18 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00051 9.28364C7.76195 9.28364 10 7.20598 10 4.64182C10 2.07766 7.76195 0 5.00051 0C2.23907 0 0.00101462 2.07766 0.00101462 4.64182C0.00101462 5.64829 0.346683 6.57889 0.932561 7.33988C0.895455 7.88663 0.709927 8.37313 0.514634 8.74358C0.407223 8.94889 0.297859 9.11404 0.21779 9.22562C0.176778 9.28141 0.145531 9.32381 0.122096 9.35282C0.110379 9.36621 0.102567 9.37737 0.096708 9.38407L0.0908493 9.39076C0.00101462 9.49342 -0.0243734 9.64517 0.0244497 9.77907C0.0732729 9.91297 0.186543 10 0.313483 10C0.873973 10 1.43837 9.80138 1.90707 9.56929C2.35429 9.34613 2.73511 9.08056 2.96751 8.88641C3.58854 9.14305 4.27597 9.28587 5.00051 9.28587V9.28364ZM1.87582 4.03481C1.87582 3.58179 2.19806 3.21357 2.5945 3.21357H2.96946C3.14132 3.21357 3.28193 3.37425 3.28193 3.57063C3.28193 3.76702 3.14132 3.92769 2.96946 3.92769H2.5945C2.54177 3.92769 2.50076 3.97679 2.50076 4.03481C2.50076 4.07052 2.51638 4.10399 2.54373 4.12408L3.11789 4.56148C3.31904 4.71323 3.43817 4.96987 3.43817 5.2466C3.43817 5.69962 3.11593 6.06784 2.71949 6.06784L2.18829 6.07007C2.01644 6.07007 1.87582 5.9094 1.87582 5.71301C1.87582 5.51663 2.01644 5.35595 2.18829 5.35595H2.71949C2.77222 5.35595 2.81323 5.30685 2.81323 5.24883C2.81323 5.21312 2.79761 5.17965 2.77026 5.15956L2.1961 4.72216C1.99691 4.56818 1.87582 4.31154 1.87582 4.03481ZM7.28153 3.21357H7.65649C7.82834 3.21357 7.96896 3.37425 7.96896 3.57063C7.96896 3.76702 7.82834 3.92769 7.65649 3.92769H7.28153C7.2288 3.92769 7.18779 3.97679 7.18779 4.03481C7.18779 4.07052 7.20341 4.10399 7.23075 4.12408L7.80491 4.56148C8.00411 4.71323 8.12519 4.96987 8.12519 5.2466C8.12519 5.69962 7.80296 6.06784 7.40651 6.06784L6.87532 6.07007C6.70346 6.07007 6.56285 5.9094 6.56285 5.71301C6.56285 5.51663 6.70346 5.35595 6.87532 5.35595H7.40651C7.45924 5.35595 7.50025 5.30685 7.50025 5.24883C7.50025 5.21312 7.48463 5.17965 7.45729 5.15956L6.88313 4.72216C6.68393 4.57041 6.56285 4.31377 6.56285 4.03705C6.56285 3.58402 6.88508 3.2158 7.28153 3.2158V3.21357ZM4.31308 3.35639L5.00051 4.40304L5.68794 3.35639C5.76801 3.23365 5.90862 3.18233 6.03751 3.23142C6.1664 3.28052 6.25038 3.41665 6.25038 3.57063V5.71301C6.25038 5.9094 6.10977 6.07007 5.93791 6.07007C5.76605 6.07007 5.62544 5.9094 5.62544 5.71301V4.64182L5.25048 5.21312C5.19189 5.30239 5.09815 5.35595 5.00051 5.35595C4.90286 5.35595 4.80912 5.30239 4.75053 5.21312L4.37557 4.64182V5.71301C4.37557 5.9094 4.23496 6.07007 4.0631 6.07007C3.89124 6.07007 3.75063 5.9094 3.75063 5.71301V3.57063C3.75063 3.41665 3.83656 3.28052 3.9635 3.23142C4.09044 3.18233 4.23105 3.23365 4.31308 3.35639Z"fill=currentColor>`);
+var Sms = (props) => {
   return (() => {
     var _el$ = _tmpl$18();
     spread(_el$, props, true, true);
     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="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) => {
+var _tmpl$19 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 8"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1.0119 0.348031C1.06274 0.14468 1.26565 0 1.5 0H8.5C8.73435 0 8.93725 0.14468 8.9881 0.348031L9.9881 4.34804C9.996 4.37969 10 4.412 10 4.44444V7.55556C10 7.80102 9.77615 8 9.5 8H0.5C0.22386 8 0 7.80102 0 7.55556V4.44444C0 4.412 0.00399495 4.37969 0.011905 4.34804L1.0119 0.348031ZM1.90108 0.888889L1.12331 4H3.5C3.5 4.7364 4.17155 5.33333 5 5.33333C5.82845 5.33333 6.5 4.7364 6.5 4H8.8767L8.0989 0.888889H1.90108ZM7.292 4.88889C6.9062 5.67373 6.02515 6.22222 5 6.22222C3.97484 6.22222 3.0938 5.67373 2.70802 4.88889H1V7.11111H9V4.88889H7.292Z"fill=currentColor>`);
+var UnreadRead = (props) => {
   return (() => {
     var _el$ = _tmpl$19();
     spread(_el$, props, true, true);
@@ -1198,9 +1379,9 @@ var BellContainer = (props) => {
   const style = useStyle();
   return (() => {
     var _el$ = _tmpl$20();
-    insert(_el$, createComponent(BellIcon, {
+    insert(_el$, createComponent(Bell, {
       get ["class"]() {
-        return style("bellIcon");
+        return style("bellIcon", "nt-size-4");
       }
     }), null);
     insert(_el$, createComponent(Show, {
@@ -1209,17 +1390,17 @@ var BellContainer = (props) => {
       },
       get children() {
         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")));
+        effect(() => className(_el$2, style("bellDot", "nt-absolute nt-top-0 nt-right-0 nt-block nt-size-2 nt-transform nt-bg-counter nt-rounded-full nt-border nt-border-background")));
         return _el$2;
       }
     }), null);
-    effect(() => 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`)));
+    effect(() => className(_el$, style("bellContainer", `nt-size-4 nt-flex nt-justify-center nt-items-center nt-relative nt-text-foreground nt-cursor-pointer`)));
     return _el$;
   })();
 };
 
 // src/ui/components/elements/Bell/Bell.tsx
-var Bell = (props) => {
+var Bell2 = (props) => {
   const {
     totalUnreadCount
   } = useTotalUnreadCount();
@@ -1248,7 +1429,7 @@ function isBrowser() {
 }
 
 // src/ui/components/elements/Footer.tsx
-var _tmpl$21 = /* @__PURE__ */ template(`<div class="nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-pt-9 nt-pb-3 nt-text-foreground-alpha-200"><a target=_blank class="nt-block nt-w-full nt-flex nt-items-center nt-gap-1 nt-justify-center"><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-py-3 nt-text-foreground-alpha-400"><a target=_blank class="nt-w-full nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
 var Footer = () => {
   const {
     hideBranding
@@ -1258,8 +1439,10 @@ var Footer = () => {
       return !hideBranding();
     },
     get children() {
-      var _el$ = _tmpl$21(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-      insert(_el$2, createComponent(Novu2, {}), _el$3);
+      var _el$ = _tmpl$21(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+      insert(_el$2, createComponent(Novu2, {
+        "class": "nt-size-4"
+      }), _el$4);
       effect(() => setAttribute(_el$2, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
       return _el$;
     }
@@ -1272,21 +1455,21 @@ function getCurrentDomain() {
   return "";
 }
 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", {
+var buttonVariants = cva(cn('nt-inline-flex nt-gap-4 nt-items-center nt-justify-center nt-whitespace-nowrap nt-text-sm nt-font-medium nt-transition-colors disabled:nt-pointer-events-none disabled:nt-opacity-50 after:nt-absolute after:nt-content-[""] before:nt-content-[""] before:nt-absolute [&_svg]:nt-pointer-events-none [&_svg]:nt-shrink-0', `focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
   variants: {
     variant: {
-      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-alpha-50",
-      ghost: "hover:nt-bg-neutral-alpha-50",
+      default: "nt-bg-gradient-to-b nt-from-20% nt-from-primary-foreground-alpha-200 nt-to-transparent nt-bg-primary nt-text-primary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-primary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-primary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-primary-foreground-alpha-50 after:nt-to-transparent",
+      secondary: "nt-bg-secondary nt-text-secondary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-secondary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-secondary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-secondary-foreground-alpha-50 after:nt-to-transparent",
+      ghost: "hover:nt-bg-neutral-alpha-100 nt-text-foreground-alpha-600 hover:nt-text-foreground-alpha-800",
       unstyled: ""
     },
     size: {
       none: "",
-      icon: "nt-p-1",
-      default: "nt-h-8 nt-px-3",
-      sm: "nt-h-7 nt-rounded-md nt-px-3",
-      lg: "nt-h-10 nt-px-8"
+      iconSm: "nt-p-1 nt-rounded-md after:nt-rounded-md before:nt-rounded-md focus-visible:nt-rounded-md",
+      icon: "nt-p-2.5 nt-rounded-xl before:nt-rounded-xl after:nt-rounded-xl focus-visible:nt-rounded-xl",
+      default: "nt-px-2 nt-py-1 nt-rounded-lg focus-visible:nt-rounded-lg before:nt-rounded-lg after:nt-rounded-lg",
+      sm: "nt-px-1 nt-py-px nt-rounded-md nt-text-xs nt-px-1 before:nt-rounded-md focus-visible:nt-rounded-md after:nt-rounded-md",
+      lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-lg after:nt-rounded-lg focus-visible:nt-rounded-lg"
     }
   },
   defaultVariants: {
@@ -1344,24 +1527,37 @@ var PopoverClose = (props) => {
   })();
 };
 delegateEvents(["click"]);
-var Motion = new Proxy(Motion$1, {
-  get: (_, tag) => (props) => {
-    const {
-      animations
-    } = useAppearance();
-    return createComponent(Motion$1, mergeProps(props, {
-      tag,
-      get transition() {
-        return animations() ? props.transition : {
-          duration: 0
-        };
+var _tmpl$24 = /* @__PURE__ */ template(`<div>`);
+var Root = (props) => {
+  const [_, rest] = splitProps(props, ["class"]);
+  const {
+    id
+  } = useAppearance();
+  const style = useStyle();
+  const {
+    hideBranding
+  } = useInboxContext();
+  return [createComponent(Show, {
+    get when() {
+      return !hideBranding();
+    },
+    children: new Comment(" Powered by Novu - https://novu.co ")
+  }), (() => {
+    var _el$ = _tmpl$24();
+    spread(_el$, mergeProps({
+      get id() {
+        return `novu-root-${id()}`;
+      },
+      get ["class"]() {
+        return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
       }
-    }));
-  }
-});
+    }, rest), false, false);
+    return _el$;
+  })()];
+};
 var PopoverContext = createContext(void 0);
 function PopoverRoot(props) {
-  var _a, _b;
+  var _a;
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = createSignal((_a = props.open) != null ? _a : false);
   const onOpenChange = () => {
     var _a2;
@@ -1374,23 +1570,19 @@ function PopoverRoot(props) {
   const [reference, setReference] = createSignal(null);
   const [floating, setFloating] = createSignal(null);
   const position = useFloating(reference, floating, {
-    placement: props.placement || "bottom-start",
-    whileElementsMounted: (reference2, floating2, update) => autoUpdate(reference2, floating2, update, {
-      elementResize: false,
-      ancestorScroll: false,
-      animationFrame: false,
-      layoutShift: false
-    }),
-    middleware: [offset((_b = props.offset) != null ? _b : 10), flip({
-      fallbackPlacements: props.fallbackPlacements || ["top-start"]
+    strategy: "fixed",
+    placement: props.placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(10), flip({
+      fallbackPlacements: props.fallbackPlacements
     }), shift()]
   });
   const floatingStyles = createMemo(() => {
-    var _a2, _b2;
+    var _a2, _b;
     return {
       position: position.strategy,
       top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
-      left: `${(_b2 = position.x) != null ? _b2 : 0}px`
+      left: `${(_b = position.x) != null ? _b : 0}px`
     };
   });
   const onClose = () => {
@@ -1424,7 +1616,8 @@ function usePopover() {
 }
 
 // src/ui/components/primitives/Popover/PopoverContent.tsx
-var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-z-10 nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden");
+var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
+var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-z-10 nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border");
 var PopoverContentBody = (props) => {
   const {
     open,
@@ -1445,29 +1638,25 @@ var PopoverContentBody = (props) => {
       removeActive(floatingEl);
     });
   });
-  return createComponent(Motion.div, mergeProps({
-    ref: setFloating,
-    get ["class"]() {
-      return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "popoverContent", popoverContentVariants());
-    },
-    get style() {
-      return floatingStyles();
-    },
-    get ["data-open"]() {
-      return open();
-    },
-    animate: {
-      opacity: [0, 1],
-      y: [-6, 0]
-    },
-    transition: {
-      duration: 0.1,
-      easing: "ease-out"
-    }
-  }, rest));
-};
-var PopoverContent = (props) => {
-  const [local, rest] = splitProps(props, ["portal"]);
+  return (() => {
+    var _el$ = _tmpl$25();
+    use(setFloating, _el$);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "popoverContent", popoverContentVariants());
+      },
+      get style() {
+        return floatingStyles();
+      },
+      get ["data-open"]() {
+        return open();
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
+};
+var PopoverContent = (props) => {
+  const [local, rest] = splitProps(props, ["portal"]);
   const {
     open,
     onClose,
@@ -1530,7 +1719,7 @@ var PopoverContent = (props) => {
     }
   });
 };
-var _tmpl$24 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<button>`);
 var PopoverTrigger = (props) => {
   const {
     setReference,
@@ -1554,7 +1743,7 @@ var PopoverTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$24();
+    var _el$ = _tmpl$26();
     _el$.$$click = handleClick;
     use(setReference, _el$);
     spread(_el$, mergeProps({
@@ -1586,7 +1775,7 @@ var Popover = {
    */
   Close: PopoverClose
 };
-var dropdownContentVariants = () => "nt-w-max nt-rounded-xl nt-p-1 nt-overflow-hidden nt-flex nt-flex-col nt-min-w-52 nt-shadow-dropdown nt-z-10 nt-bg-background";
+var dropdownContentVariants = () => "nt-w-max nt-rounded-xl nt-border nt-border-border nt-p-1 nt-text-sm nt-overflow-hidden nt-flex nt-flex-col nt-min-w-52 nt-shadow-dropdown nt-z-10 nt-bg-background nt-animate-in nt-slide-in-from-top-2 nt-fade-in";
 var DropdownContent = (props) => {
   const style = useStyle();
   const [local, rest] = splitProps(props, ["appearanceKey"]);
@@ -1596,7 +1785,7 @@ var DropdownContent = (props) => {
     }
   }, rest));
 };
-var dropdownItemVariants = () => "focus:nt-outline-none nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-3";
+var dropdownItemVariants = () => "focus:nt-outline-none nt-text-sm nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-2";
 var DropdownItem = (props) => {
   const style = useStyle();
   const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class"]);
@@ -1654,25 +1843,21 @@ var Dropdown = {
    */
   Item: DropdownItem
 };
-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$25();
-    var _ref$ = local.ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsList", tabsListVariants());
+var Motion = new Proxy(Motion$1, {
+  get: (_, tag) => (props) => {
+    const {
+      animations
+    } = useAppearance();
+    return createComponent(Motion$1, mergeProps(props, {
+      tag,
+      get transition() {
+        return animations() ? props.transition : {
+          duration: 0
+        };
       }
-    }, rest), false, true);
-    insert(_el$, () => local.children);
-    return _el$;
-  })(), _tmpl$26()];
-};
+    }));
+  }
+});
 var useKeyboardNavigation = ({
   activeTab,
   setActiveTab,
@@ -1765,7 +1950,7 @@ var TabsRoot = (props) => {
       use(setTabsContainer, _el$);
       spread(_el$, mergeProps({
         get ["class"]() {
-          return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsRoot", tabsRootVariants());
+          return style(local.appearanceKey || "tabsRoot", cn(tabsRootVariants(), local.class));
         }
       }, rest), false, true);
       insert(_el$, () => local.children);
@@ -1807,7 +1992,26 @@ var TabsContent = (props) => {
     }
   });
 };
-var tabsTriggerVariants = () => `nt-relative nt-transition nt-outline-none nt-text-foreground-alpha-600 focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-ring-primary focus-visible:nt-ring-offset-2 nt-pb-[0.625rem] after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 after:nt-w-full after:nt-h-[2px] after:nt-border-b-2 data-[state=active]:after:nt-border-primary data-[state=active]:nt-text-foreground after:nt-border-b-transparent`;
+var _tmpl$29 = /* @__PURE__ */ template(`<div role=tablist>`);
+var _tmpl$210 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
+var tabsListVariants = () => "nt-flex nt-gap-6";
+var TabsList = (props) => {
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "ref", "children"]);
+  const style = useStyle();
+  return [(() => {
+    var _el$ = _tmpl$29();
+    var _ref$ = local.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return style(local.appearanceKey || "tabsList", cn(tabsListVariants(), local.class));
+      }
+    }, rest), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })(), _tmpl$210()];
+};
+var tabsTriggerVariants = () => cn("nt-relative nt-transition nt-outline-none nt-text-foreground-alpha-600 nt-pb-[0.625rem]", `after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 after:nt-w-full after:nt-h-[2px]`, "after:nt-transition-opacity after:nt-duration-200", "data-[state=active]:after:nt-border-b-2 data-[state=active]:after:nt-border-primary data-[state=active]:after:nt-opacity-100", "data-[state=active]:nt-text-foreground after:nt-border-b-transparent after:nt-opacity-0", "focus-visible:nt-outline-none focus-visible:nt-rounded-lg focus-visible:nt-ring-2 focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2");
 var TabsTrigger = (props) => {
   const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "ref", "onClick", "children"]);
   const style = useStyle();
@@ -1874,17 +2078,16 @@ var inboxFilterLocalizationKeys = {
   unread: "inbox.filters.labels.unread",
   archived: "inbox.filters.labels.archived"
 };
-var _tmpl$29 = /* @__PURE__ */ template(`<span><span></span><span>`);
-var _tmpl$210 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<span><span></span><span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
-  icon: Inbox
+  icon: UnreadRead
 }, {
   status: "unread" /* UNREAD */,
-  icon: Unread
+  icon: MarkAsUnread
 }, {
   status: "archived" /* ARCHIVED */,
-  icon: Archive
+  icon: MarkAsArchived
 }];
 var StatusOptions = (props) => {
   return createComponent(For, {
@@ -1919,11 +2122,11 @@ var StatusItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        var _el$ = _tmpl$30(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         insert(_el$2, () => props.icon());
         insert(_el$3, () => t(props.localizationKey));
         effect((_p$) => {
-          var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon"), _v$3 = props.localizationKey, _v$4 = style("inboxStatus__dropdownItemLabel");
+          var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon", "nt-size-3"), _v$3 = props.localizationKey, _v$4 = style("inboxStatus__dropdownItemLabel");
           _v$ !== _p$.e && className(_el$, _p$.e = _v$);
           _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
           _v$3 !== _p$.a && setAttribute(_el$3, "data-localization", _p$.a = _v$3);
@@ -1941,10 +2144,11 @@ var StatusItem = (props) => {
           return props.isSelected;
         },
         get children() {
-          var _el$4 = _tmpl$210();
-          insert(_el$4, createComponent(Check, {}));
-          effect(() => className(_el$4, style("inboxStatus__dropdownItemRight__icon")));
-          return _el$4;
+          return createComponent(Check, {
+            get ["class"]() {
+              return style("inboxStatus__dropdownItemCheck__icon", "nt-size-3");
+            }
+          });
         }
       })];
     }
@@ -1952,7 +2156,7 @@ var StatusItem = (props) => {
 };
 
 // src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
-var _tmpl$30 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$31 = /* @__PURE__ */ template(`<span>`);
 var StatusDropdown = () => {
   const style = useStyle();
   const {
@@ -1969,7 +2173,7 @@ var StatusDropdown = () => {
           return style("inboxStatus__dropdownTrigger", cn(buttonVariants({
             variant: "unstyled",
             size: "none"
-          }), "nt-gap-2"));
+          }), "nt-gap-0.5"));
         },
         asChild: (triggerProps) => createComponent(Button, mergeProps({
           variant: "unstyled",
@@ -1977,10 +2181,10 @@ var StatusDropdown = () => {
         }, triggerProps, {
           get children() {
             return [(() => {
-              var _el$ = _tmpl$30();
+              var _el$ = _tmpl$31();
               insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               effect((_p$) => {
-                var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-xl nt-font-semibold");
+                var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
                 _v$ !== _p$.e && setAttribute(_el$, "data-localization", _p$.e = _v$);
                 _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
                 return _p$;
@@ -1989,12 +2193,11 @@ var StatusDropdown = () => {
                 t: void 0
               });
               return _el$;
-            })(), (() => {
-              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;
-            })()];
+            })(), createComponent(ArrowDropDown, {
+              get ["class"]() {
+                return style("inboxStatus__dropdownItemRight__icon", "nt-text-foreground-alpha-600 nt-size-4");
+              }
+            })];
           }
         }))
       }), createComponent(Dropdown.Content, {
@@ -2011,14 +2214,49 @@ var StatusDropdown = () => {
     }
   });
 };
+
+// src/ui/api/hooks/useArchiveAll.ts
+var useArchiveAll = (props) => {
+  const novu = useNovu();
+  const archiveAll = (..._0) => __async(void 0, [..._0], function* ({ tags } = {}) {
+    var _a, _b;
+    try {
+      yield novu.notifications.archiveAll({ tags });
+      (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
+    } catch (error) {
+      (_b = void 0 ) == null ? void 0 : _b.call(props, error);
+    }
+  });
+  return { archiveAll };
+};
+
+// src/ui/api/hooks/useArchiveAllRead.ts
+var useArchiveAllRead = (props) => {
+  const novu = useNovu();
+  const archiveAllRead = (..._0) => __async(void 0, [..._0], function* ({ tags } = {}) {
+    var _a, _b;
+    try {
+      yield novu.notifications.archiveAllRead({ tags });
+      (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
+    } catch (error) {
+      (_b = void 0 ) == null ? void 0 : _b.call(props, error);
+    }
+  });
+  return { archiveAllRead };
+};
 var useNotificationsInfiniteScroll = (props) => {
   const novu = useNovu();
   let filter = __spreadValues({}, props.options());
-  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll((offset3) => __async(void 0, null, function* () {
-    var _a, _b;
-    const { data: data2 } = yield novu.notifications.list(__spreadProps(__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 };
-  }));
+  const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll(
+    (after) => __async(void 0, null, function* () {
+      var _a, _b;
+      const { data: data2 } = yield novu.notifications.list(__spreadProps(__spreadValues({}, props.options() || {}), { after }));
+      return { data: (_a = data2 == null ? void 0 : data2.notifications) != null ? _a : [], hasMore: (_b = data2 == null ? void 0 : data2.hasMore) != null ? _b : false };
+    }),
+    {
+      paginationField: "id"
+    }
+  );
   onMount(() => {
     const listener = ({ data: data2 }) => {
       if (!data2 || !isSameFilter(filter, data2.filter)) {
@@ -2029,19 +2267,19 @@ var useNotificationsInfiniteScroll = (props) => {
     const cleanup = novu.on("notifications.list.updated", listener);
     onCleanup(() => cleanup());
   });
-  createEffect(() => {
+  createEffect(() => __async(void 0, null, function* () {
     const newFilter = __spreadValues({}, props.options());
     if (isSameFilter(filter, newFilter)) {
       return;
     }
     novu.notifications.clearCache();
-    reset();
+    yield reset();
     filter = newFilter;
-  });
-  const refetch = ({ filter: filter2 }) => {
+  }));
+  const refetch = (_0) => __async(void 0, [_0], function* ({ filter: filter2 }) {
     novu.notifications.clearCache({ filter: filter2 });
-    reset();
-  };
+    yield reset();
+  });
   return { data, initialLoading, setEl, end, refetch };
 };
 var usePreferences = (options) => {
@@ -2087,38 +2325,8 @@ var useReadAll = (props) => {
   return { readAll };
 };
 
-// src/ui/api/hooks/useArchiveAll.ts
-var useArchiveAll = (props) => {
-  const novu = useNovu();
-  const archiveAll = (..._0) => __async(void 0, [..._0], function* ({ tags } = {}) {
-    var _a, _b;
-    try {
-      yield novu.notifications.archiveAll({ tags });
-      (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
-    } catch (error) {
-      (_b = void 0 ) == null ? void 0 : _b.call(props, error);
-    }
-  });
-  return { archiveAll };
-};
-
-// src/ui/api/hooks/useArchiveAllRead.ts
-var useArchiveAllRead = (props) => {
-  const novu = useNovu();
-  const archiveAllRead = (..._0) => __async(void 0, [..._0], function* ({ tags } = {}) {
-    var _a, _b;
-    try {
-      yield novu.notifications.archiveAllRead({ tags });
-      (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
-    } catch (error) {
-      (_b = void 0 ) == null ? void 0 : _b.call(props, error);
-    }
-  });
-  return { archiveAllRead };
-};
-
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
-var _tmpl$31 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<span>`);
 var MoreActionsOptions = () => {
   const {
     filter
@@ -2137,19 +2345,19 @@ var MoreActionsOptions = () => {
     onClick: () => readAll({
       tags: filter().tags
     }),
-    icon: ReadAll
+    icon: MarkAsRead
   }), createComponent(ActionsItem, {
     localizationKey: "notifications.actions.archiveAll",
     onClick: () => archiveAll({
       tags: filter().tags
     }),
-    icon: Archive
+    icon: MarkAsArchived
   }), createComponent(ActionsItem, {
     localizationKey: "notifications.actions.archiveRead",
     onClick: () => archiveAllRead({
       tags: filter().tags
     }),
-    icon: ArchiveRead
+    icon: MarkAsArchivedRead
   })];
 };
 var ActionsItem = (props) => {
@@ -2166,12 +2374,12 @@ var ActionsItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$31();
+        var _el$ = _tmpl$32();
         insert(_el$, () => props.icon());
-        effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-text-foreground-alpha-600")));
+        effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-3")));
         return _el$;
       })(), (() => {
-        var _el$2 = _tmpl$31();
+        var _el$2 = _tmpl$32();
         insert(_el$2, () => t(props.localizationKey));
         effect((_p$) => {
           var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel");
@@ -2206,13 +2414,13 @@ var MoreActionsDropdown = () => {
               return style("moreActions__dropdownTrigger");
             },
             asChild: (triggerProps) => createComponent(Button, mergeProps({
-              variant: "icon",
-              size: "icon"
+              variant: "ghost",
+              size: "iconSm"
             }, triggerProps, {
               get children() {
                 return createComponent(Dots, {
                   get ["class"]() {
-                    return style("moreActions__dots");
+                    return style("moreActions__dots", "nt-size-5");
                   }
                 });
               }
@@ -2230,11 +2438,11 @@ var MoreActionsDropdown = () => {
 };
 
 // src/ui/components/elements/Header/ActionsContainer.tsx
-var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$32();
+    var _el$ = _tmpl$33();
     insert(_el$, createComponent(MoreActionsDropdown, {}), null);
     insert(_el$, createComponent(Show, {
       get when() {
@@ -2242,99 +2450,68 @@ var ActionsContainer = (props) => {
       },
       children: (showPreferences) => createComponent(Button, {
         appearanceKey: "preferences__button",
-        variant: "icon",
-        size: "icon",
+        variant: "ghost",
+        size: "iconSm",
         get onClick() {
           return showPreferences();
         },
         get children() {
-          return createComponent(Settings, {});
+          return createComponent(Settings, {
+            get ["class"]() {
+              return style("preferences__icon", "nt-size-5");
+            }
+          });
         }
       })
     }), null);
-    effect(() => className(_el$, style("moreActionsContainer", "nt-flex nt-gap-2")));
+    effect(() => className(_el$, style("moreActionsContainer", "nt-flex nt-gap-3")));
     return _el$;
   })();
 };
 
 // src/ui/components/elements/Header/Header.tsx
-var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
 var Header = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$33();
+    var _el$ = _tmpl$34();
     insert(_el$, createComponent(StatusDropdown, {}), null);
     insert(_el$, createComponent(ActionsContainer, {
       get showPreferences() {
         return props.navigateToPreferences;
       }
     }), null);
-    effect(() => className(_el$, style("inboxHeader", cn("nt-flex nt-shrink-0 nt-justify-between nt-items-center nt-w-full nt-py-5 nt-px-6"))));
-    return _el$;
-  })();
-};
-var _tmpl$34 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<button>`);
-var PreferencesHeader = (props) => {
-  const style = useStyle();
-  const {
-    t
-  } = useLocalization();
-  return (() => {
-    var _el$ = _tmpl$34(), _el$2 = _el$.firstChild;
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.navigateToNotifications;
-      },
-      children: (navigateToNotifications) => (() => {
-        var _el$3 = _tmpl$211();
-        addEventListener(_el$3, "click", navigateToNotifications(), true);
-        insert(_el$3, createComponent(ArrowLeft, {}));
-        effect(() => className(_el$3, style("preferencesHeader__back__button", "nt-h-6 nt-w-6 nt-flex nt-justify-center nt-items-center nt-rounded-md nt-relative hover:nt-bg-foreground-alpha-50 focus:nt-bg-foreground-alpha-50 nt-text-foreground-alpha-600")));
-        return _el$3;
-      })()
-    }), _el$2);
-    insert(_el$2, () => t("preferences.title"));
-    effect((_p$) => {
-      var _v$ = style("preferencesHeader", "nt-flex nt-items-center nt-py-5 nt-px-6 nt-gap-2"), _v$2 = style("preferencesHeader__title", "nt-text-xl nt-font-semibold");
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
+    effect(() => className(_el$, style("inboxHeader", cn("nt-flex nt-bg-neutral-alpha-25 nt-shrink-0 nt-justify-between nt-items-center nt-w-full nt-pb-2 nt-pt-2.5 nt-px-4"))));
     return _el$;
   })();
 };
-delegateEvents(["click"]);
 var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
-var Root = (props) => {
-  const [_, rest] = splitProps(props, ["class"]);
-  const {
-    id
-  } = useAppearance();
+var Collapsible = (props) => {
   const style = useStyle();
-  const {
-    hideBranding
-  } = useInboxContext();
-  return [createComponent(Show, {
-    get when() {
-      return !hideBranding();
-    },
-    children: new Comment(" Powered by Novu - https://novu.co ")
-  }), (() => {
+  let contentRef;
+  const [enableTransition, setEnableTransition] = createSignal(false);
+  createEffect(() => {
+    requestAnimationFrame(() => setEnableTransition(true));
+  });
+  return (() => {
     var _el$ = _tmpl$35();
+    var _ref$ = contentRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : contentRef = _el$;
     spread(_el$, mergeProps({
-      get id() {
-        return `novu-root-${id()}`;
-      },
       get ["class"]() {
-        return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
+        return style("collapsible", props.class);
+      },
+      get style() {
+        return {
+          overflow: "hidden",
+          opacity: props.open ? 1 : 0,
+          transition: enableTransition() ? "height 250ms ease-in-out, opacity 250ms ease-in-out" : "none",
+          height: props.open ? `${contentRef == null ? void 0 : contentRef.scrollHeight}px` : "0px"
+        };
       }
-    }, rest), false, false);
+    }, props), false, false);
     return _el$;
-  })()];
+  })();
 };
 var _tmpl$36 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
 var Switch = (props) => {
@@ -2345,7 +2522,7 @@ var Switch = (props) => {
       props.onChange(e.target.checked);
     });
     effect((_p$) => {
-      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;
+      var _v$ = style("channelSwitch", `nt-relative nt-inline-flex nt-cursor-pointer nt-items-center`), _v$2 = style("channelSwitchThumb", `nt-peer nt-h-4 nt-w-7 nt-rounded-full peer-checked:nt-shadow-none peer-checked:nt-border-neutral-alpha-400 nt-bg-neutral-alpha-300 after:nt-absolute after:nt-top-0.5 after:nt-size-3 after:nt-left-0.5 after:nt-rounded-full 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 shadow-sm`), _v$3 = props.checked;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
       _v$3 !== _p$.a && setAttribute(_el$3, "data-checked", _p$.a = _v$3);
@@ -2371,15 +2548,17 @@ var ChannelRow = (props) => {
       workflowId: props.workflowId
     });
   });
-  const onChange = (checked) => {
-    updatePreference(checked);
-  };
+  const onChange = (checked) => __async(void 0, null, function* () {
+    yield updatePreference(checked);
+  });
   return (() => {
     var _el$ = _tmpl$37(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
     insert(_el$3, createComponent(ChannelIcon, {
+      appearanceKey: "channel__icon",
       get channel() {
         return props.channel;
-      }
+      },
+      "class": "nt-size-3"
     }));
     insert(_el$4, () => getLabel(props.channel));
     insert(_el$5, createComponent(Switch, {
@@ -2389,33 +2568,56 @@ var ChannelRow = (props) => {
       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 = 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");
+      var _v$ = style("channelContainer", "nt-flex nt-justify-between nt-items-center nt-gap-2 data-[disabled=true]:nt-text-foreground-alpha-600"), _v$2 = style("channelLabelContainer", "nt-flex nt-items-center nt-gap-2 nt-text-foreground"), _v$3 = style("channelIconContainer", "nt-p-1 nt-rounded-md nt-bg-neutral-alpha-25 nt-text-foreground-alpha-300"), _v$4 = style("channelLabel", "nt-text-sm nt-font-semibold"), _v$5 = style("channelSwitchContainer", "nt-flex nt-items-center");
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _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);
+      _v$3 !== _p$.a && className(_el$3, _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);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0
+      o: void 0,
+      i: void 0
     });
     return _el$;
   })();
 };
 var ChannelIcon = (props) => {
+  const style = useStyle();
   switch (props.channel) {
     case "in_app" /* IN_APP */:
-      return createComponent(InApp, {});
+      return createComponent(InApp, {
+        get ["class"]() {
+          return style(props.appearanceKey, props.class);
+        }
+      });
     case "email" /* EMAIL */:
-      return createComponent(Email, {});
+      return createComponent(Email, {
+        get ["class"]() {
+          return style(props.appearanceKey, props.class);
+        }
+      });
     case "push" /* PUSH */:
-      return createComponent(Push, {});
+      return createComponent(Push, {
+        get ["class"]() {
+          return style(props.appearanceKey, props.class);
+        }
+      });
     case "sms" /* SMS */:
-      return createComponent(Sms, {});
+      return createComponent(Sms, {
+        get ["class"]() {
+          return style(props.appearanceKey, props.class);
+        }
+      });
     case "chat" /* CHAT */:
-      return createComponent(Chat, {});
+      return createComponent(Chat, {
+        get ["class"]() {
+          return style(props.appearanceKey, props.class);
+        }
+      });
     default:
       return null;
   }
@@ -2437,11 +2639,12 @@ var getLabel = (channel) => {
   }
 };
 var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$211 = /* @__PURE__ */ template(`<div><div></div><div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
     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))));
+    effect(() => className(_el$, style(props.appearanceKey, cn("nt-w-full nt-h-3 nt-rounded nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
     return _el$;
   })();
 };
@@ -2449,61 +2652,162 @@ var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
     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))));
+    effect(() => className(_el$2, style(props.appearanceKey, cn("nt-size-8 nt-rounded-lg nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
     return _el$2;
   })();
 };
-
-// src/ui/components/elements/Preferences/LoadingScreen.tsx
-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() {
-      return Array.from({
-        length: 8
-      });
-    },
-    children: () => createComponent(LoadingSkeleton, {})
-  });
-};
-var LoadingSkeleton = () => {
+var SkeletonSwitch = (props) => {
   const style = useStyle();
   return (() => {
-    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"
-    }), null);
-    insert(_el$2, createComponent(SkeletonText, {
-      appearanceKey: "skeletonText",
-      "class": "nt-w-1/3"
-    }), null);
-    insert(_el$3, createComponent(ArrowDropDown, {}));
-    effect(() => className(_el$, style("preferencesLoadingContainer", "nt-p-4 nt-flex nt-gap-1 nt-items-center nt-self-stretch nt-animate-pulse")));
-    return _el$;
+    var _el$3 = _tmpl$211(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    effect((_p$) => {
+      var _v$ = style(props.appearanceKey, cn("nt-relative nt-inline-flex nt-items-center", props.class)), _v$2 = style(props.appearanceKey, "nt-h-4 nt-w-7 nt-rounded-full nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent"), _v$3 = style(props.thumbAppearanceKey, "nt-absolute nt-top-0.5 nt-left-0.5 nt-size-3 nt-rounded-full nt-bg-background nt-shadow");
+      _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$3;
   })();
 };
 
-// src/ui/components/elements/Preferences/Preferences.tsx
-var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
-var Preferences = () => {
-  var _a;
+// src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
+var _tmpl$39 = /* @__PURE__ */ template(`<div>`);
+var channelIcons = [InApp, Email, Sms, Push, Chat];
+var PreferencesListSkeleton = (props) => {
   const style = useStyle();
   const {
-    preferencesFilter
-  } = useInboxContext();
-  const {
-    preferences,
-    loading
-  } = usePreferences({
-    tags: (_a = preferencesFilter()) == null ? void 0 : _a.tags
-  });
-  const allPreferences = createMemo(() => {
-    var _a2, _b;
-    const globalPreference = (_a2 = preferences()) == null ? void 0 : _a2.find((preference) => preference.level === "global" /* GLOBAL */);
-    const workflowPreferences = (_b = preferences()) == null ? void 0 : _b.filter((preference) => preference.level === "template" /* TEMPLATE */);
+    t
+  } = useLocalization();
+  return (() => {
+    var _el$ = _tmpl$39();
+    insert(_el$, createComponent(Motion.div, {
+      get animate() {
+        return {
+          scale: props.loading ? 1 : 0.7
+        };
+      },
+      transition: {
+        duration: 0.6,
+        easing: [0.39, 0.24, 0.3, 1],
+        delay: 0.3
+      },
+      get ["class"]() {
+        return style("preferencesList__skeleton", "nt-flex nt-relative nt-mx-auto nt-flex-col nt-w-full nt-mb-4");
+      },
+      get children() {
+        return [memo(() => Array.from({
+          length: 5
+        }).map((_, i) => {
+          const Icon = channelIcons[i];
+          return createComponent(Motion.div, {
+            get animate() {
+              return {
+                marginBottom: props.loading ? 0 : "16px",
+                borderWidth: props.loading ? 0 : "1px",
+                borderRadius: props.loading ? 0 : "var(--nv-radius-lg)"
+              };
+            },
+            transition: {
+              duration: 0.5,
+              delay: 0.3,
+              easing: "ease-in-out"
+            },
+            get ["class"]() {
+              return style("preferencesList__skeletonContent", "nt-flex nt-border-neutral-alpha-50 nt-items-center nt-gap-3 nt-p-3 nt-bg-neutral-alpha-25");
+            },
+            get children() {
+              return [createComponent(Icon, {
+                get ["class"]() {
+                  return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
+                }
+              }), (() => {
+                var _el$3 = _tmpl$39();
+                insert(_el$3, createComponent(SkeletonText, {
+                  appearanceKey: "notificationList__skeletonText",
+                  "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
+                }), null);
+                insert(_el$3, createComponent(SkeletonText, {
+                  appearanceKey: "preferencesList__skeletonText",
+                  "class": "nt-h-2 nt-w-2/3 nt-bg-neutral-alpha-50 nt-rounded"
+                }), null);
+                effect(() => className(_el$3, style("preferencesList__skeletonItem", "nt-flex nt-flex-col nt-gap-2 nt-flex-1")));
+                return _el$3;
+              })(), createComponent(SkeletonSwitch, {
+                appearanceKey: "preferencesList__skeletonSwitch",
+                thumbAppearanceKey: "preferencesList__skeletonSwitchThumb"
+              })];
+            }
+          });
+        })), (() => {
+          var _el$2 = _tmpl$39();
+          effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
+          return _el$2;
+        })()];
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !props.loading;
+      },
+      get children() {
+        return createComponent(Motion.p, {
+          initial: {
+            opacity: 0,
+            y: -4,
+            filter: "blur(4px)"
+          },
+          get animate() {
+            return {
+              opacity: props.loading ? 0 : 1,
+              y: 0,
+              filter: "blur(0px)"
+            };
+          },
+          transition: {
+            duration: 0.7,
+            easing: [0.39, 0.24, 0.3, 1],
+            delay: 0.6
+          },
+          get ["class"]() {
+            return style("preferencesListEmptyNotice"), "nt-text-center";
+          },
+          "data-localization": "preferences.emptyNotice",
+          get children() {
+            return t("preferences.emptyNotice");
+          }
+        });
+      }
+    }), null);
+    effect(() => className(_el$, style("preferencesListEmptyNoticeContainer", "nt-flex nt-flex-col nt-items-center nt-h-fit nt-w-full nt-text-sm nt-text-foreground-alpha-400 nt-text-center")));
+    return _el$;
+  })();
+};
+
+// src/ui/components/elements/Preferences/Preferences.tsx
+var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
+var Preferences = () => {
+  var _a;
+  const style = useStyle();
+  const {
+    preferencesFilter
+  } = useInboxContext();
+  const {
+    preferences,
+    loading
+  } = usePreferences({
+    tags: (_a = preferencesFilter()) == null ? void 0 : _a.tags
+  });
+  const allPreferences = createMemo(() => {
+    var _a2, _b;
+    const globalPreference = (_a2 = preferences()) == null ? void 0 : _a2.find((preference) => preference.level === "global" /* GLOBAL */);
+    const workflowPreferences = (_b = preferences()) == null ? void 0 : _b.filter((preference) => preference.level === "template" /* TEMPLATE */);
     const workflowPreferencesIds = workflowPreferences == null ? void 0 : workflowPreferences.map((preference) => {
       var _a3;
       return (_a3 = preference.workflow) == null ? void 0 : _a3.id;
@@ -2523,41 +2827,42 @@ var Preferences = () => {
       }, {}));
     });
   });
-  const optimisticUpdate = (preference) => ({
+  const optimisticUpdate = (preference) => (_0) => __async(void 0, [_0], function* ({
     channel,
     enabled
-  }) => {
-    preference == null ? void 0 : preference.update({
+  }) {
+    yield preference == null ? void 0 : preference.update({
       channels: {
         [channel]: enabled
       }
     });
-  };
+  });
   return (() => {
     var _el$ = _tmpl$40();
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return loading();
+    insert(_el$, createComponent(PreferencesRow, {
+      localizationKey: "preferences.global",
+      get channels() {
+        var _a2;
+        return ((_a2 = allPreferences().globalPreference) == null ? void 0 : _a2.channels) || {};
       },
-      get children() {
-        return createComponent(LoadingScreen, {});
+      get onChange() {
+        return optimisticUpdate(allPreferences().globalPreference);
       }
     }), null);
     insert(_el$, createComponent(Show, {
       get when() {
-        return memo(() => !!!loading())() && preferences();
+        var _a2;
+        return (_a2 = allPreferences().workflowPreferences) == null ? void 0 : _a2.length;
       },
-      get children() {
-        return [createComponent(PreferencesRow, {
-          localizationKey: "preferences.global",
-          get channels() {
-            var _a2;
-            return ((_a2 = allPreferences().globalPreference) == null ? void 0 : _a2.channels) || {};
-          },
-          get onChange() {
-            return optimisticUpdate(allPreferences().globalPreference);
+      get fallback() {
+        return createComponent(PreferencesListSkeleton, {
+          get loading() {
+            return loading();
           }
-        }), createComponent(For, {
+        });
+      },
+      get children() {
+        return createComponent(For, {
           get each() {
             return allPreferences().workflowPreferencesIds;
           },
@@ -2585,14 +2890,14 @@ var Preferences = () => {
               }
             });
           }
-        })];
+        });
       }
     }), null);
-    effect(() => className(_el$, style("preferencesContainer", "nt-p-2 nt-flex nt-flex-col nt-gap-1 nt-bg-background nt-overflow-y-auto nt-h-full")));
+    effect(() => className(_el$, style("preferencesContainer", "nt-px-3 nt-py-4 nt-flex nt-flex-col nt-gap-1 nt-overflow-y-auto nt-h-full")));
     return _el$;
   })();
 };
-var ChannelsLabel = (props) => {
+var WorkflowDescription = (props) => {
   const style = useStyle();
   const channelNames = () => {
     const channels = [];
@@ -2614,96 +2919,86 @@ var ChannelsLabel = (props) => {
   return (() => {
     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")));
+    effect(() => className(_el$3, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
     return _el$3;
   })();
 };
 var PreferencesRow = (props) => {
-  const [isOpen, setIsOpen] = createSignal(false);
   const style = useStyle();
+  const [isOpenDescription, setIsOpenDescription] = createSignal(true);
+  const [isOpenChannels, setIsOpenChannels] = createSignal(false);
   const {
     t
   } = useLocalization();
-  const channels = createMemo(() => Object.keys(props.channels || {}));
+  const channels = createMemo(() => Object.keys(props.channels));
   return createComponent(Show, {
     get when() {
       return channels().length > 0;
     },
     get children() {
       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);
+      _el$5.$$click = () => {
+        setIsOpenChannels((prev) => !prev);
+        setIsOpenDescription((prev) => !prev);
+      };
       insert(_el$7, () => t(props.localizationKey));
-      insert(_el$6, createComponent(ChannelsLabel, {
-        get channels() {
-          return props.channels;
+      insert(_el$6, createComponent(Collapsible, {
+        get open() {
+          return isOpenDescription();
+        },
+        get children() {
+          return createComponent(WorkflowDescription, {
+            get channels() {
+              return props.channels;
+            },
+            appearanceKey: "workflowDescription",
+            "class": "nt-overflow-hidden"
+          });
         }
       }), null);
       insert(_el$8, createComponent(ArrowDropDown, {
         get ["class"]() {
-          return style("workflowArrow__icon", "nt-text-foreground-alpha-600");
+          return style("workflowArrow__icon", "nt-text-foreground-alpha-600 nt-size-4");
         }
       }));
-      insert(_el$4, createComponent(Presence, {
-        exitBeforeEnter: true,
+      insert(_el$4, createComponent(Collapsible, {
+        get open() {
+          return isOpenChannels();
+        },
         get children() {
-          return createComponent(Show, {
-            get when() {
-              return isOpen();
+          var _el$9 = _tmpl$40();
+          insert(_el$9, createComponent(For, {
+            get each() {
+              return channels();
             },
-            get children() {
-              return createComponent(Motion.div, {
-                animate: {
-                  gridTemplateRows: ["0fr", "1fr"]
-                },
-                exit: {
-                  gridTemplateRows: ["1fr", "0fr"]
-                },
-                transition: {
-                  duration: 0.2,
-                  easing: "ease-out"
-                },
-                get ["class"]() {
-                  return style("channelsContainerCollapsible", "nt-grid nt-self-stretch");
-                },
-                get children() {
-                  var _el$9 = _tmpl$40();
-                  insert(_el$9, createComponent(For, {
-                    get each() {
-                      return channels();
-                    },
-                    children: (channel) => createComponent(ChannelRow, {
-                      channel,
-                      get enabled() {
-                        return !!props.channels[channel];
-                      },
-                      get workflowId() {
-                        return props.workflowId;
-                      },
-                      get onChange() {
-                        return props.onChange;
-                      }
-                    })
-                  }));
-                  effect(() => className(_el$9, style("channelsContainer", "nt-overflow-hidden nt-flex-col nt-gap-1")));
-                  return _el$9;
-                }
-              });
-            }
-          });
+            children: (channel) => createComponent(ChannelRow, {
+              channel,
+              get enabled() {
+                return !!props.channels[channel];
+              },
+              get workflowId() {
+                return props.workflowId;
+              },
+              get onChange() {
+                return props.onChange;
+              }
+            })
+          }));
+          effect(() => className(_el$9, style("channelsContainer", "nt-flex nt-bg-background nt-border nt-border-neutral-alpha-50 nt-rounded-lg nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden")));
+          return _el$9;
         }
       }), 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 = isOpen(), _v$3 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden"), _v$4 = isOpen(), _v$5 = style("workflowLabelHeader", "nt-overflow-hidden"), _v$6 = style("workflowLabel", "nt-text-base nt-font-semibold nt-truncate"), _v$7 = props.localizationKey, _v$8 = isOpen(), _v$9 = 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$10 = isOpen();
+        var _v$ = style("workflowContainer", `nt-p-1 nt-bg-neutral-alpha-25 nt-rounded-lg`), _v$2 = isOpenChannels(), _v$3 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-p-1 nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden"), _v$4 = style("workflowLabelHeader", "nt-overflow-hidden"), _v$5 = style("workflowLabel", "nt-text-sm nt-font-semibold nt-truncate"), _v$6 = props.localizationKey, _v$7 = isOpenChannels(), _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 = isOpenChannels();
         _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
         _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$6, _p$.i = _v$5);
-        _v$6 !== _p$.n && className(_el$7, _p$.n = _v$6);
-        _v$7 !== _p$.s && setAttribute(_el$7, "data-localization", _p$.s = _v$7);
-        _v$8 !== _p$.h && setAttribute(_el$7, "data-open", _p$.h = _v$8);
-        _v$9 !== _p$.r && className(_el$8, _p$.r = _v$9);
-        _v$10 !== _p$.d && setAttribute(_el$8, "data-open", _p$.d = _v$10);
+        _v$4 !== _p$.o && className(_el$6, _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,
@@ -2714,20 +3009,98 @@ var PreferencesRow = (props) => {
         n: void 0,
         s: void 0,
         h: void 0,
-        r: void 0,
-        d: void 0
+        r: void 0
       });
       return _el$4;
     }
   });
 };
 delegateEvents(["click"]);
-var _tmpl$41 = /* @__PURE__ */ template(`<strong>`);
+var _tmpl$41 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
+var PreferencesHeader = (props) => {
+  const style = useStyle();
+  const {
+    t
+  } = useLocalization();
+  return (() => {
+    var _el$ = _tmpl$41(), _el$2 = _el$.firstChild;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.navigateToNotifications;
+      },
+      children: (navigateToNotifications) => createComponent(Button, {
+        appearanceKey: "preferencesHeader__back__button",
+        "class": "nt-text-foreground-alpha-600",
+        variant: "unstyled",
+        size: "none",
+        get onClick() {
+          return navigateToNotifications();
+        },
+        get children() {
+          return createComponent(ArrowLeft, {
+            get ["class"]() {
+              return style("preferencesHeader__back__button__icon", "nt-size-4");
+            }
+          });
+        }
+      })
+    }), _el$2);
+    insert(_el$2, () => t("preferences.title"));
+    effect((_p$) => {
+      var _v$ = style("preferencesHeader", "nt-flex nt-bg-neutral-alpha-25 nt-shrink-0 nt-border-b nt-border-border nt-items-center nt-py-3.5 nt-px-4 nt-gap-2"), _v$2 = style("preferencesHeader__title", "nt-text-base nt-font-medium");
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var useTabsDropdown = ({ tabs }) => {
+  const [tabsList, setTabsList] = createSignal();
+  const [visibleTabs, setVisibleTabs] = createSignal([]);
+  const [dropdownTabs, setDropdownTabs] = createSignal([]);
+  onMount(() => {
+    const tabsListEl = tabsList();
+    if (!tabsListEl) return;
+    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
+        if (tabsElements.length === visibleTabIds.length) {
+          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+          observer.disconnect();
+          return;
+        }
+        visibleTabIds = visibleTabIds.slice(0, -1);
+        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
+        observer.disconnect();
+      },
+      { root: tabsListEl }
+    );
+    for (const tabElement of tabsElements) {
+      observer.observe(tabElement);
+    }
+  });
+  return { dropdownTabs, setTabsList, visibleTabs };
+};
+var _tmpl$42 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
+var ArrowDown = (props) => {
+  return (() => {
+    var _el$ = _tmpl$42();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var _tmpl$43 = /* @__PURE__ */ template(`<strong>`);
 var _tmpl$213 = /* @__PURE__ */ template(`<p>`);
 var Bold = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$41();
+    var _el$ = _tmpl$43();
     insert(_el$, () => props.children);
     effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
     return _el$;
@@ -2818,7 +3191,7 @@ function useTooltip() {
 }
 
 // src/ui/components/primitives/Tooltip/TooltipContent.tsx
-var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$44 = /* @__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 {
@@ -2841,7 +3214,7 @@ var TooltipContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$42();
+    var _el$ = _tmpl$44();
     use(setFloating, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -2880,7 +3253,7 @@ var TooltipContent = (props) => {
     }
   });
 };
-var _tmpl$43 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<button>`);
 var TooltipTrigger = (props) => {
   const {
     setReference,
@@ -2903,7 +3276,7 @@ var TooltipTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$43();
+    var _el$ = _tmpl$45();
     _el$.addEventListener("mouseleave", () => {
       setOpen(false);
     });
@@ -2935,9 +3308,10 @@ var Tooltip = {
 };
 
 // src/ui/components/Notification/DefaultNotification.tsx
-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 _tmpl$46 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<a><div><div></div><div></div><p>`);
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -2962,62 +3336,99 @@ var DefaultNotification = (props) => {
     }, 1e3 * 60);
     return () => clearInterval(interval);
   });
-  const handleNotificationClick = (e) => {
+  const handleNotificationClick = (e) => __async(void 0, null, function* () {
     var _a, _b, _c;
     e.stopPropagation();
     e.preventDefault();
     if (!props.notification.isRead) {
-      props.notification.read();
+      yield props.notification.read();
     }
     (_a = props.onNotificationClick) == null ? void 0 : _a.call(props, props.notification);
     navigate((_b = props.notification.redirect) == null ? void 0 : _b.url, (_c = props.notification.redirect) == null ? void 0 : _c.target);
-  };
-  const handleActionButtonClick = (action, e) => {
+  });
+  const handleActionButtonClick = (action, e) => __async(void 0, null, function* () {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     e.stopPropagation();
     if (action === "primary" /* PRIMARY */) {
-      props.notification.completePrimary();
+      yield props.notification.completePrimary();
       (_a = props.onPrimaryActionClick) == null ? void 0 : _a.call(props, props.notification);
       navigate((_c = (_b = props.notification.primaryAction) == null ? void 0 : _b.redirect) == null ? void 0 : _c.url, (_e = (_d = props.notification.primaryAction) == null ? void 0 : _d.redirect) == null ? void 0 : _e.target);
     } else {
-      props.notification.completeSecondary();
+      yield props.notification.completeSecondary();
       (_f = props.onSecondaryActionClick) == null ? void 0 : _f.call(props, props.notification);
       navigate((_h = (_g = props.notification.secondaryAction) == null ? void 0 : _g.redirect) == null ? void 0 : _h.url, (_j = (_i = props.notification.secondaryAction) == null ? void 0 : _i.redirect) == null ? void 0 : _j.target);
     }
-  };
+  });
   return (() => {
-    var _el$ = _tmpl$311(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling;
+    var _el$ = _tmpl$47(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling;
     _el$.$$click = handleNotificationClick;
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !props.notification.isRead;
-      },
-      get children() {
-        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;
-      }
-    }), _el$4);
     insert(_el$, createComponent(Show, {
       get when() {
         return props.notification.avatar;
       },
+      get fallback() {
+        return (() => {
+          var _el$9 = _tmpl$214();
+          effect(() => className(_el$9, style("notificationImageLoadingFallback", "nt-size-8 nt-rounded-lg nt-shrink-0 nt-aspect-square")));
+          return _el$9;
+        })();
+      },
       get children() {
-        var _el$3 = _tmpl$214();
+        var _el$2 = _tmpl$46();
         effect((_p$) => {
-          var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg"), _v$2 = props.notification.avatar;
-          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$3, "src", _p$.t = _v$2);
+          var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$2, "src", _p$.t = _v$2);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$3;
+        return _el$2;
       }
-    }), _el$4);
-    insert(_el$6, date);
-    insert(_el$7, createComponent(Show, {
+    }), _el$3);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return props.renderSubject;
+      },
+      get fallback() {
+        return createComponent(Show, {
+          get when() {
+            return props.notification.subject;
+          },
+          children: (subject) => createComponent(Markdown_default, {
+            appearanceKey: "notificationSubject",
+            "class": "nt-text-start nt-font-medium",
+            strongAppearanceKey: "notificationSubject__strong",
+            get children() {
+              return subject();
+            }
+          })
+        });
+      },
+      children: (renderSubject) => createComponent(ExternalElementRenderer, {
+        render: (el) => renderSubject()(el, props.notification)
+      })
+    }), null);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return props.renderBody;
+      },
+      get fallback() {
+        return createComponent(Markdown_default, {
+          appearanceKey: "notificationBody",
+          strongAppearanceKey: "notificationBody__strong",
+          "class": "nt-text-start nt-whitespace-pre-wrap nt-text-foreground-alpha-600",
+          get children() {
+            return props.notification.body;
+          }
+        });
+      },
+      children: (renderBody) => createComponent(ExternalElementRenderer, {
+        render: (el) => renderBody()(el, props.notification)
+      })
+    }), null);
+    insert(_el$5, createComponent(Show, {
       get when() {
         return status() !== "archived" /* ARCHIVED */;
       },
@@ -3032,16 +3443,19 @@ var DefaultNotification = (props) => {
                 return [createComponent(Tooltip.Trigger, {
                   asChild: (childProps) => createComponent(Button, mergeProps({
                     appearanceKey: "notificationRead__button",
-                    size: "icon",
-                    variant: "icon"
+                    size: "iconSm",
+                    variant: "ghost"
                   }, childProps, {
-                    onClick: (e) => {
+                    onClick: (e) => __async(this, null, function* () {
                       e.stopPropagation();
-                      props.notification.read();
-                    },
-                    "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
+                      yield props.notification.read();
+                    }),
                     get children() {
-                      return createComponent(ReadAll, {});
+                      return createComponent(MarkAsRead, {
+                        get ["class"]() {
+                          return style("notificationRead__icon", "nt-size-3");
+                        }
+                      });
                     }
                   }))
                 }), createComponent(Tooltip.Content, {
@@ -3059,16 +3473,19 @@ var DefaultNotification = (props) => {
                 return [createComponent(Tooltip.Trigger, {
                   asChild: (childProps) => createComponent(Button, mergeProps({
                     appearanceKey: "notificationUnread__button",
-                    size: "icon",
-                    variant: "icon"
+                    size: "iconSm",
+                    variant: "ghost"
                   }, childProps, {
-                    onClick: (e) => {
+                    onClick: (e) => __async(this, null, function* () {
                       e.stopPropagation();
-                      props.notification.unread();
-                    },
-                    "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
+                      yield props.notification.unread();
+                    }),
                     get children() {
-                      return createComponent(Unread, {});
+                      return createComponent(MarkAsUnread, {
+                        get ["class"]() {
+                          return style("notificationUnread__icon", "nt-size-3");
+                        }
+                      });
                     }
                   }))
                 }), createComponent(Tooltip.Content, {
@@ -3083,7 +3500,7 @@ var DefaultNotification = (props) => {
         });
       }
     }), null);
-    insert(_el$7, createComponent(Show, {
+    insert(_el$5, createComponent(Show, {
       get when() {
         return props.notification.isArchived;
       },
@@ -3093,16 +3510,19 @@ var DefaultNotification = (props) => {
             return [createComponent(Tooltip.Trigger, {
               asChild: (childProps) => createComponent(Button, mergeProps({
                 appearanceKey: "notificationArchive__button",
-                size: "icon",
-                variant: "icon"
+                size: "iconSm",
+                variant: "ghost"
               }, childProps, {
-                onClick: (e) => {
+                onClick: (e) => __async(this, null, function* () {
                   e.stopPropagation();
-                  props.notification.archive();
-                },
-                "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
+                  yield props.notification.archive();
+                }),
                 get children() {
-                  return createComponent(Archive, {});
+                  return createComponent(MarkAsArchived, {
+                    get ["class"]() {
+                      return style("notificationArchive__icon", "nt-size-3");
+                    }
+                  });
                 }
               }))
             }), createComponent(Tooltip.Content, {
@@ -3120,16 +3540,19 @@ var DefaultNotification = (props) => {
             return [createComponent(Tooltip.Trigger, {
               asChild: (childProps) => createComponent(Button, mergeProps({
                 appearanceKey: "notificationUnarchive__button",
-                size: "icon",
-                variant: "icon"
+                size: "iconSm",
+                variant: "ghost"
               }, childProps, {
-                onClick: (e) => {
+                onClick: (e) => __async(this, null, function* () {
                   e.stopPropagation();
-                  props.notification.unarchive();
-                },
-                "class": "hover:nt-bg-neutral-alpha-50 nt-p-0.5",
+                  yield props.notification.unarchive();
+                }),
                 get children() {
-                  return createComponent(Unarchive, {});
+                  return createComponent(MarkAsUnarchived, {
+                    get ["class"]() {
+                      return style("notificationArchive__icon", "nt-size-3");
+                    }
+                  });
                 }
               }))
             }), createComponent(Tooltip.Content, {
@@ -3142,65 +3565,65 @@ var DefaultNotification = (props) => {
         });
       }
     }), null);
-    insert(_el$4, createComponent(Show, {
+    insert(_el$3, createComponent(Show, {
       get when() {
-        return props.notification.subject;
+        return props.notification.primaryAction || props.notification.secondaryAction;
       },
-      children: (subject) => createComponent(Markdown_default, {
-        appearanceKey: "notificationSubject__strong",
-        "class": "nt-text-start",
-        strongAppearanceKey: "notificationSubject__strong",
-        get children() {
-          return subject();
-        }
-      })
-    }), _el$8);
-    insert(_el$4, createComponent(Markdown_default, {
-      appearanceKey: "notificationBody__strong",
-      strongAppearanceKey: "notificationBody__strong",
-      "class": "nt-text-start nt-whitespace-pre-wrap",
       get children() {
-        return props.notification.body;
+        var _el$6 = _tmpl$214();
+        insert(_el$6, createComponent(Show, {
+          get when() {
+            return props.notification.primaryAction;
+          },
+          keyed: true,
+          children: (primaryAction) => createComponent(Button, {
+            appearanceKey: "notificationPrimaryAction__button",
+            variant: "default",
+            onClick: (e) => handleActionButtonClick("primary" /* PRIMARY */, e),
+            get children() {
+              return primaryAction.label;
+            }
+          })
+        }), null);
+        insert(_el$6, createComponent(Show, {
+          get when() {
+            return props.notification.secondaryAction;
+          },
+          keyed: true,
+          children: (secondaryAction) => createComponent(Button, {
+            appearanceKey: "notificationSecondaryAction__button",
+            variant: "secondary",
+            onClick: (e) => handleActionButtonClick("secondary" /* SECONDARY */, e),
+            get children() {
+              return secondaryAction.label;
+            }
+          })
+        }), null);
+        effect(() => className(_el$6, style("notificationCustomActions", "nt-flex nt-flex-wrap nt-gap-2")));
+        return _el$6;
       }
-    }), _el$8);
-    insert(_el$8, createComponent(Show, {
-      get when() {
-        return props.notification.primaryAction;
-      },
-      keyed: true,
-      children: (primaryAction) => createComponent(Button, {
-        appearanceKey: "notificationPrimaryAction__button",
-        variant: "default",
-        onClick: (e) => handleActionButtonClick("primary" /* PRIMARY */, e),
-        get children() {
-          return primaryAction.label;
-        }
-      })
-    }), null);
-    insert(_el$8, createComponent(Show, {
+    }), _el$7);
+    insert(_el$7, date);
+    insert(_el$, createComponent(Show, {
       get when() {
-        return props.notification.secondaryAction;
+        return !props.notification.isRead;
       },
-      keyed: true,
-      children: (secondaryAction) => createComponent(Button, {
-        appearanceKey: "notificationSecondaryAction__button",
-        variant: "secondary",
-        onClick: (e) => handleActionButtonClick("secondary" /* SECONDARY */, e),
-        get children() {
-          return secondaryAction.label;
-        }
-      })
+      get children() {
+        var _el$8 = _tmpl$311();
+        effect(() => className(_el$8, style("notificationDot", "nt-size-1.5 nt-bg-primary nt-rounded-full nt-shrink-0")));
+        return _el$8;
+      }
     }), null);
     effect((_p$) => {
       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", {
+      var _v$3 = style("notification", cn("nt-w-full nt-text-sm hover:nt-bg-primary-alpha-25 nt-group nt-relative nt-flex nt-items-start nt-p-4 nt-gap-2", "[&:not(:first-child)]:nt-border-t nt-border-neutral-alpha-100", {
         "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-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$4 = style("notificationContent", "nt-flex nt-flex-col nt-gap-2 nt-w-full"), _v$5 = style("notificationTextContainer"), _v$6 = style("notificationDefaultActions", "nt-absolute nt-transition nt-duration-100 nt-ease-out nt-gap-0.5 nt-flex nt-shrink-0 nt-opacity-0 group-hover:nt-opacity-100 group-focus-within:nt-opacity-100 nt-justify-center nt-items-center nt-bg-background/90 nt-right-3 nt-top-3 nt-border nt-border-neutral-alpha-100 nt-rounded-lg nt-backdrop-blur-lg nt-p-0.5"), _v$7 = style("notificationDate", "nt-text-foreground-alpha-400");
       _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);
-      _v$6 !== _p$.o && className(_el$7, _p$.o = _v$6);
-      _v$7 !== _p$.i && className(_el$8, _p$.i = _v$7);
+      _v$4 !== _p$.t && className(_el$3, _p$.t = _v$4);
+      _v$5 !== _p$.a && className(_el$4, _p$.a = _v$5);
+      _v$6 !== _p$.o && className(_el$5, _p$.o = _v$6);
+      _v$7 !== _p$.i && className(_el$7, _p$.i = _v$7);
       return _p$;
     }, {
       e: void 0,
@@ -3225,6 +3648,12 @@ var Notification = (props) => {
         get notification() {
           return props.notification;
         },
+        get renderSubject() {
+          return props.renderSubject;
+        },
+        get renderBody() {
+          return props.renderBody;
+        },
         get onNotificationClick() {
           return props.onNotificationClick;
         },
@@ -3243,14 +3672,6 @@ var Notification = (props) => {
     }
   });
 };
-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$45();
-    spread(_el$, props, true, true);
-    return _el$;
-  })();
-}
 var NewMessagesCta = (props) => {
   const shouldRender = createMemo(() => !!props.count);
   const {
@@ -3263,7 +3684,7 @@ var NewMessagesCta = (props) => {
     get children() {
       return createComponent(Button, {
         appearanceKey: "notificationListNewNotificationsNotice__button",
-        "class": "nt-absolute nt-w-fit nt-top-0 nt-mx-auto nt-inset-2 nt-z-10 nt-rounded-full hover:nt-bg-primary-600 nt-animate-in nt-slide-in-from-top-2 nt-fade-in",
+        "class": "nt-absolute nt-w-fit nt-h-fit nt-top-0 nt-mx-auto nt-inset-2 nt-z-10 nt-rounded-full hover:nt-bg-primary-600 nt-animate-in nt-slide-in-from-top-2 nt-fade-in",
         get onClick() {
           return props.onClick;
         },
@@ -3277,66 +3698,113 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-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$46(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-    insert(_el$, createComponent(SkeletonAvatar, {
-      appearanceKey: "skeletonAvatar"
-    }), _el$2);
-    insert(_el$2, createComponent(SkeletonText, {
-      appearanceKey: "skeletonText",
-      "class": "nt-w-1/4"
-    }), _el$3);
-    insert(_el$3, createComponent(SkeletonText, {
-      appearanceKey: "skeletonText"
-    }), null);
-    insert(_el$3, createComponent(SkeletonText, {
-      appearanceKey: "skeletonText"
-    }), null);
-    insert(_el$4, createComponent(SkeletonText, {
-      appearanceKey: "skeletonText",
-      "class": "nt-w-2/3"
-    }), null);
-    insert(_el$4, createComponent(SkeletonText, {
-      appearanceKey: "skeletonText",
-      "class": "nt-w-1/3"
-    }), null);
-    return _el$;
-  })();
-};
+var _tmpl$48 = /* @__PURE__ */ template(`<div>`);
 var NotificationListSkeleton = (props) => {
-  return createComponent(For, {
-    get each() {
-      return Array.from({
-        length: props.count
-      });
-    },
-    children: () => createComponent(NotificationSkeleton, {})
-  });
-};
-
-// src/ui/components/Notification/NotificationList.tsx
-var _tmpl$47 = /* @__PURE__ */ template(`<div><p class=nt-text-center data-localization=notifications.emptyNotice>`);
-var _tmpl$215 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$312 = /* @__PURE__ */ template(`<div><div>`);
-var EmptyNotificationList = () => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$47(), _el$2 = _el$.firstChild;
-    insert(_el$, createComponent(EmptyIcon, {
+    var _el$ = _tmpl$48();
+    insert(_el$, createComponent(Motion.div, {
+      get animate() {
+        return {
+          scale: props.loading ? 1 : 0.7
+        };
+      },
+      transition: {
+        duration: 0.6,
+        easing: [0.39, 0.24, 0.3, 1],
+        delay: 0.3
+      },
       get ["class"]() {
-        return style("notificationListEmptyNoticeIcon");
+        return style("notificationList__skeleton", "nt-flex nt-relative nt-mx-auto nt-flex-col nt-w-full nt-mb-4");
+      },
+      get children() {
+        return [memo(() => Array.from({
+          length: 5
+        }).map((_, i) => createComponent(Motion.div, {
+          get animate() {
+            return {
+              marginBottom: props.loading ? 0 : "16px",
+              borderWidth: props.loading ? 0 : "1px",
+              borderRadius: props.loading ? 0 : "var(--nv-radius-lg)"
+            };
+          },
+          transition: {
+            duration: 0.5,
+            delay: 0.3,
+            easing: "ease-in-out"
+          },
+          get ["class"]() {
+            return style("notificationList__skeletonContent", "nt-flex nt-border-neutral-alpha-50 nt-items-center nt-gap-3 nt-p-3 nt-bg-neutral-alpha-25");
+          },
+          get children() {
+            return [createComponent(SkeletonAvatar, {
+              appearanceKey: "notificationList__skeletonAvatar",
+              "class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
+            }), (() => {
+              var _el$3 = _tmpl$48();
+              insert(_el$3, createComponent(SkeletonText, {
+                appearanceKey: "notificationList__skeletonText",
+                "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
+              }), null);
+              insert(_el$3, createComponent(SkeletonText, {
+                appearanceKey: "notificationList__skeletonText",
+                "class": "nt-h-2 nt-w-2/3 nt-bg-neutral-alpha-50 nt-rounded"
+              }), null);
+              effect(() => className(_el$3, style("notificationList__skeletonItem", "nt-flex nt-flex-col nt-gap-2 nt-flex-1")));
+              return _el$3;
+            })()];
+          }
+        }))), (() => {
+          var _el$2 = _tmpl$48();
+          effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
+          return _el$2;
+        })()];
       }
-    }), _el$2);
-    insert(_el$2, () => t("notifications.emptyNotice"));
-    effect(() => className(_el$, style("notificationListEmptyNoticeContainer", "nt-flex nt-flex-col nt-items-center nt-m-auto nt-h-fit nt-w-full nt-text-foreground-alpha-100 nt-p-6 nt-text-center")));
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !props.loading;
+      },
+      get children() {
+        return createComponent(Motion.p, {
+          initial: {
+            opacity: 0,
+            y: -4,
+            filter: "blur(4px)"
+          },
+          get animate() {
+            return {
+              opacity: props.loading ? 0 : 1,
+              y: 0,
+              filter: "blur(0px)"
+            };
+          },
+          transition: {
+            duration: 0.7,
+            easing: [0.39, 0.24, 0.3, 1],
+            delay: 0.6
+          },
+          get ["class"]() {
+            return style("notificationListEmptyNotice", "nt-text-center");
+          },
+          "data-localization": "notifications.emptyNotice",
+          get children() {
+            return t("notifications.emptyNotice");
+          }
+        });
+      }
+    }), null);
+    effect(() => className(_el$, style("notificationListEmptyNoticeContainer", "nt-flex nt-flex-col nt-items-center nt-h-fit nt-w-full nt-text-sm nt-text-foreground-alpha-400 nt-text-center")));
     return _el$;
   })();
 };
+
+// src/ui/components/Notification/NotificationList.tsx
+var _tmpl$49 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$215 = /* @__PURE__ */ template(`<div><div>`);
 var NotificationList = (props) => {
   var _a, _b;
   const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
@@ -3379,99 +3847,92 @@ var NotificationList = (props) => {
     });
   });
   return (() => {
-    var _el$3 = _tmpl$312(), _el$4 = _el$3.firstChild;
-    insert(_el$3, createComponent(NewMessagesCta, {
+    var _el$ = _tmpl$215(), _el$2 = _el$.firstChild;
+    insert(_el$, createComponent(NewMessagesCta, {
       get count() {
         return count();
       },
       onClick: handleOnNewMessagesClick
-    }), _el$4);
+    }), _el$2);
     use((el) => {
       notificationListElement = el;
-    }, _el$4);
-    insert(_el$4, createComponent(Show, {
+    }, _el$2);
+    insert(_el$2, createComponent(Show, {
       get when() {
-        return !initialLoading();
+        return data().length > 0;
       },
       get fallback() {
         return createComponent(NotificationListSkeleton, {
-          count: 8
+          get loading() {
+            return initialLoading();
+          }
         });
       },
       get children() {
-        return createComponent(Show, {
-          get when() {
-            return data().length > 0;
-          },
-          get fallback() {
-            return createComponent(EmptyNotificationList, {});
+        return [createComponent(For, {
+          get each() {
+            return ids();
           },
-          get children() {
-            return [createComponent(For, {
-              get each() {
-                return ids();
+          children: (_, index) => {
+            const notification = () => data()[index()];
+            return createComponent(Notification, {
+              get notification() {
+                return notification();
               },
-              children: (_, index) => {
-                const notification = () => data()[index()];
-                return createComponent(Notification, {
-                  get notification() {
-                    return notification();
-                  },
-                  get renderNotification() {
-                    return props.renderNotification;
-                  },
-                  get onNotificationClick() {
-                    return props.onNotificationClick;
-                  },
-                  get onPrimaryActionClick() {
-                    return props.onPrimaryActionClick;
-                  },
-                  get onSecondaryActionClick() {
-                    return props.onSecondaryActionClick;
-                  }
-                });
-              }
-            }), createComponent(Show, {
-              get when() {
-                return !end();
+              get renderNotification() {
+                return props.renderNotification;
               },
-              get children() {
-                var _el$5 = _tmpl$215();
-                use(setEl, _el$5);
-                insert(_el$5, createComponent(For, {
-                  get each() {
-                    return Array.from({
-                      length: 3
-                    });
-                  },
-                  children: () => createComponent(NotificationSkeleton, {})
-                }));
-                return _el$5;
+              get renderSubject() {
+                return props.renderSubject;
+              },
+              get renderBody() {
+                return props.renderBody;
+              },
+              get onNotificationClick() {
+                return props.onNotificationClick;
+              },
+              get onPrimaryActionClick() {
+                return props.onPrimaryActionClick;
+              },
+              get onSecondaryActionClick() {
+                return props.onSecondaryActionClick;
               }
-            })];
+            });
           }
-        });
+        }), createComponent(Show, {
+          get when() {
+            return !end();
+          },
+          get children() {
+            var _el$3 = _tmpl$49();
+            use(setEl, _el$3);
+            insert(_el$3, createComponent(NotificationListSkeleton, {
+              loading: true
+            }));
+            return _el$3;
+          }
+        })];
       }
     }));
     effect((_p$) => {
-      var _v$ = style("notificationListContainer", "nt-relative nt-h-full nt-overflow-hidden"), _v$2 = style("notificationList", "nt-relative nt-h-full nt-flex nt-flex-col nt-overflow-y-auto");
-      _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+      var _v$ = style("notificationListContainer", "nt-relative nt-border-t nt-border-t-neutral-alpha-200 nt-h-full nt-overflow-hidden"), _v$2 = style("notificationList", "nt-relative nt-h-full nt-flex nt-flex-col nt-overflow-y-auto");
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$3;
+    return _el$;
   })();
 };
-var _tmpl$48 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$50 = /* @__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$48();
+    var _el$ = _tmpl$50();
     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$;
@@ -3496,7 +3957,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$48();
+        var _el$2 = _tmpl$50();
         insert(_el$2, () => props.label);
         effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -3534,7 +3995,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$48();
+        var _el$3 = _tmpl$50();
         insert(_el$3, () => props.label);
         effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -3553,38 +4014,9 @@ var InboxDropdownTab = (props) => {
     }
   });
 };
-var useTabsDropdown = ({ tabs }) => {
-  const [tabsList, setTabsList] = createSignal();
-  const [visibleTabs, setVisibleTabs] = createSignal([]);
-  const [dropdownTabs, setDropdownTabs] = createSignal([]);
-  onMount(() => {
-    const tabsListEl = tabsList();
-    if (!tabsListEl) return;
-    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
-    const observer = new IntersectionObserver(
-      (entries) => {
-        let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
-        if (tabsElements.length === visibleTabIds.length) {
-          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
-          observer.disconnect();
-          return;
-        }
-        visibleTabIds = visibleTabIds.slice(0, -1);
-        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
-        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
-        observer.disconnect();
-      },
-      { root: tabsListEl }
-    );
-    for (const tabElement of tabsElements) {
-      observer.observe(tabElement);
-    }
-  });
-  return { dropdownTabs, setTabsList, visibleTabs };
-};
 
 // src/ui/components/InboxTabs/InboxTabs.tsx
-var tabsDropdownTriggerVariants = () => `nt-relative after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 after:nt-w-full after:nt-h-[2px] after:nt-border-b-2 nt-pb-[0.625rem]`;
+var tabsDropdownTriggerVariants = () => `nt-relative after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 after:nt-w-full after:nt-h-[2px] after:nt-border-b-2 nt-mb-[0.625rem]`;
 var InboxTabs = (props) => {
   const style = useStyle();
   const {
@@ -3608,16 +4040,15 @@ var InboxTabs = (props) => {
   const options = createMemo(() => dropdownTabs().map((tab) => __spreadProps(__spreadValues({}, tab), {
     rightIcon: tab.label === activeTab() ? createComponent(Check, {
       get ["class"]() {
-        return style("moreTabs__dropdownItemRight__icon");
+        return style("moreTabs__dropdownItemRight__icon", "nt-size-3");
       }
     }) : void 0
   })));
   const dropdownTabsUnreadSum = createMemo(() => dropdownTabsUnreadCounts().reduce((accumulator, currentValue) => accumulator + currentValue, 0));
   const isTabsDropdownActive = createMemo(() => dropdownTabs().map((tab) => tab.label).includes(activeTab()));
   return createComponent(Tabs.Root, {
-    get ["class"]() {
-      return style("notificationsTabs__tabsRoot", cn(tabsRootVariants(), "nt-flex-1 nt-overflow-hidden"));
-    },
+    appearanceKey: "notificationsTabs__tabsRoot",
+    "class": "nt-flex nt-flex-col nt-flex-1 nt-min-h-0",
     get value() {
       return activeTab();
     },
@@ -3631,6 +4062,7 @@ var InboxTabs = (props) => {
           return createComponent(Tabs.List, {
             ref: setTabsList,
             appearanceKey: "notificationsTabs__tabsList",
+            "class": "nt-bg-neutral-alpha-25 nt-px-4",
             get children() {
               return props.tabs.map((tab) => createComponent(InboxTab, mergeProps(tab, {
                 "class": "nt-invisible"
@@ -3641,30 +4073,34 @@ var InboxTabs = (props) => {
         get children() {
           return createComponent(Tabs.List, {
             appearanceKey: "notificationsTabs__tabsList",
+            "class": "nt-bg-neutral-alpha-25 nt-px-4",
             get children() {
-              return [memo(() => visibleTabs().map((tab) => createComponent(InboxTab, tab))), createComponent(Show, {
+              return [createComponent(For, {
+                get each() {
+                  return visibleTabs();
+                },
+                children: (tab) => createComponent(InboxTab, tab)
+              }), createComponent(Show, {
                 get when() {
                   return dropdownTabs().length > 0;
                 },
                 get children() {
                   return createComponent(Dropdown.Root, {
-                    fallbackPlacements: ["bottom", "top"],
-                    placement: "bottom-start",
                     get children() {
                       return [createComponent(Dropdown.Trigger, {
                         appearanceKey: "moreTabs__dropdownTrigger",
                         asChild: (triggerProps) => createComponent(Button, mergeProps({
                           variant: "unstyled",
-                          size: "none",
+                          size: "iconSm",
                           appearanceKey: "moreTabs__button"
                         }, triggerProps, {
                           get ["class"]() {
-                            return cn(tabsDropdownTriggerVariants(), isTabsDropdownActive() ? "after:nt-border-b-primary" : "after:nt-border-b-transparent nt-text-foreground-alpha-600");
+                            return cn(tabsDropdownTriggerVariants(), "nt-ml-auto", isTabsDropdownActive() ? "after:nt-border-b-primary" : "after:nt-border-b-transparent nt-text-foreground-alpha-700");
                           },
                           get children() {
-                            return [createComponent(Dots, {
+                            return [createComponent(ArrowDown, {
                               get ["class"]() {
-                                return style("moreTabs__dots");
+                                return style("moreTabs__icon", "nt-size-5");
                               }
                             }), createComponent(Show, {
                               get when() {
@@ -3705,13 +4141,19 @@ var InboxTabs = (props) => {
           return tab.label;
         },
         get ["class"]() {
-          return style("notificationsTabs__tabsContent", cn(activeTab() === tab.label ? "nt-block" : "nt-hidden", "nt-flex-1 nt-overflow-hidden"));
+          return style("notificationsTabs__tabsContent", cn(activeTab() === tab.label ? "nt-block" : "nt-hidden", "nt-overflow-auto nt-flex-1 nt-flex nt-flex-col nt-min-h-0"));
         },
         get children() {
           return createComponent(NotificationList, {
             get renderNotification() {
               return props.renderNotification;
             },
+            get renderSubject() {
+              return props.renderSubject;
+            },
+            get renderBody() {
+              return props.renderBody;
+            },
             get onNotificationClick() {
               return props.onNotificationClick;
             },
@@ -3734,7 +4176,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$49 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -3756,7 +4198,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$49();
+    var _el$ = _tmpl$51();
     insert(_el$, createComponent(Switch$1, {
       get children() {
         return [createComponent(Match, {
@@ -3778,6 +4220,12 @@ var InboxContent = (props) => {
                   get renderNotification() {
                     return props.renderNotification;
                   },
+                  get renderSubject() {
+                    return props.renderSubject;
+                  },
+                  get renderBody() {
+                    return props.renderBody;
+                  },
                   get onNotificationClick() {
                     return props.onNotificationClick;
                   },
@@ -3797,6 +4245,12 @@ var InboxContent = (props) => {
                   get renderNotification() {
                     return props.renderNotification;
                   },
+                  get renderSubject() {
+                    return props.renderSubject;
+                  },
+                  get renderBody() {
+                    return props.renderBody;
+                  },
                   get onNotificationClick() {
                     return props.onNotificationClick;
                   },
@@ -3832,7 +4286,7 @@ var InboxContent = (props) => {
     return _el$;
   })();
 };
-var Inbox2 = (props) => {
+var Inbox = (props) => {
   const style = useStyle();
   const {
     isOpened,
@@ -3863,7 +4317,7 @@ var Inbox2 = (props) => {
           size: "icon"
         }, triggerProps, {
           get children() {
-            return createComponent(Bell, {
+            return createComponent(Bell2, {
               get renderBell() {
                 return props.renderBell;
               }
@@ -3874,18 +4328,44 @@ var Inbox2 = (props) => {
         appearanceKey: "inbox__popoverContent",
         portal: true,
         get children() {
-          return createComponent(InboxContent, {
-            get renderNotification() {
+          return createComponent(Show, {
+            get when() {
               return props.renderNotification;
             },
-            get onNotificationClick() {
-              return props.onNotificationClick;
-            },
-            get onPrimaryActionClick() {
-              return props.onPrimaryActionClick;
+            get fallback() {
+              return createComponent(InboxContent, {
+                get renderSubject() {
+                  return props.renderSubject;
+                },
+                get renderBody() {
+                  return props.renderBody;
+                },
+                get onNotificationClick() {
+                  return props.onNotificationClick;
+                },
+                get onPrimaryActionClick() {
+                  return props.onPrimaryActionClick;
+                },
+                get onSecondaryActionClick() {
+                  return props.onSecondaryActionClick;
+                }
+              });
             },
-            get onSecondaryActionClick() {
-              return props.onSecondaryActionClick;
+            get children() {
+              return createComponent(InboxContent, {
+                get renderNotification() {
+                  return props.renderNotification;
+                },
+                get onNotificationClick() {
+                  return props.onNotificationClick;
+                },
+                get onPrimaryActionClick() {
+                  return props.onPrimaryActionClick;
+                },
+                get onSecondaryActionClick() {
+                  return props.onSecondaryActionClick;
+                }
+              });
             }
           });
         }
@@ -3896,21 +4376,55 @@ var Inbox2 = (props) => {
 
 // src/ui/components/Renderer.tsx
 var novuComponents = {
-  Inbox: Inbox2,
+  Inbox,
   InboxContent,
-  Bell,
-  Notifications: (props) => createComponent(InboxContent, mergeProps(props, {
-    hideNav: true,
-    get initialPage() {
-      return InboxPage.Notifications;
+  Bell: Bell2,
+  Notifications: (props) => {
+    if (props.renderNotification) {
+      const _a = props, propsWithoutBodyAndSubject = __objRest(_a, [
+        "renderBody",
+        "renderSubject"
+      ]);
+      return createComponent(InboxContent, mergeProps(propsWithoutBodyAndSubject, {
+        hideNav: true,
+        get initialPage() {
+          return InboxPage.Notifications;
+        }
+      }));
     }
-  })),
-  Preferences: (props) => createComponent(InboxContent, mergeProps(props, {
-    hideNav: true,
-    get initialPage() {
-      return InboxPage.Preferences;
+    const _b = props, propsWithoutRenderNotification = __objRest(_b, [
+      "renderNotification"
+    ]);
+    return createComponent(InboxContent, mergeProps(propsWithoutRenderNotification, {
+      hideNav: true,
+      get initialPage() {
+        return InboxPage.Notifications;
+      }
+    }));
+  },
+  Preferences: (props) => {
+    if (props.renderNotification) {
+      const _a = props, propsWithoutBodyAndSubject = __objRest(_a, [
+        "renderBody",
+        "renderSubject"
+      ]);
+      return createComponent(InboxContent, mergeProps(propsWithoutBodyAndSubject, {
+        hideNav: true,
+        get initialPage() {
+          return InboxPage.Preferences;
+        }
+      }));
     }
-  }))
+    const _b = props, propsWithoutRenderNotification = __objRest(_b, [
+      "renderNotification"
+    ]);
+    return createComponent(InboxContent, mergeProps(propsWithoutRenderNotification, {
+      hideNav: true,
+      get initialPage() {
+        return InboxPage.Preferences;
+      }
+    }));
+  }
 };
 var Renderer = (props) => {
   const nodes = () => [...props.nodes.keys()];
@@ -3975,11 +4489,13 @@ var Renderer = (props) => {
                               let portalDivElement;
                               const Component = novuComponents[novuComponent().name];
                               onMount(() => {
-                                if (!["Notifications", "Preferences"].includes(novuComponent().name)) return;
+                                if (!["Notifications", "Preferences", "InboxContent"].includes(novuComponent().name)) return;
                                 if (node instanceof HTMLElement) {
-                                  node.classList.add("nt-h-full");
+                                  node.style.height = "100%";
+                                }
+                                if (portalDivElement) {
+                                  portalDivElement.style.height = "100%";
                                 }
-                                portalDivElement.classList.add("nt-h-full");
                               });
                               return createComponent(Portal, {
                                 mount: node,
@@ -4009,7 +4525,7 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "2.6.6";
+var version = "3.0.0-canary.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 {