@novu/js 3.8.1 → 3.9.1

package/dist/esm/ui/index.mjs

@@ -1,4 +1,4 @@
-import { Novu, checkNotificationTagFilter, checkNotificationDataFilter, isBrowser, DEFAULT_API_VERSION, isSameFilter } from '../chunk-HL3WZM2B.mjs';
+import { Novu, checkNotificationTagFilter, checkNotificationDataFilter, isBrowser, DEFAULT_API_VERSION, isSameFilter } from '../chunk-SH2NZJC6.mjs';
 import { parseMarkdownIntoTokens } from '../chunk-QOD7NZ77.mjs';
 import { __privateAdd, __privateMethod, __privateSet, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
 import { createComponent, mergeProps, delegateEvents, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
@@ -11,8 +11,8 @@ import { autoUpdate, offset, flip, shift } from '@floating-ui/dom';
 import { useFloating } from 'solid-floating-ui';
 import { cva } from 'class-variance-authority';
 
-// _j9cq3718i:/home/runner/work/novu/novu/packages/js/src/ui/index.directcss
-var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-1{margin-left:.25rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-1{margin-top:.25rem}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-3\\.5{height:.875rem;width:.875rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-translate-x-1\\/2{--tw-translate-x:50%}.nt-transform,.nt-translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-not-allowed{cursor:not-allowed}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-200{border-color:var(--nv-color-neutral-alpha-200)}.nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-\\[12px\\]{font-size:12px}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-\\[\\#000000\\]{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.nt-underline{text-decoration-line:underline}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-opacity-50{opacity:.5}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-12 .nv-notificationList{padding-bottom:3rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-12 .nv-preferencesContainer{padding-bottom:3rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
+// _0emab6gc0:/home/runner/work/novu/novu/packages/js/src/ui/index.directcss
+var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-bottom-0{bottom:0}.nt-left-0{left:0}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.-nt-m-1{margin:-.25rem}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-1{margin-left:.25rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-1{margin-top:.25rem}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-3\\.5{height:.875rem;width:.875rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\.5{width:.375rem}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[3px\\]{width:3px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-translate-x-1\\/2{--tw-translate-x:50%}.nt-transform,.nt-translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-not-allowed{cursor:not-allowed}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-200{border-color:var(--nv-color-neutral-alpha-200)}.nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-severity-high{background-color:var(--nv-color-severity-high)}.nt-bg-severity-high-alpha-100{background-color:var(--nv-color-severity-high-alpha-100)}.nt-bg-severity-high-alpha-200{background-color:var(--nv-color-severity-high-alpha-200)}.nt-bg-severity-high-alpha-300{background-color:var(--nv-color-severity-high-alpha-300)}.nt-bg-severity-high-alpha-50{background-color:var(--nv-color-severity-high-alpha-50)}.nt-bg-severity-low{background-color:var(--nv-color-severity-low)}.nt-bg-severity-low-alpha-100{background-color:var(--nv-color-severity-low-alpha-100)}.nt-bg-severity-low-alpha-200{background-color:var(--nv-color-severity-low-alpha-200)}.nt-bg-severity-low-alpha-300{background-color:var(--nv-color-severity-low-alpha-300)}.nt-bg-severity-low-alpha-50{background-color:var(--nv-color-severity-low-alpha-50)}.nt-bg-severity-medium{background-color:var(--nv-color-severity-medium)}.nt-bg-severity-medium-alpha-100{background-color:var(--nv-color-severity-medium-alpha-100)}.nt-bg-severity-medium-alpha-200{background-color:var(--nv-color-severity-medium-alpha-200)}.nt-bg-severity-medium-alpha-300{background-color:var(--nv-color-severity-medium-alpha-300)}.nt-bg-severity-medium-alpha-50{background-color:var(--nv-color-severity-medium-alpha-50)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-\\[12px\\]{font-size:12px}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-\\[\\#000000\\]{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.nt-underline{text-decoration-line:underline}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-opacity-50{opacity:.5}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-foreground\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-foreground) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-high\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-high) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-high\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-high) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-low\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-low) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-low\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-low) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-medium\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-medium) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-medium\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-medium) 80% c h)}.\\[--bell-gradient-start\\:var\\(--nv-color-foreground\\)\\]{--bell-gradient-start:var(--nv-color-foreground)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-high\\)\\]{--bell-gradient-start:var(--nv-color-severity-high)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-low\\)\\]{--bell-gradient-start:var(--nv-color-severity-low)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-medium\\)\\]{--bell-gradient-start:var(--nv-color-severity-medium)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}.before\\:nt-m-1:before{content:var(--tw-content);margin:.25rem}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-full:before{border-radius:var(--nv-radius-full);content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-severity-high-alpha-200:before{background-color:var(--nv-color-severity-high-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-high-alpha-300:before{background-color:var(--nv-color-severity-high-alpha-300);content:var(--tw-content)}.before\\:nt-bg-severity-low-alpha-200:before{background-color:var(--nv-color-severity-low-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-low-alpha-300:before{background-color:var(--nv-color-severity-low-alpha-300);content:var(--tw-content)}.before\\:nt-bg-severity-medium-alpha-200:before{background-color:var(--nv-color-severity-medium-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-medium-alpha-300:before{background-color:var(--nv-color-severity-medium-alpha-300);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-bg-severity-high-alpha-50:hover{background-color:var(--nv-color-severity-high-alpha-50)}.hover\\:nt-bg-severity-low-alpha-50:hover{background-color:var(--nv-color-severity-low-alpha-50)}.hover\\:nt-bg-severity-medium-alpha-50:hover{background-color:var(--nv-color-severity-medium-alpha-50)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100{opacity:1}.nt-group:hover .group-hover\\:nt-bg-severity-high-alpha-500{background-color:var(--nv-color-severity-high-alpha-500)}.nt-group:hover .group-hover\\:nt-bg-severity-low-alpha-500{background-color:var(--nv-color-severity-low-alpha-500)}.nt-group:hover .group-hover\\:nt-bg-severity-medium-alpha-500{background-color:var(--nv-color-severity-medium-alpha-500)}.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-12 .nv-notificationList{padding-bottom:3rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-12 .nv-preferencesContainer{padding-bottom:3rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_stop\\]\\:nt-transition-\\[stop-color\\] stop{transition-duration:.15s;transition-property:stop-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
 
 // src/ui/config/appearanceKeys.ts
 var appearanceKeys = [
@@ -78,6 +78,13 @@ var appearanceKeys = [
   "bellIcon",
   "lockIcon",
   "bellContainer",
+  "severityHigh__bellContainer",
+  "severityMedium__bellContainer",
+  "severityLow__bellContainer",
+  "bellSeverityGlow",
+  "severityGlowHigh__bellSeverityGlow",
+  "severityGlowMedium__bellSeverityGlow",
+  "severityGlowLow__bellSeverityGlow",
   "bellDot",
   "preferences__button",
   "preferencesContainer",
@@ -101,6 +108,13 @@ var appearanceKeys = [
   "notificationList__skeletonText",
   "notificationListNewNotificationsNotice__button",
   "notification",
+  "severityHigh__notification",
+  "severityMedium__notification",
+  "severityLow__notification",
+  "notificationBar",
+  "severityHigh__notificationBar",
+  "severityMedium__notificationBar",
+  "severityLow__notificationBar",
   "notificationContent",
   "notificationTextContainer",
   "notificationDot",
@@ -284,7 +298,10 @@ var defaultVariables = {
   colorShadow: "rgb(0,0,0)",
   fontSize: "1rem",
   borderRadius: "0.375rem",
-  colorStripes: "#FF9A68"
+  colorStripes: "#FF9A68",
+  colorSeverityHigh: "#FB3748",
+  colorSeverityMedium: "#FF8447",
+  colorSeverityLow: "transparent"
 };
 
 // src/ui/helpers/constants.ts
@@ -821,6 +838,16 @@ var parseVariables = (variables, id) => {
     generateDefaultColor({ color: variables.colorShadow, key: "color-shadow", id }),
     generateDefaultColor({ color: variables.colorRing, key: "color-ring", id }),
     generateDefaultColor({ color: variables.colorStripes, key: "color-stripes", id }),
+    generateDefaultColor({ color: variables.colorSeverityHigh, key: "color-severity-high", id }),
+    generateDefaultColor({ color: variables.colorSeverityMedium, key: "color-severity-medium", id }),
+    generateDefaultColor({ color: variables.colorSeverityLow, key: "color-severity-low", id }),
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorSeverityHigh, key: "color-severity-high-alpha", id }),
+    ...generateAlphaShadeRulesFromColor({
+      color: variables.colorSeverityMedium,
+      key: "color-severity-medium-alpha",
+      id
+    }),
+    ...generateAlphaShadeRulesFromColor({ color: variables.colorSeverityLow, key: "color-severity-low-alpha", 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 }),
@@ -877,10 +904,13 @@ var useStyle = () => {
     setIsServer(false);
   });
   const styleFuncMemo = createMemo(
-    () => (appearanceKey, className, {
-      iconKey
-    } = {}) => {
-      const appearanceKeyParts = appearanceKey.split("__");
+    () => ({
+      key,
+      className,
+      iconKey,
+      context
+    }) => {
+      const appearanceKeyParts = key.split("__");
       let finalAppearanceKeys = [];
       for (let i = 0; i < appearanceKeyParts.length; i += 1) {
         const accumulated = appearanceKeyParts.slice(i).join("__");
@@ -904,14 +934,17 @@ var useStyle = () => {
       let appearanceClassnames = [];
       const reversedFinalAppearanceKeys = finalAppearanceKeys.reverse();
       for (let i = 0; i < reversedFinalAppearanceKeys.length; i += 1) {
-        if (typeof appearance.elements()[reversedFinalAppearanceKeys[i]] === "string") {
-          appearanceClassnames.push(appearance.elements()[reversedFinalAppearanceKeys[i]]);
+        const elementStyles = appearance.elements()[reversedFinalAppearanceKeys[i]];
+        if (typeof elementStyles === "string") {
+          appearanceClassnames.push(elementStyles);
+        } else if (typeof elementStyles === "function") {
+          appearanceClassnames.push(elementStyles(context));
         }
       }
       appearanceClassnames = [publicFacingTwMerge(appearanceClassnames)];
       const cssInJsClasses = !!finalAppearanceKeys.length && !isServer() ? finalAppearanceKeys.map((appKey) => appearance.appearanceKeyToCssInJsClass[appKey]) : [];
       return cn(
-        ...finalAppearanceKeys.map((key) => `nv-${key}`),
+        ...finalAppearanceKeys.map((key2) => `nv-${key2}`),
         "\u{1F514}",
         iconKey ? `nv-${iconKey} \u{1F5BC}\uFE0F` : "",
         finalClassName,
@@ -1203,7 +1236,7 @@ var STATUS_TO_FILTER = {
 };
 var DEFAULT_LIMIT = 10;
 var InboxProvider = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [isOpened, setIsOpened] = createSignal(false);
   const [tabs, setTabs] = createSignal(props.tabs);
   const [activeTab, setActiveTab] = createSignal((_a = props.tabs[0] && props.tabs[0].label) != null ? _a : "");
@@ -1211,7 +1244,8 @@ var InboxProvider = (props) => {
   const [limit, setLimit] = createSignal(DEFAULT_LIMIT);
   const [filter, setFilter] = createSignal(__spreadProps(__spreadValues({}, STATUS_TO_FILTER["unreadRead" /* UNREAD_READ */]), {
     tags: props.tabs.length > 0 ? getTagsFromTab(props.tabs[0]) : [],
-    data: props.tabs.length > 0 ? (_b = props.tabs[0].filter) == null ? void 0 : _b.data : {}
+    data: props.tabs.length > 0 ? (_b = props.tabs[0].filter) == null ? void 0 : _b.data : {},
+    severity: props.tabs.length > 0 ? (_c = props.tabs[0].filter) == null ? void 0 : _c.severity : void 0
   }));
   const [hideBranding, setHideBranding] = createSignal(false);
   const [isDevelopmentMode, setIsDevelopmentMode] = createSignal(false);
@@ -1225,7 +1259,8 @@ var InboxProvider = (props) => {
     setStatus(newStatus);
     setFilter((old) => __spreadProps(__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
       tags: old.tags,
-      data: old.data
+      data: old.data,
+      severity: old.severity
     }));
   };
   const setNewActiveTab = (newActiveTab) => {
@@ -1236,10 +1271,11 @@ var InboxProvider = (props) => {
     }
     setActiveTab(newActiveTab);
     setFilter((old) => {
-      var _a2;
+      var _a2, _b2;
       return __spreadProps(__spreadValues({}, old), {
         tags,
-        data: (_a2 = tab == null ? void 0 : tab.filter) == null ? void 0 : _a2.data
+        data: (_a2 = tab == null ? void 0 : tab.filter) == null ? void 0 : _a2.data,
+        severity: (_b2 = tab == null ? void 0 : tab.filter) == null ? void 0 : _b2.severity
       });
     });
   };
@@ -1267,10 +1303,11 @@ var InboxProvider = (props) => {
     const tags = getTagsFromTab(firstTab);
     setActiveTab((_a2 = firstTab == null ? void 0 : firstTab.label) != null ? _a2 : "");
     setFilter((old) => {
-      var _a3;
+      var _a3, _b2;
       return __spreadProps(__spreadValues({}, old), {
         tags,
-        data: (_a3 = firstTab == null ? void 0 : firstTab.filter) == null ? void 0 : _a3.data
+        data: (_a3 = firstTab == null ? void 0 : firstTab.filter) == null ? void 0 : _a3.data,
+        severity: (_b2 = firstTab == null ? void 0 : firstTab.filter) == null ? void 0 : _b2.severity
       });
     });
     setPreferencesFilter(props.preferencesFilter);
@@ -1360,9 +1397,18 @@ var CountProvider = (props) => {
     isOpened,
     tabs,
     filter,
-    limit
+    limit,
+    activeTab
   } = useInboxContext();
-  const [totalUnreadCount, setTotalUnreadCount] = createSignal(0);
+  const [unreadCount, setUnreadCount] = createSignal({
+    total: 0,
+    severity: {
+      ["high" /* HIGH */]: 0,
+      ["medium" /* MEDIUM */]: 0,
+      ["low" /* LOW */]: 0,
+      ["none" /* NONE */]: 0
+    }
+  });
   const [unreadCounts, setUnreadCounts] = createSignal(/* @__PURE__ */ new Map());
   const [newNotificationCounts, setNewNotificationCounts] = createSignal(/* @__PURE__ */ new Map());
   const updateTabCounts = () => __async(void 0, null, function* () {
@@ -1370,13 +1416,14 @@ var CountProvider = (props) => {
       return;
     }
     const filters = tabs().map((tab) => {
-      var _a;
+      var _a, _b;
       return {
         tags: getTagsFromTab(tab),
         read: false,
         archived: false,
         snoozed: false,
-        data: (_a = tab.filter) == null ? void 0 : _a.data
+        data: (_a = tab.filter) == null ? void 0 : _a.data,
+        severity: (_b = tab.filter) == null ? void 0 : _b.severity
       };
     });
     const {
@@ -1392,7 +1439,11 @@ var CountProvider = (props) => {
       counts
     } = data;
     for (let i = 0; i < counts.length; i += 1) {
-      const tagsKey = createKey(counts[i].filter.tags, counts[i].filter.data);
+      const tagsKey = createKey({
+        tags: counts[i].filter.tags,
+        data: counts[i].filter.data,
+        severity: counts[i].filter.severity
+      });
       newMap.set(tagsKey, data == null ? void 0 : data.counts[i].count);
     }
     setUnreadCounts(newMap);
@@ -1403,7 +1454,7 @@ var CountProvider = (props) => {
   useWebSocketEvent({
     event: "notifications.unread_count_changed",
     eventHandler: (data) => {
-      setTotalUnreadCount(data.result);
+      setUnreadCount(data.result);
       updateTabCounts();
     }
   });
@@ -1415,20 +1466,21 @@ var CountProvider = (props) => {
       if (!data) {
         return;
       }
-      setTotalUnreadCount(data.totalUnreadCount);
+      setUnreadCount(data.unreadCount);
     }
   });
-  const updateNewNotificationCountsOrCache = (notification, tags, data) => {
+  const updateNewNotificationCountsOrCache = (tabLabel, notification, tags, data, severity) => {
     const notificationsCache = novu.notifications.cache;
     const limitValue = limit();
     const tabSpecificFilterForCache = __spreadProps(__spreadValues({}, filter()), {
       tags,
       data,
+      severity,
       after: void 0,
       limit: limitValue
     });
     const hasEmptyCache = !notificationsCache.has(tabSpecificFilterForCache);
-    if (!isOpened() && hasEmptyCache) {
+    if (hasEmptyCache && (!isOpened() || activeTab() !== tabLabel)) {
       return;
     }
     const cachedData = notificationsCache.getAll(tabSpecificFilterForCache) || {
@@ -1437,14 +1489,18 @@ var CountProvider = (props) => {
       notifications: []
     };
     const hasLessThenMinAmount = ((cachedData == null ? void 0 : cachedData.notifications.length) || 0) < MIN_AMOUNT_OF_NOTIFICATIONS;
-    if (hasLessThenMinAmount) {
+    if (hasLessThenMinAmount || !isOpened()) {
       notificationsCache.update(tabSpecificFilterForCache, __spreadProps(__spreadValues({}, cachedData), {
         notifications: [notification, ...cachedData.notifications]
       }));
       return;
     }
     setNewNotificationCounts((oldMap) => {
-      const key = createKey(tags, data);
+      const key = createKey({
+        tags,
+        data,
+        severity
+      });
       const newMap = new Map(oldMap);
       newMap.set(key, (oldMap.get(key) || 0) + 1);
       return newMap;
@@ -1455,23 +1511,34 @@ var CountProvider = (props) => {
     eventHandler: (_0) => __async(void 0, [_0], function* ({
       result: notification
     }) {
-      var _a;
+      var _a, _b;
       if (filter().archived || filter().snoozed) {
         return;
       }
       const currentTabs = tabs();
+      const processedFilters = /* @__PURE__ */ new Set();
       if (currentTabs.length > 0) {
         for (const tab of currentTabs) {
           const tabTags = getTagsFromTab(tab);
           const tabDataFilterCriteria = (_a = tab.filter) == null ? void 0 : _a.data;
+          const tabSeverityFilterCriteria = (_b = tab.filter) == null ? void 0 : _b.severity;
           const matchesTagFilter = checkNotificationTagFilter(notification.tags, tabTags);
           const matchesDataFilterCriteria = checkNotificationDataFilter(notification.data, tabDataFilterCriteria);
-          if (matchesTagFilter && matchesDataFilterCriteria) {
-            updateNewNotificationCountsOrCache(notification, tabTags, tabDataFilterCriteria);
+          const matchesSeverityFilterCriteria = !tabSeverityFilterCriteria || Array.isArray(tabSeverityFilterCriteria) && tabSeverityFilterCriteria.length === 0 || Array.isArray(tabSeverityFilterCriteria) && tabSeverityFilterCriteria.includes(notification.severity) || !Array.isArray(tabSeverityFilterCriteria) && tabSeverityFilterCriteria === notification.severity;
+          if (matchesTagFilter && matchesDataFilterCriteria && matchesSeverityFilterCriteria) {
+            const filterKey = createKey({
+              tags: tabTags,
+              data: tabDataFilterCriteria,
+              severity: tabSeverityFilterCriteria
+            });
+            if (!processedFilters.has(filterKey)) {
+              processedFilters.add(filterKey);
+              updateNewNotificationCountsOrCache(tab.label, notification, tabTags, tabDataFilterCriteria, tabSeverityFilterCriteria);
+            }
           }
         }
       } else {
-        updateNewNotificationCountsOrCache(notification, [], void 0);
+        updateNewNotificationCountsOrCache("", notification, [], void 0, void 0);
       }
     })
   });
@@ -1488,7 +1555,7 @@ var CountProvider = (props) => {
   };
   return createComponent(CountContext.Provider, {
     value: {
-      totalUnreadCount,
+      unreadCount,
       unreadCounts,
       newNotificationCounts,
       resetNewNotificationCounts
@@ -1498,19 +1565,21 @@ var CountProvider = (props) => {
     }
   });
 };
-var createKey = (tags, data) => {
+var createKey = (filter) => {
+  var _a, _b;
   return JSON.stringify({
-    tags: tags != null ? tags : [],
-    data: data != null ? data : {}
+    tags: (_a = filter.tags) != null ? _a : [],
+    data: (_b = filter.data) != null ? _b : {},
+    severity: filter.severity
   });
 };
-var useTotalUnreadCount = () => {
+var useUnreadCount = () => {
   const context = useContext(CountContext);
   if (!context) {
-    throw new Error("useTotalUnreadCount must be used within a CountProvider");
+    throw new Error("useUnreadCount must be used within a CountProvider");
   }
   return {
-    totalUnreadCount: context.totalUnreadCount
+    unreadCount: context.unreadCount
   };
 };
 var useNewMessagesCount = (props) => {
@@ -1518,7 +1587,7 @@ var useNewMessagesCount = (props) => {
   if (!context) {
     throw new Error("useNewMessagesCount must be used within a CountProvider");
   }
-  const key = createMemo(() => createKey(props.filter.tags, props.filter.data));
+  const key = createMemo(() => createKey(props.filter));
   const count = createMemo(() => context.newNotificationCounts().get(key()) || 0);
   const reset = () => context.resetNewNotificationCounts(key());
   return {
@@ -1526,12 +1595,12 @@ var useNewMessagesCount = (props) => {
     reset
   };
 };
-var useUnreadCount = (props) => {
+var useFilteredUnreadCount = (props) => {
   const context = useContext(CountContext);
   if (!context) {
-    throw new Error("useUnreadCount must be used within a CountProvider");
+    throw new Error("useFilteredUnreadCount must be used within a CountProvider");
   }
-  const count = createMemo(() => context.unreadCounts().get(createKey(props.filter.tags, props.filter.data)) || 0);
+  const count = createMemo(() => context.unreadCounts().get(createKey(props.filter)) || 0);
   return count;
 };
 var useUnreadCounts = (props) => {
@@ -1540,7 +1609,7 @@ var useUnreadCounts = (props) => {
     throw new Error("useUnreadCounts must be used within a CountProvider");
   }
   const counts = createMemo(() => props.filters.map((filter) => {
-    return context.unreadCounts().get(createKey(filter.tags, filter.data)) || 0;
+    return context.unreadCounts().get(createKey(filter)) || 0;
   }));
   return counts;
 };
@@ -1671,7 +1740,7 @@ var ArrowRight = (props) => {
     return _el$;
   })();
 };
-var _tmpl$6 = /* @__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>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 12 14"><path fill=url(#nv_bell_gradient) d="M6 0c-.435 0-.786.391-.786.875V1.4C3.42 1.805 2.07 3.571 2.07 5.687v.515c0 1.285-.425 2.526-1.19 3.489l-.183.227a.957.957 0 0 0-.13.94c.126.315.408.517.717.517h9.429c.31 0 .589-.202.717-.517a.95.95 0 0 0-.13-.94l-.182-.227c-.766-.963-1.191-2.202-1.191-3.49v-.513c0-2.117-1.35-3.883-3.143-4.288V.875C6.785.391 6.434 0 6 0Zm1.112 13.489c.294-.329.459-.774.459-1.239H4.429c-.001.465.164.91.458 1.239.295.328.695.511 1.112.511.418 0 .818-.183 1.113-.511Z"></path><defs><linearGradient id=nv_bell_gradient x1=6 y1=0 x2=6 y2=14 gradientUnits=userSpaceOnUse><stop stop-color="var(--bell-gradient-start, currentColor)"></stop><stop offset=1 stop-color="var(--bell-gradient-end, currentColor)">`);
 function Bell(props) {
   return (() => {
     var _el$ = _tmpl$6();
@@ -1840,31 +1909,104 @@ var IconRendererWrapper = (props) => {
 
 // src/ui/components/elements/Bell/DefaultBellContainer.tsx
 var _tmpl$24 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<span><div>`);
+var SEVERITY_GLOW_KEYS = {
+  ["none" /* NONE */]: "bellSeverityGlow",
+  ["high" /* HIGH */]: "severityGlowHigh__bellSeverityGlow",
+  ["medium" /* MEDIUM */]: "severityGlowMedium__bellSeverityGlow",
+  ["low" /* LOW */]: "severityGlowLow__bellSeverityGlow"
+};
+var SEVERITY_TO_CONTAINER_KEYS = {
+  ["none" /* NONE */]: "bellContainer",
+  ["high" /* HIGH */]: "severityHigh__bellContainer",
+  ["medium" /* MEDIUM */]: "severityMedium__bellContainer",
+  ["low" /* LOW */]: "severityLow__bellContainer"
+};
 var BellContainer = (props) => {
   const style = useStyle();
-  const bellIconStyle = style("bellIcon", "nt-size-4");
+  const severity = createMemo(() => {
+    if (props.unreadCount.severity["high" /* HIGH */] > 0) {
+      return "high" /* HIGH */;
+    } else if (props.unreadCount.severity["medium" /* MEDIUM */] > 0) {
+      return "medium" /* MEDIUM */;
+    } else if (props.unreadCount.severity["low" /* LOW */] > 0) {
+      return "low" /* LOW */;
+    }
+    return "none" /* NONE */;
+  });
+  const unreadCount = createMemo(() => props.unreadCount);
   return (() => {
-    var _el$ = _tmpl$24();
+    var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(IconRendererWrapper, {
       iconKey: "bell",
-      "class": bellIconStyle,
+      get ["class"]() {
+        return style({
+          key: "bellIcon",
+          className: "nt-size-4",
+          context: {
+            unreadCount: unreadCount()
+          }
+        });
+      },
       get fallback() {
         return createComponent(Bell, {
-          "class": bellIconStyle
+          get ["class"]() {
+            return style({
+              key: "bellIcon",
+              className: "nt-size-4",
+              context: {
+                unreadCount: unreadCount()
+              }
+            });
+          }
         });
       }
     }), null);
     insert(_el$, createComponent(Show, {
       get when() {
-        return props.unreadCount > 0;
+        return props.unreadCount.total > 0;
       },
       get children() {
-        var _el$2 = _tmpl$24();
-        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;
+        var _el$3 = _tmpl$24();
+        effect(() => className(_el$3, style({
+          key: "bellDot",
+          className: "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",
+          context: {
+            unreadCount: unreadCount()
+          }
+        })));
+        return _el$3;
       }
     }), null);
-    effect(() => className(_el$, style("bellContainer", `nt-size-4 nt-flex nt-justify-center nt-items-center nt-relative nt-text-foreground nt-cursor-pointer`)));
+    effect((_p$) => {
+      var _v$ = style({
+        key: SEVERITY_TO_CONTAINER_KEYS[severity()],
+        className: cn("nt-size-4 nt-flex nt-justify-center nt-items-center nt-relative nt-text-foreground nt-cursor-pointer [&_stop]:nt-transition-[stop-color]", {
+          "[--bell-gradient-start:var(--nv-color-severity-high)] [--bell-gradient-end:oklch(from_var(--nv-color-severity-high)_45%_c_h)]": severity() === "high" /* HIGH */,
+          "[--bell-gradient-start:var(--nv-color-severity-medium)] [--bell-gradient-end:oklch(from_var(--nv-color-severity-medium)_45%_c_h)]": severity() === "medium" /* MEDIUM */,
+          "[--bell-gradient-start:var(--nv-color-severity-low)] [--bell-gradient-end:oklch(from_var(--nv-color-severity-low)_45%_c_h)]": severity() === "low" /* LOW */
+        }),
+        context: {
+          unreadCount: unreadCount()
+        }
+      }), _v$2 = style({
+        key: SEVERITY_GLOW_KEYS[severity()],
+        className: cn('nt-transition nt-absolute nt-inset-0 -nt-m-1 nt-rounded-full before:nt-content-[""] before:nt-absolute before:nt-inset-0 before:nt-rounded-full before:nt-m-1', {
+          "nt-bg-severity-high-alpha-100 before:nt-bg-severity-high-alpha-200": severity() === "high" /* HIGH */,
+          "nt-bg-severity-medium-alpha-100 before:nt-bg-severity-medium-alpha-200": severity() === "medium" /* MEDIUM */,
+          "nt-bg-severity-low-alpha-100 before:nt-bg-severity-low-alpha-200": severity() === "low" /* LOW */
+        }),
+        context: {
+          unreadCount: unreadCount()
+        }
+      });
+      _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$;
   })();
 };
@@ -1872,8 +2014,8 @@ var BellContainer = (props) => {
 // src/ui/components/elements/Bell/Bell.tsx
 var Bell2 = (props) => {
   const {
-    totalUnreadCount
-  } = useTotalUnreadCount();
+    unreadCount
+  } = useUnreadCount();
   return createComponent(Show, {
     get when() {
       return props.renderBell;
@@ -1881,21 +2023,22 @@ var Bell2 = (props) => {
     get fallback() {
       return createComponent(BellContainer, {
         get unreadCount() {
-          return totalUnreadCount();
+          return unreadCount();
         }
       });
     },
     get children() {
       return createComponent(ExternalElementRenderer, {
-        render: (el) => props.renderBell(el, totalUnreadCount())
+        render: (el) => props.renderBell ? props.renderBell(el, unreadCount()) : () => {
+        }
       });
     }
   });
 };
-var _tmpl$25 = /* @__PURE__ */ template(`<svg width=6 height=6 viewBox="0 0 6 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00175 1.70402L0.705765 6L0 5.29424L4.29548 0.998253H0.509608V0H6V5.49039H5.00175V1.70402Z"fill=currentColor>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<svg width=6 height=6 viewBox="0 0 6 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00175 1.70402L0.705765 6L0 5.29424L4.29548 0.998253H0.509608V0H6V5.49039H5.00175V1.70402Z"fill=currentColor>`);
 var ArrowUpRight = (props) => {
   return (() => {
-    var _el$ = _tmpl$25();
+    var _el$ = _tmpl$26();
     spread(_el$, props, true, true);
     return _el$;
   })();
@@ -2046,7 +2189,10 @@ var TooltipContentBody = (props) => {
     },
     ref: setFloating,
     get ["class"]() {
-      return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
+      return memo(() => !!local.class)() ? local.class : style({
+        key: local.appearanceKey || "tooltipContent",
+        className: tooltipContentVariants()
+      });
     },
     get style() {
       return __spreadProps(__spreadValues({}, floatingStyles()), {
@@ -2102,7 +2248,7 @@ function mergeRefs(...refs) {
 }
 
 // src/ui/components/primitives/Tooltip/TooltipTrigger.tsx
-var _tmpl$26 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<button>`);
 var TooltipTrigger = (props) => {
   const {
     setReference,
@@ -2137,7 +2283,7 @@ var TooltipTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$26();
+    var _el$ = _tmpl$27();
     _el$.addEventListener("mouseleave", () => {
       setOpen(false);
     });
@@ -2148,7 +2294,9 @@ var TooltipTrigger = (props) => {
     typeof _ref$2 === "function" && use(_ref$2, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "tooltipTrigger");
+        return style({
+          key: local.appearanceKey || "tooltipTrigger"
+        });
       }
     }, rest), false, true);
     insert(_el$, () => props.children);
@@ -2170,7 +2318,7 @@ var Tooltip = {
 };
 
 // src/ui/components/primitives/CopyToClipboard.tsx
-var _tmpl$27 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<button type=button>`);
 function CopyToClipboard(props) {
   const [isCopied, setIsCopied] = createSignal(false);
   const style = useStyle();
@@ -2204,11 +2352,14 @@ function CopyToClipboard(props) {
     get children() {
       return [createComponent(Tooltip.Trigger, {
         asChild: (triggerProps) => (() => {
-          var _el$ = _tmpl$27();
+          var _el$ = _tmpl$28();
           spread(_el$, mergeProps(triggerProps, {
             "onClick": handleCopy,
             get ["class"]() {
-              return style("button", "nt-cursor-pointer");
+              return style({
+                key: "button",
+                className: "nt-cursor-pointer"
+              });
             }
           }), false, true);
           insert(_el$, () => props.children);
@@ -2225,8 +2376,8 @@ function CopyToClipboard(props) {
 }
 
 // src/ui/components/elements/Footer.tsx
-var _tmpl$28 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">`);
-var _tmpl$29 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
+var _tmpl$29 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">`);
+var _tmpl$210 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
 var _tmpl$32 = /* @__PURE__ */ template(`<a target=_blank class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
 var _tmpl$42 = /* @__PURE__ */ template(`<span class=nt-underline>Copy cURL`);
 var _tmpl$52 = /* @__PURE__ */ template(`<div class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-text-xs nt-text-secondary-foreground"><a href=https://go.novu.co/keyless class="nt-underline nt-flex nt-items-center nt-gap-0.5"target=_blank rel="noopener noreferrer">Get API key</a><span>\u2022</span><span>\u2022</span><button type=button class=nt-underline>Send notification`);
@@ -2265,7 +2416,7 @@ var Footer = () => {
           return isDevelopmentMode();
         },
         get children() {
-          var _el$3 = _tmpl$28();
+          var _el$3 = _tmpl$29();
           insert(_el$3, (() => {
             var _c$ = memo(() => !!isKeyless());
             return () => _c$() ? createComponent(Tooltip.Root, {
@@ -2291,7 +2442,7 @@ var Footer = () => {
           return memo(() => !!isDevelopmentMode())() && !hideBranding();
         },
         get children() {
-          return _tmpl$29();
+          return _tmpl$210();
         }
       }), null);
       insert(_el$2, createComponent(Show, {
@@ -2390,7 +2541,7 @@ var buttonVariants = cva(cn('nt-inline-flex nt-gap-4 nt-items-center nt-justify-
   }
 });
 var Button = (props) => {
-  const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "context"]);
   const style = useStyle();
   return (() => {
     var _el$ = _tmpl$30();
@@ -2402,17 +2553,21 @@ var Button = (props) => {
         return props.size;
       },
       get ["class"]() {
-        return style(local.appearanceKey || "button", cn(buttonVariants({
-          variant: props.variant,
-          size: props.size
-        }), local.class));
+        return style({
+          key: local.appearanceKey || "button",
+          className: cn(buttonVariants({
+            variant: props.variant,
+            size: props.size
+          }), local.class),
+          context: local.context
+        });
       }
     }, rest), false, false);
     return _el$;
   })();
 };
 var _tmpl$31 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$210 = /* @__PURE__ */ template(`<div><span>`);
+var _tmpl$211 = /* @__PURE__ */ template(`<div><span>`);
 var DatePickerContext = createContext({
   currentDate: () => /* @__PURE__ */ new Date(),
   setCurrentDate: () => {
@@ -2454,7 +2609,10 @@ var DatePicker = (props) => {
       var _el$ = _tmpl$31();
       spread(_el$, mergeProps({
         get ["class"]() {
-          return style("datePicker", cn("nt-p-2", local.class));
+          return style({
+            key: "datePicker",
+            className: cn("nt-p-2", local.class)
+          });
         }
       }, rest), false, true);
       insert(_el$, () => local.children);
@@ -2471,11 +2629,14 @@ var DatePickerHeader = (props) => {
     currentDate,
     maxDays
   } = useDatePicker();
-  useAppearance();
-  const prevIconClass = style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
+  const prevIconClass = style({
+    key: "datePickerControlPrevTrigger__icon",
+    className: "nt-size-4 nt-text-foreground-alpha-700",
     iconKey: "arrowLeft"
   });
-  const nextIconClass = style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
+  const nextIconClass = style({
+    key: "datePickerControlNextTrigger__icon",
+    className: "nt-size-4 nt-text-foreground-alpha-700",
     iconKey: "arrowRight"
   });
   const handlePrevMonth = () => {
@@ -2514,10 +2675,13 @@ var DatePickerHeader = (props) => {
     return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
   };
   return (() => {
-    var _el$2 = _tmpl$210(), _el$3 = _el$2.firstChild;
+    var _el$2 = _tmpl$211(), _el$3 = _el$2.firstChild;
     spread(_el$2, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "datePickerControl", cn("nt-flex nt-items-center nt-justify-between nt-gap-1.5 nt-h-7 nt-p-1 nt-mb-2 nt-rounded-lg nt-bg-background", local.class));
+        return style({
+          key: local.appearanceKey || "datePickerControl",
+          className: cn("nt-flex nt-items-center nt-justify-between nt-gap-1.5 nt-h-7 nt-p-1 nt-mb-2 nt-rounded-lg nt-bg-background", local.class)
+        });
       }
     }, rest), false, true);
     insert(_el$2, createComponent(Button, {
@@ -2570,7 +2734,10 @@ var DatePickerHeader = (props) => {
         });
       }
     }), null);
-    effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
+    effect(() => className(_el$3, style({
+      key: "datePickerHeaderMonth",
+      className: "nt-text-sm nt-font-medium nt-text-foreground-alpha-700"
+    })));
     return _el$2;
   })();
 };
@@ -2674,7 +2841,10 @@ var DatePickerCalendar = (props) => {
     _el$8.$$click = (e) => e.stopPropagation();
     spread(_el$8, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
+        return style({
+          key: local.appearanceKey || "datePickerCalendar",
+          className: cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class)
+        });
       }
     }, rest), false, true);
     insert(_el$8, () => getDaysInMonth().map((date) => {
@@ -2712,7 +2882,10 @@ var PopoverClose = (props) => {
     _el$.$$click = handleClick;
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "popoverClose", local.class);
+        return style({
+          key: local.appearanceKey || "popoverClose",
+          className: local.class
+        });
       }
     }, rest), false, false);
     return _el$;
@@ -2834,7 +3007,10 @@ var PopoverContentBody = (props) => {
     use(setFloating, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
+        return style({
+          key: local.appearanceKey || "popoverContent",
+          className: cn(popoverContentVariants(), local.class)
+        });
       },
       get style() {
         return floatingStyles();
@@ -2937,7 +3113,9 @@ var PopoverTrigger = (props) => {
     typeof _ref$2 === "function" && use(_ref$2, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "dropdownTrigger");
+        return style({
+          key: local.appearanceKey || "dropdownTrigger"
+        });
       }
     }, rest), false, true);
     insert(_el$, () => props.children);
@@ -3023,7 +3201,10 @@ var DropdownTrigger = (props) => {
   const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
   return createComponent(Popover.Trigger, mergeProps({
     get ["class"]() {
-      return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
+      return style({
+        key: local.appearanceKey || "dropdownTrigger",
+        className: cn(dropdownTriggerButtonVariants(), local.class)
+      });
     }
   }, rest));
 };
@@ -3149,7 +3330,10 @@ var TabsRoot = (props) => {
       use(setTabsContainer, _el$);
       spread(_el$, mergeProps({
         get ["class"]() {
-          return style(local.appearanceKey || "tabsRoot", cn(tabsRootVariants(), local.class));
+          return style({
+            key: local.appearanceKey || "tabsRoot",
+            className: cn(tabsRootVariants(), local.class)
+          });
         }
       }, rest), false, true);
       insert(_el$, () => local.children);
@@ -3174,7 +3358,10 @@ var TabsContent = (props) => {
       var _el$ = _tmpl$38();
       spread(_el$, mergeProps({
         get ["class"]() {
-          return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
+          return style({
+            key: local.appearanceKey || "tabsContent",
+            className: cn(local.class, activeTab() === local.value ? "nt-block" : "nt-hidden")
+          });
         },
         get id() {
           return `tabpanel-${local.value}`;
@@ -3192,7 +3379,7 @@ var TabsContent = (props) => {
   });
 };
 var _tmpl$39 = /* @__PURE__ */ template(`<div role=tablist>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
+var _tmpl$212 = /* @__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"]);
@@ -3203,12 +3390,15 @@ var TabsList = (props) => {
     typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "tabsList", cn(tabsListVariants(), local.class));
+        return style({
+          key: local.appearanceKey || "tabsList",
+          className: cn(tabsListVariants(), local.class)
+        });
       }
     }, rest), false, true);
     insert(_el$, () => local.children);
     return _el$;
-  })(), _tmpl$211()];
+  })(), _tmpl$212()];
 };
 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) => {
@@ -3234,7 +3424,10 @@ var TabsTrigger = (props) => {
       return (_a = local.appearanceKey) != null ? _a : "tabsTrigger";
     },
     get ["class"]() {
-      return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsTrigger", tabsTriggerVariants());
+      return style({
+        key: local.appearanceKey || "tabsTrigger",
+        className: cn(tabsTriggerVariants(), local.class)
+      });
     },
     get onClick() {
       var _a;
@@ -3280,7 +3473,7 @@ var inboxFilterLocalizationKeys = {
   snoozed: "inbox.filters.labels.snoozed"
 };
 var _tmpl$40 = /* @__PURE__ */ template(`<span><span>`);
-var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$213 = /* @__PURE__ */ template(`<span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
   iconKey: "unread",
@@ -3333,15 +3526,22 @@ var StatusItem = (props) => {
   const {
     t
   } = useLocalization();
-  const itemIconClass = style("inboxStatus__dropdownItemLeft__icon", "nt-size-3", {
+  const itemIconClass = style({
+    key: "inboxStatus__dropdownItemLeft__icon",
+    className: "nt-size-3",
     iconKey: props.iconKey
   });
-  const checkIconClass = style("inboxStatus__dropdownItemCheck__icon", "nt-size-3", {
+  const checkIconClass = style({
+    key: "inboxStatus__dropdownItemCheck__icon",
+    className: "nt-size-3",
     iconKey: "check"
   });
   return createComponent(Dropdown.Item, {
     get ["class"]() {
-      return style("inboxStatus__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-8 nt-justify-between"));
+      return style({
+        key: "inboxStatus__dropdownItem",
+        className: cn(dropdownItemVariants(), "nt-flex nt-gap-8 nt-justify-between")
+      });
     },
     get onClick() {
       return props.onClick;
@@ -3356,7 +3556,7 @@ var StatusItem = (props) => {
           "class": itemIconClass,
           get fallback() {
             return (() => {
-              var _el$3 = _tmpl$212();
+              var _el$3 = _tmpl$213();
               className(_el$3, itemIconClass);
               insert(_el$3, () => props.icon());
               return _el$3;
@@ -3365,7 +3565,13 @@ var StatusItem = (props) => {
         }), _el$2);
         insert(_el$2, () => t(props.localizationKey));
         effect((_p$) => {
-          var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = props.localizationKey, _v$3 = style("inboxStatus__dropdownItemLabel", "nt-leading-none");
+          var _v$ = style({
+            key: "inboxStatus__dropdownItemLabelContainer",
+            className: "nt-flex nt-gap-2 nt-items-center"
+          }), _v$2 = props.localizationKey, _v$3 = style({
+            key: "inboxStatus__dropdownItemLabel",
+            className: "nt-leading-none"
+          });
           _v$ !== _p$.e && className(_el$, _p$.e = _v$);
           _v$2 !== _p$.t && setAttribute(_el$2, "data-localization", _p$.t = _v$2);
           _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
@@ -3407,17 +3613,22 @@ var StatusDropdown = () => {
   const {
     t
   } = useLocalization();
-  const arrowDropDownIconClass = style("inboxStatus__dropdownItemRight__icon", "nt-text-foreground-alpha-600 nt-size-4", {
+  const arrowDropDownIconClass = style({
+    key: "inboxStatus__dropdownItemRight__icon",
+    className: "nt-text-foreground-alpha-600 nt-size-4",
     iconKey: "arrowDropDown"
   });
   return createComponent(Dropdown.Root, {
     get children() {
       return [createComponent(Dropdown.Trigger, {
         get ["class"]() {
-          return style("inboxStatus__dropdownTrigger", cn(buttonVariants({
-            variant: "unstyled",
-            size: "none"
-          }), "nt-gap-0.5"));
+          return style({
+            key: "inboxStatus__dropdownTrigger",
+            className: cn(buttonVariants({
+              variant: "unstyled",
+              size: "none"
+            }), "nt-gap-0.5")
+          });
         },
         asChild: (triggerProps) => createComponent(Button, mergeProps({
           variant: "unstyled",
@@ -3428,7 +3639,10 @@ var StatusDropdown = () => {
               var _el$ = _tmpl$41();
               insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               effect((_p$) => {
-                var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
+                var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style({
+                  key: "inboxStatus__title",
+                  className: "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$;
@@ -3539,9 +3753,9 @@ var useNotificationsInfiniteScroll = (props) => {
 var usePreferences = (options) => {
   const novu = useNovu();
   const [loading, setLoading] = createSignal(true);
-  const [preferences, { mutate, refetch }] = createResource(options || {}, (_0) => __async(void 0, [_0], function* ({ tags }) {
+  const [preferences, { mutate, refetch }] = createResource(options || {}, (_0) => __async(void 0, [_0], function* ({ tags, severity }) {
     try {
-      const response = yield novu.preferences.list({ tags });
+      const response = yield novu.preferences.list({ tags, severity });
       return response.data;
     } catch (error) {
       console.error("Error fetching preferences:", error);
@@ -3631,12 +3845,17 @@ var ActionsItem = (props) => {
     t
   } = useLocalization();
   const DefaultIconComponent = iconKeyToComponentMap[props.iconKey];
-  const moreActionsIconClass = style("moreActions__dropdownItemLeft__icon", "nt-size-3", {
+  const moreActionsIconClass = style({
+    key: "moreActions__dropdownItemLeft__icon",
+    className: "nt-size-3",
     iconKey: props.iconKey
   });
   return createComponent(Dropdown.Item, {
     get ["class"]() {
-      return style("moreActions__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-2"));
+      return style({
+        key: "moreActions__dropdownItem",
+        className: cn(dropdownItemVariants(), "nt-flex nt-gap-2")
+      });
     },
     get onClick() {
       return props.onClick;
@@ -3656,7 +3875,10 @@ var ActionsItem = (props) => {
         var _el$ = _tmpl$43();
         insert(_el$, () => t(props.localizationKey));
         effect((_p$) => {
-          var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
+          var _v$ = props.localizationKey, _v$2 = style({
+            key: "moreActions__dropdownItemLabel",
+            className: "nt-leading-none"
+          });
           _v$ !== _p$.e && setAttribute(_el$, "data-localization", _p$.e = _v$);
           _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
           return _p$;
@@ -3676,7 +3898,9 @@ var MoreActionsDropdown = () => {
   const {
     status
   } = useInboxContext();
-  const dotsIconClass = style("moreActions__dots", "nt-size-5", {
+  const dotsIconClass = style({
+    key: "moreActions__dots",
+    className: "nt-size-5",
     iconKey: "dots"
   });
   return createComponent(Show, {
@@ -3688,7 +3912,9 @@ var MoreActionsDropdown = () => {
         get children() {
           return [createComponent(Dropdown.Trigger, {
             get ["class"]() {
-              return style("moreActions__dropdownTrigger");
+              return style({
+                key: "moreActions__dropdownTrigger"
+              });
             },
             asChild: (triggerProps) => createComponent(Button, mergeProps({
               variant: "ghost",
@@ -3722,7 +3948,9 @@ var MoreActionsDropdown = () => {
 var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
-  const cogsIconClass = style("icon", "nt-size-5", {
+  const cogsIconClass = style({
+    key: "icon",
+    className: "nt-size-5",
     iconKey: "cogs"
   });
   return (() => {
@@ -3752,7 +3980,10 @@ var ActionsContainer = (props) => {
         }
       })
     }), null);
-    effect(() => className(_el$, style("moreActionsContainer", "nt-flex nt-gap-3")));
+    effect(() => className(_el$, style({
+      key: "moreActionsContainer",
+      className: "nt-flex nt-gap-3"
+    })));
     return _el$;
   })();
 };
@@ -3769,17 +4000,23 @@ var Header = (props) => {
         return props.navigateToPreferences;
       }
     }), null);
-    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"))));
+    effect(() => className(_el$, style({
+      key: "inboxHeader",
+      className: "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$;
   })();
 };
 var _tmpl$46 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$213 = /* @__PURE__ */ template(`<div><div></div><div>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div><div></div><div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
     var _el$ = _tmpl$46();
-    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))));
+    effect(() => className(_el$, style({
+      key: props.appearanceKey,
+      className: 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$;
   })();
 };
@@ -3787,16 +4024,28 @@ var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
     var _el$2 = _tmpl$46();
-    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))));
+    effect(() => className(_el$2, style({
+      key: props.appearanceKey,
+      className: 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;
   })();
 };
 var SkeletonSwitch = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$3 = _tmpl$213(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    var _el$3 = _tmpl$214(), _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");
+      var _v$ = style({
+        key: props.appearanceKey,
+        className: cn("nt-relative nt-inline-flex nt-items-center", props.class)
+      }), _v$2 = style({
+        key: props.appearanceKey,
+        className: "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({
+        key: props.thumbAppearanceKey,
+        className: "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);
@@ -3832,7 +4081,10 @@ var PreferencesListSkeleton = (props) => {
         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");
+        return style({
+          key: "preferencesList__skeleton",
+          className: "nt-flex nt-relative nt-mx-auto nt-flex-col nt-w-full nt-mb-4"
+        });
       },
       get children() {
         return [memo(() => Array.from({
@@ -3853,12 +4105,18 @@ var PreferencesListSkeleton = (props) => {
               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");
+              return style({
+                key: "preferencesList__skeletonContent",
+                className: "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");
+                  return style({
+                    key: "preferencesList__skeletonIcon",
+                    className: "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100"
+                  });
                 }
               }), (() => {
                 var _el$3 = _tmpl$47();
@@ -3870,7 +4128,10 @@ var PreferencesListSkeleton = (props) => {
                   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")));
+                effect(() => className(_el$3, style({
+                  key: "preferencesList__skeletonItem",
+                  className: "nt-flex nt-flex-col nt-gap-2 nt-flex-1"
+                })));
                 return _el$3;
               })(), createComponent(SkeletonSwitch, {
                 appearanceKey: "preferencesList__skeletonSwitch",
@@ -3880,7 +4141,10 @@ var PreferencesListSkeleton = (props) => {
           });
         })), (() => {
           var _el$2 = _tmpl$47();
-          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")));
+          effect(() => className(_el$2, style({
+            key: "notificationListEmptyNoticeOverlay",
+            className: "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;
         })()];
       }
@@ -3909,7 +4173,10 @@ var PreferencesListSkeleton = (props) => {
             delay: 0.6
           },
           get ["class"]() {
-            return style("preferencesListEmptyNotice"), "nt-text-center";
+            return style({
+              key: "preferencesListEmptyNotice",
+              className: "nt-text-center"
+            });
           },
           "data-localization": "preferences.emptyNotice",
           get children() {
@@ -3918,7 +4185,10 @@ var PreferencesListSkeleton = (props) => {
         });
       }
     }), 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")));
+    effect(() => className(_el$, style({
+      key: "preferencesListEmptyNoticeContainer",
+      className: "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$;
   })();
 };
@@ -3966,7 +4236,10 @@ var Collapsible = (props) => {
     var _el$ = _tmpl$49(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style("collapsible", props.class);
+        return style({
+          key: "collapsible",
+          className: props.class
+        });
       },
       get style() {
         return {
@@ -4012,12 +4285,18 @@ var Switch = (props) => {
     var _el$ = _tmpl$50(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", handleChange);
     effect((_p$) => {
-      var _v$ = style("channelSwitch", cn("nt-relative nt-inline-flex nt-cursor-pointer nt-items-center", {
-        "nt-opacity-50 nt-cursor-not-allowed": disabled()
-      })), _v$2 = disabled(), _v$3 = style("channelSwitchThumb", cn(`nt-h-4 nt-w-7 nt-rounded-full 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-[''] nt-transition-all nt-duration-200 after:nt-duration-200 shadow-sm`, {
-        "nt-bg-primary nt-shadow-none nt-border-neutral-alpha-400 after:nt-translate-x-full after:nt-border-background": isChecked(),
-        "after:nt-translate-x-1/2": isIndeterminate()
-      })), _v$4 = state();
+      var _v$ = style({
+        key: "channelSwitch",
+        className: cn("nt-relative nt-inline-flex nt-cursor-pointer nt-items-center", {
+          "nt-opacity-50 nt-cursor-not-allowed": disabled()
+        })
+      }), _v$2 = disabled(), _v$3 = style({
+        key: "channelSwitchThumb",
+        className: cn(`nt-h-4 nt-w-7 nt-rounded-full 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-[''] nt-transition-all nt-duration-200 after:nt-duration-200 shadow-sm`, {
+          "nt-bg-primary nt-shadow-none nt-border-neutral-alpha-400 after:nt-translate-x-full after:nt-border-background": isChecked(),
+          "after:nt-translate-x-1/2": isIndeterminate()
+        })
+      }), _v$4 = state();
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
@@ -4055,7 +4334,13 @@ var ChannelRow = (props) => {
       get channel() {
         return channel();
       },
-      "class": "nt-size-3"
+      "class": "nt-size-3",
+      get preference() {
+        return props.preference;
+      },
+      get preferenceGroup() {
+        return props.preferenceGroup;
+      }
     }));
     insert(_el$4, () => getLabel(channel()));
     insert(_el$5, createComponent(Switch, {
@@ -4065,7 +4350,42 @@ var ChannelRow = (props) => {
       onChange: (newState) => onChange(newState === "enabled")
     }));
     effect((_p$) => {
-      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");
+      var _v$ = style({
+        key: "channelContainer",
+        className: "nt-flex nt-justify-between nt-items-center nt-gap-2 data-[disabled=true]:nt-text-foreground-alpha-600",
+        context: {
+          preference: props.preference,
+          preferenceGroup: props.preferenceGroup
+        }
+      }), _v$2 = style({
+        key: "channelLabelContainer",
+        className: "nt-flex nt-items-center nt-gap-2 nt-text-foreground",
+        context: {
+          preference: props.preference,
+          preferenceGroup: props.preferenceGroup
+        }
+      }), _v$3 = style({
+        key: "channelIconContainer",
+        className: "nt-p-1 nt-rounded-md nt-bg-neutral-alpha-25 nt-text-foreground-alpha-300",
+        context: {
+          preference: props.preference,
+          preferenceGroup: props.preferenceGroup
+        }
+      }), _v$4 = style({
+        key: "channelLabel",
+        className: "nt-text-sm nt-font-semibold",
+        context: {
+          preference: props.preference,
+          preferenceGroup: props.preferenceGroup
+        }
+      }), _v$5 = style({
+        key: "channelSwitchContainer",
+        className: "nt-flex nt-items-center",
+        context: {
+          preference: props.preference,
+          preferenceGroup: props.preferenceGroup
+        }
+      });
       _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$3, _p$.a = _v$3);
@@ -4089,8 +4409,14 @@ var ChannelIcon = (props) => {
       key: "inApp",
       component: createComponent(InApp, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class, {
-            iconKey: "inApp"
+          return style({
+            key: props.appearanceKey,
+            className: props.class,
+            iconKey: "inApp",
+            context: {
+              preference: props.preference,
+              preferenceGroup: props.preferenceGroup
+            }
           });
         }
       })
@@ -4099,8 +4425,14 @@ var ChannelIcon = (props) => {
       key: "email",
       component: createComponent(Email, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class, {
-            iconKey: "email"
+          return style({
+            key: props.appearanceKey,
+            className: props.class,
+            iconKey: "email",
+            context: {
+              preference: props.preference,
+              preferenceGroup: props.preferenceGroup
+            }
           });
         }
       })
@@ -4109,8 +4441,14 @@ var ChannelIcon = (props) => {
       key: "push",
       component: createComponent(Push, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class, {
-            iconKey: "push"
+          return style({
+            key: props.appearanceKey,
+            className: props.class,
+            iconKey: "push",
+            context: {
+              preference: props.preference,
+              preferenceGroup: props.preferenceGroup
+            }
           });
         }
       })
@@ -4119,8 +4457,14 @@ var ChannelIcon = (props) => {
       key: "sms",
       component: createComponent(Sms, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class, {
-            iconKey: "sms"
+          return style({
+            key: props.appearanceKey,
+            className: props.class,
+            iconKey: "sms",
+            context: {
+              preference: props.preference,
+              preferenceGroup: props.preferenceGroup
+            }
           });
         }
       })
@@ -4129,8 +4473,14 @@ var ChannelIcon = (props) => {
       key: "chat",
       component: createComponent(Chat, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class, {
-            iconKey: "chat"
+          return style({
+            key: props.appearanceKey,
+            className: props.class,
+            iconKey: "chat",
+            context: {
+              preference: props.preference,
+              preferenceGroup: props.preferenceGroup
+            }
           });
         }
       })
@@ -4148,8 +4498,13 @@ var ChannelIcon = (props) => {
       return iconData.component;
     },
     get ["class"]() {
-      return style(props.appearanceKey, props.class, {
-        iconKey: iconData.key
+      return style({
+        key: props.appearanceKey,
+        className: props.class,
+        iconKey: iconData.key,
+        context: {
+          preference: props.preference
+        }
       });
     }
   });
@@ -4173,7 +4528,7 @@ var getLabel = (channel) => {
 
 // src/ui/components/elements/Preferences/PreferencesRow.tsx
 var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$214 = /* @__PURE__ */ template(`<div><div><div><div><span></span></div></div><span>`);
+var _tmpl$215 = /* @__PURE__ */ template(`<div><div><div><div><span></span></div></div><span>`);
 var _tmpl$310 = /* @__PURE__ */ template(`<span>`);
 var iconKeyToComponentMap2 = {
   cogs: Cogs,
@@ -4195,19 +4550,13 @@ var PreferencesRow = (props) => {
       };
     });
   });
-  const iconClass = style("workflowLabelIcon", "nt-text-foreground-alpha-600 nt-size-3.5", {
-    iconKey: "cogs"
-  });
-  const arrowDropDownIconClass = style("workflowArrow__icon", "nt-text-foreground-alpha-600 nt-size-4", {
-    iconKey: "arrowDropDown"
-  });
   const DefaultIconComponent = iconKeyToComponentMap2[props.iconKey];
   return createComponent(Show, {
     get when() {
       return channels().length > 0;
     },
     get children() {
-      var _el$ = _tmpl$214(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$3.nextSibling;
+      var _el$ = _tmpl$215(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$3.nextSibling;
       _el$2.$$click = () => {
         setIsOpenChannels((prev) => !prev);
       };
@@ -4215,10 +4564,26 @@ var PreferencesRow = (props) => {
         get iconKey() {
           return props.iconKey;
         },
-        "class": iconClass,
+        get ["class"]() {
+          return style({
+            key: "workflowLabelIcon",
+            className: "nt-text-foreground-alpha-600 nt-size-3.5",
+            iconKey: "cogs",
+            context: {
+              preference: props.preference
+            }
+          });
+        },
         get fallback() {
           return DefaultIconComponent && DefaultIconComponent({
-            class: iconClass
+            class: style({
+              key: "workflowLabelIcon",
+              className: "nt-text-foreground-alpha-600 nt-size-3.5",
+              iconKey: "cogs",
+              context: {
+                preference: props.preference
+              }
+            })
           });
         }
       }), _el$5);
@@ -4237,16 +4602,37 @@ var PreferencesRow = (props) => {
               return (_b = (_a = props.preference) == null ? void 0 : _a.channels) != null ? _b : {};
             },
             appearanceKey: "workflowDescription",
-            "class": "nt-overflow-hidden"
+            "class": "nt-overflow-hidden",
+            get preference() {
+              return props.preference;
+            }
           });
         }
       }), null);
       insert(_el$6, createComponent(IconRendererWrapper, {
         iconKey: "arrowDropDown",
-        "class": arrowDropDownIconClass,
+        get ["class"]() {
+          return style({
+            key: "workflowArrow__icon",
+            className: "nt-text-foreground-alpha-600 nt-size-4",
+            iconKey: "arrowDropDown",
+            context: {
+              preference: props.preference
+            }
+          });
+        },
         get fallback() {
           return createComponent(ArrowDropDown, {
-            "class": arrowDropDownIconClass
+            get ["class"]() {
+              return style({
+                key: "workflowArrow__icon",
+                className: "nt-text-foreground-alpha-600 nt-size-4",
+                iconKey: "arrowDropDown",
+                context: {
+                  preference: props.preference
+                }
+              });
+            }
           });
         }
       }));
@@ -4271,16 +4657,61 @@ var PreferencesRow = (props) => {
               get onChange() {
                 var _a, _b;
                 return props.onChange((_b = (_a = props.preference) == null ? void 0 : _a.workflow) == null ? void 0 : _b.identifier);
+              },
+              get preference() {
+                return props.preference;
               }
             })
           }));
-          effect(() => className(_el$7, style("channelsContainer", "nt-flex nt-bg-background nt-border nt-border-neutral-alpha-200 nt-rounded-lg nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden")));
+          effect(() => className(_el$7, style({
+            key: "channelsContainer",
+            className: "nt-flex nt-bg-background nt-border nt-border-neutral-alpha-200 nt-rounded-lg nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden",
+            context: {
+              preference: props.preference
+            }
+          })));
           return _el$7;
         }
       }), null);
       effect((_p$) => {
         var _a, _b, _c;
-        var _v$ = style("workflowContainer", `nt-p-1 nt-bg-neutral-alpha-25 nt-rounded-lg nt-border nt-border-neutral-alpha-50`), _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("workflowLabelHeaderContainer", "nt-flex nt-items-center nt-gap-1"), _v$6 = style("workflowLabel", "nt-text-sm nt-font-semibold nt-truncate nt-text-start"), _v$7 = (_c = (_b = (_a = props.preference) == null ? void 0 : _a.workflow) == null ? void 0 : _b.identifier) != null ? _c : "preferences.global", _v$8 = isOpenChannels(), _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 = isOpenChannels();
+        var _v$ = style({
+          key: "workflowContainer",
+          className: "nt-p-1 nt-bg-neutral-alpha-25 nt-rounded-lg nt-border nt-border-neutral-alpha-50",
+          context: {
+            preference: props.preference
+          }
+        }), _v$2 = isOpenChannels(), _v$3 = style({
+          key: "workflowLabelContainer",
+          className: "nt-flex nt-justify-between nt-p-1 nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden",
+          context: {
+            preference: props.preference
+          }
+        }), _v$4 = style({
+          key: "workflowLabelHeader",
+          className: "nt-overflow-hidden",
+          context: {
+            preference: props.preference
+          }
+        }), _v$5 = style({
+          key: "workflowLabelHeaderContainer",
+          className: "nt-flex nt-items-center nt-gap-1",
+          context: {
+            preference: props.preference
+          }
+        }), _v$6 = style({
+          key: "workflowLabel",
+          className: "nt-text-sm nt-font-semibold nt-truncate nt-text-start",
+          context: {
+            preference: props.preference
+          }
+        }), _v$7 = (_c = (_b = (_a = props.preference) == null ? void 0 : _a.workflow) == null ? void 0 : _b.identifier) != null ? _c : "preferences.global", _v$8 = isOpenChannels(), _v$9 = style({
+          key: "workflowContainerRight__icon",
+          className: "nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180",
+          context: {
+            preference: props.preference
+          }
+        }), _v$10 = isOpenChannels();
         _v$ !== _p$.e && className(_el$, _p$.e = _v$);
         _v$2 !== _p$.t && setAttribute(_el$, "data-open", _p$.t = _v$2);
         _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
@@ -4319,7 +4750,13 @@ var WorkflowDescription = (props) => {
           var _el$8 = _tmpl$310();
           setAttribute(_el$8, "data-disabled", isDisabled);
           insert(_el$8, () => getLabel(key));
-          effect(() => className(_el$8, style("channelName", "data-[disabled=true]:nt-text-foreground-alpha-400")));
+          effect(() => className(_el$8, style({
+            key: "channelName",
+            className: "data-[disabled=true]:nt-text-foreground-alpha-400",
+            context: {
+              preference: props.preference
+            }
+          })));
           return _el$8;
         })();
         channels.push(element);
@@ -4330,7 +4767,10 @@ var WorkflowDescription = (props) => {
   return (() => {
     var _el$9 = _tmpl$53();
     insert(_el$9, channelNames);
-    effect(() => className(_el$9, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
+    effect(() => className(_el$9, style({
+      key: props.appearanceKey,
+      className: cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class)
+    })));
     return _el$9;
   })();
 };
@@ -4397,7 +4837,7 @@ var NodeTree = (props) => {
 
 // src/ui/components/elements/Preferences/GroupedPreferencesRow.tsx
 var _tmpl$56 = /* @__PURE__ */ template(`<div><div><span data-localization=preferences.group.info></span></div><div>`);
-var _tmpl$215 = /* @__PURE__ */ template(`<div><div><div><span></span></div><div><span>`);
+var _tmpl$216 = /* @__PURE__ */ template(`<div><div><div><span></span></div><div><span>`);
 var GroupedPreferencesRow = (props) => {
   const style = useStyle();
   const {
@@ -4454,24 +4894,37 @@ var GroupedPreferencesRow = (props) => {
     props.bulkUpdatePreferences(filteredPreferences)(channels);
   };
   const preferences = createMemo(() => props.group.preferences);
-  const nodeTreeIconClass = style("preferencesGroupLabelIcon", "nt-text-foreground-alpha-600 nt-size-3.5");
-  const infoIconClass = style("preferencesGroupInfoIcon", "nt-size-4");
-  const dropdownIconClass = style("moreTabs__icon", "nt-size-4");
   return createComponent(Show, {
     get when() {
       return Object.keys(uniqueChannels()).length > 0;
     },
     get children() {
-      var _el$ = _tmpl$215(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
+      var _el$ = _tmpl$216(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
       _el$2.$$click = () => {
         setIsOpened((prev) => !prev);
       };
       insert(_el$3, createComponent(IconRendererWrapper, {
         iconKey: "nodeTree",
-        "class": nodeTreeIconClass,
+        get ["class"]() {
+          return style({
+            key: "preferencesGroupLabelIcon",
+            className: "nt-text-foreground-alpha-600 nt-size-3.5",
+            context: {
+              preferenceGroup: props.group
+            }
+          });
+        },
         get fallback() {
           return createComponent(NodeTree, {
-            "class": nodeTreeIconClass
+            get ["class"]() {
+              return style({
+                key: "preferencesGroupLabelIcon",
+                className: "nt-text-foreground-alpha-600 nt-size-3.5",
+                context: {
+                  preferenceGroup: props.group
+                }
+              });
+            }
           });
         }
       }), _el$4);
@@ -4484,10 +4937,20 @@ var GroupedPreferencesRow = (props) => {
       }), _el$6);
       insert(_el$6, createComponent(IconRendererWrapper, {
         iconKey: "arrowDropDown",
-        "class": dropdownIconClass,
+        get ["class"]() {
+          return style({
+            key: "moreTabs__icon",
+            className: "nt-size-4"
+          });
+        },
         get fallback() {
           return createComponent(ArrowDropDown, {
-            "class": dropdownIconClass
+            get ["class"]() {
+              return style({
+                key: "moreTabs__icon",
+                className: "nt-size-4"
+              });
+            }
           });
         }
       }));
@@ -4511,16 +4974,35 @@ var GroupedPreferencesRow = (props) => {
                 },
                 get onChange() {
                   return updatePreferencesForChannel(channel());
+                },
+                get preferenceGroup() {
+                  return props.group;
                 }
               });
             }
           }), _el$9);
           insert(_el$9, createComponent(IconRendererWrapper, {
             iconKey: "info",
-            "class": infoIconClass,
+            get ["class"]() {
+              return style({
+                key: "preferencesGroupInfoIcon",
+                className: "nt-size-4",
+                context: {
+                  preferenceGroup: props.group
+                }
+              });
+            },
             get fallback() {
               return createComponent(Info, {
-                "class": infoIconClass
+                get ["class"]() {
+                  return style({
+                    key: "preferencesGroupInfoIcon",
+                    className: "nt-size-4",
+                    context: {
+                      preferenceGroup: props.group
+                    }
+                  });
+                }
               });
             }
           }), null);
@@ -4538,7 +5020,31 @@ var GroupedPreferencesRow = (props) => {
             })
           }));
           effect((_p$) => {
-            var _v$ = style("preferencesGroupBody", "nt-flex nt-flex-col nt-gap-1 nt-overflow-hidden"), _v$2 = style("preferencesGroupChannels", "nt-flex nt-bg-background nt-border-t nt-border-b nt-border-neutral-alpha-50 nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden"), _v$3 = style("preferencesGroupInfo", "nt-text-sm nt-text-start nt-text-foreground-alpha-400 nt-mt-1 nt-flex nt-items-center nt-gap-1"), _v$4 = style("preferencesGroupWorkflows", "nt-flex nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden");
+            var _v$ = style({
+              key: "preferencesGroupBody",
+              className: "nt-flex nt-flex-col nt-gap-1 nt-overflow-hidden",
+              context: {
+                preferenceGroup: props.group
+              }
+            }), _v$2 = style({
+              key: "preferencesGroupChannels",
+              className: "nt-flex nt-bg-background nt-border-t nt-border-b nt-border-neutral-alpha-50 nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden",
+              context: {
+                preferenceGroup: props.group
+              }
+            }), _v$3 = style({
+              key: "preferencesGroupInfo",
+              className: "nt-text-sm nt-text-start nt-text-foreground-alpha-400 nt-mt-1 nt-flex nt-items-center nt-gap-1",
+              context: {
+                preferenceGroup: props.group
+              }
+            }), _v$4 = style({
+              key: "preferencesGroupWorkflows",
+              className: "nt-flex nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden",
+              context: {
+                preferenceGroup: props.group
+              }
+            });
             _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
             _v$2 !== _p$.t && className(_el$8, _p$.t = _v$2);
             _v$3 !== _p$.a && className(_el$9, _p$.a = _v$3);
@@ -4554,7 +5060,43 @@ var GroupedPreferencesRow = (props) => {
         }
       }), null);
       effect((_p$) => {
-        var _v$5 = style("preferencesGroupContainer", `nt-bg-neutral-alpha-25 nt-rounded-lg nt-border nt-border-neutral-alpha-50`), _v$6 = isOpened(), _v$7 = style("preferencesGroupHeader", "nt-flex nt-justify-between nt-p-2 nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden"), _v$8 = style("preferencesGroupLabelContainer", "nt-overflow-hidden nt-flex nt-items-center nt-gap-1"), _v$9 = style("preferencesGroupLabel", "nt-text-sm nt-font-semibold nt-truncate nt-text-start"), _v$10 = isOpened(), _v$11 = style("preferencesGroupActionsContainer", "nt-flex nt-items-center nt-gap-1"), _v$12 = style("preferencesGroupActionsContainerRight__icon", `nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180`), _v$13 = isOpened();
+        var _v$5 = style({
+          key: "preferencesGroupContainer",
+          className: "nt-bg-neutral-alpha-25 nt-rounded-lg nt-border nt-border-neutral-alpha-50",
+          context: {
+            preferenceGroup: props.group
+          }
+        }), _v$6 = isOpened(), _v$7 = style({
+          key: "preferencesGroupHeader",
+          className: "nt-flex nt-justify-between nt-p-2 nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden",
+          context: {
+            preferenceGroup: props.group
+          }
+        }), _v$8 = style({
+          key: "preferencesGroupLabelContainer",
+          className: "nt-overflow-hidden nt-flex nt-items-center nt-gap-1",
+          context: {
+            preferenceGroup: props.group
+          }
+        }), _v$9 = style({
+          key: "preferencesGroupLabel",
+          className: "nt-text-sm nt-font-semibold nt-truncate nt-text-start",
+          context: {
+            preferenceGroup: props.group
+          }
+        }), _v$10 = isOpened(), _v$11 = style({
+          key: "preferencesGroupActionsContainer",
+          className: "nt-flex nt-items-center nt-gap-1",
+          context: {
+            preferenceGroup: props.group
+          }
+        }), _v$12 = style({
+          key: "preferencesGroupActionsContainerRight__icon",
+          className: "nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180",
+          context: {
+            preferenceGroup: props.group
+          }
+        }), _v$13 = isOpened();
         _v$5 !== _p$.e && className(_el$, _p$.e = _v$5);
         _v$6 !== _p$.t && setAttribute(_el$, "data-open", _p$.t = _v$6);
         _v$7 !== _p$.a && className(_el$2, _p$.a = _v$7);
@@ -4622,7 +5164,7 @@ var GroupedPreferences = (props) => {
 // src/ui/components/elements/Preferences/Preferences.tsx
 var _tmpl$57 = /* @__PURE__ */ template(`<div>`);
 var Preferences = () => {
-  var _a;
+  var _a, _b;
   const novu = useNovu();
   const style = useStyle();
   const {
@@ -4633,12 +5175,13 @@ var Preferences = () => {
     preferences,
     loading
   } = usePreferences({
-    tags: (_a = preferencesFilter()) == null ? void 0 : _a.tags
+    tags: (_a = preferencesFilter()) == null ? void 0 : _a.tags,
+    severity: (_b = preferencesFilter()) == null ? void 0 : _b.severity
   });
   const allPreferences = createMemo(() => {
-    var _a2, _b;
+    var _a2, _b2;
     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 workflowPreferences = (_b2 = preferences()) == null ? void 0 : _b2.filter((preference) => preference.level === "template" /* TEMPLATE */);
     return {
       globalPreference,
       workflowPreferences
@@ -4672,9 +5215,9 @@ var Preferences = () => {
     }));
   });
   const groupedPreferences = createMemo(() => {
-    var _a2, _b, _c;
+    var _a2, _b2, _c;
     const workflowPreferences = (_a2 = allPreferences().workflowPreferences) != null ? _a2 : [];
-    return (_c = (_b = preferenceGroups()) == null ? void 0 : _b.map((group) => {
+    return (_c = (_b2 = preferenceGroups()) == null ? void 0 : _b2.map((group) => {
       const {
         filter
       } = group;
@@ -4691,12 +5234,15 @@ var Preferences = () => {
         return {
           name: group.name,
           preferences: workflowPreferences.filter((preference) => {
-            var _a3, _b2, _c2, _d;
-            const workflowId = ((_a3 = preference.workflow) == null ? void 0 : _a3.id) || ((_b2 = preference.workflow) == null ? void 0 : _b2.identifier);
+            var _a3, _b3, _c2, _d, _e;
+            const workflowId = ((_a3 = preference.workflow) == null ? void 0 : _a3.id) || ((_b3 = preference.workflow) == null ? void 0 : _b3.identifier);
             return ((_c2 = filter.workflowIds) == null ? void 0 : _c2.includes(workflowId != null ? workflowId : "")) || ((_d = filter.tags) == null ? void 0 : _d.some((tag) => {
-              var _a4, _b3;
-              return (_b3 = (_a4 = preference.workflow) == null ? void 0 : _a4.tags) == null ? void 0 : _b3.includes(tag);
-            }));
+              var _a4, _b4;
+              return (_b4 = (_a4 = preference.workflow) == null ? void 0 : _a4.tags) == null ? void 0 : _b4.includes(tag);
+            })) || Array.isArray(filter.severity) && filter.severity.some((severity) => {
+              var _a4;
+              return ((_a4 = preference.workflow) == null ? void 0 : _a4.severity) === severity;
+            }) || !Array.isArray(filter.severity) && filter.severity === ((_e = preference.workflow) == null ? void 0 : _e.severity);
           })
         };
       }
@@ -4758,7 +5304,14 @@ var Preferences = () => {
         });
       }
     }), null);
-    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 nt-pr-0 [scrollbar-gutter:stable]")));
+    effect(() => className(_el$, style({
+      key: "preferencesContainer",
+      className: "nt-px-3 nt-py-4 nt-flex nt-flex-col nt-gap-1 nt-overflow-y-auto nt-h-full nt-pr-0 [scrollbar-gutter:stable]",
+      context: {
+        preferences: preferences(),
+        groups: groupedPreferences()
+      }
+    })));
     return _el$;
   })();
 };
@@ -4784,7 +5337,10 @@ var Root = (props) => {
         return `novu-root-${id()}`;
       },
       get ["class"]() {
-        return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full [interpolate-size:allow-keywords]");
+        return style({
+          key: "root",
+          className: cn("novu", id(), "nt-text-foreground nt-h-full [interpolate-size:allow-keywords]")
+        });
       }
     }, rest), false, false);
     return _el$;
@@ -4796,7 +5352,9 @@ var PreferencesHeader = (props) => {
   const {
     t
   } = useLocalization();
-  const arrowLeftIconClass = style("preferencesHeader__back__button__icon", "nt-size-4", {
+  const arrowLeftIconClass = style({
+    key: "preferencesHeader__back__button__icon",
+    className: "nt-size-4",
     iconKey: "arrowLeft"
   });
   return (() => {
@@ -4828,7 +5386,13 @@ var PreferencesHeader = (props) => {
     }), _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");
+      var _v$ = style({
+        key: "preferencesHeader",
+        className: "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({
+        key: "preferencesHeader__title",
+        className: "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$;
@@ -4840,26 +5404,33 @@ var PreferencesHeader = (props) => {
   })();
 };
 var _tmpl$60 = /* @__PURE__ */ template(`<strong>`);
-var _tmpl$216 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$217 = /* @__PURE__ */ template(`<p>`);
 var Bold = (props) => {
   const style = useStyle();
   return (() => {
     var _el$ = _tmpl$60();
     insert(_el$, () => props.children);
-    effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
+    effect(() => className(_el$, style({
+      key: props.appearanceKey || "strong",
+      className: "nt-font-semibold"
+    })));
     return _el$;
   })();
 };
 var Text = (props) => props.children;
 var Markdown = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey"]);
+  const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey", "context"]);
   const style = useStyle();
   const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
   return (() => {
-    var _el$2 = _tmpl$216();
+    var _el$2 = _tmpl$217();
     spread(_el$2, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey, cn(local.class));
+        return style({
+          key: local.appearanceKey,
+          className: cn(local.class),
+          context: local.context
+        });
       }
     }, rest), false, true);
     insert(_el$2, createComponent(For, {
@@ -4905,7 +5476,7 @@ var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"
   }
 });
 var Badge = (props) => {
-  const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "context"]);
   const style = useStyle();
   return (() => {
     var _el$ = _tmpl$61();
@@ -4917,10 +5488,14 @@ var Badge = (props) => {
         return props.size;
       },
       get ["class"]() {
-        return style(local.appearanceKey || "badge", cn(badgeVariants({
-          variant: props.variant,
-          size: props.size
-        }), local.class));
+        return style({
+          key: local.appearanceKey || "badge",
+          className: cn(badgeVariants({
+            variant: props.variant,
+            size: props.size
+          }), local.class),
+          context: local.context
+        });
       }
     }, rest), false, false);
     return _el$;
@@ -4955,10 +5530,13 @@ var Input = (props) => {
         return props.size;
       },
       get ["class"]() {
-        return style(local.appearanceKey || "input", cn(inputVariants({
-          variant: props.variant,
-          size: props.size
-        }), local.class));
+        return style({
+          key: local.appearanceKey || "input",
+          className: cn(inputVariants({
+            variant: props.variant,
+            size: props.size
+          }), local.class)
+        });
       }
     }, rest), false, false);
     return _el$;
@@ -5010,7 +5588,10 @@ var TimePicker = (props) => {
     _el$.$$click = (e) => e.stopPropagation();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "timePicker", cn("nt-flex nt-items-center nt-gap-1", local.class));
+        return style({
+          key: local.appearanceKey || "timePicker",
+          className: cn("nt-flex nt-items-center nt-gap-1", local.class)
+        });
       }
     }, rest), false, true);
     insert(_el$, createComponent(Input, {
@@ -5031,7 +5612,10 @@ var TimePicker = (props) => {
         handleHourChange(Number(e.currentTarget.value));
       },
       get ["class"]() {
-        return style("timePickerHour__input", "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2");
+        return style({
+          key: "timePickerHour__input",
+          className: "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2"
+        });
       }
     }), _el$2);
     insert(_el$, createComponent(Input, {
@@ -5052,7 +5636,10 @@ var TimePicker = (props) => {
         handleMinuteChange(Number(e.currentTarget.value));
       },
       get ["class"]() {
-        return style("timePickerHour__input", "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2");
+        return style({
+          key: "timePickerHour__input",
+          className: "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2"
+        });
       }
     }), _el$3);
     _el$3.addEventListener("change", (e) => {
@@ -5061,9 +5648,15 @@ var TimePicker = (props) => {
     });
     _el$3.$$click = (e) => e.stopPropagation();
     effect((_p$) => {
-      var _v$ = style("timePicker__separator", "nt-text-xl"), _v$2 = style("timePicker__periodSelect", `${inputVariants({
-        size: "sm"
-      })} nt-h-7 nt-font-mono`);
+      var _v$ = style({
+        key: "timePicker__separator",
+        className: "nt-text-xl"
+      }), _v$2 = style({
+        key: "timePicker__periodSelect",
+        className: cn(inputVariants({
+          size: "sm"
+        }), "nt-h-7 nt-font-mono")
+      });
       _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
       return _p$;
@@ -5258,7 +5851,19 @@ var SnoozeDateTimePicker = (props) => {
       }
     }), null);
     effect((_p$) => {
-      var _v$ = style("snoozeDatePicker", "nt-bg-background nt-rounded-md nt-shadow-lg nt-w-[260px]"), _v$2 = style("snoozeDatePicker__timePickerContainer", "nt-flex nt-flex-row nt-justify-between nt-p-2 nt-items-center nt-border-t nt-border-neutral-200 nt-border-b"), _v$3 = style("snoozeDatePicker__timePickerLabel", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700 nt-p-2"), _v$4 = style("snoozeDatePicker__actions", "nt-flex nt-flex-row nt-justify-end nt-gap-2 nt-p-2");
+      var _v$ = style({
+        key: "snoozeDatePicker",
+        className: "nt-bg-background nt-rounded-md nt-shadow-lg nt-w-[260px]"
+      }), _v$2 = style({
+        key: "snoozeDatePicker__timePickerContainer",
+        className: "nt-flex nt-flex-row nt-justify-between nt-p-2 nt-items-center nt-border-t nt-border-neutral-200 nt-border-b"
+      }), _v$3 = style({
+        key: "snoozeDatePicker__timePickerLabel",
+        className: "nt-text-sm nt-font-medium nt-text-foreground-alpha-700 nt-p-2"
+      }), _v$4 = style({
+        key: "snoozeDatePicker__actions",
+        className: "nt-flex nt-flex-row nt-justify-end nt-gap-2 nt-p-2"
+      });
       _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$3, _p$.a = _v$3);
@@ -5277,7 +5882,7 @@ delegateEvents(["click"]);
 
 // src/ui/components/Notification/NotificationActions.tsx
 var _tmpl$66 = /* @__PURE__ */ template(`<div><span>`);
-var _tmpl$217 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$218 = /* @__PURE__ */ template(`<span>`);
 var SNOOZE_PRESETS = [{
   key: "snooze.options.anHourFromNow",
   hours: 1,
@@ -5319,7 +5924,9 @@ var formatSnoozeOption = (preset, t, locale) => {
 };
 var SnoozeDropdownItem = (props) => {
   const style = useStyle();
-  const snoozeItemIconClass = style("notificationSnooze__dropdownItem__icon", "nt-size-3 nt-text-foreground-alpha-400 nt-mr-2", {
+  const snoozeItemIconClass = style({
+    key: "notificationSnooze__dropdownItem__icon",
+    className: "nt-size-3 nt-text-foreground-alpha-400 nt-mr-2",
     iconKey: "clock"
   });
   const content = [(() => {
@@ -5335,7 +5942,12 @@ var SnoozeDropdownItem = (props) => {
     }), _el$2);
     insert(_el$2, () => props.label);
     effect((_p$) => {
-      var _v$ = style("dropdownItem", "nt-flex nt-items-center nt-flex-1"), _v$2 = style("dropdownItemLabel");
+      var _v$ = style({
+        key: "dropdownItem",
+        className: "nt-flex nt-items-center nt-flex-1"
+      }), _v$2 = style({
+        key: "dropdownItemLabel"
+      });
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       return _p$;
@@ -5345,14 +5957,20 @@ var SnoozeDropdownItem = (props) => {
     });
     return _el$;
   })(), (() => {
-    var _el$3 = _tmpl$217();
+    var _el$3 = _tmpl$218();
     insert(_el$3, () => props.time);
-    effect(() => className(_el$3, style("dropdownItemRight__icon", "nt-text-foreground-alpha-300 nt-ml-2 nt-text-xs")));
+    effect(() => className(_el$3, style({
+      key: "dropdownItemRight__icon",
+      className: "nt-text-foreground-alpha-300 nt-ml-2 nt-text-xs"
+    })));
     return _el$3;
   })()];
   if (props.asChild) {
     return props.asChild({
-      class: style("notificationSnooze__dropdownItem", dropdownItemVariants()),
+      class: style({
+        key: "notificationSnooze__dropdownItem",
+        className: dropdownItemVariants()
+      }),
       onClick: props.onClick,
       children: content
     });
@@ -5363,7 +5981,10 @@ var SnoozeDropdownItem = (props) => {
       return props.onClick;
     },
     get ["class"]() {
-      return style("dropdownItem", "nt-justify-between");
+      return style({
+        key: "dropdownItem",
+        className: "nt-justify-between"
+      });
     },
     children: content
   });
@@ -5373,7 +5994,9 @@ var ReadButton = (props) => {
   const {
     t
   } = useLocalization();
-  const readIconClass = style("notificationRead__icon", "nt-size-3", {
+  const readIconClass = style({
+    key: "notificationRead__icon",
+    className: "nt-size-3",
     iconKey: "markAsRead"
   });
   return createComponent(Tooltip.Root, {
@@ -5414,7 +6037,9 @@ var UnreadButton = (props) => {
   const {
     t
   } = useLocalization();
-  const unreadIconClass = style("notificationUnread__icon", "nt-size-3", {
+  const unreadIconClass = style({
+    key: "notificationUnread__icon",
+    className: "nt-size-3",
     iconKey: "markAsUnread"
   });
   return createComponent(Tooltip.Root, {
@@ -5455,7 +6080,9 @@ var ArchiveButton = (props) => {
   const {
     t
   } = useLocalization();
-  const archiveIconClass = style("notificationArchive__icon", "nt-size-3", {
+  const archiveIconClass = style({
+    key: "notificationArchive__icon",
+    className: "nt-size-3",
     iconKey: "markAsArchived"
   });
   return createComponent(Tooltip.Root, {
@@ -5496,7 +6123,9 @@ var UnarchiveButton = (props) => {
   const {
     t
   } = useLocalization();
-  const unarchiveIconClass = style("notificationArchive__icon", "nt-size-3", {
+  const unarchiveIconClass = style({
+    key: "notificationArchive__icon",
+    className: "nt-size-3",
     iconKey: "markAsUnarchived"
   });
   return createComponent(Tooltip.Root, {
@@ -5537,7 +6166,9 @@ var UnsnoozeButton = (props) => {
   const {
     t
   } = useLocalization();
-  const unsnoozeIconClass = style("notificationUnsnooze__icon", "nt-size-3", {
+  const unsnoozeIconClass = style({
+    key: "notificationUnsnooze__icon",
+    className: "nt-size-3",
     iconKey: "unsnooze"
   });
   return createComponent(Tooltip.Root, {
@@ -5583,7 +6214,9 @@ var SnoozeButton = (props) => {
     maxSnoozeDurationHours
   } = useInboxContext();
   const [isSnoozeDateTimePickerOpen, setIsSnoozeDateTimePickerOpen] = createSignal(false);
-  const snoozeButtonIconClass = style("notificationSnooze__icon", "nt-size-3", {
+  const snoozeButtonIconClass = style({
+    key: "notificationSnooze__icon",
+    className: "nt-size-3",
     iconKey: "clock"
   });
   const availableSnoozePresets = createMemo(() => {
@@ -5663,7 +6296,10 @@ var SnoozeButton = (props) => {
                     }), createComponent(Popover.Content, {
                       portal: true,
                       get ["class"]() {
-                        return style("notificationSnoozeCustomTime_popoverContent", "nt-size-fit nt-w-[260px]");
+                        return style({
+                          key: "notificationSnoozeCustomTime_popoverContent",
+                          className: "nt-size-fit nt-w-[260px]"
+                        });
                       },
                       get children() {
                         return createComponent(SnoozeDateTimePicker, {
@@ -5720,10 +6356,22 @@ var renderNotificationActions = (notification, status) => {
 };
 
 // src/ui/components/Notification/DefaultNotification.tsx
-var _tmpl$67 = /* @__PURE__ */ template(`<img>`);
-var _tmpl$218 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$410 = /* @__PURE__ */ template(`<a><div><div></div><div></div><div>`);
+var _tmpl$67 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$219 = /* @__PURE__ */ template(`<a><div></div><div><div></div><div></div></div><div class="nt-w-1.5 nt-flex nt-justify-center nt-shrink-0">`);
+var _tmpl$311 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$410 = /* @__PURE__ */ template(`<div>`);
+var SEVERITY_TO_BAR_KEYS = {
+  ["none" /* NONE */]: "notificationBar",
+  ["high" /* HIGH */]: "severityHigh__notificationBar",
+  ["medium" /* MEDIUM */]: "severityMedium__notificationBar",
+  ["low" /* LOW */]: "severityLow__notificationBar"
+};
+var SEVERITY_TO_NOTIFICATION_KEYS = {
+  ["none" /* NONE */]: "notification",
+  ["high" /* HIGH */]: "severityHigh__notification",
+  ["medium" /* MEDIUM */]: "severityMedium__notification",
+  ["low" /* LOW */]: "severityLow__notification"
+};
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -5735,12 +6383,6 @@ var DefaultNotification = (props) => {
     status
   } = useInboxContext();
   const [minutesPassed, setMinutesPassed] = createSignal(0);
-  const deliveredAtIconClass = style("notificationDeliveredAt__icon", "nt-size-3", {
-    iconKey: "clock"
-  });
-  const snoozedUntilIconClass = style("notificationSnoozedUntil__icon", "nt-size-3", {
-    iconKey: "clock"
-  });
   const createdAt = createMemo(() => {
     minutesPassed();
     return formatToRelativeTime({
@@ -5798,32 +6440,54 @@ var DefaultNotification = (props) => {
     }
   });
   return (() => {
-    var _el$ = _tmpl$410(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling;
+    var _el$ = _tmpl$219(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling;
     _el$.$$click = handleNotificationClick;
     insert(_el$, createComponent(Show, {
       get when() {
-        return props.notification.avatar;
+        return props.renderAvatar;
       },
       get fallback() {
-        return (() => {
-          var _el$9 = _tmpl$218();
-          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$2 = _tmpl$67();
-        effect((_p$) => {
-          var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
-          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$2, "src", _p$.t = _v$2);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
+        return createComponent(Show, {
+          get when() {
+            return props.notification.avatar;
+          },
+          get fallback() {
+            return (() => {
+              var _el$9 = _tmpl$410();
+              effect(() => className(_el$9, style({
+                key: "notificationImageLoadingFallback",
+                className: "nt-size-8 nt-rounded-lg nt-shrink-0 nt-aspect-square",
+                context: {
+                  notification: props.notification
+                }
+              })));
+              return _el$9;
+            })();
+          },
+          get children() {
+            var _el$8 = _tmpl$311();
+            effect((_p$) => {
+              var _v$6 = style({
+                key: "notificationImage",
+                className: "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square",
+                context: {
+                  notification: props.notification
+                }
+              }), _v$7 = props.notification.avatar;
+              _v$6 !== _p$.e && className(_el$8, _p$.e = _v$6);
+              _v$7 !== _p$.t && setAttribute(_el$8, "src", _p$.t = _v$7);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$8;
+          }
         });
-        return _el$2;
-      }
+      },
+      children: (renderAvatar) => createComponent(ExternalElementRenderer, {
+        render: (el) => renderAvatar()(el, props.notification)
+      })
     }), _el$3);
     insert(_el$4, createComponent(Show, {
       get when() {
@@ -5838,6 +6502,11 @@ var DefaultNotification = (props) => {
             appearanceKey: "notificationSubject",
             "class": "nt-text-start nt-font-medium nt-whitespace-pre-wrap [word-break:break-word]",
             strongAppearanceKey: "notificationSubject__strong",
+            get context() {
+              return {
+                notification: props.notification
+              };
+            },
             get children() {
               return subject();
             }
@@ -5857,6 +6526,11 @@ var DefaultNotification = (props) => {
           appearanceKey: "notificationBody",
           strongAppearanceKey: "notificationBody__strong",
           "class": "nt-text-start nt-whitespace-pre-wrap nt-text-foreground-alpha-600 [word-break:break-word]",
+          get context() {
+            return {
+              notification: props.notification
+            };
+          },
           get children() {
             return props.notification.body;
           }
@@ -5866,46 +6540,93 @@ var DefaultNotification = (props) => {
         render: (el) => renderBody()(el, props.notification)
       })
     }), null);
-    insert(_el$5, () => renderNotificationActions(props.notification, status));
     insert(_el$3, createComponent(Show, {
       get when() {
-        return props.notification.primaryAction || props.notification.secondaryAction;
+        return props.renderDefaultActions;
       },
-      get children() {
-        var _el$6 = _tmpl$218();
-        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;
+      get fallback() {
+        return (() => {
+          var _el$10 = _tmpl$410();
+          insert(_el$10, () => renderNotificationActions(props.notification, status));
+          effect(() => className(_el$10, style({
+            key: "notificationDefaultActions",
+            className: `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`,
+            context: {
+              notification: props.notification
             }
-          })
-        }), null);
-        insert(_el$6, createComponent(Show, {
+          })));
+          return _el$10;
+        })();
+      },
+      children: (renderDefaultActions) => createComponent(ExternalElementRenderer, {
+        render: (el) => renderDefaultActions()(el, props.notification)
+      })
+    }), _el$5);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return props.renderCustomActions;
+      },
+      get fallback() {
+        return createComponent(Show, {
           get when() {
-            return props.notification.secondaryAction;
+            return props.notification.primaryAction || 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$7);
-    insert(_el$7, createComponent(Show, {
+          get children() {
+            var _el$11 = _tmpl$410();
+            insert(_el$11, 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 context() {
+                  return {
+                    notification: props.notification
+                  };
+                },
+                get children() {
+                  return primaryAction.label;
+                }
+              })
+            }), null);
+            insert(_el$11, 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 context() {
+                  return {
+                    notification: props.notification
+                  };
+                },
+                get children() {
+                  return secondaryAction.label;
+                }
+              })
+            }), null);
+            effect(() => className(_el$11, style({
+              key: "notificationCustomActions",
+              className: "nt-flex nt-flex-wrap nt-gap-2",
+              context: {
+                notification: props.notification
+              }
+            })));
+            return _el$11;
+          }
+        });
+      },
+      children: (renderCustomActions) => createComponent(ExternalElementRenderer, {
+        render: (el) => renderCustomActions()(el, props.notification)
+      })
+    }), _el$5);
+    insert(_el$5, createComponent(Show, {
       get when() {
         return snoozedUntil();
       },
@@ -5915,7 +6636,7 @@ var DefaultNotification = (props) => {
             return deliveredAt();
           },
           get fallback() {
-            return memo(createdAt);
+            return createdAt();
           },
           children: (deliveredAt2) => createComponent(Show, {
             get when() {
@@ -5940,13 +6661,36 @@ var DefaultNotification = (props) => {
                   get children() {
                     return createComponent(Badge, {
                       appearanceKey: "notificationDeliveredAt__badge",
+                      get context() {
+                        return {
+                          notification: props.notification
+                        };
+                      },
                       get children() {
                         return [createComponent(IconRendererWrapper, {
                           iconKey: "clock",
-                          "class": deliveredAtIconClass,
+                          get ["class"]() {
+                            return style({
+                              key: "notificationDeliveredAt__icon",
+                              className: "nt-size-3",
+                              iconKey: "clock",
+                              context: {
+                                notification: props.notification
+                              }
+                            });
+                          },
                           get fallback() {
                             return createComponent(Clock, {
-                              "class": deliveredAtIconClass
+                              get ["class"]() {
+                                return style({
+                                  key: "notificationDeliveredAt__icon",
+                                  className: "nt-size-3",
+                                  iconKey: "clock",
+                                  context: {
+                                    notification: props.notification
+                                  }
+                                });
+                              }
                             });
                           }
                         }), date];
@@ -5961,34 +6705,94 @@ var DefaultNotification = (props) => {
       },
       children: (snoozedUntil2) => [createComponent(IconRendererWrapper, {
         iconKey: "clock",
-        "class": snoozedUntilIconClass,
+        get ["class"]() {
+          return style({
+            key: "notificationSnoozedUntil__icon",
+            className: "nt-size-3",
+            iconKey: "clock",
+            context: {
+              notification: props.notification
+            }
+          });
+        },
         get fallback() {
           return createComponent(Clock, {
-            "class": snoozedUntilIconClass
+            get ["class"]() {
+              return style({
+                key: "notificationSnoozedUntil__icon",
+                className: "nt-size-3",
+                iconKey: "clock",
+                context: {
+                  notification: props.notification
+                }
+              });
+            }
           });
         }
       }), memo(() => t("notification.snoozedUntil")), " \xB7 ", memo(snoozedUntil2)]
     }));
-    insert(_el$, createComponent(Show, {
+    insert(_el$6, createComponent(Show, {
       get when() {
         return !props.notification.isRead;
       },
       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;
+        var _el$7 = _tmpl$67();
+        effect(() => className(_el$7, style({
+          key: "notificationDot",
+          className: "nt-size-1.5 nt-bg-primary nt-rounded-full",
+          context: {
+            notification: props.notification
+          }
+        })));
+        return _el$7;
       }
-    }), null);
+    }));
     effect((_p$) => {
       var _a;
-      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("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 nt-flex nt-items-center nt-gap-1");
-      _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
-      _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);
+      var _v$ = style({
+        key: SEVERITY_TO_NOTIFICATION_KEYS[props.notification.severity],
+        className: cn("nt-transition 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),
+          "nt-bg-severity-high-alpha-100 hover:nt-bg-severity-high-alpha-50": props.notification.severity === "high" /* HIGH */,
+          "nt-bg-severity-medium-alpha-100 hover:nt-bg-severity-medium-alpha-50": props.notification.severity === "medium" /* MEDIUM */,
+          "nt-bg-severity-low-alpha-100 hover:nt-bg-severity-low-alpha-50": props.notification.severity === "low" /* LOW */
+        }),
+        context: {
+          notification: props.notification
+        }
+      }), _v$2 = style({
+        key: SEVERITY_TO_BAR_KEYS[props.notification.severity],
+        className: cn("nt-transition nt-absolute nt-left-0 nt-top-0 nt-bottom-0 nt-w-[3px]", {
+          "nt-bg-severity-high group-hover:nt-bg-severity-high-alpha-500": props.notification.severity === "high" /* HIGH */,
+          "nt-bg-severity-medium group-hover:nt-bg-severity-medium-alpha-500": props.notification.severity === "medium" /* MEDIUM */,
+          "nt-bg-severity-low group-hover:nt-bg-severity-low-alpha-500": props.notification.severity === "low" /* LOW */
+        }),
+        context: {
+          notification: props.notification
+        }
+      }), _v$3 = style({
+        key: "notificationContent",
+        className: "nt-flex nt-flex-col nt-gap-2 nt-w-full",
+        context: {
+          notification: props.notification
+        }
+      }), _v$4 = style({
+        key: "notificationTextContainer",
+        context: {
+          notification: props.notification
+        }
+      }), _v$5 = style({
+        key: "notificationDate",
+        className: "nt-text-foreground-alpha-400 nt-flex nt-items-center nt-gap-1",
+        context: {
+          notification: props.notification
+        }
+      });
+      _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$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,
@@ -6013,12 +6817,21 @@ var Notification = (props) => {
         get notification() {
           return props.notification;
         },
+        get renderAvatar() {
+          return props.renderAvatar;
+        },
         get renderSubject() {
           return props.renderSubject;
         },
         get renderBody() {
           return props.renderBody;
         },
+        get renderDefaultActions() {
+          return props.renderDefaultActions;
+        },
+        get renderCustomActions() {
+          return props.renderCustomActions;
+        },
         get onNotificationClick() {
           return props.onNotificationClick;
         },
@@ -6074,7 +6887,7 @@ function Key(props) {
 
 // src/ui/components/Notification/NotificationListSkeleton.tsx
 var _tmpl$69 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$219 = /* @__PURE__ */ template(`<p data-localization=notifications.emptyNotice>`);
+var _tmpl$220 = /* @__PURE__ */ template(`<p data-localization=notifications.emptyNotice>`);
 var _tmpl$312 = /* @__PURE__ */ template(`<div><p>Trigger your notification. No setup needed.</p><p>Temporary &lt;Inbox />, data will expire in 24h. Connect API key to persists messages, enable
                 preferences, and connect email.</p><div><div>`);
 var NotificationListSkeleton = (props) => {
@@ -6099,7 +6912,10 @@ var NotificationListSkeleton = (props) => {
         delay: 0.3
       },
       get ["class"]() {
-        return style("notificationList__skeleton", "nt-flex nt-relative nt-mx-auto nt-flex-col nt-w-full nt-mb-4");
+        return style({
+          key: "notificationList__skeleton",
+          className: "nt-flex nt-relative nt-mx-auto nt-flex-col nt-w-full nt-mb-4"
+        });
       },
       get children() {
         return [memo(() => Array.from({
@@ -6118,7 +6934,10 @@ var NotificationListSkeleton = (props) => {
             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");
+            return style({
+              key: "notificationList__skeletonContent",
+              className: "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, {
@@ -6134,13 +6953,19 @@ var NotificationListSkeleton = (props) => {
                 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")));
+              effect(() => className(_el$3, style({
+                key: "notificationList__skeletonItem",
+                className: "nt-flex nt-flex-col nt-gap-2 nt-flex-1"
+              })));
               return _el$3;
             })()];
           }
         }))), (() => {
           var _el$2 = _tmpl$69();
-          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")));
+          effect(() => className(_el$2, style({
+            key: "notificationListEmptyNoticeOverlay",
+            className: "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;
         })()];
       }
@@ -6169,11 +6994,14 @@ var NotificationListSkeleton = (props) => {
             delay: 0.6
           },
           get ["class"]() {
-            return style("notificationListEmptyNotice", "nt-text-center");
+            return style({
+              key: "notificationListEmptyNotice",
+              className: "nt-text-center"
+            });
           },
           get children() {
             return memo(() => !!isKeyless())() ? createComponent(KeylessEmptyState, {}) : (() => {
-              var _el$4 = _tmpl$219();
+              var _el$4 = _tmpl$220();
               insert(_el$4, () => t("notifications.emptyNotice"));
               return _el$4;
             })();
@@ -6181,7 +7009,10 @@ var NotificationListSkeleton = (props) => {
         });
       }
     }), 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")));
+    effect(() => className(_el$, style({
+      key: "notificationListEmptyNoticeContainer",
+      className: "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$;
   })();
 };
@@ -6194,13 +7025,19 @@ function KeylessEmptyState() {
       variant: "secondary",
       size: "sm",
       get ["class"]() {
-        return style("notificationListEmptyNotice", "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-white nt-border nt-border-neutral-alpha-100 nt-shadow-sm nt-text-[12px] nt-font-medium");
+        return style({
+          key: "notificationListEmptyNotice",
+          className: "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-white nt-border nt-border-neutral-alpha-100 nt-shadow-sm nt-text-[12px] nt-font-medium"
+        });
       },
       onClick: () => window.open("https://go.novu.co/keyless", "_blank", "noopener noreferrer"),
       get children() {
         return [createComponent(Key, {
           get ["class"]() {
-            return style("lockIcon", "nt-size-4 nt-mr-2");
+            return style({
+              key: "lockIcon",
+              className: "nt-size-4 nt-mr-2"
+            });
           }
         }), "Get API key"];
       }
@@ -6209,19 +7046,37 @@ function KeylessEmptyState() {
       variant: "default",
       size: "sm",
       get ["class"]() {
-        return style("notificationListEmptyNotice", "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-neutral-900 nt-text-white nt-shadow-sm nt-text-[12px] nt-font-medium");
+        return style({
+          key: "notificationListEmptyNotice",
+          className: "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-neutral-900 nt-text-white nt-shadow-sm nt-text-[12px] nt-font-medium"
+        });
       },
       onClick: () => novu.notifications.triggerHelloWorldEvent(),
       get children() {
         return [createComponent(Bell, {
           get ["class"]() {
-            return style("bellIcon", "nt-size-4 nt-mr-2");
+            return style({
+              key: "bellIcon",
+              className: "nt-size-4 nt-mr-2"
+            });
           }
         }), "Send 'Hello World!'"];
       }
     }));
     effect((_p$) => {
-      var _v$ = style("notificationListEmptyNotice", "nt--mt-[50px]"), _v$2 = style("strong", "nt-text-[#000000] nt-mb-1"), _v$3 = style("notificationListEmptyNotice", "nt-mb-4"), _v$4 = style("notificationListEmptyNotice", "nt-flex nt-gap-4 nt-justify-center");
+      var _v$ = style({
+        key: "notificationListEmptyNotice",
+        className: "nt--mt-[50px]"
+      }), _v$2 = style({
+        key: "strong",
+        className: "nt-text-[#000000] nt-mb-1"
+      }), _v$3 = style({
+        key: "notificationListEmptyNotice",
+        className: "nt-mb-4"
+      }), _v$4 = style({
+        key: "notificationListEmptyNotice",
+        className: "nt-flex nt-gap-4 nt-justify-center"
+      });
       _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
@@ -6239,9 +7094,9 @@ function KeylessEmptyState() {
 
 // src/ui/components/Notification/NotificationList.tsx
 var _tmpl$70 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$220 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$221 = /* @__PURE__ */ template(`<div><div>`);
 var NotificationList = (props) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
     limit: props.limit
   }));
@@ -6261,7 +7116,8 @@ var NotificationList = (props) => {
   } = useNewMessagesCount({
     filter: {
       tags: (_b = (_a = props.filter) == null ? void 0 : _a.tags) != null ? _b : [],
-      data: (_d = (_c = props.filter) == null ? void 0 : _c.data) != null ? _d : {}
+      data: (_d = (_c = props.filter) == null ? void 0 : _c.data) != null ? _d : {},
+      severity: (_e = props.filter) == null ? void 0 : _e.severity
     }
   });
   const {
@@ -6287,7 +7143,7 @@ var NotificationList = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$220(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$221(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(NewMessagesCta, {
       get count() {
         return count();
@@ -6346,12 +7202,21 @@ var NotificationList = (props) => {
                 get renderNotification() {
                   return props.renderNotification;
                 },
+                get renderAvatar() {
+                  return props.renderAvatar;
+                },
                 get renderSubject() {
                   return props.renderSubject;
                 },
                 get renderBody() {
                   return props.renderBody;
                 },
+                get renderDefaultActions() {
+                  return props.renderDefaultActions;
+                },
+                get renderCustomActions() {
+                  return props.renderCustomActions;
+                },
                 get onNotificationClick() {
                   return props.onNotificationClick;
                 },
@@ -6381,7 +7246,19 @@ var NotificationList = (props) => {
       }
     }));
     effect((_p$) => {
-      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");
+      var _v$ = style({
+        key: "notificationListContainer",
+        className: "nt-relative nt-border-t nt-border-t-neutral-alpha-200 nt-h-full nt-overflow-hidden",
+        context: {
+          notifications: data()
+        }
+      }), _v$2 = style({
+        key: "notificationList",
+        className: "nt-relative nt-h-full nt-flex nt-flex-col nt-overflow-y-auto",
+        context: {
+          notifications: data()
+        }
+      });
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       return _p$;
@@ -6400,20 +7277,24 @@ var InboxTabUnreadNotificationsCount = (props) => {
   return (() => {
     var _el$ = _tmpl$71();
     insert(_el$, displayCount);
-    effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
+    effect(() => className(_el$, style({
+      key: "notificationsTabsTriggerCount",
+      className: "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm"
+    })));
     return _el$;
   })();
 };
 var InboxTab = (props) => {
-  var _a;
+  var _a, _b;
   const {
     status
   } = useInboxContext();
   const style = useStyle();
-  const unreadCount = useUnreadCount({
+  const unreadCount = useFilteredUnreadCount({
     filter: {
       tags: getTagsFromTab(props),
-      data: (_a = props.filter) == null ? void 0 : _a.data
+      data: (_a = props.filter) == null ? void 0 : _a.data,
+      severity: (_b = props.filter) == null ? void 0 : _b.severity
     }
   });
   return createComponent(Tabs.Trigger, {
@@ -6421,13 +7302,19 @@ var InboxTab = (props) => {
       return props.label;
     },
     get ["class"]() {
-      return style("notificationsTabs__tabsTrigger", cn(tabsTriggerVariants(), "nt-flex nt-gap-2", props.class));
+      return style({
+        key: "notificationsTabs__tabsTrigger",
+        className: cn(tabsTriggerVariants(), "nt-flex nt-gap-2", props.class)
+      });
     },
     get children() {
       return [(() => {
         var _el$2 = _tmpl$71();
         insert(_el$2, () => props.label);
-        effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
+        effect(() => className(_el$2, style({
+          key: "notificationsTabsTriggerLabel",
+          className: "nt-text-sm nt-font-medium"
+        })));
         return _el$2;
       })(), createComponent(Show, {
         get when() {
@@ -6445,20 +7332,24 @@ var InboxTab = (props) => {
   });
 };
 var InboxDropdownTab = (props) => {
-  var _a;
+  var _a, _b;
   const {
     status
   } = useInboxContext();
   const style = useStyle();
-  const unreadCount = useUnreadCount({
+  const unreadCount = useFilteredUnreadCount({
     filter: {
       tags: getTagsFromTab(props),
-      data: (_a = props.filter) == null ? void 0 : _a.data
+      data: (_a = props.filter) == null ? void 0 : _a.data,
+      severity: (_b = props.filter) == null ? void 0 : _b.severity
     }
   });
   return createComponent(Dropdown.Item, {
     get ["class"]() {
-      return style("moreTabs__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-justify-between nt-gap-2"));
+      return style({
+        key: "moreTabs__dropdownItem",
+        className: cn(dropdownItemVariants(), "nt-flex nt-justify-between nt-gap-2")
+      });
     },
     get onClick() {
       return props.onClick;
@@ -6467,7 +7358,10 @@ var InboxDropdownTab = (props) => {
       return [(() => {
         var _el$3 = _tmpl$71();
         insert(_el$3, () => props.label);
-        effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
+        effect(() => className(_el$3, style({
+          key: "moreTabs__dropdownItemLabel",
+          className: "nt-mr-auto"
+        })));
         return _el$3;
       })(), memo(() => props.rightIcon), createComponent(Show, {
         get when() {
@@ -6511,7 +7405,9 @@ var InboxTabs = (props) => {
       };
     })
   });
-  const checkIconClass = style("moreTabs__dropdownItemRight__icon", "nt-size-3", {
+  const checkIconClass = style({
+    key: "moreTabs__dropdownItemRight__icon",
+    className: "nt-size-3",
     iconKey: "check"
   });
   const options = createMemo(() => dropdownTabs().map((tab) => __spreadProps(__spreadValues({}, tab), {
@@ -6527,7 +7423,9 @@ var InboxTabs = (props) => {
   })));
   const dropdownTabsUnreadSum = createMemo(() => dropdownTabsUnreadCounts().reduce((accumulator, currentValue) => accumulator + currentValue, 0));
   const isTabsDropdownActive = createMemo(() => dropdownTabs().map((tab) => tab.label).includes(activeTab()));
-  const moreTabsIconClass = style("moreTabs__icon", "nt-size-5", {
+  const moreTabsIconClass = style({
+    key: "moreTabs__icon",
+    className: "nt-size-5",
     iconKey: "arrowDown"
   });
   return createComponent(Tabs.Root, {
@@ -6629,19 +7527,31 @@ var InboxTabs = (props) => {
           return tab.label;
         },
         get ["class"]() {
-          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"));
+          return style({
+            key: "notificationsTabs__tabsContent",
+            className: 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 renderAvatar() {
+              return props.renderAvatar;
+            },
             get renderSubject() {
               return props.renderSubject;
             },
             get renderBody() {
               return props.renderBody;
             },
+            get renderDefaultActions() {
+              return props.renderDefaultActions;
+            },
+            get renderCustomActions() {
+              return props.renderCustomActions;
+            },
             get onNotificationClick() {
               return props.onNotificationClick;
             },
@@ -6652,10 +7562,11 @@ var InboxTabs = (props) => {
               return props.onSecondaryActionClick;
             },
             get filter() {
-              var _a;
+              var _a, _b;
               return __spreadProps(__spreadValues({}, filter()), {
                 tags: getTagsFromTab(tab),
-                data: (_a = tab.filter) == null ? void 0 : _a.data
+                data: (_a = tab.filter) == null ? void 0 : _a.data,
+                severity: (_b = tab.filter) == null ? void 0 : _b.severity
               });
             }
           });
@@ -6713,12 +7624,21 @@ var InboxContent = (props) => {
                   get renderNotification() {
                     return props.renderNotification;
                   },
+                  get renderAvatar() {
+                    return props.renderAvatar;
+                  },
                   get renderSubject() {
                     return props.renderSubject;
                   },
                   get renderBody() {
                     return props.renderBody;
                   },
+                  get renderDefaultActions() {
+                    return props.renderDefaultActions;
+                  },
+                  get renderCustomActions() {
+                    return props.renderCustomActions;
+                  },
                   get onNotificationClick() {
                     return props.onNotificationClick;
                   },
@@ -6738,12 +7658,21 @@ var InboxContent = (props) => {
                   get renderNotification() {
                     return props.renderNotification;
                   },
+                  get renderAvatar() {
+                    return props.renderAvatar;
+                  },
                   get renderSubject() {
                     return props.renderSubject;
                   },
                   get renderBody() {
                     return props.renderBody;
                   },
+                  get renderDefaultActions() {
+                    return props.renderDefaultActions;
+                  },
+                  get renderCustomActions() {
+                    return props.renderCustomActions;
+                  },
                   get onNotificationClick() {
                     return props.onNotificationClick;
                   },
@@ -6775,10 +7704,13 @@ var InboxContent = (props) => {
       }
     }), null);
     insert(_el$, createComponent(Footer, {}), null);
-    effect(() => className(_el$, style("inboxContent", cn("nt-h-full nt-flex nt-flex-col [&_.nv-preferencesContainer]:nt-pb-8 [&_.nv-notificationList]:nt-pb-8", {
-      "[&_.nv-preferencesContainer]:nt-pb-12 [&_.nv-notificationList]:nt-pb-12": isDevelopmentMode(),
-      "[&_.nv-preferencesContainer]:nt-pb-8 [&_.nv-notificationList]:nt-pb-8": !isDevelopmentMode()
-    }))));
+    effect(() => className(_el$, style({
+      key: "inboxContent",
+      className: cn("nt-h-full nt-flex nt-flex-col [&_.nv-preferencesContainer]:nt-pb-8 [&_.nv-notificationList]:nt-pb-8", {
+        "[&_.nv-preferencesContainer]:nt-pb-12 [&_.nv-notificationList]:nt-pb-12": isDevelopmentMode(),
+        "[&_.nv-preferencesContainer]:nt-pb-8 [&_.nv-notificationList]:nt-pb-8": !isDevelopmentMode()
+      })
+    })));
     return _el$;
   })();
 };
@@ -6807,7 +7739,9 @@ var Inbox = (props) => {
       return [createComponent(Popover.Trigger, {
         asChild: (triggerProps) => createComponent(Button, mergeProps({
           get ["class"]() {
-            return style("inbox__popoverTrigger");
+            return style({
+              key: "inbox__popoverTrigger"
+            });
           },
           variant: "ghost",
           size: "icon"
@@ -6830,12 +7764,21 @@ var Inbox = (props) => {
             },
             get fallback() {
               return createComponent(InboxContent, {
+                get renderAvatar() {
+                  return props.renderAvatar;
+                },
                 get renderSubject() {
                   return props.renderSubject;
                 },
                 get renderBody() {
                   return props.renderBody;
                 },
+                get renderDefaultActions() {
+                  return props.renderDefaultActions;
+                },
+                get renderCustomActions() {
+                  return props.renderCustomActions;
+                },
                 get onNotificationClick() {
                   return props.onNotificationClick;
                 },
@@ -6877,11 +7820,14 @@ var novuComponents = {
   Bell: Bell2,
   Notifications: (props) => {
     if (props.renderNotification) {
-      const _a = props, propsWithoutBodyAndSubject = __objRest(_a, [
+      const _a = props, otherProps = __objRest(_a, [
         "renderBody",
-        "renderSubject"
+        "renderSubject",
+        "renderAvatar",
+        "renderDefaultActions",
+        "renderCustomActions"
       ]);
-      return createComponent(InboxContent, mergeProps(propsWithoutBodyAndSubject, {
+      return createComponent(InboxContent, mergeProps(otherProps, {
         hideNav: true,
         get initialPage() {
           return InboxPage.Notifications;
@@ -6900,11 +7846,14 @@ var novuComponents = {
   },
   Preferences: (props) => {
     if (props.renderNotification) {
-      const _a = props, propsWithoutBodyAndSubject = __objRest(_a, [
+      const _a = props, otherProps = __objRest(_a, [
         "renderBody",
-        "renderSubject"
+        "renderSubject",
+        "renderAvatar",
+        "renderDefaultActions",
+        "renderCustomActions"
       ]);
-      return createComponent(InboxContent, mergeProps(propsWithoutBodyAndSubject, {
+      return createComponent(InboxContent, mergeProps(otherProps, {
         hideNav: true,
         get initialPage() {
           return InboxPage.Preferences;