@novu/js 3.3.1 → 3.4.0

package/dist/esm/ui/index.mjs

@@ -1,8 +1,8 @@
-import { Novu, isSameFilter } from '../chunk-JKFCSXQM.mjs';
+import { Novu, isSameFilter } from '../chunk-LVZEXMKC.mjs';
 import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.mjs';
-import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
+import { __privateAdd, __privateMethod, __privateSet, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
 import { delegateEvents, createComponent, mergeProps, render, Portal as Portal$1, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
-import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, batch } from 'solid-js';
+import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, Index, batch } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import clsx from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -11,8 +11,8 @@ import { autoUpdate, offset, flip, shift } from '@floating-ui/dom';
 import { useFloating } from 'solid-floating-ui';
 import { Motion as Motion$1 } from 'solid-motionone';
 
-// _4rw53wtx5:/Users/adamchmara/projects/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-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.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-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-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-transform{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-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-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-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-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-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-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-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-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.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-popover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-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)}.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-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-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}.nt-peer:checked~.peer-checked\\:nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-peer:checked~.peer-checked\\:nt-bg-primary{background-color:var(--nv-color-primary)}.nt-peer:checked~.peer-checked\\:nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-peer:checked~.peer-checked\\:after\\:nt-translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;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-peer:checked~.peer-checked\\:after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.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}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
+// _0ama3ua28:/Users/pavlotymchuk/projects/js/novu-2/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-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.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-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-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-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-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-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-tooltip{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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)}.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-4 .nv-notificationList{padding-bottom:1rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-4 .nv-preferencesContainer{padding-bottom:1rem}.\\[\\&_\\.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}`;
 
 // src/ui/config/appearanceKeys.ts
 var appearanceKeys = [
@@ -166,12 +166,27 @@ var appearanceKeys = [
   "workflowContainer",
   "workflowLabel",
   "workflowLabelHeader",
+  "workflowLabelHeaderContainer",
+  "workflowLabelIcon",
   "workflowLabelContainer",
   "workflowContainerDisabledNotice",
   "workflowLabelDisabled__icon",
   "workflowContainerRight__icon",
   "workflowArrow__icon",
   "workflowDescription",
+  // preference groups
+  "preferencesGroupContainer",
+  "preferencesGroupHeader",
+  "preferencesGroupLabelContainer",
+  "preferencesGroupLabelIcon",
+  "preferencesGroupLabel",
+  "preferencesGroupActionsContainer",
+  "preferencesGroupActionsContainerRight__icon",
+  "preferencesGroupBody",
+  "preferencesGroupChannels",
+  "preferencesGroupInfo",
+  "preferencesGroupInfoIcon",
+  "preferencesGroupWorkflows",
   // channel
   "channelContainer",
   "channelIconContainer",
@@ -239,6 +254,7 @@ var defaultLocalization = {
   "preferences.global": "Global Preferences",
   "preferences.workflow.disabled.notice": "Contact admin to enable subscription management for this critical notification.",
   "preferences.workflow.disabled.tooltip": "Contact admin to edit",
+  "preferences.group.info": "Applies to all notifications under this group.",
   "snooze.datePicker.timePickerLabel": "Time",
   "snooze.datePicker.apply": "Apply",
   "snooze.datePicker.cancel": "Cancel",
@@ -621,6 +637,7 @@ var getTagsFromTab = (tab) => {
   var _a;
   return ((_a = tab == null ? void 0 : tab.filter) == null ? void 0 : _a.tags) || (tab == null ? void 0 : tab.value) || [];
 };
+var NOVU_DEFAULT_CSS_ID = "novu-default-css";
 
 // src/ui/helpers/useStyle.ts
 var useStyle = () => {
@@ -629,46 +646,51 @@ var useStyle = () => {
   onMount(() => {
     setIsServer(false);
   });
-  const styleFuncMemo = createMemo(() => (appearanceKey, className) => {
-    const appearanceKeyParts = appearanceKey.split("__");
-    let finalAppearanceKeys = [];
-    for (let i = 0; i < appearanceKeyParts.length; i += 1) {
-      const accumulated = appearanceKeyParts.slice(i).join("__");
-      if (appearanceKeys.includes(accumulated)) {
-        finalAppearanceKeys.push(accumulated);
+  const styleFuncMemo = createMemo(
+    () => (appearanceKey, className, {
+      iconKey
+    } = {}) => {
+      const appearanceKeyParts = appearanceKey.split("__");
+      let finalAppearanceKeys = [];
+      for (let i = 0; i < appearanceKeyParts.length; i += 1) {
+        const accumulated = appearanceKeyParts.slice(i).join("__");
+        if (appearanceKeys.includes(accumulated)) {
+          finalAppearanceKeys.push(accumulated);
+        }
       }
-    }
-    const classes = (className == null ? void 0 : className.split(/\s+/).map((className2) => className2.replace(/^nv-/, ""))) || [];
-    const appearanceKeysInClasses = classes.filter(
-      (className2) => appearanceKeys.includes(className2)
-    );
-    finalAppearanceKeys = Array.from(
-      /* @__PURE__ */ new Set([...finalAppearanceKeys, ...appearanceKeysInClasses])
-    );
-    finalAppearanceKeys.sort((a, b) => {
-      const countA = (a.match(/__/g) || []).length;
-      const countB = (b.match(/__/g) || []).length;
-      return countB - countA;
-    });
-    const finalClassName = classes.filter((className2) => !finalAppearanceKeys.includes(className2)).join(" ");
-    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 classes = (className == null ? void 0 : className.split(/\s+/).map((className2) => className2.replace(/^nv-/, ""))) || [];
+      const appearanceKeysInClasses = classes.filter(
+        (className2) => appearanceKeys.includes(className2)
+      );
+      finalAppearanceKeys = Array.from(
+        /* @__PURE__ */ new Set([...finalAppearanceKeys, ...appearanceKeysInClasses])
+      );
+      finalAppearanceKeys.sort((a, b) => {
+        const countA = (a.match(/__/g) || []).length;
+        const countB = (b.match(/__/g) || []).length;
+        return countB - countA;
+      });
+      const finalClassName = classes.filter((className2) => !finalAppearanceKeys.includes(className2)).join(" ");
+      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]]);
+        }
       }
+      appearanceClassnames = [publicFacingTwMerge(appearanceClassnames)];
+      const cssInJsClasses = !!finalAppearanceKeys.length && !isServer() ? finalAppearanceKeys.map((appKey) => appearance.appearanceKeyToCssInJsClass[appKey]) : [];
+      return cn(
+        ...finalAppearanceKeys.map((key) => `nv-${key}`),
+        "\u{1F514}",
+        iconKey ? `nv-${iconKey} \u{1F5BC}\uFE0F` : "",
+        finalClassName,
+        // default styles
+        appearanceClassnames,
+        ...cssInJsClasses
+      );
     }
-    appearanceClassnames = [publicFacingTwMerge(appearanceClassnames)];
-    const cssInJsClasses = !!finalAppearanceKeys.length && !isServer() ? finalAppearanceKeys.map((appKey) => appearance.appearanceKeyToCssInJsClass[appKey]) : [];
-    return cn(
-      ...finalAppearanceKeys.map((key) => `nv-${key}`),
-      "\u{1F514}",
-      finalClassName,
-      // default styles
-      appearanceClassnames,
-      ...cssInJsClasses
-    );
-  });
+  );
   return styleFuncMemo();
 };
 function useUncontrolledState(props) {
@@ -702,26 +724,36 @@ var AppearanceProvider = (props) => {
     var _a, _b;
     return (_b = (_a = props.appearance) == null ? void 0 : _a.animations) != null ? _b : true;
   };
+  const icons = () => {
+    var _a;
+    return ((_a = props.appearance) == null ? void 0 : _a.icons) || {};
+  };
   const allElements = createMemo(() => {
     var _a;
     const baseElements = themes().reduce((acc, obj) => __spreadValues(__spreadValues({}, acc), obj.elements || {}), {});
     return __spreadValues(__spreadValues({}, baseElements), ((_a = props.appearance) == null ? void 0 : _a.elements) || {});
   });
+  const container = () => props.container;
   onMount(() => {
-    const el = document.getElementById(props.id);
+    var _a;
+    const root = props.container instanceof ShadowRoot ? props.container : document;
+    const el = root.getElementById(props.id);
     if (el) {
       setStyleElement(el);
       return;
     }
+    const stylesContainer = (_a = props.container) != null ? _a : document.head;
     const styleEl = document.createElement("style");
     styleEl.id = props.id;
-    document.head.appendChild(styleEl);
+    const defaultCssStyles = root.getElementById(NOVU_DEFAULT_CSS_ID);
+    if (defaultCssStyles) {
+      stylesContainer.insertBefore(styleEl, defaultCssStyles.nextSibling);
+    } else {
+      stylesContainer.appendChild(styleEl);
+    }
     setStyleElement(styleEl);
     onCleanup(() => {
-      const element = document.getElementById(props.id);
-      if (element) {
-        element.remove();
-      }
+      styleEl.remove();
     });
   });
   createEffect(() => {
@@ -757,10 +789,12 @@ var AppearanceProvider = (props) => {
       return {
         elements: allElements,
         variables,
+        animations,
+        icons,
         appearanceKeyToCssInJsClass: store.appearanceKeyToCssInJsClass,
         // stores are reactive
-        animations,
-        id
+        id,
+        container
       };
     },
     get children() {
@@ -932,6 +966,7 @@ var InboxProvider = (props) => {
   const [maxSnoozeDurationHours, setMaxSnoozeDurationHours] = createSignal(0);
   const isSnoozeEnabled = createMemo(() => maxSnoozeDurationHours() > 0);
   const [preferencesFilter, setPreferencesFilter] = createSignal(props.preferencesFilter);
+  const [preferenceGroups, setPreferenceGroups] = createSignal(props.preferenceGroups);
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
     setFilter((old) => __spreadProps(__spreadValues({}, STATUS_TO_FILTER[newStatus]), {
@@ -976,6 +1011,7 @@ var InboxProvider = (props) => {
       tags
     }));
     setPreferencesFilter(props.preferencesFilter);
+    setPreferenceGroups(props.preferenceGroups);
   });
   useNovuEvent({
     event: "session.initialize.resolved",
@@ -1005,6 +1041,7 @@ var InboxProvider = (props) => {
       navigate,
       hideBranding,
       preferencesFilter,
+      preferenceGroups,
       isDevelopmentMode,
       maxSnoozeDurationHours,
       isSnoozeEnabled
@@ -1237,6 +1274,7 @@ var useUnreadCounts = (props) => {
   return counts;
 };
 function createFocusTrap({ element, enabled }) {
+  const { container } = useAppearance();
   createEffect(() => {
     const trapElement = element();
     if (!trapElement || !enabled()) return;
@@ -1251,13 +1289,15 @@ function createFocusTrap({ element, enabled }) {
       const focusableElements2 = getFocusableElements();
       const firstFocusableElement = focusableElements2[0];
       const lastFocusableElement = focusableElements2[focusableElements2.length - 1];
+      const containerElement = container();
+      const root = containerElement instanceof ShadowRoot ? containerElement : document;
       if (event.shiftKey) {
-        if (document.activeElement === firstFocusableElement) {
+        if (root.activeElement === firstFocusableElement) {
           lastFocusableElement.focus();
           event.preventDefault();
         }
       } else {
-        if (document.activeElement === lastFocusableElement) {
+        if (root.activeElement === lastFocusableElement) {
           firstFocusableElement.focus();
           event.preventDefault();
         }
@@ -1344,144 +1384,203 @@ var ArrowLeft = (props) => {
     return _el$;
   })();
 };
-var _tmpl$4 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5 12C5.6875 12 6.25 11.4462 6.25 10.7692H3.75C3.75 11.4462 4.3125 12 5 12ZM8.75 8.30769V5.23077C8.75 3.34154 7.73125 1.76 5.9375 1.34154V0.923077C5.9375 0.412308 5.51875 0 5 0C4.48125 0 4.0625 0.412308 4.0625 0.923077V1.34154C2.275 1.76 1.25 3.33538 1.25 5.23077V8.30769L0 9.53846V10.1538H10V9.53846L8.75 8.30769ZM7.5 8.92308H2.5V5.23077C2.5 3.70462 3.44375 2.46154 5 2.46154C6.55625 2.46154 7.5 3.70462 7.5 5.23077V8.92308Z"fill=currentColor>`);
-function Bell(props) {
+var _tmpl$4 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.7957 10.0009L7.08325 6.2884L8.14375 5.2279L12.9168 10.0009L8.14375 14.7739L7.08325 13.7134L10.7957 10.0009Z"fill=currentColor>`);
+var ArrowRight = (props) => {
   return (() => {
     var _el$ = _tmpl$4();
     spread(_el$, props, true, true);
     return _el$;
   })();
-}
-var _tmpl$5 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M0.625 9.375L2.93989 8.86059C3.5538 9.18889 4.25516 9.375 5 9.375C7.41622 9.375 9.375 7.41622 9.375 5C9.375 2.58375 7.41622 0.625 5 0.625C2.58375 0.625 0.625 2.58375 0.625 5C0.625 5.74484 0.81113 6.4462 1.13942 7.0601L0.625 9.375ZM6.50881 2.8125L6.43224 3.68761H7.1875V4.56259H6.35568L6.27912 5.43759H7.1875V6.31259H6.2026L6.12604 7.1875H5.24771L5.32423 6.31259H4.44591L4.36934 7.1875H3.49101L3.56755 6.31259H2.8125V5.43759H3.64411L3.72066 4.56259H2.8125V3.68761H3.79721L3.87377 2.8125H4.75211L4.67555 3.68761H5.55392L5.63048 2.8125H6.50881ZM4.59899 4.56259L4.52247 5.43759H5.40079L5.47736 4.56259H4.59899Z"fill=currentColor>`);
-var Chat = (props) => {
+};
+var _tmpl$5 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
+var ArrowDown = (props) => {
   return (() => {
     var _el$ = _tmpl$5();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$6 = /* @__PURE__ */ template(`<svg viewBox="0 0 8 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.99994 4.58847L7.33298 0L8 0.705765L2.99994 6L0 2.82356L0.666549 2.11779L2.99994 4.58847Z"fill=currentColor>`);
-var Check = (props) => {
+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>`);
+function Bell(props) {
   return (() => {
     var _el$ = _tmpl$6();
     spread(_el$, props, true, true);
     return _el$;
   })();
-};
-var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path fill=currentColor d="M5 8.333c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S5.916 8.333 5 8.333zm10 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S15.916 8.333 15 8.333zm-5 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S10.916 8.333 10 8.333z">`);
-var Dots = (props) => {
+}
+var _tmpl$7 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M0.625 9.375L2.93989 8.86059C3.5538 9.18889 4.25516 9.375 5 9.375C7.41622 9.375 9.375 7.41622 9.375 5C9.375 2.58375 7.41622 0.625 5 0.625C2.58375 0.625 0.625 2.58375 0.625 5C0.625 5.74484 0.81113 6.4462 1.13942 7.0601L0.625 9.375ZM6.50881 2.8125L6.43224 3.68761H7.1875V4.56259H6.35568L6.27912 5.43759H7.1875V6.31259H6.2026L6.12604 7.1875H5.24771L5.32423 6.31259H4.44591L4.36934 7.1875H3.49101L3.56755 6.31259H2.8125V5.43759H3.64411L3.72066 4.56259H2.8125V3.68761H3.79721L3.87377 2.8125H4.75211L4.67555 3.68761H5.55392L5.63048 2.8125H6.50881ZM4.59899 4.56259L4.52247 5.43759H5.40079L5.47736 4.56259H4.59899Z"fill=currentColor>`);
+var Chat = (props) => {
   return (() => {
     var _el$ = _tmpl$7();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.20703 1.875H2.8125H2.10547H1.875V2.04688V2.8125V3.60156V5.33984L0.00390625 3.95508C0.0351562 3.60156 0.216797 3.27344 0.505859 3.06055L0.9375 2.74023V1.875C0.9375 1.35742 1.35742 0.9375 1.875 0.9375H3.37109L4.3457 0.216797C4.53516 0.0761719 4.76367 0 5 0C5.23633 0 5.46484 0.0761719 5.6543 0.214844L6.62891 0.9375H8.125C8.64258 0.9375 9.0625 1.35742 9.0625 1.875V2.74023L9.49414 3.06055C9.7832 3.27344 9.96484 3.60156 9.99609 3.95508L8.125 5.33984V3.60156V2.8125V2.04688V1.875H7.89453H7.1875H5.79297H4.20508H4.20703ZM0 8.75V4.72852L4.25 7.87695C4.4668 8.03711 4.73047 8.125 5 8.125C5.26953 8.125 5.5332 8.03906 5.75 7.87695L10 4.72852V8.75C10 9.43945 9.43945 10 8.75 10H1.25C0.560547 10 0 9.43945 0 8.75ZM3.4375 3.125H6.5625C6.73438 3.125 6.875 3.26562 6.875 3.4375C6.875 3.60938 6.73438 3.75 6.5625 3.75H3.4375C3.26562 3.75 3.125 3.60938 3.125 3.4375C3.125 3.26562 3.26562 3.125 3.4375 3.125ZM3.4375 4.375H6.5625C6.73438 4.375 6.875 4.51562 6.875 4.6875C6.875 4.85938 6.73438 5 6.5625 5H3.4375C3.26562 5 3.125 4.85938 3.125 4.6875C3.125 4.51562 3.26562 4.375 3.4375 4.375Z"fill=currentColor>`);
-var Email = (props) => {
+var _tmpl$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 8 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.99994 4.58847L7.33298 0L8 0.705765L2.99994 6L0 2.82356L0.666549 2.11779L2.99994 4.58847Z"fill=currentColor>`);
+var Check = (props) => {
   return (() => {
     var _el$ = _tmpl$8();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99962 0.856934C4.64404 0.856934 4.35676 1.14421 4.35676 1.49979V1.88551C2.89024 2.18283 1.78533 3.48059 1.78533 5.03551V5.41318C1.78533 6.35738 1.43779 7.26943 0.810999 7.97658L0.662339 8.14332C0.493589 8.33216 0.45341 8.60336 0.555865 8.83439C0.658321 9.06542 0.889348 9.21408 1.14247 9.21408H8.85676C9.10988 9.21408 9.3389 9.06542 9.44337 8.83439C9.54783 8.60336 9.50564 8.33216 9.33689 8.14332L9.18823 7.97658C8.56145 7.26943 8.2139 6.35939 8.2139 5.41318V5.03551C8.2139 3.48059 7.10899 2.18283 5.64247 1.88551V1.49979C5.64247 1.14421 5.3552 0.856934 4.99962 0.856934ZM5.90966 10.767C6.15073 10.5259 6.28533 10.1985 6.28533 9.85693H4.99962H3.7139C3.7139 10.1985 3.8485 10.5259 4.08957 10.767C4.33064 11.008 4.6581 11.1426 4.99962 11.1426C5.34113 11.1426 5.66859 11.008 5.90966 10.767Z"fill=currentColor>`);
-var InApp = (props) => {
+var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3188_15050)><path d="M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
+var Clock = (props) => {
   return (() => {
     var _el$ = _tmpl$9();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$10 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.29671 10C1.78742 10 1.39807 9.85716 1.12864 9.57149C0.862497 9.28581 0.729426 8.86623 0.729426 8.31274V2.64594H1.69543V8.29668C1.69543 8.52163 1.74964 8.69487 1.85806 8.81624C1.96978 8.93408 2.12914 8.99301 2.33614 8.99301H7.66389C7.86764 8.99301 8.02366 8.93408 8.13209 8.81624C8.24385 8.69487 8.29965 8.52163 8.29965 8.29668V2.64594H9.27059V8.31274C9.27059 8.8627 9.13591 9.28048 8.86648 9.56608C8.59705 9.85536 8.20931 10 7.70333 10H2.29671ZM3.41056 5.34543C3.29556 5.34543 3.20028 5.30438 3.1247 5.22226C3.04913 5.14015 3.01134 5.03304 3.01134 4.90089V4.72949C3.01134 4.59737 3.04749 4.49204 3.11977 4.41348C3.19535 4.33492 3.29227 4.29564 3.41056 4.29564H6.5944C6.71271 4.29564 6.80795 4.33492 6.88026 4.41348C6.95582 4.49204 6.9936 4.59737 6.9936 4.72949V4.90089C6.9936 5.03304 6.95582 5.14015 6.88026 5.22226C6.8047 5.30438 6.70939 5.34543 6.5944 5.34543H3.41056ZM1.05964 3.16014C0.724502 3.16014 0.463285 3.05301 0.276004 2.83877C0.0920037 2.62095 0 2.33172 0 1.97107V1.18907C0 0.824846 0.0952841 0.535614 0.28586 0.321373C0.476428 0.107124 0.734358 0 1.05964 0H8.94536C9.27715 0 9.53511 0.107124 9.71911 0.321373C9.90642 0.535614 10 0.824846 10 1.18907V1.97107C10 2.33172 9.90642 2.62095 9.71911 2.83877C9.53511 3.05301 9.27715 3.16014 8.94536 3.16014H1.05964ZM1.24693 2.19067H8.75805C8.87304 2.19067 8.95516 2.16211 9.00448 2.10497C9.05372 2.04427 9.07838 1.95322 9.07838 1.83181V1.32833C9.07838 1.20335 9.05372 1.1123 9.00448 1.05517C8.95516 0.99803 8.87304 0.969462 8.75805 0.969462H1.24693C1.13193 0.969462 1.04814 0.99803 0.995567 1.05517C0.946281 1.1123 0.921638 1.20335 0.921638 1.32833V1.83181C0.921638 1.95322 0.946281 2.04427 0.995567 2.10497C1.04814 2.16211 1.13193 2.19067 1.24693 2.19067Z"fill=currentColor>`);
-var MarkAsArchived = (props) => {
+var _tmpl$10 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path fill=currentColor d="M5 8.333c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S5.916 8.333 5 8.333zm10 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S15.916 8.333 15 8.333zm-5 0c-.917 0-1.667.75-1.667 1.667s.75 1.667 1.667 1.667c.916 0 1.666-.75 1.666-1.667S10.916 8.333 10 8.333z">`);
+var Dots = (props) => {
   return (() => {
     var _el$ = _tmpl$10();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.17256 10.999C1.69081 10.999 1.3225 10.8562 1.06763 10.5705C0.815875 10.2848 0.689997 9.86525 0.689997 9.31177V3.64497H1.60378V9.2957C1.60378 9.52066 1.65506 9.6939 1.75763 9.81526C1.8633 9.93311 2.01405 9.99203 2.20986 9.99203H7.24963C7.44236 9.99203 7.58995 9.93311 7.69252 9.81526C7.79823 9.6939 7.85102 9.52066 7.85102 9.2957V3.64497H8.76947V9.31177C8.76947 9.86173 8.64208 10.2795 8.38721 10.5651C8.13235 10.8544 7.76556 10.999 7.28693 10.999H2.17256ZM1.00236 4.15916C0.68534 4.15916 0.438242 4.05204 0.261085 3.83779C0.0870305 3.61997 0 3.33074 0 2.97009V2.18809C0 1.82387 0.0901336 1.53464 0.270408 1.3204C0.450675 1.10615 0.694663 0.999023 1.00236 0.999023H8.46182C8.77568 0.999023 9.0197 1.10615 9.19375 1.3204C9.37094 1.53464 9.45946 1.82387 9.45946 2.18809V2.97009C9.45946 3.33074 9.37094 3.61997 9.19375 3.83779C9.0197 4.05204 8.77568 4.15916 8.46182 4.15916H1.00236ZM1.17953 3.1897H8.28464C8.39342 3.1897 8.4711 3.16113 8.51775 3.10399C8.56433 3.04329 8.58765 2.95224 8.58765 2.83083V2.32735C8.58765 2.20238 8.56433 2.11132 8.51775 2.05419C8.4711 1.99705 7.51461 1.96849 7.40583 1.96849H1.17953C1.07074 1.96849 0.991485 1.99705 0.941753 2.05419C0.895131 2.11132 0.87182 2.20238 0.87182 2.32735V2.83083C0.87182 2.95224 0.895131 3.04329 0.941753 3.10399C0.991485 3.16113 1.07074 3.1897 1.17953 3.1897Z"fill=currentColor></path><path d="M9.67298 0.553711C9.84703 0.556646 10.0146 0.614475 10.1535 0.716797L10.2208 0.771484L10.2814 0.833008C10.3958 0.960612 10.4679 1.11928 10.4913 1.28711L10.4992 1.37109L10.4982 1.45605C10.4872 1.64689 10.4124 1.8301 10.2833 1.97559L10.2843 1.97656L7.55482 5.15039L7.55384 5.14941C7.40234 5.3265 7.18382 5.43557 6.94642 5.44336L6.93861 5.44434H6.92005V5.44336C6.69203 5.44397 6.47619 5.35201 6.31947 5.19141L6.31849 5.18945L5.29505 4.13184C5.08531 3.91498 5.00658 3.60427 5.08118 3.31641L5.11634 3.21094C5.2129 2.97124 5.41476 2.78187 5.67396 2.70996L5.78626 2.68652C6.01138 2.65637 6.23763 2.72008 6.41419 2.85938L6.49818 2.93555L6.8849 3.33496L9.0138 0.859375V0.860352C9.15512 0.688807 9.35911 0.576792 9.58509 0.556641L9.67298 0.553711Z"fill=currentColor stroke=white>`);
-var MarkAsArchivedRead = (props) => {
+var _tmpl$11 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.20703 1.875H2.8125H2.10547H1.875V2.04688V2.8125V3.60156V5.33984L0.00390625 3.95508C0.0351562 3.60156 0.216797 3.27344 0.505859 3.06055L0.9375 2.74023V1.875C0.9375 1.35742 1.35742 0.9375 1.875 0.9375H3.37109L4.3457 0.216797C4.53516 0.0761719 4.76367 0 5 0C5.23633 0 5.46484 0.0761719 5.6543 0.214844L6.62891 0.9375H8.125C8.64258 0.9375 9.0625 1.35742 9.0625 1.875V2.74023L9.49414 3.06055C9.7832 3.27344 9.96484 3.60156 9.99609 3.95508L8.125 5.33984V3.60156V2.8125V2.04688V1.875H7.89453H7.1875H5.79297H4.20508H4.20703ZM0 8.75V4.72852L4.25 7.87695C4.4668 8.03711 4.73047 8.125 5 8.125C5.26953 8.125 5.5332 8.03906 5.75 7.87695L10 4.72852V8.75C10 9.43945 9.43945 10 8.75 10H1.25C0.560547 10 0 9.43945 0 8.75ZM3.4375 3.125H6.5625C6.73438 3.125 6.875 3.26562 6.875 3.4375C6.875 3.60938 6.73438 3.75 6.5625 3.75H3.4375C3.26562 3.75 3.125 3.60938 3.125 3.4375C3.125 3.26562 3.26562 3.125 3.4375 3.125ZM3.4375 4.375H6.5625C6.73438 4.375 6.875 4.51562 6.875 4.6875C6.875 4.85938 6.73438 5 6.5625 5H3.4375C3.26562 5 3.125 4.85938 3.125 4.6875C3.125 4.51562 3.26562 4.375 3.4375 4.375Z"fill=currentColor>`);
+var Email = (props) => {
   return (() => {
     var _el$ = _tmpl$11();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3445_1172)><path d="M9 9.99902H1C0.867383 9.99902 0.7402 9.94635 0.64645 9.85257C0.552667 9.75882 0.5 9.63164 0.5 9.49902V0.499023C0.5 0.366407 0.552669 0.239223 0.64645 0.145473C0.7402 0.0516901 0.867383 -0.000976562 1 -0.000976562H6.25C6.42865 -0.000976562 6.59368 0.0943401 6.68301 0.249023C6.77233 0.403707 6.77233 0.59434 6.68301 0.749023C6.59368 0.903707 6.42865 0.999023 6.25 0.999023H1.5V8.99902H8.5V4.49902C8.5 4.32037 8.59532 4.15534 8.75 4.06602C8.90468 3.97669 9.09532 3.97669 9.25 4.06602C9.40468 4.15534 9.5 4.32037 9.5 4.49902V9.49902C9.5 9.63164 9.44733 9.75882 9.35355 9.85257C9.2598 9.94636 9.13262 9.99902 9 9.99902Z"fill=currentColor></path><path d="M7.5 8.24902H2.5C2.32135 8.24902 2.15632 8.15371 2.06699 7.99902C1.97767 7.84434 1.97767 7.65371 2.06699 7.49902C2.15632 7.34434 2.32135 7.24902 2.5 7.24902H7.5C7.67865 7.24902 7.84368 7.34434 7.93301 7.49902C8.02233 7.65371 8.02233 7.84434 7.93301 7.99902C7.84368 8.15371 7.67865 8.24902 7.5 8.24902Z"fill=currentColor></path><path d="M4.75 6.49901C4.61709 6.49979 4.48936 6.44761 4.39498 6.35403L2.89498 4.85403C2.76816 4.72717 2.71865 4.54235 2.76507 4.36907C2.81149 4.19583 2.94681 4.06051 3.12005 4.01409C3.29332 3.96767 3.47816 4.01718 3.60501 4.14401L4.73001 5.269L8.37501 1.16901C8.46056 1.06279 8.58578 0.996155 8.72169 0.984497C8.8576 0.972843 8.99233 1.01718 9.09474 1.10728C9.19712 1.19738 9.25825 1.32541 9.26398 1.46167C9.26968 1.59796 9.21948 1.73065 9.12502 1.82902L5.12502 6.32902C5.03371 6.43306 4.90337 6.49461 4.76502 6.49901L4.75 6.49901Z"fill=currentColor></path></g><defs><clipPath id=clip0_3445_1172><rect width=10 height=10 fill=white transform="translate(0 -0.000976562)">`);
-var MarkAsRead = (props) => {
+var _tmpl$12 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99962 0.856934C4.64404 0.856934 4.35676 1.14421 4.35676 1.49979V1.88551C2.89024 2.18283 1.78533 3.48059 1.78533 5.03551V5.41318C1.78533 6.35738 1.43779 7.26943 0.810999 7.97658L0.662339 8.14332C0.493589 8.33216 0.45341 8.60336 0.555865 8.83439C0.658321 9.06542 0.889348 9.21408 1.14247 9.21408H8.85676C9.10988 9.21408 9.3389 9.06542 9.44337 8.83439C9.54783 8.60336 9.50564 8.33216 9.33689 8.14332L9.18823 7.97658C8.56145 7.26943 8.2139 6.35939 8.2139 5.41318V5.03551C8.2139 3.48059 7.10899 2.18283 5.64247 1.88551V1.49979C5.64247 1.14421 5.3552 0.856934 4.99962 0.856934ZM5.90966 10.767C6.15073 10.5259 6.28533 10.1985 6.28533 9.85693H4.99962H3.7139C3.7139 10.1985 3.8485 10.5259 4.08957 10.767C4.33064 11.008 4.6581 11.1426 4.99962 11.1426C5.34113 11.1426 5.66859 11.008 5.90966 10.767Z"fill=currentColor>`);
+var InApp = (props) => {
   return (() => {
     var _el$ = _tmpl$12();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M3.15789 2.99902V4.99902L0 2.49902L3.15789 -0.000976562V1.99902H5.78947C6.90618 1.99902 7.97714 2.42045 8.76677 3.1706C9.55639 3.92074 10 4.93816 10 5.99902C10 7.05989 9.55639 8.0773 8.76677 8.82745C7.97714 9.5776 6.90618 9.99902 5.78947 9.99902H1.05263V8.99902H5.78947C6.627 8.99902 7.43022 8.68295 8.02244 8.12034C8.61466 7.55773 8.94737 6.79467 8.94737 5.99902C8.94737 5.20337 8.61466 4.44031 8.02244 3.8777C7.43022 3.31509 6.627 2.99902 5.78947 2.99902H3.15789Z"fill=currentColor>`);
-var MarkAsUnarchived = (props) => {
+var _tmpl$13 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.29671 10C1.78742 10 1.39807 9.85716 1.12864 9.57149C0.862497 9.28581 0.729426 8.86623 0.729426 8.31274V2.64594H1.69543V8.29668C1.69543 8.52163 1.74964 8.69487 1.85806 8.81624C1.96978 8.93408 2.12914 8.99301 2.33614 8.99301H7.66389C7.86764 8.99301 8.02366 8.93408 8.13209 8.81624C8.24385 8.69487 8.29965 8.52163 8.29965 8.29668V2.64594H9.27059V8.31274C9.27059 8.8627 9.13591 9.28048 8.86648 9.56608C8.59705 9.85536 8.20931 10 7.70333 10H2.29671ZM3.41056 5.34543C3.29556 5.34543 3.20028 5.30438 3.1247 5.22226C3.04913 5.14015 3.01134 5.03304 3.01134 4.90089V4.72949C3.01134 4.59737 3.04749 4.49204 3.11977 4.41348C3.19535 4.33492 3.29227 4.29564 3.41056 4.29564H6.5944C6.71271 4.29564 6.80795 4.33492 6.88026 4.41348C6.95582 4.49204 6.9936 4.59737 6.9936 4.72949V4.90089C6.9936 5.03304 6.95582 5.14015 6.88026 5.22226C6.8047 5.30438 6.70939 5.34543 6.5944 5.34543H3.41056ZM1.05964 3.16014C0.724502 3.16014 0.463285 3.05301 0.276004 2.83877C0.0920037 2.62095 0 2.33172 0 1.97107V1.18907C0 0.824846 0.0952841 0.535614 0.28586 0.321373C0.476428 0.107124 0.734358 0 1.05964 0H8.94536C9.27715 0 9.53511 0.107124 9.71911 0.321373C9.90642 0.535614 10 0.824846 10 1.18907V1.97107C10 2.33172 9.90642 2.62095 9.71911 2.83877C9.53511 3.05301 9.27715 3.16014 8.94536 3.16014H1.05964ZM1.24693 2.19067H8.75805C8.87304 2.19067 8.95516 2.16211 9.00448 2.10497C9.05372 2.04427 9.07838 1.95322 9.07838 1.83181V1.32833C9.07838 1.20335 9.05372 1.1123 9.00448 1.05517C8.95516 0.99803 8.87304 0.969462 8.75805 0.969462H1.24693C1.13193 0.969462 1.04814 0.99803 0.995567 1.05517C0.946281 1.1123 0.921638 1.20335 0.921638 1.32833V1.83181C0.921638 1.95322 0.946281 2.04427 0.995567 2.10497C1.04814 2.16211 1.13193 2.19067 1.24693 2.19067Z"fill=currentColor>`);
+var MarkAsArchived = (props) => {
   return (() => {
     var _el$ = _tmpl$13();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$14 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6.8 1.49902H1.5C0.947715 1.49902 0.5 1.94674 0.5 2.49902V9.49902C0.5 10.0513 0.947715 10.499 1.5 10.499H8.5C9.05228 10.499 9.5 10.0513 9.5 9.49902V4.19902"stroke=currentColor stroke-miterlimit=1 stroke-linecap=round></path><circle cx=9.25 cy=1.74902 r=1.25 fill=currentColor>`);
-var MarkAsUnread = (props) => {
+var _tmpl$14 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.17256 10.999C1.69081 10.999 1.3225 10.8562 1.06763 10.5705C0.815875 10.2848 0.689997 9.86525 0.689997 9.31177V3.64497H1.60378V9.2957C1.60378 9.52066 1.65506 9.6939 1.75763 9.81526C1.8633 9.93311 2.01405 9.99203 2.20986 9.99203H7.24963C7.44236 9.99203 7.58995 9.93311 7.69252 9.81526C7.79823 9.6939 7.85102 9.52066 7.85102 9.2957V3.64497H8.76947V9.31177C8.76947 9.86173 8.64208 10.2795 8.38721 10.5651C8.13235 10.8544 7.76556 10.999 7.28693 10.999H2.17256ZM1.00236 4.15916C0.68534 4.15916 0.438242 4.05204 0.261085 3.83779C0.0870305 3.61997 0 3.33074 0 2.97009V2.18809C0 1.82387 0.0901336 1.53464 0.270408 1.3204C0.450675 1.10615 0.694663 0.999023 1.00236 0.999023H8.46182C8.77568 0.999023 9.0197 1.10615 9.19375 1.3204C9.37094 1.53464 9.45946 1.82387 9.45946 2.18809V2.97009C9.45946 3.33074 9.37094 3.61997 9.19375 3.83779C9.0197 4.05204 8.77568 4.15916 8.46182 4.15916H1.00236ZM1.17953 3.1897H8.28464C8.39342 3.1897 8.4711 3.16113 8.51775 3.10399C8.56433 3.04329 8.58765 2.95224 8.58765 2.83083V2.32735C8.58765 2.20238 8.56433 2.11132 8.51775 2.05419C8.4711 1.99705 7.51461 1.96849 7.40583 1.96849H1.17953C1.07074 1.96849 0.991485 1.99705 0.941753 2.05419C0.895131 2.11132 0.87182 2.20238 0.87182 2.32735V2.83083C0.87182 2.95224 0.895131 3.04329 0.941753 3.10399C0.991485 3.16113 1.07074 3.1897 1.17953 3.1897Z"fill=currentColor></path><path d="M9.67298 0.553711C9.84703 0.556646 10.0146 0.614475 10.1535 0.716797L10.2208 0.771484L10.2814 0.833008C10.3958 0.960612 10.4679 1.11928 10.4913 1.28711L10.4992 1.37109L10.4982 1.45605C10.4872 1.64689 10.4124 1.8301 10.2833 1.97559L10.2843 1.97656L7.55482 5.15039L7.55384 5.14941C7.40234 5.3265 7.18382 5.43557 6.94642 5.44336L6.93861 5.44434H6.92005V5.44336C6.69203 5.44397 6.47619 5.35201 6.31947 5.19141L6.31849 5.18945L5.29505 4.13184C5.08531 3.91498 5.00658 3.60427 5.08118 3.31641L5.11634 3.21094C5.2129 2.97124 5.41476 2.78187 5.67396 2.70996L5.78626 2.68652C6.01138 2.65637 6.23763 2.72008 6.41419 2.85938L6.49818 2.93555L6.8849 3.33496L9.0138 0.859375V0.860352C9.15512 0.688807 9.35911 0.576792 9.58509 0.556641L9.67298 0.553711Z"fill=currentColor stroke=white>`);
+var MarkAsArchivedRead = (props) => {
   return (() => {
     var _el$ = _tmpl$14();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$15 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 13 12"><path fill=currentColor d="M9.787.98A5.972 5.972 0 006.5 0c-.668 0-1.31.11-1.911.31L9.187 4.94c.221.222.6.065.6-.248V.98z"></path><path fill=currentColor d="M2.879 1.216A5.99 5.99 0 00.5 6c0 1.134.315 2.195.862 3.1V7.309c0-1.966 2.379-2.946 3.764-1.552l4.995 5.027A5.99 5.99 0 0012.5 6a5.972 5.972 0 00-.862-3.1v1.791c0 1.966-2.379 2.946-3.764 1.552L2.879 1.216z"></path><path fill=currentColor d="M8.411 11.69L3.813 7.06a.351.351 0 00-.6.248v3.711c.944.62 2.073.98 3.287.98.668 0 1.31-.11 1.911-.31z">`);
-var Novu2 = (props) => {
+var _tmpl$15 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3445_1172)><path d="M9 9.99902H1C0.867383 9.99902 0.7402 9.94635 0.64645 9.85257C0.552667 9.75882 0.5 9.63164 0.5 9.49902V0.499023C0.5 0.366407 0.552669 0.239223 0.64645 0.145473C0.7402 0.0516901 0.867383 -0.000976562 1 -0.000976562H6.25C6.42865 -0.000976562 6.59368 0.0943401 6.68301 0.249023C6.77233 0.403707 6.77233 0.59434 6.68301 0.749023C6.59368 0.903707 6.42865 0.999023 6.25 0.999023H1.5V8.99902H8.5V4.49902C8.5 4.32037 8.59532 4.15534 8.75 4.06602C8.90468 3.97669 9.09532 3.97669 9.25 4.06602C9.40468 4.15534 9.5 4.32037 9.5 4.49902V9.49902C9.5 9.63164 9.44733 9.75882 9.35355 9.85257C9.2598 9.94636 9.13262 9.99902 9 9.99902Z"fill=currentColor></path><path d="M7.5 8.24902H2.5C2.32135 8.24902 2.15632 8.15371 2.06699 7.99902C1.97767 7.84434 1.97767 7.65371 2.06699 7.49902C2.15632 7.34434 2.32135 7.24902 2.5 7.24902H7.5C7.67865 7.24902 7.84368 7.34434 7.93301 7.49902C8.02233 7.65371 8.02233 7.84434 7.93301 7.99902C7.84368 8.15371 7.67865 8.24902 7.5 8.24902Z"fill=currentColor></path><path d="M4.75 6.49901C4.61709 6.49979 4.48936 6.44761 4.39498 6.35403L2.89498 4.85403C2.76816 4.72717 2.71865 4.54235 2.76507 4.36907C2.81149 4.19583 2.94681 4.06051 3.12005 4.01409C3.29332 3.96767 3.47816 4.01718 3.60501 4.14401L4.73001 5.269L8.37501 1.16901C8.46056 1.06279 8.58578 0.996155 8.72169 0.984497C8.8576 0.972843 8.99233 1.01718 9.09474 1.10728C9.19712 1.19738 9.25825 1.32541 9.26398 1.46167C9.26968 1.59796 9.21948 1.73065 9.12502 1.82902L5.12502 6.32902C5.03371 6.43306 4.90337 6.49461 4.76502 6.49901L4.75 6.49901Z"fill=currentColor></path></g><defs><clipPath id=clip0_3445_1172><rect width=10 height=10 fill=white transform="translate(0 -0.000976562)">`);
+var MarkAsRead = (props) => {
   return (() => {
     var _el$ = _tmpl$15();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.12531 1.8999C3.94958 1.8999 3.80713 2.04235 3.80713 2.21808C3.80713 2.39382 3.94958 2.53627 4.12531 2.53627H6.0344C6.21013 2.53627 6.35258 2.39382 6.35258 2.21808C6.35258 2.04235 6.21013 1.8999 6.0344 1.8999H4.12531Z"fill=currentColor></path><path d="M4.12531 1.8999C3.94958 1.8999 3.80713 2.04235 3.80713 2.21808C3.80713 2.39382 3.94958 2.53627 4.12531 2.53627H6.0344C6.21013 2.53627 6.35258 2.39382 6.35258 2.21808C6.35258 2.04235 6.21013 1.8999 6.0344 1.8999H4.12531Z"stroke=currentColor></path><path d="M2.69329 1.46818H7.30693C7.75127 1.46818 8.11147 1.82839 8.11147 2.27273V13.7273C8.11147 14.1716 7.75127 14.5318 7.30693 14.5318H2.69329C2.24896 14.5318 1.88875 14.1716 1.88875 13.7273V2.27273C1.88875 1.82839 2.24896 1.46818 2.69329 1.46818ZM2.69329 0.85C1.90754 0.85 1.27057 1.48698 1.27057 2.27273V2.95695C1.17568 3.00972 1.11147 3.111 1.11147 3.22727V3.54545C1.11147 3.64155 1.15532 3.7274 1.22411 3.78409C1.15532 3.84078 1.11147 3.92663 1.11147 4.02273V4.65909C1.11147 4.75519 1.15532 4.84104 1.22411 4.89773C1.15532 4.95442 1.11147 5.04027 1.11147 5.13636V6.09091C1.11147 6.20718 1.17568 6.30846 1.27057 6.36123V13.7273C1.27057 14.513 1.90754 15.15 2.69329 15.15H7.30693C8.09268 15.15 8.72966 14.513 8.72966 13.7273V6.36123C8.82454 6.30846 8.88875 6.20718 8.88875 6.09091V4.81818C8.88875 4.70191 8.82454 4.60063 8.72966 4.54786V2.27273C8.72966 1.48698 8.09268 0.85 7.30693 0.85H2.69329Z"fill=currentColor stroke=currentColor stroke-width=0.3>`);
-var Push = (props) => {
+var _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M3.15789 2.99902V4.99902L0 2.49902L3.15789 -0.000976562V1.99902H5.78947C6.90618 1.99902 7.97714 2.42045 8.76677 3.1706C9.55639 3.92074 10 4.93816 10 5.99902C10 7.05989 9.55639 8.0773 8.76677 8.82745C7.97714 9.5776 6.90618 9.99902 5.78947 9.99902H1.05263V8.99902H5.78947C6.627 8.99902 7.43022 8.68295 8.02244 8.12034C8.61466 7.55773 8.94737 6.79467 8.94737 5.99902C8.94737 5.20337 8.61466 4.44031 8.02244 3.8777C7.43022 3.31509 6.627 2.99902 5.78947 2.99902H3.15789Z"fill=currentColor>`);
+var MarkAsUnarchived = (props) => {
   return (() => {
     var _el$ = _tmpl$16();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$17 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10 1.75L17.125 5.875V14.125L10 18.25L2.875 14.125V5.875L10 1.75ZM10 3.48325L4.375 6.73975V13.2603L10 16.5167L15.625 13.2603V6.73975L10 3.48325ZM10 13C9.20435 13 8.44129 12.6839 7.87868 12.1213C7.31607 11.5587 7 10.7956 7 10C7 9.20435 7.31607 8.44129 7.87868 7.87868C8.44129 7.31607 9.20435 7 10 7C10.7956 7 11.5587 7.31607 12.1213 7.87868C12.6839 8.44129 13 9.20435 13 10C13 10.7956 12.6839 11.5587 12.1213 12.1213C11.5587 12.6839 10.7956 13 10 13ZM10 11.5C10.3978 11.5 10.7794 11.342 11.0607 11.0607C11.342 10.7794 11.5 10.3978 11.5 10C11.5 9.60218 11.342 9.22064 11.0607 8.93934C10.7794 8.65804 10.3978 8.5 10 8.5C9.60218 8.5 9.22064 8.65804 8.93934 8.93934C8.65804 9.22064 8.5 9.60218 8.5 10C8.5 10.3978 8.65804 10.7794 8.93934 11.0607C9.22064 11.342 9.60218 11.5 10 11.5Z"fill=currentColor>`);
-var Settings = (props) => {
+var _tmpl$17 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6.8 1.49902H1.5C0.947715 1.49902 0.5 1.94674 0.5 2.49902V9.49902C0.5 10.0513 0.947715 10.499 1.5 10.499H8.5C9.05228 10.499 9.5 10.0513 9.5 9.49902V4.19902"stroke=currentColor stroke-miterlimit=1 stroke-linecap=round></path><circle cx=9.25 cy=1.74902 r=1.25 fill=currentColor>`);
+var MarkAsUnread = (props) => {
   return (() => {
     var _el$ = _tmpl$17();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$18 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00051 9.28364C7.76195 9.28364 10 7.20598 10 4.64182C10 2.07766 7.76195 0 5.00051 0C2.23907 0 0.00101462 2.07766 0.00101462 4.64182C0.00101462 5.64829 0.346683 6.57889 0.932561 7.33988C0.895455 7.88663 0.709927 8.37313 0.514634 8.74358C0.407223 8.94889 0.297859 9.11404 0.21779 9.22562C0.176778 9.28141 0.145531 9.32381 0.122096 9.35282C0.110379 9.36621 0.102567 9.37737 0.096708 9.38407L0.0908493 9.39076C0.00101462 9.49342 -0.0243734 9.64517 0.0244497 9.77907C0.0732729 9.91297 0.186543 10 0.313483 10C0.873973 10 1.43837 9.80138 1.90707 9.56929C2.35429 9.34613 2.73511 9.08056 2.96751 8.88641C3.58854 9.14305 4.27597 9.28587 5.00051 9.28587V9.28364ZM1.87582 4.03481C1.87582 3.58179 2.19806 3.21357 2.5945 3.21357H2.96946C3.14132 3.21357 3.28193 3.37425 3.28193 3.57063C3.28193 3.76702 3.14132 3.92769 2.96946 3.92769H2.5945C2.54177 3.92769 2.50076 3.97679 2.50076 4.03481C2.50076 4.07052 2.51638 4.10399 2.54373 4.12408L3.11789 4.56148C3.31904 4.71323 3.43817 4.96987 3.43817 5.2466C3.43817 5.69962 3.11593 6.06784 2.71949 6.06784L2.18829 6.07007C2.01644 6.07007 1.87582 5.9094 1.87582 5.71301C1.87582 5.51663 2.01644 5.35595 2.18829 5.35595H2.71949C2.77222 5.35595 2.81323 5.30685 2.81323 5.24883C2.81323 5.21312 2.79761 5.17965 2.77026 5.15956L2.1961 4.72216C1.99691 4.56818 1.87582 4.31154 1.87582 4.03481ZM7.28153 3.21357H7.65649C7.82834 3.21357 7.96896 3.37425 7.96896 3.57063C7.96896 3.76702 7.82834 3.92769 7.65649 3.92769H7.28153C7.2288 3.92769 7.18779 3.97679 7.18779 4.03481C7.18779 4.07052 7.20341 4.10399 7.23075 4.12408L7.80491 4.56148C8.00411 4.71323 8.12519 4.96987 8.12519 5.2466C8.12519 5.69962 7.80296 6.06784 7.40651 6.06784L6.87532 6.07007C6.70346 6.07007 6.56285 5.9094 6.56285 5.71301C6.56285 5.51663 6.70346 5.35595 6.87532 5.35595H7.40651C7.45924 5.35595 7.50025 5.30685 7.50025 5.24883C7.50025 5.21312 7.48463 5.17965 7.45729 5.15956L6.88313 4.72216C6.68393 4.57041 6.56285 4.31377 6.56285 4.03705C6.56285 3.58402 6.88508 3.2158 7.28153 3.2158V3.21357ZM4.31308 3.35639L5.00051 4.40304L5.68794 3.35639C5.76801 3.23365 5.90862 3.18233 6.03751 3.23142C6.1664 3.28052 6.25038 3.41665 6.25038 3.57063V5.71301C6.25038 5.9094 6.10977 6.07007 5.93791 6.07007C5.76605 6.07007 5.62544 5.9094 5.62544 5.71301V4.64182L5.25048 5.21312C5.19189 5.30239 5.09815 5.35595 5.00051 5.35595C4.90286 5.35595 4.80912 5.30239 4.75053 5.21312L4.37557 4.64182V5.71301C4.37557 5.9094 4.23496 6.07007 4.0631 6.07007C3.89124 6.07007 3.75063 5.9094 3.75063 5.71301V3.57063C3.75063 3.41665 3.83656 3.28052 3.9635 3.23142C4.09044 3.18233 4.23105 3.23365 4.31308 3.35639Z"fill=currentColor>`);
-var Sms = (props) => {
+var _tmpl$18 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 13 12"><path fill=currentColor d="M9.787.98A5.972 5.972 0 006.5 0c-.668 0-1.31.11-1.911.31L9.187 4.94c.221.222.6.065.6-.248V.98z"></path><path fill=currentColor d="M2.879 1.216A5.99 5.99 0 00.5 6c0 1.134.315 2.195.862 3.1V7.309c0-1.966 2.379-2.946 3.764-1.552l4.995 5.027A5.99 5.99 0 0012.5 6a5.972 5.972 0 00-.862-3.1v1.791c0 1.966-2.379 2.946-3.764 1.552L2.879 1.216z"></path><path fill=currentColor d="M8.411 11.69L3.813 7.06a.351.351 0 00-.6.248v3.711c.944.62 2.073.98 3.287.98.668 0 1.31-.11 1.911-.31z">`);
+var Novu2 = (props) => {
   return (() => {
     var _el$ = _tmpl$18();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$19 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 8"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1.0119 0.347055C1.06274 0.143703 1.26565 -0.000976562 1.5 -0.000976562H8.5C8.73435 -0.000976562 8.93725 0.143703 8.9881 0.347055L9.9881 4.34707C9.996 4.37871 10 4.41102 10 4.44347V7.55458C10 7.80005 9.77615 7.99902 9.5 7.99902H0.5C0.22386 7.99902 0 7.80005 0 7.55458V4.44347C0 4.41102 0.00399495 4.37871 0.011905 4.34707L1.0119 0.347055ZM1.90108 0.887912L1.12331 3.99902H3.5C3.5 4.73542 4.17155 5.33236 5 5.33236C5.82845 5.33236 6.5 4.73542 6.5 3.99902H8.8767L8.0989 0.887912H1.90108ZM7.292 4.88791C6.9062 5.67276 6.02515 6.22125 5 6.22125C3.97484 6.22125 3.0938 5.67276 2.70802 4.88791H1V7.11013H9V4.88791H7.292Z"fill=currentColor>`);
-var UnreadRead = (props) => {
+var _tmpl$19 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.12531 1.8999C3.94958 1.8999 3.80713 2.04235 3.80713 2.21808C3.80713 2.39382 3.94958 2.53627 4.12531 2.53627H6.0344C6.21013 2.53627 6.35258 2.39382 6.35258 2.21808C6.35258 2.04235 6.21013 1.8999 6.0344 1.8999H4.12531Z"fill=currentColor></path><path d="M4.12531 1.8999C3.94958 1.8999 3.80713 2.04235 3.80713 2.21808C3.80713 2.39382 3.94958 2.53627 4.12531 2.53627H6.0344C6.21013 2.53627 6.35258 2.39382 6.35258 2.21808C6.35258 2.04235 6.21013 1.8999 6.0344 1.8999H4.12531Z"stroke=currentColor></path><path d="M2.69329 1.46818H7.30693C7.75127 1.46818 8.11147 1.82839 8.11147 2.27273V13.7273C8.11147 14.1716 7.75127 14.5318 7.30693 14.5318H2.69329C2.24896 14.5318 1.88875 14.1716 1.88875 13.7273V2.27273C1.88875 1.82839 2.24896 1.46818 2.69329 1.46818ZM2.69329 0.85C1.90754 0.85 1.27057 1.48698 1.27057 2.27273V2.95695C1.17568 3.00972 1.11147 3.111 1.11147 3.22727V3.54545C1.11147 3.64155 1.15532 3.7274 1.22411 3.78409C1.15532 3.84078 1.11147 3.92663 1.11147 4.02273V4.65909C1.11147 4.75519 1.15532 4.84104 1.22411 4.89773C1.15532 4.95442 1.11147 5.04027 1.11147 5.13636V6.09091C1.11147 6.20718 1.17568 6.30846 1.27057 6.36123V13.7273C1.27057 14.513 1.90754 15.15 2.69329 15.15H7.30693C8.09268 15.15 8.72966 14.513 8.72966 13.7273V6.36123C8.82454 6.30846 8.88875 6.20718 8.88875 6.09091V4.81818C8.88875 4.70191 8.82454 4.60063 8.72966 4.54786V2.27273C8.72966 1.48698 8.09268 0.85 7.30693 0.85H2.69329Z"fill=currentColor stroke=currentColor stroke-width=0.3>`);
+var Push = (props) => {
   return (() => {
     var _el$ = _tmpl$19();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
+var _tmpl$20 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10 1.75L17.125 5.875V14.125L10 18.25L2.875 14.125V5.875L10 1.75ZM10 3.48325L4.375 6.73975V13.2603L10 16.5167L15.625 13.2603V6.73975L10 3.48325ZM10 13C9.20435 13 8.44129 12.6839 7.87868 12.1213C7.31607 11.5587 7 10.7956 7 10C7 9.20435 7.31607 8.44129 7.87868 7.87868C8.44129 7.31607 9.20435 7 10 7C10.7956 7 11.5587 7.31607 12.1213 7.87868C12.6839 8.44129 13 9.20435 13 10C13 10.7956 12.6839 11.5587 12.1213 12.1213C11.5587 12.6839 10.7956 13 10 13ZM10 11.5C10.3978 11.5 10.7794 11.342 11.0607 11.0607C11.342 10.7794 11.5 10.3978 11.5 10C11.5 9.60218 11.342 9.22064 11.0607 8.93934C10.7794 8.65804 10.3978 8.5 10 8.5C9.60218 8.5 9.22064 8.65804 8.93934 8.93934C8.65804 9.22064 8.5 9.60218 8.5 10C8.5 10.3978 8.65804 10.7794 8.93934 11.0607C9.22064 11.342 9.60218 11.5 10 11.5Z"fill=currentColor>`);
+var Cogs = (props) => {
+  return (() => {
+    var _el$ = _tmpl$20();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var _tmpl$21 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00051 9.28364C7.76195 9.28364 10 7.20598 10 4.64182C10 2.07766 7.76195 0 5.00051 0C2.23907 0 0.00101462 2.07766 0.00101462 4.64182C0.00101462 5.64829 0.346683 6.57889 0.932561 7.33988C0.895455 7.88663 0.709927 8.37313 0.514634 8.74358C0.407223 8.94889 0.297859 9.11404 0.21779 9.22562C0.176778 9.28141 0.145531 9.32381 0.122096 9.35282C0.110379 9.36621 0.102567 9.37737 0.096708 9.38407L0.0908493 9.39076C0.00101462 9.49342 -0.0243734 9.64517 0.0244497 9.77907C0.0732729 9.91297 0.186543 10 0.313483 10C0.873973 10 1.43837 9.80138 1.90707 9.56929C2.35429 9.34613 2.73511 9.08056 2.96751 8.88641C3.58854 9.14305 4.27597 9.28587 5.00051 9.28587V9.28364ZM1.87582 4.03481C1.87582 3.58179 2.19806 3.21357 2.5945 3.21357H2.96946C3.14132 3.21357 3.28193 3.37425 3.28193 3.57063C3.28193 3.76702 3.14132 3.92769 2.96946 3.92769H2.5945C2.54177 3.92769 2.50076 3.97679 2.50076 4.03481C2.50076 4.07052 2.51638 4.10399 2.54373 4.12408L3.11789 4.56148C3.31904 4.71323 3.43817 4.96987 3.43817 5.2466C3.43817 5.69962 3.11593 6.06784 2.71949 6.06784L2.18829 6.07007C2.01644 6.07007 1.87582 5.9094 1.87582 5.71301C1.87582 5.51663 2.01644 5.35595 2.18829 5.35595H2.71949C2.77222 5.35595 2.81323 5.30685 2.81323 5.24883C2.81323 5.21312 2.79761 5.17965 2.77026 5.15956L2.1961 4.72216C1.99691 4.56818 1.87582 4.31154 1.87582 4.03481ZM7.28153 3.21357H7.65649C7.82834 3.21357 7.96896 3.37425 7.96896 3.57063C7.96896 3.76702 7.82834 3.92769 7.65649 3.92769H7.28153C7.2288 3.92769 7.18779 3.97679 7.18779 4.03481C7.18779 4.07052 7.20341 4.10399 7.23075 4.12408L7.80491 4.56148C8.00411 4.71323 8.12519 4.96987 8.12519 5.2466C8.12519 5.69962 7.80296 6.06784 7.40651 6.06784L6.87532 6.07007C6.70346 6.07007 6.56285 5.9094 6.56285 5.71301C6.56285 5.51663 6.70346 5.35595 6.87532 5.35595H7.40651C7.45924 5.35595 7.50025 5.30685 7.50025 5.24883C7.50025 5.21312 7.48463 5.17965 7.45729 5.15956L6.88313 4.72216C6.68393 4.57041 6.56285 4.31377 6.56285 4.03705C6.56285 3.58402 6.88508 3.2158 7.28153 3.2158V3.21357ZM4.31308 3.35639L5.00051 4.40304L5.68794 3.35639C5.76801 3.23365 5.90862 3.18233 6.03751 3.23142C6.1664 3.28052 6.25038 3.41665 6.25038 3.57063V5.71301C6.25038 5.9094 6.10977 6.07007 5.93791 6.07007C5.76605 6.07007 5.62544 5.9094 5.62544 5.71301V4.64182L5.25048 5.21312C5.19189 5.30239 5.09815 5.35595 5.00051 5.35595C4.90286 5.35595 4.80912 5.30239 4.75053 5.21312L4.37557 4.64182V5.71301C4.37557 5.9094 4.23496 6.07007 4.0631 6.07007C3.89124 6.07007 3.75063 5.9094 3.75063 5.71301V3.57063C3.75063 3.41665 3.83656 3.28052 3.9635 3.23142C4.09044 3.18233 4.23105 3.23365 4.31308 3.35639Z"fill=currentColor>`);
+var Sms = (props) => {
+  return (() => {
+    var _el$ = _tmpl$21();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var _tmpl$22 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 8"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1.0119 0.347055C1.06274 0.143703 1.26565 -0.000976562 1.5 -0.000976562H8.5C8.73435 -0.000976562 8.93725 0.143703 8.9881 0.347055L9.9881 4.34707C9.996 4.37871 10 4.41102 10 4.44347V7.55458C10 7.80005 9.77615 7.99902 9.5 7.99902H0.5C0.22386 7.99902 0 7.80005 0 7.55458V4.44347C0 4.41102 0.00399495 4.37871 0.011905 4.34707L1.0119 0.347055ZM1.90108 0.887912L1.12331 3.99902H3.5C3.5 4.73542 4.17155 5.33236 5 5.33236C5.82845 5.33236 6.5 4.73542 6.5 3.99902H8.8767L8.0989 0.887912H1.90108ZM7.292 4.88791C6.9062 5.67276 6.02515 6.22125 5 6.22125C3.97484 6.22125 3.0938 5.67276 2.70802 4.88791H1V7.11013H9V4.88791H7.292Z"fill=currentColor>`);
+var Unread = (props) => {
+  return (() => {
+    var _el$ = _tmpl$22();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var _tmpl$23 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99992 2.91634V4.99967M4.79992 5.39616L3.27392 6.46553M1.66659 1.66634L8.33325 8.33301M9.16658 4.99967C9.16658 7.30086 7.30111 9.16634 4.99992 9.16634C2.69873 9.16634 0.833252 7.30086 0.833252 4.99967C0.833252 2.69849 2.69873 0.833008 4.99992 0.833008C7.30111 0.833008 9.16658 2.69849 9.16658 4.99967Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
+var Unsnooze = (props) => {
+  return (() => {
+    var _el$ = _tmpl$23();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var IconRendererWrapper = (props) => {
+  const appearance = useAppearance();
+  const customRenderer = () => {
+    var _a;
+    return (_a = appearance.icons()) == null ? void 0 : _a[props.iconKey];
+  };
+  return createComponent(Show, {
+    get when() {
+      return customRenderer();
+    },
+    get fallback() {
+      return props.fallback;
+    },
+    get children() {
+      return createComponent(ExternalElementRenderer, {
+        render: (el) => customRenderer()(el, {
+          class: props.class
+        })
+      });
+    }
+  });
+};
 
 // src/ui/components/elements/Bell/DefaultBellContainer.tsx
-var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<span>`);
 var BellContainer = (props) => {
   const style = useStyle();
+  const bellIconStyle = style("bellIcon", "nt-size-4");
   return (() => {
-    var _el$ = _tmpl$20();
-    insert(_el$, createComponent(Bell, {
-      get ["class"]() {
-        return style("bellIcon", "nt-size-4");
+    var _el$ = _tmpl$24();
+    insert(_el$, createComponent(IconRendererWrapper, {
+      iconKey: "bell",
+      "class": bellIconStyle,
+      get fallback() {
+        return createComponent(Bell, {
+          "class": bellIconStyle
+        });
       }
     }), null);
     insert(_el$, createComponent(Show, {
@@ -1489,7 +1588,7 @@ var BellContainer = (props) => {
         return props.unreadCount > 0;
       },
       get children() {
-        var _el$2 = _tmpl$20();
+        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;
       }
@@ -1529,8 +1628,8 @@ function isBrowser() {
 }
 
 // src/ui/components/elements/Footer.tsx
-var _tmpl$21 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">Development mode`);
-var _tmpl$22 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
+var _tmpl$25 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">Development mode`);
+var _tmpl$26 = /* @__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(`<div>`);
 var stripes = `before:nt-content-[""] before:nt-absolute before:nt-inset-0 before:-nt-right-[calc(0+var(--stripes-size))] before:[mask-image:linear-gradient(transparent_0%,black)] before:nt-bg-dev-stripes-gradient before:nt-bg-[length:var(--stripes-size)_var(--stripes-size)] before:nt-animate-stripes before:hover:[animation-play-state:running]`;
@@ -1554,7 +1653,7 @@ var Footer = () => {
           return isDevelopmentMode();
         },
         get children() {
-          return _tmpl$21();
+          return _tmpl$25();
         }
       }), null);
       insert(_el$, createComponent(Show, {
@@ -1562,7 +1661,7 @@ var Footer = () => {
           return memo(() => !!isDevelopmentMode())() && !hideBranding();
         },
         get children() {
-          return _tmpl$22();
+          return _tmpl$26();
         }
       }), null);
       insert(_el$, createComponent(Show, {
@@ -1594,7 +1693,7 @@ function getCurrentDomain() {
   }
   return "";
 }
-var _tmpl$23 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<button>`);
 var buttonVariants = cva(cn('nt-inline-flex nt-gap-4 nt-items-center nt-justify-center nt-whitespace-nowrap nt-text-sm nt-font-medium nt-transition-colors disabled:nt-pointer-events-none disabled:nt-opacity-50 after:nt-absolute after:nt-content-[""] before:nt-content-[""] before:nt-absolute [&_svg]:nt-pointer-events-none [&_svg]:nt-shrink-0', `focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
   variants: {
     variant: {
@@ -1621,7 +1720,7 @@ var Button = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$23();
+    var _el$ = _tmpl$27();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -1639,7 +1738,7 @@ var Button = (props) => {
     return _el$;
   })();
 };
-var _tmpl$24 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<button>`);
 var PopoverClose = (props) => {
   const {
     onClose
@@ -1661,7 +1760,7 @@ var PopoverClose = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$24();
+    var _el$ = _tmpl$28();
     _el$.$$click = handleClick;
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -1672,12 +1771,12 @@ var PopoverClose = (props) => {
   })();
 };
 delegateEvents(["click"]);
-var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div>`);
 var Portal = (props) => {
   const appearance = useAppearance();
   let currentElement;
   return [(() => {
-    var _el$ = _tmpl$25();
+    var _el$ = _tmpl$29();
     use((el) => {
       currentElement = el;
     }, _el$);
@@ -1760,7 +1859,7 @@ function usePopover() {
 }
 
 // src/ui/components/primitives/Popover/PopoverContent.tsx
-var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<div>`);
 var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border nt-z-10");
 var PopoverContentBody = (props) => {
   const {
@@ -1783,7 +1882,7 @@ var PopoverContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$26();
+    var _el$ = _tmpl$30();
     use(setFloating, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -1809,12 +1908,16 @@ var PopoverContent = (props) => {
   const {
     active
   } = useFocusManager();
+  const {
+    container
+  } = useAppearance();
   const handleClickOutside = (e) => {
     var _a, _b;
     if ((_a = reference()) == null ? void 0 : _a.contains(e.target)) {
       return;
     }
-    if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target))) {
+    const containerElement = container();
+    if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target)) || containerElement && e.target.shadowRoot === containerElement) {
       return;
     }
     onClose();
@@ -1823,16 +1926,20 @@ var PopoverContent = (props) => {
     if (active() !== floating()) {
       return;
     }
-    if (e.key === "Escape") {
+    if (e instanceof KeyboardEvent && e.key === "Escape") {
       onClose();
     }
   };
   onMount(() => {
+    var _a;
     document.body.addEventListener("click", handleClickOutside);
+    (_a = container()) == null ? void 0 : _a.addEventListener("click", handleClickOutside);
     document.body.addEventListener("keydown", handleEscapeKey);
   });
   onCleanup(() => {
+    var _a;
     document.body.removeEventListener("click", handleClickOutside);
+    (_a = container()) == null ? void 0 : _a.removeEventListener("click", handleClickOutside);
     document.body.removeEventListener("keydown", handleEscapeKey);
   });
   return createComponent(Show, {
@@ -1860,7 +1967,7 @@ function mergeRefs(...refs) {
 }
 
 // src/ui/components/primitives/Popover/PopoverTrigger.tsx
-var _tmpl$27 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$31 = /* @__PURE__ */ template(`<button>`);
 var PopoverTrigger = (props) => {
   const {
     setReference,
@@ -1888,7 +1995,7 @@ var PopoverTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$27();
+    var _el$ = _tmpl$31();
     _el$.$$click = handleClick;
     var _ref$2 = ref();
     typeof _ref$2 === "function" && use(_ref$2, _el$);
@@ -2027,26 +2134,33 @@ var useKeyboardNavigation = ({
   setActiveTab,
   tabsContainer
 }) => {
+  const { container } = useAppearance();
   const [keyboardNavigation, setKeyboardNavigation] = createSignal(false);
+  const getRoot = () => {
+    const containerElement = container();
+    return containerElement instanceof ShadowRoot ? containerElement : document;
+  };
   createEffect(() => {
+    const root = getRoot();
     const handleTabKey = (event) => {
       var _a;
-      if (event.key !== "Tab") {
+      if (!(event instanceof KeyboardEvent) || event.key !== "Tab") {
         return;
       }
       const tabs = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]');
-      if (!tabs || !document.activeElement) {
+      if (!tabs || !root.activeElement) {
         return;
       }
-      setKeyboardNavigation(Array.from(tabs).includes(document.activeElement));
+      setKeyboardNavigation(Array.from(tabs).includes(root.activeElement));
     };
-    document.addEventListener("keyup", handleTabKey);
-    return onCleanup(() => document.removeEventListener("keyup", handleTabKey));
+    root.addEventListener("keyup", handleTabKey);
+    return onCleanup(() => root.removeEventListener("keyup", handleTabKey));
   });
   createEffect(() => {
+    const root = getRoot();
     const handleArrowKeys = (event) => {
       var _a, _b;
-      if (!keyboardNavigation() || event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      if (!keyboardNavigation() || !(event instanceof KeyboardEvent) || event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
         return;
       }
       const tabElements = Array.from((_b = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]')) != null ? _b : []);
@@ -2065,13 +2179,13 @@ var useKeyboardNavigation = ({
       tabElements[activeIndex].focus();
       setActiveTab(newTab);
     };
-    document.addEventListener("keydown", handleArrowKeys);
-    return onCleanup(() => document.removeEventListener("keydown", handleArrowKeys));
+    root.addEventListener("keydown", handleArrowKeys);
+    return onCleanup(() => root.removeEventListener("keydown", handleArrowKeys));
   });
 };
 
 // src/ui/components/primitives/Tabs/TabsRoot.tsx
-var _tmpl$28 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
 var TabsContext = createContext(void 0);
 var useTabsContext = () => {
   const context = useContext(TabsContext);
@@ -2110,7 +2224,7 @@ var TabsRoot = (props) => {
       setVisibleTabs
     },
     get children() {
-      var _el$ = _tmpl$28();
+      var _el$ = _tmpl$33();
       use(setTabsContainer, _el$);
       spread(_el$, mergeProps({
         get ["class"]() {
@@ -2124,7 +2238,7 @@ var TabsRoot = (props) => {
 };
 
 // src/ui/components/primitives/Tabs/TabsContent.tsx
-var _tmpl$29 = /* @__PURE__ */ template(`<div role=tabpanel>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div role=tabpanel>`);
 var TabsContent = (props) => {
   const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
   const style = useStyle();
@@ -2136,7 +2250,7 @@ var TabsContent = (props) => {
       return activeTab() === local.value;
     },
     get children() {
-      var _el$ = _tmpl$29();
+      var _el$ = _tmpl$34();
       spread(_el$, mergeProps({
         get ["class"]() {
           return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
@@ -2156,14 +2270,14 @@ var TabsContent = (props) => {
     }
   });
 };
-var _tmpl$30 = /* @__PURE__ */ template(`<div role=tablist>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div role=tablist>`);
 var _tmpl$210 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
 var tabsListVariants = () => "nt-flex nt-gap-6";
 var TabsList = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey", "ref", "children"]);
   const style = useStyle();
   return [(() => {
-    var _el$ = _tmpl$30();
+    var _el$ = _tmpl$35();
     var _ref$ = local.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
     spread(_el$, mergeProps({
@@ -2244,28 +2358,23 @@ var inboxFilterLocalizationKeys = {
   archived: "inbox.filters.labels.archived",
   snoozed: "inbox.filters.labels.snoozed"
 };
-var _tmpl$31 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 2.99902V5.99902H8.25M11 5.99902C11 8.76045 8.76142 10.999 6 10.999C3.23858 10.999 1 8.76045 1 5.99902C1 3.2376 3.23858 0.999023 6 0.999023C8.76142 0.999023 11 3.2376 11 5.99902Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
-var Snooze = (props) => {
-  return (() => {
-    var _el$ = _tmpl$31();
-    spread(_el$, props, true, true);
-    return _el$;
-  })();
-};
-
-// src/ui/components/elements/InboxStatus/InboxStatusOptions.tsx
-var _tmpl$33 = /* @__PURE__ */ template(`<span><span></span><span>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$211 = /* @__PURE__ */ template(`<span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
-  icon: UnreadRead
+  iconKey: "unread",
+  icon: Unread
 }, {
   status: "unread" /* UNREAD */,
+  iconKey: "unread",
   icon: MarkAsUnread
 }, {
   status: "snoozed" /* SNOOZED */,
-  icon: Snooze
+  iconKey: "clock",
+  icon: Clock
 }, {
   status: "archived" /* ARCHIVED */,
+  iconKey: "markAsArchived",
   icon: MarkAsArchived
 }];
 var StatusOptions = (props) => {
@@ -2291,6 +2400,9 @@ var StatusOptions = (props) => {
       },
       get icon() {
         return c.icon;
+      },
+      get iconKey() {
+        return c.iconKey;
       }
     })
   });
@@ -2300,6 +2412,12 @@ var StatusItem = (props) => {
   const {
     t
   } = useLocalization();
+  const itemIconClass = style("inboxStatus__dropdownItemLeft__icon", "nt-size-3", {
+    iconKey: props.iconKey
+  });
+  const checkIconClass = style("inboxStatus__dropdownItemCheck__icon", "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"));
@@ -2309,21 +2427,32 @@ var StatusItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$33(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-        insert(_el$2, () => props.icon());
-        insert(_el$3, () => t(props.localizationKey));
+        var _el$ = _tmpl$36(), _el$2 = _el$.firstChild;
+        insert(_el$, createComponent(IconRendererWrapper, {
+          get iconKey() {
+            return props.iconKey;
+          },
+          "class": itemIconClass,
+          get fallback() {
+            return (() => {
+              var _el$3 = _tmpl$211();
+              className(_el$3, itemIconClass);
+              insert(_el$3, () => props.icon());
+              return _el$3;
+            })();
+          }
+        }), _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 = style("inboxStatus__dropdownItemLeft__icon", "nt-size-3"), _v$3 = props.localizationKey, _v$4 = style("inboxStatus__dropdownItemLabel", "nt-leading-none");
+          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");
           _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-          _v$3 !== _p$.a && setAttribute(_el$3, "data-localization", _p$.a = _v$3);
-          _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+          _v$2 !== _p$.t && setAttribute(_el$2, "data-localization", _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
-          a: void 0,
-          o: void 0
+          a: void 0
         });
         return _el$;
       })(), createComponent(Show, {
@@ -2331,9 +2460,13 @@ var StatusItem = (props) => {
           return props.isSelected;
         },
         get children() {
-          return createComponent(Check, {
-            get ["class"]() {
-              return style("inboxStatus__dropdownItemCheck__icon", "nt-size-3");
+          return createComponent(IconRendererWrapper, {
+            iconKey: "check",
+            "class": checkIconClass,
+            get fallback() {
+              return createComponent(Check, {
+                "class": checkIconClass
+              });
             }
           });
         }
@@ -2343,7 +2476,7 @@ var StatusItem = (props) => {
 };
 
 // src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
-var _tmpl$34 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<span>`);
 var StatusDropdown = () => {
   const style = useStyle();
   const {
@@ -2353,6 +2486,9 @@ var StatusDropdown = () => {
   const {
     t
   } = useLocalization();
+  const arrowDropDownIconClass = style("inboxStatus__dropdownItemRight__icon", "nt-text-foreground-alpha-600 nt-size-4", {
+    iconKey: "arrowDropDown"
+  });
   return createComponent(Dropdown.Root, {
     get children() {
       return [createComponent(Dropdown.Trigger, {
@@ -2368,7 +2504,7 @@ var StatusDropdown = () => {
         }, triggerProps, {
           get children() {
             return [(() => {
-              var _el$ = _tmpl$34();
+              var _el$ = _tmpl$37();
               insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               effect((_p$) => {
                 var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
@@ -2380,9 +2516,13 @@ var StatusDropdown = () => {
                 t: void 0
               });
               return _el$;
-            })(), createComponent(ArrowDropDown, {
-              get ["class"]() {
-                return style("inboxStatus__dropdownItemRight__icon", "nt-text-foreground-alpha-600 nt-size-4");
+            })(), createComponent(IconRendererWrapper, {
+              iconKey: "arrowDropDown",
+              "class": arrowDropDownIconClass,
+              get fallback() {
+                return createComponent(ArrowDropDown, {
+                  "class": arrowDropDownIconClass
+                });
               }
             })];
           }
@@ -2513,7 +2653,12 @@ var useReadAll = (props) => {
 };
 
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
-var _tmpl$35 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<span>`);
+var iconKeyToComponentMap = {
+  markAsRead: MarkAsRead,
+  markAsArchived: MarkAsArchived,
+  markAsArchivedRead: MarkAsArchivedRead
+};
 var MoreActionsOptions = () => {
   const {
     filter
@@ -2532,19 +2677,19 @@ var MoreActionsOptions = () => {
     onClick: () => readAll({
       tags: filter().tags
     }),
-    icon: MarkAsRead
+    iconKey: "markAsRead"
   }), createComponent(ActionsItem, {
     localizationKey: "notifications.actions.archiveAll",
     onClick: () => archiveAll({
       tags: filter().tags
     }),
-    icon: MarkAsArchived
+    iconKey: "markAsArchived"
   }), createComponent(ActionsItem, {
     localizationKey: "notifications.actions.archiveRead",
     onClick: () => archiveAllRead({
       tags: filter().tags
     }),
-    icon: MarkAsArchivedRead
+    iconKey: "markAsArchivedRead"
   })];
 };
 var ActionsItem = (props) => {
@@ -2552,6 +2697,10 @@ var ActionsItem = (props) => {
   const {
     t
   } = useLocalization();
+  const DefaultIconComponent = iconKeyToComponentMap[props.iconKey];
+  const moreActionsIconClass = style("moreActions__dropdownItemLeft__icon", "nt-size-3", {
+    iconKey: props.iconKey
+  });
   return createComponent(Dropdown.Item, {
     get ["class"]() {
       return style("moreActions__dropdownItem", cn(dropdownItemVariants(), "nt-flex nt-gap-2"));
@@ -2560,24 +2709,29 @@ var ActionsItem = (props) => {
       return props.onClick;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$35();
-        insert(_el$, () => props.icon());
-        effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-3")));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$35();
-        insert(_el$2, () => t(props.localizationKey));
+      return [createComponent(IconRendererWrapper, {
+        get iconKey() {
+          return props.iconKey;
+        },
+        "class": moreActionsIconClass,
+        get fallback() {
+          return DefaultIconComponent && DefaultIconComponent({
+            class: moreActionsIconClass
+          });
+        }
+      }), (() => {
+        var _el$ = _tmpl$38();
+        insert(_el$, () => t(props.localizationKey));
         effect((_p$) => {
           var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
-          _v$ !== _p$.e && setAttribute(_el$2, "data-localization", _p$.e = _v$);
-          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+          _v$ !== _p$.e && setAttribute(_el$, "data-localization", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$2;
+        return _el$;
       })()];
     }
   });
@@ -2589,6 +2743,9 @@ var MoreActionsDropdown = () => {
   const {
     status
   } = useInboxContext();
+  const dotsIconClass = style("moreActions__dots", "nt-size-5", {
+    iconKey: "dots"
+  });
   return createComponent(Show, {
     get when() {
       return memo(() => status() !== "archived" /* ARCHIVED */)() && status() !== "snoozed" /* SNOOZED */;
@@ -2605,9 +2762,13 @@ var MoreActionsDropdown = () => {
               size: "iconSm"
             }, triggerProps, {
               get children() {
-                return createComponent(Dots, {
-                  get ["class"]() {
-                    return style("moreActions__dots", "nt-size-5");
+                return createComponent(IconRendererWrapper, {
+                  iconKey: "dots",
+                  "class": dotsIconClass,
+                  get fallback() {
+                    return createComponent(Dots, {
+                      "class": dotsIconClass
+                    });
                   }
                 });
               }
@@ -2625,11 +2786,14 @@ var MoreActionsDropdown = () => {
 };
 
 // src/ui/components/elements/Header/ActionsContainer.tsx
-var _tmpl$36 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$39 = /* @__PURE__ */ template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
+  const cogsIconClass = style("icon", "nt-size-5", {
+    iconKey: "cogs"
+  });
   return (() => {
-    var _el$ = _tmpl$36();
+    var _el$ = _tmpl$39();
     insert(_el$, createComponent(MoreActionsDropdown, {}), null);
     insert(_el$, createComponent(Show, {
       get when() {
@@ -2643,9 +2807,13 @@ var ActionsContainer = (props) => {
           return showPreferences();
         },
         get children() {
-          return createComponent(Settings, {
-            get ["class"]() {
-              return style("preferences__icon", "nt-size-5");
+          return createComponent(IconRendererWrapper, {
+            iconKey: "cogs",
+            "class": cogsIconClass,
+            get fallback() {
+              return createComponent(Cogs, {
+                "class": cogsIconClass
+              });
             }
           });
         }
@@ -2657,11 +2825,11 @@ var ActionsContainer = (props) => {
 };
 
 // src/ui/components/elements/Header/Header.tsx
-var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
 var Header = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$37();
+    var _el$ = _tmpl$40();
     insert(_el$, createComponent(StatusDropdown, {}), null);
     insert(_el$, createComponent(ActionsContainer, {
       get showPreferences() {
@@ -2672,7 +2840,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$41 = /* @__PURE__ */ template(`<div>`);
 var Root = (props) => {
   const [_, rest] = splitProps(props, ["class"]);
   const {
@@ -2688,30 +2856,60 @@ var Root = (props) => {
     },
     children: new Comment(" Powered by Novu - https://novu.co ")
   }), (() => {
-    var _el$ = _tmpl$38();
+    var _el$ = _tmpl$41();
     spread(_el$, mergeProps({
       get id() {
         return `novu-root-${id()}`;
       },
       get ["class"]() {
-        return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
+        return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full [interpolate-size:allow-keywords]");
       }
     }, rest), false, false);
     return _el$;
   })()];
 };
-var _tmpl$39 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 14 14"><path fill=currentColor d="M2.8 8.575V5.162a2.362 2.362 0 1 1 4.725 0v3.675a1.313 1.313 0 1 0 2.625 0V5.335a1.575 1.575 0 1 1 1.05 0v3.502a2.362 2.362 0 1 1-4.725 0V5.162a1.312 1.312 0 1 0-2.625 0v3.413h1.575l-2.1 2.625-2.1-2.625H2.8Z"></path><path fill=url(#a) d="M2.8 8.575V5.162a2.362 2.362 0 1 1 4.725 0v3.675a1.313 1.313 0 1 0 2.625 0V5.335a1.575 1.575 0 1 1 1.05 0v3.502a2.362 2.362 0 1 1-4.725 0V5.162a1.312 1.312 0 1 0-2.625 0v3.413h1.575l-2.1 2.625-2.1-2.625H2.8Z"></path><defs><linearGradient id=a x1=1.225 x2=12.251 y1=6.722 y2=6.779 gradientUnits=userSpaceOnUse><stop stop-color=currentColor></stop><stop offset=1 stop-color=currentColor>`);
+var RouteFill = (props) => {
+  return (() => {
+    var _el$ = _tmpl$43();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var _tmpl$44 = /* @__PURE__ */ template(`<div><div>`);
+var isInterpolateSizeSupported = () => {
+  return CSS.supports("interpolate-size", "allow-keywords");
+};
 var Collapsible = (props) => {
+  const supportsInterpolateSize = isInterpolateSizeSupported();
   const style = useStyle();
   let contentRef;
   const [enableTransition, setEnableTransition] = createSignal(false);
+  const [scrollHeight, setScrollHeight] = createSignal(0);
+  const updateScrollHeight = () => {
+    setScrollHeight((contentRef == null ? void 0 : contentRef.scrollHeight) || 0);
+  };
   createEffect(() => {
     requestAnimationFrame(() => setEnableTransition(true));
+    const resizeObserver = new ResizeObserver(() => {
+      updateScrollHeight();
+    });
+    if (contentRef && !supportsInterpolateSize) {
+      resizeObserver.observe(contentRef);
+    }
+    updateScrollHeight();
+    onCleanup(() => {
+      resizeObserver.disconnect();
+    });
   });
+  const height = () => {
+    if (supportsInterpolateSize) {
+      return props.open ? "max-content" : "0px";
+    }
+    return props.open ? `${scrollHeight()}px` : "0px";
+  };
   return (() => {
-    var _el$ = _tmpl$39();
-    var _ref$ = contentRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : contentRef = _el$;
+    var _el$ = _tmpl$44(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["class"]() {
         return style("collapsible", props.class);
@@ -2721,66 +2919,96 @@ var Collapsible = (props) => {
           overflow: "hidden",
           opacity: props.open ? 1 : 0,
           transition: enableTransition() ? "height 250ms ease-in-out, opacity 250ms ease-in-out" : "none",
-          height: props.open ? `${contentRef == null ? void 0 : contentRef.scrollHeight}px` : "0px"
+          height: height()
         };
       }
-    }, props), false, false);
+    }, props), false, true);
+    var _ref$ = contentRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : contentRef = _el$2;
+    insert(_el$2, () => props.children);
     return _el$;
   })();
 };
-var _tmpl$40 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<label><input type=checkbox class=nt-sr-only><div>`);
 var Switch = (props) => {
   const style = useStyle();
+  const handleChange = () => {
+    var _a;
+    if (props.disabled) return;
+    const nextState = getNextState((_a = props.state) != null ? _a : "disabled");
+    props.onChange(nextState);
+  };
+  const getNextState = (currentState) => {
+    switch (currentState) {
+      case "enabled":
+        return "disabled";
+      case "disabled":
+        return "enabled";
+      case "indeterminate":
+        return "enabled";
+      default:
+        return "disabled";
+    }
+  };
+  const isChecked = () => props.state === "enabled";
+  const isIndeterminate = () => props.state === "indeterminate";
+  const state = () => props.state;
+  const disabled = () => props.disabled;
   return (() => {
-    var _el$ = _tmpl$40(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    _el$2.addEventListener("change", (e) => {
-      props.onChange(e.target.checked);
-    });
+    var _el$ = _tmpl$45(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    _el$2.addEventListener("change", handleChange);
     effect((_p$) => {
-      var _v$ = style("channelSwitch", `nt-relative nt-inline-flex nt-cursor-pointer nt-items-center`), _v$2 = style("channelSwitchThumb", `nt-peer nt-h-4 nt-w-7 nt-rounded-full peer-checked:nt-shadow-none peer-checked:nt-border-neutral-alpha-400 nt-bg-neutral-alpha-300 after:nt-absolute after:nt-top-0.5 after:nt-size-3 after:nt-left-0.5 after:nt-rounded-full after:nt-bg-background after:nt-transition-all after:nt-content-[''] peer-checked:nt-bg-primary peer-checked:after:nt-translate-x-full peer-checked:after:nt-border-background nt-transition-all nt-duration-200 after:nt-duration-200 shadow-sm`), _v$3 = props.checked;
+      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();
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$3, "data-checked", _p$.a = _v$3);
+      _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$3, "data-state", _p$.o = _v$4);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0
     });
-    effect(() => _el$2.checked = props.checked);
+    effect(() => _el$2.checked = isChecked());
     return _el$;
   })();
 };
 
 // src/ui/components/elements/Preferences/ChannelRow.tsx
-var _tmpl$41 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
   const updatePreference = (enabled) => __async(void 0, null, function* () {
     props.onChange({
-      channel: props.channel,
-      enabled,
-      workflowId: props.workflowId
+      [props.channel.channel]: enabled
     });
   });
   const onChange = (checked) => __async(void 0, null, function* () {
     yield updatePreference(checked);
   });
+  const state = () => props.channel.state;
+  const channel = () => props.channel.channel;
   return (() => {
-    var _el$ = _tmpl$41(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
+    var _el$ = _tmpl$46(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
     insert(_el$3, createComponent(ChannelIcon, {
       appearanceKey: "channel__icon",
       get channel() {
-        return props.channel;
+        return channel();
       },
       "class": "nt-size-3"
     }));
-    insert(_el$4, () => getLabel(props.channel));
+    insert(_el$4, () => getLabel(channel()));
     insert(_el$5, createComponent(Switch, {
-      get checked() {
-        return props.enabled;
+      get state() {
+        return state();
       },
-      onChange: (checked) => onChange(checked)
+      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");
@@ -2802,40 +3030,75 @@ var ChannelRow = (props) => {
 };
 var ChannelIcon = (props) => {
   const style = useStyle();
-  switch (props.channel) {
-    case "in_app" /* IN_APP */:
-      return createComponent(InApp, {
+  const iconMap = {
+    ["in_app" /* IN_APP */]: {
+      key: "inApp",
+      component: createComponent(InApp, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class);
+          return style(props.appearanceKey, props.class, {
+            iconKey: "inApp"
+          });
         }
-      });
-    case "email" /* EMAIL */:
-      return createComponent(Email, {
+      })
+    },
+    ["email" /* EMAIL */]: {
+      key: "email",
+      component: createComponent(Email, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class);
+          return style(props.appearanceKey, props.class, {
+            iconKey: "email"
+          });
         }
-      });
-    case "push" /* PUSH */:
-      return createComponent(Push, {
+      })
+    },
+    ["push" /* PUSH */]: {
+      key: "push",
+      component: createComponent(Push, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class);
+          return style(props.appearanceKey, props.class, {
+            iconKey: "push"
+          });
         }
-      });
-    case "sms" /* SMS */:
-      return createComponent(Sms, {
+      })
+    },
+    ["sms" /* SMS */]: {
+      key: "sms",
+      component: createComponent(Sms, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class);
+          return style(props.appearanceKey, props.class, {
+            iconKey: "sms"
+          });
         }
-      });
-    case "chat" /* CHAT */:
-      return createComponent(Chat, {
+      })
+    },
+    ["chat" /* CHAT */]: {
+      key: "chat",
+      component: createComponent(Chat, {
         get ["class"]() {
-          return style(props.appearanceKey, props.class);
+          return style(props.appearanceKey, props.class, {
+            iconKey: "chat"
+          });
         }
-      });
-    default:
-      return null;
+      })
+    }
+  };
+  const iconData = iconMap[props.channel];
+  if (!iconData) {
+    return null;
   }
+  return createComponent(IconRendererWrapper, {
+    get iconKey() {
+      return iconData.key;
+    },
+    get fallback() {
+      return iconData.component;
+    },
+    get ["class"]() {
+      return style(props.appearanceKey, props.class, {
+        iconKey: iconData.key
+      });
+    }
+  });
 };
 var getLabel = (channel) => {
   switch (channel) {
@@ -2853,12 +3116,177 @@ var getLabel = (channel) => {
       return "";
   }
 };
-var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<div><div></div><div>`);
+
+// src/ui/components/elements/Preferences/PreferencesRow.tsx
+var _tmpl$47 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<div><div><div><div><span></span></div></div><span>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<span>`);
+var iconKeyToComponentMap2 = {
+  cogs: Cogs,
+  routeFill: RouteFill
+};
+var PreferencesRow = (props) => {
+  const style = useStyle();
+  const [isOpenChannels, setIsOpenChannels] = createSignal(false);
+  const {
+    t
+  } = useLocalization();
+  const channels = createMemo(() => {
+    var _a, _b;
+    return Object.keys((_b = (_a = props.preference) == null ? void 0 : _a.channels) != null ? _b : {}).map((channel) => {
+      var _a2;
+      return {
+        channel,
+        state: ((_a2 = props.preference) == null ? void 0 : _a2.channels[channel]) ? "enabled" : "disabled"
+      };
+    });
+  });
+  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$212(), _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);
+      };
+      insert(_el$4, createComponent(IconRendererWrapper, {
+        get iconKey() {
+          return props.iconKey;
+        },
+        "class": iconClass,
+        get fallback() {
+          return DefaultIconComponent && DefaultIconComponent({
+            class: iconClass
+          });
+        }
+      }), _el$5);
+      insert(_el$5, () => {
+        var _a, _b, _c;
+        return t((_c = (_b = (_a = props.preference) == null ? void 0 : _a.workflow) == null ? void 0 : _b.identifier) != null ? _c : "preferences.global");
+      });
+      insert(_el$3, createComponent(Collapsible, {
+        get open() {
+          return !isOpenChannels();
+        },
+        get children() {
+          return createComponent(WorkflowDescription, {
+            get channels() {
+              var _a, _b;
+              return (_b = (_a = props.preference) == null ? void 0 : _a.channels) != null ? _b : {};
+            },
+            appearanceKey: "workflowDescription",
+            "class": "nt-overflow-hidden"
+          });
+        }
+      }), null);
+      insert(_el$6, createComponent(IconRendererWrapper, {
+        iconKey: "arrowDropDown",
+        "class": arrowDropDownIconClass,
+        get fallback() {
+          return createComponent(ArrowDropDown, {
+            "class": arrowDropDownIconClass
+          });
+        }
+      }));
+      insert(_el$, createComponent(Collapsible, {
+        get open() {
+          return isOpenChannels();
+        },
+        get children() {
+          var _el$7 = _tmpl$47();
+          insert(_el$7, createComponent(Index, {
+            get each() {
+              return channels();
+            },
+            children: (channel) => createComponent(ChannelRow, {
+              get channel() {
+                return channel();
+              },
+              get workflowId() {
+                var _a, _b;
+                return (_b = (_a = props.preference) == null ? void 0 : _a.workflow) == null ? void 0 : _b.id;
+              },
+              get onChange() {
+                var _a, _b;
+                return props.onChange((_b = (_a = props.preference) == null ? void 0 : _a.workflow) == null ? void 0 : _b.identifier);
+              }
+            })
+          }));
+          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")));
+          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();
+        _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);
+        _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+        _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+        _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+        _v$7 !== _p$.s && setAttribute(_el$5, "data-localization", _p$.s = _v$7);
+        _v$8 !== _p$.h && setAttribute(_el$5, "data-open", _p$.h = _v$8);
+        _v$9 !== _p$.r && className(_el$6, _p$.r = _v$9);
+        _v$10 !== _p$.d && setAttribute(_el$6, "data-open", _p$.d = _v$10);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0,
+        r: void 0,
+        d: void 0
+      });
+      return _el$;
+    }
+  });
+};
+var WorkflowDescription = (props) => {
+  const style = useStyle();
+  const channelNames = () => {
+    const channels = [];
+    for (const key in props.channels) {
+      if (props.channels[key] !== void 0) {
+        const isDisabled = !props.channels[key];
+        const element = (() => {
+          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")));
+          return _el$8;
+        })();
+        channels.push(element);
+      }
+    }
+    return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
+  };
+  return (() => {
+    var _el$9 = _tmpl$47();
+    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))));
+    return _el$9;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$48 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$213 = /* @__PURE__ */ template(`<div><div></div><div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$43();
+    var _el$ = _tmpl$48();
     effect(() => className(_el$, style(props.appearanceKey, cn("nt-w-full nt-h-3 nt-rounded nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
     return _el$;
   })();
@@ -2866,7 +3294,7 @@ var SkeletonText = (props) => {
 var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$2 = _tmpl$43();
+    var _el$2 = _tmpl$48();
     effect(() => className(_el$2, style(props.appearanceKey, cn("nt-size-8 nt-rounded-lg nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
     return _el$2;
   })();
@@ -2874,7 +3302,7 @@ var SkeletonAvatar = (props) => {
 var SkeletonSwitch = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$3 = _tmpl$211(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    var _el$3 = _tmpl$213(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
     effect((_p$) => {
       var _v$ = style(props.appearanceKey, cn("nt-relative nt-inline-flex nt-items-center", props.class)), _v$2 = style(props.appearanceKey, "nt-h-4 nt-w-7 nt-rounded-full nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent"), _v$3 = style(props.thumbAppearanceKey, "nt-absolute nt-top-0.5 nt-left-0.5 nt-size-3 nt-rounded-full nt-bg-background nt-shadow");
       _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
@@ -2891,7 +3319,7 @@ var SkeletonSwitch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
-var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$49 = /* @__PURE__ */ template(`<div>`);
 var channelIcons = [InApp, Email, Sms, Push, Chat];
 var PreferencesListSkeleton = (props) => {
   const style = useStyle();
@@ -2899,7 +3327,7 @@ var PreferencesListSkeleton = (props) => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$44();
+    var _el$ = _tmpl$49();
     insert(_el$, createComponent(Motion.div, {
       get animate() {
         return {
@@ -2941,7 +3369,7 @@ var PreferencesListSkeleton = (props) => {
                   return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
                 }
               }), (() => {
-                var _el$3 = _tmpl$44();
+                var _el$3 = _tmpl$49();
                 insert(_el$3, createComponent(SkeletonText, {
                   appearanceKey: "notificationList__skeletonText",
                   "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -2959,7 +3387,7 @@ var PreferencesListSkeleton = (props) => {
             }
           });
         })), (() => {
-          var _el$2 = _tmpl$44();
+          var _el$2 = _tmpl$49();
           effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
           return _el$2;
         })()];
@@ -3003,15 +3431,298 @@ var PreferencesListSkeleton = (props) => {
   })();
 };
 
+// src/ui/components/elements/Preferences/DefaultPreferences.tsx
+var DefaultPreferences = (props) => {
+  const workflowPreferences = createMemo(() => props.workflowPreferences);
+  const updatePreference = (workflowIdentifier) => (channels) => {
+    var _a;
+    const preference = (_a = workflowPreferences()) == null ? void 0 : _a.find((pref) => {
+      var _a2;
+      return ((_a2 = pref.workflow) == null ? void 0 : _a2.identifier) === workflowIdentifier;
+    });
+    if (!preference) return;
+    props.updatePreference(preference)(channels);
+  };
+  return createComponent(Show, {
+    get when() {
+      var _a;
+      return (_a = workflowPreferences()) == null ? void 0 : _a.length;
+    },
+    get fallback() {
+      return createComponent(PreferencesListSkeleton, {
+        get loading() {
+          return props.loading;
+        }
+      });
+    },
+    get children() {
+      return createComponent(Index, {
+        get each() {
+          return workflowPreferences();
+        },
+        children: (preference) => {
+          return createComponent(PreferencesRow, {
+            iconKey: "routeFill",
+            get preference() {
+              return preference();
+            },
+            onChange: updatePreference
+          });
+        }
+      });
+    }
+  });
+};
+var _tmpl$50 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 14 14"><path fill=currentColor d="M5.95 1.75c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H4.9v1.05h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V7H4.9v3.15h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V11.2h-3.15a.525.525 0 0 1-.525-.525V4.9H2.8a.525.525 0 0 1-.525-.525v-2.1c0-.29.235-.525.525-.525h3.15Zm4.725 8.4h-2.1v1.05h2.1v-1.05Zm0-4.2h-2.1V7h2.1V5.95ZM5.425 2.8h-2.1v1.05h2.1V2.8Z"></path><path fill=url(#a) d="M5.95 1.75c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H4.9v1.05h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V7H4.9v3.15h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V11.2h-3.15a.525.525 0 0 1-.525-.525V4.9H2.8a.525.525 0 0 1-.525-.525v-2.1c0-.29.235-.525.525-.525h3.15Zm4.725 8.4h-2.1v1.05h2.1v-1.05Zm0-4.2h-2.1V7h2.1V5.95ZM5.425 2.8h-2.1v1.05h2.1V2.8Z"></path><defs><linearGradient id=a x1=2.275 x2=11.725 y1=6.982 y2=7.018 gradientUnits=userSpaceOnUse><stop stop-color=currentColor></stop><stop offset=1 stop-color=currentColor>`);
+var NodeTree = (props) => {
+  return (() => {
+    var _el$ = _tmpl$50();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+var _tmpl$51 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 16 16"><path fill=currentColor d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10Zm0-1a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm.5-4.75V9.5H9v1H7v-1h.5V8.25H7v-1h1.5ZM8.75 6a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z">`);
+var Info = (props) => {
+  return (() => {
+    var _el$ = _tmpl$51();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+};
+
+// src/ui/components/elements/Preferences/GroupedPreferencesRow.tsx
+var _tmpl$52 = /* @__PURE__ */ template(`<div><div><span data-localization=preferences.group.info></span></div><div>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div><div><div><span></span></div><div><span>`);
+var GroupedPreferencesRow = (props) => {
+  const style = useStyle();
+  const {
+    t
+  } = useLocalization();
+  const [isOpened, setIsOpened] = createSignal(false);
+  const uniqueChannels = createMemo(() => {
+    return props.group.preferences.reduce((acc, preference) => {
+      Object.keys(preference.channels).forEach((el) => {
+        const channel = el;
+        const currentState = acc[channel];
+        const preferenceState = preference.channels[channel] ? "enabled" : "disabled";
+        if (!currentState) {
+          acc[channel] = preferenceState;
+        } else {
+          acc[channel] = currentState !== preferenceState ? "indeterminate" : preferenceState;
+        }
+      });
+      return acc;
+    }, {});
+  });
+  const groupState = createMemo(() => {
+    const someIndeterminate = Object.values(uniqueChannels()).some((state) => state === "indeterminate");
+    if (someIndeterminate) {
+      return "indeterminate";
+    }
+    const allEnabled = Object.values(uniqueChannels()).every((state) => state === "enabled");
+    const allDisabled = Object.values(uniqueChannels()).every((state) => state === "disabled");
+    if (allEnabled) {
+      return "enabled";
+    }
+    if (allDisabled) {
+      return "disabled";
+    }
+    return "indeterminate";
+  });
+  const updateGroupPreferences = (newState) => {
+    const channels = Object.keys(uniqueChannels()).reduce((acc, channel) => {
+      acc[channel] = newState === "enabled";
+      return acc;
+    }, {});
+    props.bulkUpdatePreferences(props.group.preferences)(channels);
+  };
+  const updatePreference = (workflowIdentifier) => (channels) => {
+    const preference = props.group.preferences.find((pref) => {
+      var _a;
+      return ((_a = pref.workflow) == null ? void 0 : _a.identifier) === workflowIdentifier;
+    });
+    if (!preference) return;
+    props.updatePreference(preference)(channels);
+  };
+  const updatePreferencesForChannel = (channel) => (channels) => {
+    const filteredPreferences = props.group.preferences.filter((preference) => Object.keys(preference.channels).some((key) => key === channel));
+    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$214(), _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 fallback() {
+          return createComponent(NodeTree, {
+            "class": nodeTreeIconClass
+          });
+        }
+      }), _el$4);
+      insert(_el$4, () => props.group.name);
+      insert(_el$5, createComponent(Switch, {
+        get state() {
+          return groupState();
+        },
+        onChange: updateGroupPreferences
+      }), _el$6);
+      insert(_el$6, createComponent(IconRendererWrapper, {
+        iconKey: "arrowDropDown",
+        "class": dropdownIconClass,
+        get fallback() {
+          return createComponent(ArrowDropDown, {
+            "class": dropdownIconClass
+          });
+        }
+      }));
+      insert(_el$, createComponent(Collapsible, {
+        get open() {
+          return isOpened();
+        },
+        get children() {
+          var _el$7 = _tmpl$52(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling;
+          insert(_el$8, createComponent(Index, {
+            get each() {
+              return Object.keys(uniqueChannels());
+            },
+            children: (channel) => {
+              return createComponent(ChannelRow, {
+                get channel() {
+                  return {
+                    channel: channel(),
+                    state: uniqueChannels()[channel()]
+                  };
+                },
+                get onChange() {
+                  return updatePreferencesForChannel(channel());
+                }
+              });
+            }
+          }), _el$9);
+          insert(_el$9, createComponent(IconRendererWrapper, {
+            iconKey: "info",
+            "class": infoIconClass,
+            get fallback() {
+              return createComponent(Info, {
+                "class": infoIconClass
+              });
+            }
+          }), null);
+          insert(_el$9, () => t("preferences.group.info"), null);
+          insert(_el$10, createComponent(Index, {
+            get each() {
+              return preferences();
+            },
+            children: (preference) => createComponent(PreferencesRow, {
+              iconKey: "routeFill",
+              get preference() {
+                return preference();
+              },
+              onChange: updatePreference
+            })
+          }));
+          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");
+            _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);
+            _v$4 !== _p$.o && className(_el$10, _p$.o = _v$4);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          });
+          return _el$7;
+        }
+      }), 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();
+        _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);
+        _v$8 !== _p$.o && className(_el$3, _p$.o = _v$8);
+        _v$9 !== _p$.i && className(_el$4, _p$.i = _v$9);
+        _v$10 !== _p$.n && setAttribute(_el$4, "data-open", _p$.n = _v$10);
+        _v$11 !== _p$.s && className(_el$5, _p$.s = _v$11);
+        _v$12 !== _p$.h && className(_el$6, _p$.h = _v$12);
+        _v$13 !== _p$.r && setAttribute(_el$6, "data-open", _p$.r = _v$13);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0,
+        r: void 0
+      });
+      return _el$;
+    }
+  });
+};
+delegateEvents(["click"]);
+
+// src/ui/components/elements/Preferences/GroupedPreferences.tsx
+var GroupedPreferences = (props) => {
+  const groups = () => props.groups;
+  return createComponent(Show, {
+    get when() {
+      return props.groups.length && !props.loading;
+    },
+    get fallback() {
+      return createComponent(PreferencesListSkeleton, {
+        get loading() {
+          return props.loading;
+        }
+      });
+    },
+    get children() {
+      return createComponent(Index, {
+        get each() {
+          return groups();
+        },
+        children: (group) => {
+          return createComponent(GroupedPreferencesRow, {
+            get group() {
+              return group();
+            },
+            get bulkUpdatePreferences() {
+              return props.bulkUpdatePreferences;
+            },
+            get updatePreference() {
+              return props.updatePreference;
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 // src/ui/components/elements/Preferences/Preferences.tsx
-var _tmpl$45 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
 var Preferences = () => {
   var _a;
+  const novu = useNovu();
   const style = useStyle();
   const {
-    preferencesFilter
+    preferencesFilter,
+    preferenceGroups
   } = useInboxContext();
   const {
     preferences,
@@ -3023,14 +3734,9 @@ var Preferences = () => {
     var _a2, _b;
     const globalPreference = (_a2 = preferences()) == null ? void 0 : _a2.find((preference) => preference.level === "global" /* GLOBAL */);
     const workflowPreferences = (_b = preferences()) == null ? void 0 : _b.filter((preference) => preference.level === "template" /* TEMPLATE */);
-    const workflowPreferencesIds = workflowPreferences == null ? void 0 : workflowPreferences.map((preference) => {
-      var _a3;
-      return (_a3 = preference.workflow) == null ? void 0 : _a3.id;
-    });
     return {
       globalPreference,
-      workflowPreferences,
-      workflowPreferencesIds
+      workflowPreferences
     };
   });
   createEffect(() => {
@@ -3042,203 +3748,126 @@ var Preferences = () => {
       }, {}));
     });
   });
-  const optimisticUpdate = (preference) => (_0) => __async(void 0, [_0], function* ({
-    channel,
-    enabled
-  }) {
+  const updatePreference = (preference) => (channels) => __async(void 0, null, function* () {
     yield preference == null ? void 0 : preference.update({
-      channels: {
-        [channel]: enabled
-      }
+      channels
     });
   });
+  const bulkUpdatePreferences = (preferences2) => (channels) => __async(void 0, null, function* () {
+    yield novu.preferences.bulkUpdate(preferences2.map((el) => {
+      const oldChannels = Object.keys(el.channels);
+      const channelsToUpdate = Object.keys(channels).filter((channel) => oldChannels.includes(channel)).reduce((acc, channel) => {
+        acc[channel] = channels[channel];
+        return acc;
+      }, {});
+      return {
+        preference: el,
+        channels: channelsToUpdate
+      };
+    }));
+  });
+  const groupedPreferences = createMemo(() => {
+    var _a2, _b, _c;
+    const workflowPreferences = (_a2 = allPreferences().workflowPreferences) != null ? _a2 : [];
+    return (_c = (_b = preferenceGroups()) == null ? void 0 : _b.map((group) => {
+      const {
+        filter
+      } = group;
+      if (typeof filter === "function") {
+        const preferences2 = filter({
+          preferences: workflowPreferences
+        });
+        return {
+          name: group.name,
+          preferences: preferences2
+        };
+      }
+      if (typeof filter === "object") {
+        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);
+            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);
+            }));
+          })
+        };
+      }
+      return {
+        name: group.name,
+        preferences: []
+      };
+    })) != null ? _c : [];
+  });
   return (() => {
-    var _el$ = _tmpl$45();
+    var _el$ = _tmpl$53();
     insert(_el$, createComponent(PreferencesRow, {
-      localizationKey: "preferences.global",
-      get channels() {
-        var _a2;
-        return ((_a2 = allPreferences().globalPreference) == null ? void 0 : _a2.channels) || {};
+      iconKey: "cogs",
+      get preference() {
+        return allPreferences().globalPreference;
       },
-      get onChange() {
-        return optimisticUpdate(allPreferences().globalPreference);
-      }
+      onChange: () => updatePreference(allPreferences().globalPreference)
     }), null);
     insert(_el$, createComponent(Show, {
       get when() {
-        var _a2;
-        return (_a2 = allPreferences().workflowPreferences) == null ? void 0 : _a2.length;
+        return groupedPreferences().length > 0;
       },
       get fallback() {
-        return createComponent(PreferencesListSkeleton, {
-          get loading() {
-            return loading();
-          }
-        });
-      },
-      get children() {
-        return createComponent(For, {
-          get each() {
-            return allPreferences().workflowPreferencesIds;
+        return createComponent(Show, {
+          get when() {
+            var _a2;
+            return (_a2 = allPreferences().workflowPreferences) == null ? void 0 : _a2.length;
           },
-          children: (_, index) => {
-            const preference = () => {
-              var _a2;
-              return (_a2 = allPreferences().workflowPreferences) == null ? void 0 : _a2[index()];
-            };
-            if (!preference()) {
-              return null;
-            }
-            return createComponent(PreferencesRow, {
-              get localizationKey() {
-                return preference().workflow.identifier;
-              },
-              get channels() {
-                return preference().channels;
+          get fallback() {
+            return createComponent(PreferencesListSkeleton, {
+              get loading() {
+                return loading();
+              }
+            });
+          },
+          get children() {
+            return createComponent(DefaultPreferences, {
+              get workflowPreferences() {
+                return allPreferences().workflowPreferences;
               },
-              get workflowId() {
-                var _a2;
-                return (_a2 = preference().workflow) == null ? void 0 : _a2.id;
+              get loading() {
+                return loading();
               },
-              get onChange() {
-                return optimisticUpdate(preference());
-              }
+              updatePreference
             });
           }
         });
+      },
+      get children() {
+        return createComponent(GroupedPreferences, {
+          get groups() {
+            return groupedPreferences();
+          },
+          get loading() {
+            return loading();
+          },
+          updatePreference,
+          bulkUpdatePreferences
+        });
       }
     }), 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")));
+    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]")));
     return _el$;
   })();
 };
-var WorkflowDescription = (props) => {
-  const style = useStyle();
-  const channelNames = () => {
-    const channels = [];
-    for (const key in props.channels) {
-      if (props.channels[key] !== void 0) {
-        const isDisabled = !props.channels[key];
-        const element = (() => {
-          var _el$2 = _tmpl$212();
-          setAttribute(_el$2, "data-disabled", isDisabled);
-          insert(_el$2, () => getLabel(key));
-          effect(() => className(_el$2, style("channelName", "data-[disabled=true]:nt-text-foreground-alpha-400")));
-          return _el$2;
-        })();
-        channels.push(element);
-      }
-    }
-    return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
-  };
-  return (() => {
-    var _el$3 = _tmpl$45();
-    insert(_el$3, channelNames);
-    effect(() => className(_el$3, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
-    return _el$3;
-  })();
-};
-var PreferencesRow = (props) => {
-  const style = useStyle();
-  const [isOpenDescription, setIsOpenDescription] = createSignal(true);
-  const [isOpenChannels, setIsOpenChannels] = createSignal(false);
-  const {
-    t
-  } = useLocalization();
-  const channels = createMemo(() => Object.keys(props.channels));
-  return createComponent(Show, {
-    get when() {
-      return channels().length > 0;
-    },
-    get children() {
-      var _el$4 = _tmpl$310(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling;
-      _el$5.$$click = () => {
-        setIsOpenChannels((prev) => !prev);
-        setIsOpenDescription((prev) => !prev);
-      };
-      insert(_el$7, () => t(props.localizationKey));
-      insert(_el$6, createComponent(Collapsible, {
-        get open() {
-          return isOpenDescription();
-        },
-        get children() {
-          return createComponent(WorkflowDescription, {
-            get channels() {
-              return props.channels;
-            },
-            appearanceKey: "workflowDescription",
-            "class": "nt-overflow-hidden"
-          });
-        }
-      }), null);
-      insert(_el$8, createComponent(ArrowDropDown, {
-        get ["class"]() {
-          return style("workflowArrow__icon", "nt-text-foreground-alpha-600 nt-size-4");
-        }
-      }));
-      insert(_el$4, createComponent(Collapsible, {
-        get open() {
-          return isOpenChannels();
-        },
-        get children() {
-          var _el$9 = _tmpl$45();
-          insert(_el$9, createComponent(For, {
-            get each() {
-              return channels();
-            },
-            children: (channel) => createComponent(ChannelRow, {
-              channel,
-              get enabled() {
-                return !!props.channels[channel];
-              },
-              get workflowId() {
-                return props.workflowId;
-              },
-              get onChange() {
-                return props.onChange;
-              }
-            })
-          }));
-          effect(() => className(_el$9, style("channelsContainer", "nt-flex nt-bg-background nt-border nt-border-neutral-alpha-50 nt-rounded-lg nt-p-2 nt-flex-col nt-gap-1 nt-overflow-hidden")));
-          return _el$9;
-        }
-      }), null);
-      effect((_p$) => {
-        var _v$ = style("workflowContainer", `nt-p-1 nt-bg-neutral-alpha-25 nt-rounded-lg`), _v$2 = isOpenChannels(), _v$3 = style("workflowLabelContainer", "nt-flex nt-justify-between nt-p-1 nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden"), _v$4 = style("workflowLabelHeader", "nt-overflow-hidden"), _v$5 = style("workflowLabel", "nt-text-sm nt-font-semibold nt-truncate"), _v$6 = props.localizationKey, _v$7 = isOpenChannels(), _v$8 = style("workflowContainerRight__icon", `nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180`), _v$9 = isOpenChannels();
-        _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$4, "data-open", _p$.t = _v$2);
-        _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
-        _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
-        _v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
-        _v$6 !== _p$.n && setAttribute(_el$7, "data-localization", _p$.n = _v$6);
-        _v$7 !== _p$.s && setAttribute(_el$7, "data-open", _p$.s = _v$7);
-        _v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
-        _v$9 !== _p$.r && setAttribute(_el$8, "data-open", _p$.r = _v$9);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0,
-        i: void 0,
-        n: void 0,
-        s: void 0,
-        h: void 0,
-        r: void 0
-      });
-      return _el$4;
-    }
-  });
-};
-delegateEvents(["click"]);
-var _tmpl$46 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
+var _tmpl$54 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
 var PreferencesHeader = (props) => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
+  const arrowLeftIconClass = style("preferencesHeader__back__button__icon", "nt-size-4", {
+    iconKey: "arrowLeft"
+  });
   return (() => {
-    var _el$ = _tmpl$46(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$54(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return props.navigateToNotifications;
@@ -3252,9 +3881,13 @@ var PreferencesHeader = (props) => {
           return navigateToNotifications();
         },
         get children() {
-          return createComponent(ArrowLeft, {
-            get ["class"]() {
-              return style("preferencesHeader__back__button__icon", "nt-size-4");
+          return createComponent(IconRendererWrapper, {
+            iconKey: "arrowLeft",
+            "class": arrowLeftIconClass,
+            get fallback() {
+              return createComponent(ArrowLeft, {
+                "class": arrowLeftIconClass
+              });
             }
           });
         }
@@ -3302,28 +3935,12 @@ var useTabsDropdown = ({ tabs }) => {
   });
   return { dropdownTabs, setTabsList, visibleTabs };
 };
-var _tmpl$47 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
-var ArrowDown = (props) => {
-  return (() => {
-    var _el$ = _tmpl$47();
-    spread(_el$, props, true, true);
-    return _el$;
-  })();
-};
-var _tmpl$48 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3188_15050)><path d="M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
-var Clock = (props) => {
-  return (() => {
-    var _el$ = _tmpl$48();
-    spread(_el$, props, true, true);
-    return _el$;
-  })();
-};
-var _tmpl$49 = /* @__PURE__ */ template(`<strong>`);
-var _tmpl$213 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$55 = /* @__PURE__ */ template(`<strong>`);
+var _tmpl$215 = /* @__PURE__ */ template(`<p>`);
 var Bold = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$49();
+    var _el$ = _tmpl$55();
     insert(_el$, () => props.children);
     effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
     return _el$;
@@ -3335,7 +3952,7 @@ var Markdown = (props) => {
   const style = useStyle();
   const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
   return (() => {
-    var _el$2 = _tmpl$213();
+    var _el$2 = _tmpl$215();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return style(local.appearanceKey, cn(local.class));
@@ -3368,7 +3985,7 @@ var Markdown = (props) => {
   })();
 };
 var Markdown_default = Markdown;
-var _tmpl$50 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$56 = /* @__PURE__ */ template(`<span>`);
 var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
   variants: {
     variant: {
@@ -3387,7 +4004,7 @@ var Badge = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$50();
+    var _el$ = _tmpl$56();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -3405,21 +4022,13 @@ var Badge = (props) => {
     return _el$;
   })();
 };
-var _tmpl$51 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99992 2.91634V4.99967M4.79992 5.39616L3.27392 6.46553M1.66659 1.66634L8.33325 8.33301M9.16658 4.99967C9.16658 7.30086 7.30111 9.16634 4.99992 9.16634C2.69873 9.16634 0.833252 7.30086 0.833252 4.99967C0.833252 2.69849 2.69873 0.833008 4.99992 0.833008C7.30111 0.833008 9.16658 2.69849 9.16658 4.99967Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
-var Unsnooze = (props) => {
-  return (() => {
-    var _el$ = _tmpl$51();
-    spread(_el$, props, true, true);
-    return _el$;
-  })();
-};
 var TooltipContext = createContext(void 0);
 function TooltipRoot(props) {
   const [reference, setReference] = createSignal(null);
   const [floating, setFloating] = createSignal(null);
   const position = useFloating(reference, floating, {
     placement: props.placement || "top",
-    strategy: "absolute",
+    strategy: "fixed",
     whileElementsMounted: autoUpdate,
     middleware: [offset(10), flip({
       fallbackPlacements: props.fallbackPlacements || ["bottom"]
@@ -3460,7 +4069,7 @@ function useTooltip() {
 }
 
 // src/ui/components/primitives/Tooltip/TooltipContent.tsx
-var _tmpl$52 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$57 = /* @__PURE__ */ template(`<div>`);
 var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
 var TooltipContentBody = (props) => {
   const {
@@ -3483,7 +4092,7 @@ var TooltipContentBody = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$52();
+    var _el$ = _tmpl$57();
     use(setFloating, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -3505,12 +4114,22 @@ var TooltipContent = (props) => {
   const {
     open
   } = useTooltip();
+  const {
+    container
+  } = useAppearance();
+  const portalContainer = () => {
+    var _a;
+    return (_a = container()) != null ? _a : document.body;
+  };
   return createComponent(Show, {
     get when() {
       return open();
     },
     get children() {
       return createComponent(Portal$1, {
+        get mount() {
+          return portalContainer();
+        },
         get children() {
           return createComponent(Root, {
             get children() {
@@ -3522,7 +4141,7 @@ var TooltipContent = (props) => {
     }
   });
 };
-var _tmpl$53 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$58 = /* @__PURE__ */ template(`<button>`);
 var TooltipTrigger = (props) => {
   const {
     setReference,
@@ -3557,7 +4176,7 @@ var TooltipTrigger = (props) => {
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$53();
+    var _el$ = _tmpl$58();
     _el$.addEventListener("mouseleave", () => {
       setOpen(false);
     });
@@ -3588,18 +4207,8 @@ var Tooltip = {
    */
   Content: TooltipContent
 };
-var _tmpl$54 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.7957 10.0009L7.08325 6.2884L8.14375 5.2279L12.9168 10.0009L8.14375 14.7739L7.08325 13.7134L10.7957 10.0009Z"fill=currentColor>`);
-var ArrowRight = (props) => {
-  return (() => {
-    var _el$ = _tmpl$54();
-    spread(_el$, props, true, true);
-    return _el$;
-  })();
-};
-
-// src/ui/components/primitives/DatePicker.tsx
-var _tmpl$55 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$214 = /* @__PURE__ */ template(`<div><span>`);
+var _tmpl$59 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$216 = /* @__PURE__ */ template(`<div><span>`);
 var DatePickerContext = createContext({
   currentDate: () => /* @__PURE__ */ new Date(),
   setCurrentDate: () => {
@@ -3638,7 +4247,7 @@ var DatePicker = (props) => {
       maxDays: () => props.maxDays
     },
     get children() {
-      var _el$ = _tmpl$55();
+      var _el$ = _tmpl$59();
       spread(_el$, mergeProps({
         get ["class"]() {
           return style("datePicker", cn("nt-p-2", local.class));
@@ -3658,6 +4267,13 @@ var DatePickerHeader = (props) => {
     currentDate,
     maxDays
   } = useDatePicker();
+  useAppearance();
+  const prevIconClass = style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
+    iconKey: "arrowLeft"
+  });
+  const nextIconClass = style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
+    iconKey: "arrowRight"
+  });
   const handlePrevMonth = () => {
     const date = new Date(viewMonth());
     date.setMonth(date.getMonth() - 1);
@@ -3694,7 +4310,7 @@ var DatePickerHeader = (props) => {
     return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
   };
   return (() => {
-    var _el$2 = _tmpl$214(), _el$3 = _el$2.firstChild;
+    var _el$2 = _tmpl$216(), _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));
@@ -3712,9 +4328,13 @@ var DatePickerHeader = (props) => {
       },
       "class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-background nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
       get children() {
-        return createComponent(ArrowLeft, {
-          get ["class"]() {
-            return style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700");
+        return createComponent(IconRendererWrapper, {
+          iconKey: "arrowLeft",
+          "class": prevIconClass,
+          get fallback() {
+            return createComponent(ArrowLeft, {
+              "class": prevIconClass
+            });
           }
         });
       }
@@ -3735,9 +4355,13 @@ var DatePickerHeader = (props) => {
       },
       "class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-background nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
       get children() {
-        return createComponent(ArrowRight, {
-          get ["class"]() {
-            return style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700");
+        return createComponent(IconRendererWrapper, {
+          iconKey: "arrowRight",
+          "class": nextIconClass,
+          get fallback() {
+            return createComponent(ArrowRight, {
+              "class": nextIconClass
+            });
           }
         });
       }
@@ -3842,7 +4466,7 @@ var DatePickerCalendar = (props) => {
     return days;
   };
   return (() => {
-    var _el$8 = _tmpl$55();
+    var _el$8 = _tmpl$59();
     _el$8.$$click = (e) => e.stopPropagation();
     spread(_el$8, mergeProps({
       get ["class"]() {
@@ -3858,7 +4482,7 @@ var DatePickerCalendar = (props) => {
   })();
 };
 delegateEvents(["click"]);
-var _tmpl$56 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$60 = /* @__PURE__ */ template(`<input>`);
 var inputVariants = cva(cn(`focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
   variants: {
     variant: {
@@ -3878,7 +4502,7 @@ var Input = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$56();
+    var _el$ = _tmpl$60();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -3898,7 +4522,7 @@ var Input = (props) => {
 };
 
 // src/ui/components/primitives/TimePicker.tsx
-var _tmpl$57 = /* @__PURE__ */ template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
+var _tmpl$61 = /* @__PURE__ */ template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
 var TimePicker = (props) => {
   const [local, rest] = splitProps(props, ["value", "onChange", "class", "appearanceKey"]);
   const style = useStyle();
@@ -3938,7 +4562,7 @@ var TimePicker = (props) => {
     }
   };
   return (() => {
-    var _el$ = _tmpl$57(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$61(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$.$$click = (e) => e.stopPropagation();
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -4026,7 +4650,7 @@ var enforceMinMax = (el) => {
 delegateEvents(["click"]);
 
 // src/ui/components/Notification/SnoozeDateTimePicker.tsx
-var _tmpl$58 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
+var _tmpl$62 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
 var fiveMinutesFromNow = () => {
   const futureTime = new Date(Date.now() + 5 * 60 * 1e3);
   const hours = futureTime.getHours();
@@ -4123,7 +4747,7 @@ var SnoozeDateTimePicker = (props) => {
     return t("snooze.datePicker.noDateSelectedTooltip");
   });
   return (() => {
-    var _el$ = _tmpl$58(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    var _el$ = _tmpl$62(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
     _el$.$$click = (e) => e.stopPropagation();
     insert(_el$, createComponent(DatePicker, {
       onDateChange: (date) => setSelectedDate(date),
@@ -4208,8 +4832,8 @@ var SnoozeDateTimePicker = (props) => {
 delegateEvents(["click"]);
 
 // src/ui/components/Notification/NotificationActions.tsx
-var _tmpl$59 = /* @__PURE__ */ template(`<div><span>`);
-var _tmpl$215 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$63 = /* @__PURE__ */ template(`<div><span>`);
+var _tmpl$217 = /* @__PURE__ */ template(`<span>`);
 var SNOOZE_PRESETS = [{
   key: "snooze.options.anHourFromNow",
   hours: 1,
@@ -4251,11 +4875,18 @@ 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", {
+    iconKey: "clock"
+  });
   const content = [(() => {
-    var _el$ = _tmpl$59(), _el$2 = _el$.firstChild;
-    insert(_el$, createComponent(Clock, {
-      get ["class"]() {
-        return style("notificationSnooze__dropdownItem__icon", "nt-size-3 nt-text-foreground-alpha-400 nt-mr-2");
+    var _el$ = _tmpl$63(), _el$2 = _el$.firstChild;
+    insert(_el$, createComponent(IconRendererWrapper, {
+      iconKey: "clock",
+      "class": snoozeItemIconClass,
+      get fallback() {
+        return createComponent(Clock, {
+          "class": snoozeItemIconClass
+        });
       }
     }), _el$2);
     insert(_el$2, () => props.label);
@@ -4270,7 +4901,7 @@ var SnoozeDropdownItem = (props) => {
     });
     return _el$;
   })(), (() => {
-    var _el$3 = _tmpl$215();
+    var _el$3 = _tmpl$217();
     insert(_el$3, () => props.time);
     effect(() => className(_el$3, style("dropdownItemRight__icon", "nt-text-foreground-alpha-300 nt-ml-2 nt-text-xs")));
     return _el$3;
@@ -4298,6 +4929,9 @@ var ReadButton = (props) => {
   const {
     t
   } = useLocalization();
+  const readIconClass = style("notificationRead__icon", "nt-size-3", {
+    iconKey: "markAsRead"
+  });
   return createComponent(Tooltip.Root, {
     get children() {
       return [createComponent(Tooltip.Trigger, {
@@ -4311,9 +4945,13 @@ var ReadButton = (props) => {
             yield props.notification.read();
           }),
           get children() {
-            return createComponent(MarkAsRead, {
-              get ["class"]() {
-                return style("notificationRead__icon", "nt-size-3");
+            return createComponent(IconRendererWrapper, {
+              iconKey: "markAsRead",
+              "class": readIconClass,
+              get fallback() {
+                return createComponent(MarkAsRead, {
+                  "class": readIconClass
+                });
               }
             });
           }
@@ -4332,6 +4970,9 @@ var UnreadButton = (props) => {
   const {
     t
   } = useLocalization();
+  const unreadIconClass = style("notificationUnread__icon", "nt-size-3", {
+    iconKey: "markAsUnread"
+  });
   return createComponent(Tooltip.Root, {
     get children() {
       return [createComponent(Tooltip.Trigger, {
@@ -4345,9 +4986,13 @@ var UnreadButton = (props) => {
             yield props.notification.unread();
           }),
           get children() {
-            return createComponent(MarkAsUnread, {
-              get ["class"]() {
-                return style("notificationUnread__icon", "nt-size-3");
+            return createComponent(IconRendererWrapper, {
+              iconKey: "markAsUnread",
+              "class": unreadIconClass,
+              get fallback() {
+                return createComponent(MarkAsUnread, {
+                  "class": unreadIconClass
+                });
               }
             });
           }
@@ -4366,6 +5011,9 @@ var ArchiveButton = (props) => {
   const {
     t
   } = useLocalization();
+  const archiveIconClass = style("notificationArchive__icon", "nt-size-3", {
+    iconKey: "markAsArchived"
+  });
   return createComponent(Tooltip.Root, {
     get children() {
       return [createComponent(Tooltip.Trigger, {
@@ -4379,9 +5027,13 @@ var ArchiveButton = (props) => {
             yield props.notification.archive();
           }),
           get children() {
-            return createComponent(MarkAsArchived, {
-              get ["class"]() {
-                return style("notificationArchive__icon", "nt-size-3");
+            return createComponent(IconRendererWrapper, {
+              iconKey: "markAsArchived",
+              "class": archiveIconClass,
+              get fallback() {
+                return createComponent(MarkAsArchived, {
+                  "class": archiveIconClass
+                });
               }
             });
           }
@@ -4400,6 +5052,9 @@ var UnarchiveButton = (props) => {
   const {
     t
   } = useLocalization();
+  const unarchiveIconClass = style("notificationArchive__icon", "nt-size-3", {
+    iconKey: "markAsUnarchived"
+  });
   return createComponent(Tooltip.Root, {
     get children() {
       return [createComponent(Tooltip.Trigger, {
@@ -4413,9 +5068,13 @@ var UnarchiveButton = (props) => {
             yield props.notification.unarchive();
           }),
           get children() {
-            return createComponent(MarkAsUnarchived, {
-              get ["class"]() {
-                return style("notificationArchive__icon", "nt-size-3");
+            return createComponent(IconRendererWrapper, {
+              iconKey: "markAsUnarchived",
+              "class": unarchiveIconClass,
+              get fallback() {
+                return createComponent(MarkAsUnarchived, {
+                  "class": unarchiveIconClass
+                });
               }
             });
           }
@@ -4434,6 +5093,9 @@ var UnsnoozeButton = (props) => {
   const {
     t
   } = useLocalization();
+  const unsnoozeIconClass = style("notificationUnsnooze__icon", "nt-size-3", {
+    iconKey: "unsnooze"
+  });
   return createComponent(Tooltip.Root, {
     get children() {
       return [createComponent(Tooltip.Trigger, {
@@ -4447,9 +5109,13 @@ var UnsnoozeButton = (props) => {
             yield props.notification.unsnooze();
           }),
           get children() {
-            return createComponent(Unsnooze, {
-              get ["class"]() {
-                return style("notificationUnsnooze__icon", "nt-size-3");
+            return createComponent(IconRendererWrapper, {
+              iconKey: "unsnooze",
+              "class": unsnoozeIconClass,
+              get fallback() {
+                return createComponent(Unsnooze, {
+                  "class": unsnoozeIconClass
+                });
               }
             });
           }
@@ -4473,6 +5139,9 @@ var SnoozeButton = (props) => {
     maxSnoozeDurationHours
   } = useInboxContext();
   const [isSnoozeDateTimePickerOpen, setIsSnoozeDateTimePickerOpen] = createSignal(false);
+  const snoozeButtonIconClass = style("notificationSnooze__icon", "nt-size-3", {
+    iconKey: "clock"
+  });
   const availableSnoozePresets = createMemo(() => {
     if (!maxSnoozeDurationHours()) return SNOOZE_PRESETS;
     return SNOOZE_PRESETS.filter((preset) => preset.hours <= maxSnoozeDurationHours());
@@ -4494,9 +5163,13 @@ var SnoozeButton = (props) => {
                   (_a = popoverProps.onClick) == null ? void 0 : _a.call(popoverProps, e);
                 },
                 get children() {
-                  return createComponent(Snooze, {
-                    get ["class"]() {
-                      return style("notificationSnooze__icon", "nt-size-3");
+                  return createComponent(IconRendererWrapper, {
+                    iconKey: "clock",
+                    "class": snoozeButtonIconClass,
+                    get fallback() {
+                      return createComponent(Clock, {
+                        "class": snoozeButtonIconClass
+                      });
                     }
                   });
                 }
@@ -4603,8 +5276,8 @@ var renderNotificationActions = (notification, status) => {
 };
 
 // src/ui/components/Notification/DefaultNotification.tsx
-var _tmpl$60 = /* @__PURE__ */ template(`<img>`);
-var _tmpl$216 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$64 = /* @__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 DefaultNotification = (props) => {
@@ -4618,6 +5291,12 @@ 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({
@@ -4683,13 +5362,13 @@ var DefaultNotification = (props) => {
       },
       get fallback() {
         return (() => {
-          var _el$9 = _tmpl$216();
+          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$60();
+        var _el$2 = _tmpl$64();
         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$);
@@ -4713,7 +5392,7 @@ var DefaultNotification = (props) => {
           },
           children: (subject) => createComponent(Markdown_default, {
             appearanceKey: "notificationSubject",
-            "class": "nt-text-start nt-font-medium",
+            "class": "nt-text-start nt-font-medium nt-whitespace-pre-wrap [word-break:break-word]",
             strongAppearanceKey: "notificationSubject__strong",
             get children() {
               return subject();
@@ -4733,7 +5412,7 @@ var DefaultNotification = (props) => {
         return createComponent(Markdown_default, {
           appearanceKey: "notificationBody",
           strongAppearanceKey: "notificationBody__strong",
-          "class": "nt-text-start nt-whitespace-pre-wrap nt-text-foreground-alpha-600",
+          "class": "nt-text-start nt-whitespace-pre-wrap nt-text-foreground-alpha-600 [word-break:break-word]",
           get children() {
             return props.notification.body;
           }
@@ -4749,7 +5428,7 @@ var DefaultNotification = (props) => {
         return props.notification.primaryAction || props.notification.secondaryAction;
       },
       get children() {
-        var _el$6 = _tmpl$216();
+        var _el$6 = _tmpl$218();
         insert(_el$6, createComponent(Show, {
           get when() {
             return props.notification.primaryAction;
@@ -4818,9 +5497,13 @@ var DefaultNotification = (props) => {
                     return createComponent(Badge, {
                       appearanceKey: "notificationDeliveredAt__badge",
                       get children() {
-                        return [createComponent(Clock, {
-                          get ["class"]() {
-                            return style("notificationDeliveredAt__icon", "nt-size-3");
+                        return [createComponent(IconRendererWrapper, {
+                          iconKey: "clock",
+                          "class": deliveredAtIconClass,
+                          get fallback() {
+                            return createComponent(Clock, {
+                              "class": deliveredAtIconClass
+                            });
                           }
                         }), date];
                       }
@@ -4832,9 +5515,13 @@ var DefaultNotification = (props) => {
           })
         });
       },
-      children: (snoozedUntil2) => [createComponent(Clock, {
-        get ["class"]() {
-          return style("notificationSnoozedUntil__icon", "nt-size-3");
+      children: (snoozedUntil2) => [createComponent(IconRendererWrapper, {
+        iconKey: "clock",
+        "class": snoozedUntilIconClass,
+        get fallback() {
+          return createComponent(Clock, {
+            "class": snoozedUntilIconClass
+          });
         }
       }), memo(() => t("notification.snoozedUntil")), " \xB7 ", memo(snoozedUntil2)]
     }));
@@ -4932,14 +5619,14 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$61 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$65 = /* @__PURE__ */ template(`<div>`);
 var NotificationListSkeleton = (props) => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$61();
+    var _el$ = _tmpl$65();
     insert(_el$, createComponent(Motion.div, {
       get animate() {
         return {
@@ -4978,7 +5665,7 @@ var NotificationListSkeleton = (props) => {
               appearanceKey: "notificationList__skeletonAvatar",
               "class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
             }), (() => {
-              var _el$3 = _tmpl$61();
+              var _el$3 = _tmpl$65();
               insert(_el$3, createComponent(SkeletonText, {
                 appearanceKey: "notificationList__skeletonText",
                 "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -4992,7 +5679,7 @@ var NotificationListSkeleton = (props) => {
             })()];
           }
         }))), (() => {
-          var _el$2 = _tmpl$61();
+          var _el$2 = _tmpl$65();
           effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
           return _el$2;
         })()];
@@ -5037,8 +5724,8 @@ var NotificationListSkeleton = (props) => {
 };
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$217 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$66 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$219 = /* @__PURE__ */ template(`<div><div>`);
 var NotificationList = (props) => {
   var _a, _b;
   const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
@@ -5081,7 +5768,7 @@ var NotificationList = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$217(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$219(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(NewMessagesCta, {
       get count() {
         return count();
@@ -5138,7 +5825,7 @@ var NotificationList = (props) => {
             return !end();
           },
           get children() {
-            var _el$3 = _tmpl$62();
+            var _el$3 = _tmpl$66();
             use(setEl, _el$3);
             insert(_el$3, createComponent(NotificationListSkeleton, {
               loading: true
@@ -5160,13 +5847,13 @@ var NotificationList = (props) => {
     return _el$;
   })();
 };
-var _tmpl$63 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$67 = /* @__PURE__ */ template(`<span>`);
 var getDisplayCount = (count) => count >= 100 ? "99+" : count;
 var InboxTabUnreadNotificationsCount = (props) => {
   const style = useStyle();
   const displayCount = createMemo(() => getDisplayCount(props.count));
   return (() => {
-    var _el$ = _tmpl$63();
+    var _el$ = _tmpl$67();
     insert(_el$, displayCount);
     effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
     return _el$;
@@ -5191,7 +5878,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$63();
+        var _el$2 = _tmpl$67();
         insert(_el$2, () => props.label);
         effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -5229,7 +5916,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$63();
+        var _el$3 = _tmpl$67();
         insert(_el$3, () => props.label);
         effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -5271,15 +5958,25 @@ var InboxTabs = (props) => {
       tags: getTagsFromTab(tab)
     }))
   });
+  const checkIconClass = style("moreTabs__dropdownItemRight__icon", "nt-size-3", {
+    iconKey: "check"
+  });
   const options = createMemo(() => dropdownTabs().map((tab) => __spreadProps(__spreadValues({}, tab), {
-    rightIcon: tab.label === activeTab() ? createComponent(Check, {
-      get ["class"]() {
-        return style("moreTabs__dropdownItemRight__icon", "nt-size-3");
+    rightIcon: tab.label === activeTab() ? createComponent(IconRendererWrapper, {
+      iconKey: "check",
+      "class": checkIconClass,
+      get fallback() {
+        return createComponent(Check, {
+          "class": checkIconClass
+        });
       }
     }) : void 0
   })));
   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", {
+    iconKey: "arrowDown"
+  });
   return createComponent(Tabs.Root, {
     appearanceKey: "notificationsTabs__tabsRoot",
     "class": "nt-flex nt-flex-col nt-flex-1 nt-min-h-0",
@@ -5332,9 +6029,13 @@ var InboxTabs = (props) => {
                             return cn(tabsDropdownTriggerVariants(), "nt-ml-auto", isTabsDropdownActive() ? "after:nt-border-b-primary" : "after:nt-border-b-transparent nt-text-foreground-alpha-700");
                           },
                           get children() {
-                            return [createComponent(ArrowDown, {
-                              get ["class"]() {
-                                return style("moreTabs__icon", "nt-size-5");
+                            return [createComponent(IconRendererWrapper, {
+                              iconKey: "arrowDown",
+                              "class": moreTabsIconClass,
+                              get fallback() {
+                                return createComponent(ArrowDown, {
+                                  "class": moreTabsIconClass
+                                });
                               }
                             }), createComponent(Show, {
                               get when() {
@@ -5410,13 +6111,16 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$64 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$68 = /* @__PURE__ */ template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
   return InboxPage2;
 }({});
 var InboxContent = (props) => {
+  const {
+    isDevelopmentMode
+  } = useInboxContext();
   const [currentPage, setCurrentPage] = createSignal(props.initialPage || InboxPage.Notifications);
   const {
     tabs,
@@ -5432,7 +6136,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$64();
+    var _el$ = _tmpl$68();
     insert(_el$, createComponent(Switch$1, {
       get children() {
         return [createComponent(Match, {
@@ -5516,7 +6220,10 @@ var InboxContent = (props) => {
       }
     }), null);
     insert(_el$, createComponent(Footer, {}), null);
-    effect(() => className(_el$, style("inboxContent", "nt-h-full nt-flex nt-flex-col")));
+    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-8 [&_.nv-notificationList]:nt-pb-8": isDevelopmentMode(),
+      "[&_.nv-preferencesContainer]:nt-pb-4 [&_.nv-notificationList]:nt-pb-4": !isDevelopmentMode()
+    }))));
     return _el$;
   })();
 };
@@ -5663,18 +6370,20 @@ var novuComponents = {
 var Renderer = (props) => {
   const nodes = () => [...props.nodes.keys()];
   onMount(() => {
-    const id = "novu-default-css";
-    const el = document.getElementById(id);
+    var _a;
+    const id = NOVU_DEFAULT_CSS_ID;
+    const root = props.container instanceof ShadowRoot ? props.container : document;
+    const el = root.getElementById(id);
     if (el) {
       return;
     }
     const styleEl = document.createElement("style");
     styleEl.id = id;
-    document.head.insertBefore(styleEl, document.head.firstChild);
     styleEl.innerHTML = ui_default;
+    const stylesContainer = (_a = props.container) != null ? _a : document.head;
+    stylesContainer.insertBefore(styleEl, stylesContainer.firstChild);
     onCleanup(() => {
-      const element = document.getElementById(id);
-      element == null ? void 0 : element.remove();
+      styleEl.remove();
     });
   });
   return createComponent(NovuProvider, {
@@ -5697,6 +6406,9 @@ var Renderer = (props) => {
             get appearance() {
               return props.appearance;
             },
+            get container() {
+              return props.container;
+            },
             get children() {
               return createComponent(FocusManagerProvider, {
                 get children() {
@@ -5707,6 +6419,9 @@ var Renderer = (props) => {
                     get preferencesFilter() {
                       return props.preferencesFilter;
                     },
+                    get preferenceGroups() {
+                      return props.preferenceGroups;
+                    },
                     get routerPush() {
                       return props.routerPush;
                     },
@@ -5760,11 +6475,13 @@ var Renderer = (props) => {
 };
 
 // src/ui/novuUI.tsx
-var _dispose, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _preferencesFilter, _setPreferencesFilter, _predefinedNovu, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
+var _dispose, _container, _setContainer, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _preferencesFilter, _setPreferencesFilter, _preferenceGroups, _setPreferenceGroups, _predefinedNovu, _NovuUI_instances, getContainerElement_fn, mountComponentRenderer_fn, updateComponentProps_fn;
 var NovuUI = class {
   constructor(props) {
     __privateAdd(this, _NovuUI_instances);
     __privateAdd(this, _dispose, null);
+    __privateAdd(this, _container);
+    __privateAdd(this, _setContainer);
     __privateAdd(this, _rootElement);
     __privateAdd(this, _mountedElements);
     __privateAdd(this, _setMountedElements);
@@ -5780,6 +6497,8 @@ var NovuUI = class {
     __privateAdd(this, _setRouterPush);
     __privateAdd(this, _preferencesFilter);
     __privateAdd(this, _setPreferencesFilter);
+    __privateAdd(this, _preferenceGroups);
+    __privateAdd(this, _setPreferenceGroups);
     __privateAdd(this, _predefinedNovu);
     var _a;
     this.id = generateRandomString(16);
@@ -5789,7 +6508,9 @@ var NovuUI = class {
     const [mountedElements, setMountedElements] = createSignal(/* @__PURE__ */ new Map());
     const [tabs, setTabs] = createSignal((_a = props.tabs) != null ? _a : []);
     const [preferencesFilter, setPreferencesFilter] = createSignal(props.preferencesFilter);
+    const [preferenceGroups, setPreferenceGroups] = createSignal(props.preferenceGroups);
     const [routerPush, setRouterPush] = createSignal(props.routerPush);
+    const [container, setContainer] = createSignal(__privateMethod(this, _NovuUI_instances, getContainerElement_fn).call(this, props.container));
     __privateSet(this, _mountedElements, mountedElements);
     __privateSet(this, _setMountedElements, setMountedElements);
     __privateSet(this, _appearance, appearance);
@@ -5805,6 +6526,10 @@ var NovuUI = class {
     __privateSet(this, _predefinedNovu, props.novu);
     __privateSet(this, _preferencesFilter, preferencesFilter);
     __privateSet(this, _setPreferencesFilter, setPreferencesFilter);
+    __privateSet(this, _preferenceGroups, preferenceGroups);
+    __privateSet(this, _setPreferenceGroups, setPreferenceGroups);
+    __privateSet(this, _container, container);
+    __privateSet(this, _setContainer, setContainer);
     __privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
   }
   mountComponent({
@@ -5846,9 +6571,15 @@ var NovuUI = class {
   updatePreferencesFilter(preferencesFilter) {
     __privateGet(this, _setPreferencesFilter).call(this, preferencesFilter);
   }
+  updatePreferenceGroups(preferenceGroups) {
+    __privateGet(this, _setPreferenceGroups).call(this, preferenceGroups);
+  }
   updateRouterPush(routerPush) {
     __privateGet(this, _setRouterPush).call(this, () => routerPush);
   }
+  updateContainer(container) {
+    __privateGet(this, _setContainer).call(this, __privateMethod(this, _NovuUI_instances, getContainerElement_fn).call(this, container));
+  }
   unmount() {
     var _a, _b;
     (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
@@ -5857,6 +6588,8 @@ var NovuUI = class {
   }
 };
 _dispose = new WeakMap();
+_container = new WeakMap();
+_setContainer = new WeakMap();
 _rootElement = new WeakMap();
 _mountedElements = new WeakMap();
 _setMountedElements = new WeakMap();
@@ -5872,15 +6605,28 @@ _routerPush = new WeakMap();
 _setRouterPush = new WeakMap();
 _preferencesFilter = new WeakMap();
 _setPreferencesFilter = new WeakMap();
+_preferenceGroups = new WeakMap();
+_setPreferenceGroups = new WeakMap();
 _predefinedNovu = new WeakMap();
 _NovuUI_instances = new WeakSet();
+getContainerElement_fn = function(container) {
+  var _a;
+  if (container === null || container === void 0) {
+    return container;
+  }
+  if (typeof container === "string") {
+    return (_a = document.querySelector(container)) != null ? _a : document.getElementById(container);
+  }
+  return container;
+};
 mountComponentRenderer_fn = function() {
   if (__privateGet(this, _dispose) !== null) {
     return;
   }
   __privateSet(this, _rootElement, document.createElement("div"));
   __privateGet(this, _rootElement).setAttribute("id", `novu-ui-${this.id}`);
-  document.body.appendChild(__privateGet(this, _rootElement));
+  const container = __privateGet(this, _container).call(this);
+  (container != null ? container : document.body).appendChild(__privateGet(this, _rootElement));
   const dispose = render(() => {
     const _self$ = this;
     return createComponent(Renderer, {
@@ -5909,12 +6655,20 @@ mountComponentRenderer_fn = function() {
         var _a;
         return __privateGet(_a = _self$, _preferencesFilter).call(_a);
       },
+      get preferenceGroups() {
+        var _a;
+        return __privateGet(_a = _self$, _preferenceGroups).call(_a);
+      },
       get routerPush() {
         var _a;
         return __privateGet(_a = _self$, _routerPush).call(_a);
       },
       get novu() {
         return __privateGet(_self$, _predefinedNovu);
+      },
+      get container() {
+        var _a;
+        return __privateGet(_a = _self$, _container).call(_a);
       }
     });
   }, __privateGet(this, _rootElement));