@novu/js 3.5.0-rc.1 → 3.5.0-rc.3

package/dist/esm/ui/index.mjs

@@ -1,18 +1,18 @@
-import { Novu, isSameFilter } from '../chunk-P4YVABAC.mjs';
+import { Novu, DEFAULT_API_VERSION, isSameFilter } from '../chunk-T4OFEC3E.mjs';
 import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.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 { createComponent, mergeProps, delegateEvents, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
 import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, Index, batch } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import clsx from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
 import { autoUpdate, offset, flip, shift } from '@floating-ui/dom';
 import { useFloating } from 'solid-floating-ui';
 import { Motion as Motion$1 } from 'solid-motionone';
+import { cva } from 'class-variance-authority';
 
-// _vl50ob9im:/Users/dimagrossman/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-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}`;
+// _gl34gdy6p:/Users/dimagrossman/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--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-1{margin-left:.25rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-1{margin-top:.25rem}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-3\\.5{height:.875rem;width:.875rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-translate-x-1\\/2{--tw-translate-x:50%}.nt-transform,.nt-translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-not-allowed{cursor:not-allowed}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-200{border-color:var(--nv-color-neutral-alpha-200)}.nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-\\[12px\\]{font-size:12px}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-\\[\\#000000\\]{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.nt-underline{text-decoration-line:underline}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-opacity-50{opacity:.5}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-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 = [
@@ -76,6 +76,7 @@ var appearanceKeys = [
   // General
   "root",
   "bellIcon",
+  "lockIcon",
   "bellContainer",
   "bellDot",
   "preferences__button",
@@ -693,14 +694,6 @@ var useStyle = () => {
   );
   return styleFuncMemo();
 };
-function useUncontrolledState(props) {
-  const [uncontrolledValue, setUncontrolledValue] = createSignal(!!props.fallbackValue);
-  if (props.value !== void 0) {
-    const accessor = () => !!props.value;
-    return [accessor, setUncontrolledValue];
-  }
-  return [uncontrolledValue, setUncontrolledValue];
-}
 
 // src/ui/context/AppearanceContext.tsx
 var AppearanceContext = createContext(void 0);
@@ -967,6 +960,8 @@ var InboxProvider = (props) => {
   const [maxSnoozeDurationHours, setMaxSnoozeDurationHours] = createSignal(0);
   const isSnoozeEnabled = createMemo(() => maxSnoozeDurationHours() > 0);
   const [preferencesFilter, setPreferencesFilter] = createSignal(props.preferencesFilter);
+  const [isKeyless, setIsKeyless] = createSignal(false);
+  const [applicationIdentifier, setApplicationIdentifier] = createSignal(null);
   const [preferenceGroups, setPreferenceGroups] = createSignal(props.preferenceGroups);
   const setNewStatus = (newStatus) => {
     setStatus(newStatus);
@@ -1028,12 +1023,16 @@ var InboxProvider = (props) => {
     eventHandler: ({
       data
     }) => {
+      var _a2;
       if (!data) {
         return;
       }
+      const identifier = window.localStorage.getItem("novu_keyless_application_identifier");
       setHideBranding(data.removeNovuBranding);
       setIsDevelopmentMode(data.isDevelopmentMode);
       setMaxSnoozeDurationHours(data.maxSnoozeDurationHours);
+      setIsKeyless(!data.applicationIdentifier || !!(identifier == null ? void 0 : identifier.startsWith("pk_keyless_")));
+      setApplicationIdentifier((_a2 = data.applicationIdentifier) != null ? _a2 : null);
     }
   });
   return createComponent(InboxContext.Provider, {
@@ -1054,7 +1053,9 @@ var InboxProvider = (props) => {
       preferenceGroups,
       isDevelopmentMode,
       maxSnoozeDurationHours,
-      isSnoozeEnabled
+      isSnoozeEnabled,
+      isKeyless,
+      applicationIdentifier
     },
     get children() {
       return props.children;
@@ -1155,32 +1156,33 @@ var CountProvider = (props) => {
       setTotalUnreadCount(data.totalUnreadCount);
     }
   });
-  const updateNewNotificationCountsOrCache = (notification, tags) => {
+  const updateNewNotificationCountsOrCache = (notification, tags, data) => {
     const notificationsCache = novu.notifications.cache;
     const limitValue = limit();
-    const tabFilter = __spreadProps(__spreadValues({}, filter()), {
+    const tabSpecificFilterForCache = __spreadProps(__spreadValues({}, filter()), {
       tags,
+      data,
       after: void 0,
       limit: limitValue
     });
-    const hasEmptyCache = !notificationsCache.has(tabFilter);
+    const hasEmptyCache = !notificationsCache.has(tabSpecificFilterForCache);
     if (!isOpened() && hasEmptyCache) {
       return;
     }
-    const cachedData = notificationsCache.getAll(tabFilter) || {
+    const cachedData = notificationsCache.getAll(tabSpecificFilterForCache) || {
       hasMore: false,
-      filter: tabFilter,
+      filter: tabSpecificFilterForCache,
       notifications: []
     };
     const hasLessThenMinAmount = ((cachedData == null ? void 0 : cachedData.notifications.length) || 0) < MIN_AMOUNT_OF_NOTIFICATIONS;
     if (hasLessThenMinAmount) {
-      notificationsCache.update(tabFilter, __spreadProps(__spreadValues({}, cachedData), {
+      notificationsCache.update(tabSpecificFilterForCache, __spreadProps(__spreadValues({}, cachedData), {
         notifications: [notification, ...cachedData.notifications]
       }));
       return;
     }
     setNewNotificationCounts((oldMap) => {
-      const key = createKey(tags, tabFilter.data);
+      const key = createKey(tags, data);
       const newMap = new Map(oldMap);
       newMap.set(key, (oldMap.get(key) || 0) + 1);
       return newMap;
@@ -1191,32 +1193,49 @@ var CountProvider = (props) => {
     eventHandler: (_0) => __async(void 0, [_0], function* ({
       result: notification
     }) {
+      var _a;
       if (filter().archived || filter().snoozed) {
         return;
       }
-      const tagsMap = tabs().reduce((acc, tab) => {
-        var _a;
-        const tags = getTagsFromTab(tab);
-        const tagsKey = createKey(tags, (_a = tab.filter) == null ? void 0 : _a.data);
-        acc.set(tagsKey, tags);
-        return acc;
-      }, /* @__PURE__ */ new Map());
-      const uniqueTags = Array.from(tagsMap.values());
-      if (uniqueTags.length > 0) {
-        for (let i = 0; i < uniqueTags.length; i += 1) {
-          const tags = uniqueTags[i];
-          const allNotifications = tags.length === 0;
-          const includesAtLeastOneTag = tags.some((tag) => {
-            var _a;
-            return (_a = notification.tags) == null ? void 0 : _a.includes(tag);
-          });
-          if (!allNotifications && !includesAtLeastOneTag) {
-            continue;
+      const currentTabs = tabs();
+      function checkNotificationDataAgainstTabData(notificationData, tabFilterData) {
+        if (!tabFilterData || Object.keys(tabFilterData).length === 0) {
+          return true;
+        }
+        if (!notificationData) {
+          return false;
+        }
+        return Object.entries(tabFilterData).every(([key, filterValue]) => {
+          const notifValue = notificationData[key];
+          if (notifValue === void 0 && filterValue !== void 0) {
+            return false;
+          }
+          if (Array.isArray(filterValue)) {
+            if (Array.isArray(notifValue)) {
+              if (filterValue.length !== notifValue.length) return false;
+              const sortedFilterValue = [...filterValue].sort();
+              const sortedNotifValue = [...notifValue].sort();
+              return sortedFilterValue.every((val, index) => val === sortedNotifValue[index]);
+            } else {
+              return filterValue.includes(notifValue);
+            }
+          } else {
+            return notifValue === filterValue;
+          }
+        });
+      }
+      if (currentTabs.length > 0) {
+        for (const tab of currentTabs) {
+          const tabTags = getTagsFromTab(tab);
+          const tabDataFilterCriteria = (_a = tab.filter) == null ? void 0 : _a.data;
+          const matchesTagFilter = tabTags.length === 0 || notification.tags && tabTags.some((tag) => notification.tags.includes(tag));
+          const matchesDataFilterCriteria = checkNotificationDataAgainstTabData(notification.data, tabDataFilterCriteria);
+          if (matchesTagFilter && matchesDataFilterCriteria) {
+            updateNewNotificationCountsOrCache(notification, tabTags, tabDataFilterCriteria);
           }
-          updateNewNotificationCountsOrCache(notification, tags);
         }
       } else {
-        updateNewNotificationCountsOrCache(notification, []);
+        updateNewNotificationCountsOrCache(notification, [], void 0);
       }
     })
   });
@@ -1642,248 +1661,125 @@ var Bell2 = (props) => {
 function isBrowser() {
   return typeof window !== "undefined";
 }
-
-// src/ui/components/elements/Footer.tsx
-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]`;
-var commonAfter = 'after:nt-content-[""] after:nt-absolute after:nt-inset-0 after:-nt-top-12';
-var devModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-stripes)_l_c_h_/_0.07)_55%,transparent),linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
-var prodModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
-var Footer = () => {
-  const {
-    hideBranding,
-    isDevelopmentMode
-  } = useInboxContext();
-  return createComponent(Show, {
-    get when() {
-      return !hideBranding() || isDevelopmentMode();
-    },
-    get children() {
-      var _el$ = _tmpl$42();
-      _el$.style.setProperty("--stripes-size", "15px");
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return isDevelopmentMode();
-        },
-        get children() {
-          return _tmpl$25();
-        }
-      }), null);
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return memo(() => !!isDevelopmentMode())() && !hideBranding();
-        },
-        get children() {
-          return _tmpl$26();
-        }
-      }), null);
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return !hideBranding();
-        },
-        get children() {
-          var _el$4 = _tmpl$32(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
-          insert(_el$4, createComponent(Novu2, {
-            "class": "nt-size-2.5"
-          }), _el$6);
-          effect(() => setAttribute(_el$4, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
-          return _el$4;
-        }
-      }), null);
-      effect(() => className(_el$, cn(`nt-relative nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-400`, {
-        [stripes]: isDevelopmentMode(),
-        [devModeGradient]: isDevelopmentMode(),
-        "nt-bg-[oklch(from_var(--nv-color-stripes)_l_c_h_/_0.1)]": isDevelopmentMode(),
-        [prodModeGradient]: !isDevelopmentMode()
-      })));
-      return _el$;
-    }
-  });
-};
-function getCurrentDomain() {
-  if (isBrowser()) {
-    return window.location.hostname;
-  }
-  return "";
-}
-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: {
-      default: "nt-bg-gradient-to-b nt-from-20% nt-from-primary-foreground-alpha-200 nt-to-transparent nt-bg-primary nt-text-primary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-primary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-primary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-primary-foreground-alpha-50 after:nt-to-transparent",
-      secondary: "nt-bg-secondary nt-text-secondary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-secondary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-secondary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-secondary-foreground-alpha-50 after:nt-to-transparent",
-      ghost: "hover:nt-bg-neutral-alpha-100 nt-text-foreground-alpha-600 hover:nt-text-foreground-alpha-800",
-      unstyled: ""
-    },
-    size: {
-      none: "",
-      iconSm: "nt-p-1 nt-rounded-md after:nt-rounded-md before:nt-rounded-md focus-visible:nt-rounded-md",
-      icon: "nt-p-2.5 nt-rounded-xl before:nt-rounded-xl after:nt-rounded-xl focus-visible:nt-rounded-xl",
-      default: "nt-px-2 nt-py-1 nt-rounded-lg focus-visible:nt-rounded-lg before:nt-rounded-lg after:nt-rounded-lg",
-      sm: "nt-px-1 nt-py-px nt-rounded-md nt-text-xs nt-px-1 before:nt-rounded-md focus-visible:nt-rounded-md after:nt-rounded-md",
-      lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-lg after:nt-rounded-lg focus-visible:nt-rounded-lg"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-});
-var Button = (props) => {
-  const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
-  const style = useStyle();
-  return (() => {
-    var _el$ = _tmpl$27();
-    spread(_el$, mergeProps({
-      get ["data-variant"]() {
-        return props.variant;
-      },
-      get ["data-size"]() {
-        return props.size;
-      },
-      get ["class"]() {
-        return style(local.appearanceKey || "button", cn(buttonVariants({
-          variant: props.variant,
-          size: props.size
-        }), local.class));
-      }
-    }, rest), false, false);
-    return _el$;
-  })();
-};
-var _tmpl$28 = /* @__PURE__ */ template(`<button>`);
-var PopoverClose = (props) => {
-  const {
-    onClose
-  } = usePopover();
-  const style = useStyle();
-  const [local, rest] = splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
-  const handleClick = (e) => {
-    if (typeof local.onClick === "function") {
-      local.onClick(e);
-    }
-    onClose();
-  };
-  if (local.asChild) {
-    return createComponent(Dynamic, mergeProps({
-      get component() {
-        return local.asChild;
-      },
-      onClick: handleClick
-    }, rest));
-  }
+var _tmpl$25 = /* @__PURE__ */ template(`<svg width=6 height=6 viewBox="0 0 6 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00175 1.70402L0.705765 6L0 5.29424L4.29548 0.998253H0.509608V0H6V5.49039H5.00175V1.70402Z"fill=currentColor>`);
+var ArrowUpRight = (props) => {
   return (() => {
-    var _el$ = _tmpl$28();
-    _el$.$$click = handleClick;
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return style(local.appearanceKey || "popoverClose", local.class);
-      }
-    }, rest), false, false);
+    var _el$ = _tmpl$25();
+    spread(_el$, props, true, true);
     return _el$;
   })();
 };
-delegateEvents(["click"]);
-var _tmpl$29 = /* @__PURE__ */ template(`<div>`);
-var Portal = (props) => {
-  const appearance = useAppearance();
-  let currentElement;
-  return [(() => {
-    var _el$ = _tmpl$29();
-    use((el) => {
-      currentElement = el;
-    }, _el$);
-    _el$.style.setProperty("display", "none");
-    return _el$;
-  })(), createComponent(Portal$1, mergeProps({
-    get mount() {
-      return closestNovuRootParent(currentElement, appearance.id());
-    }
-  }, props))];
-};
-var closestNovuRootParent = (el, id) => {
-  let element = el;
-  while (element && element.id !== `novu-root-${id}`) {
-    element = element.parentElement;
-  }
-  if (element && element.id === `novu-root-${id}`) {
-    return element;
-  }
-  return void 0;
-};
-var PopoverContext = createContext(void 0);
-function PopoverRoot(props) {
+var TooltipContext = createContext(void 0);
+function TooltipRoot(props) {
   var _a;
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = createSignal((_a = props.open) != null ? _a : false);
-  const onOpenChange = () => {
-    var _a2;
-    return (_a2 = props.onOpenChange) != null ? _a2 : setUncontrolledIsOpen;
-  };
-  const open = () => {
-    var _a2;
-    return (_a2 = props.open) != null ? _a2 : uncontrolledIsOpen();
-  };
   const [reference, setReference] = createSignal(null);
   const [floating, setFloating] = createSignal(null);
+  const {
+    animations
+  } = useAppearance();
+  const defaultAnimationDuration = 0.2;
+  const actualAnimationDuration = () => {
+    var _a2;
+    return (_a2 = props.animationDuration) != null ? _a2 : defaultAnimationDuration;
+  };
+  const effectiveAnimationDuration = createMemo(() => animations() ? actualAnimationDuration() : 0);
   const position = useFloating(reference, floating, {
-    strategy: "absolute",
-    placement: props.placement,
+    placement: props.placement || "top",
+    strategy: "fixed",
     whileElementsMounted: autoUpdate,
     middleware: [offset(10), flip({
-      fallbackPlacements: props.fallbackPlacements
+      fallbackPlacements: props.fallbackPlacements || ["bottom"]
     }), shift()]
   });
-  const floatingStyles = createMemo(() => {
-    var _a2, _b;
-    return {
-      position: position.strategy,
-      top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
-      left: `${(_b = position.x) != null ? _b : 0}px`
-    };
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal((_a = props.open) != null ? _a : false);
+  const openAccessor = createMemo(() => {
+    return props.open !== void 0 ? !!props.open : uncontrolledOpen();
   });
-  const onClose = () => {
-    onOpenChange()(false);
-  };
-  const onToggle = () => {
-    onOpenChange()((prev) => !prev);
+  const setOpenSetter = (valueOrFn) => {
+    if (props.open === void 0) {
+      setUncontrolledOpen(valueOrFn);
+    }
   };
-  return createComponent(PopoverContext.Provider, {
+  const [shouldRenderTooltip, setShouldRenderTooltip] = createSignal(openAccessor());
+  let renderTimeoutId;
+  createEffect(() => {
+    const isOpen = openAccessor();
+    if (renderTimeoutId) {
+      clearTimeout(renderTimeoutId);
+      renderTimeoutId = void 0;
+    }
+    if (isOpen) {
+      setShouldRenderTooltip(true);
+    } else if (effectiveAnimationDuration() > 0) {
+      renderTimeoutId = window.setTimeout(() => {
+        setShouldRenderTooltip(false);
+      }, effectiveAnimationDuration() * 1e3);
+    } else {
+      setShouldRenderTooltip(false);
+    }
+  });
+  createEffect(() => {
+    if (openAccessor()) {
+      setShouldRenderTooltip(true);
+    }
+  });
+  return createComponent(TooltipContext.Provider, {
     value: {
-      onToggle,
-      onClose,
       reference,
       setReference,
       floating,
       setFloating,
-      open,
-      floatingStyles
+      open: openAccessor,
+      shouldRender: shouldRenderTooltip,
+      setOpen: setOpenSetter,
+      floatingStyles: () => {
+        var _a2, _b;
+        return {
+          position: position.strategy,
+          top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
+          left: `${(_b = position.x) != null ? _b : 0}px`
+        };
+      },
+      effectiveAnimationDuration
     },
     get children() {
       return props.children;
     }
   });
 }
-function usePopover() {
-  const context = useContext(PopoverContext);
+function useTooltip() {
+  const context = useContext(TooltipContext);
   if (!context) {
-    throw new Error("usePopover must be used within Popover.Root component");
+    throw new Error("useTooltip must be used within Tooltip.Root component");
   }
   return context;
 }
+var Motion = new Proxy(Motion$1, {
+  get: (_, tag) => (props) => {
+    const {
+      animations
+    } = useAppearance();
+    return createComponent(Motion$1, mergeProps(props, {
+      tag,
+      get transition() {
+        return animations() ? props.transition : {
+          duration: 0
+        };
+      }
+    }));
+  }
+});
 
-// src/ui/components/primitives/Popover/PopoverContent.tsx
-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) => {
+// src/ui/components/primitives/Tooltip/TooltipContent.tsx
+var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
+var TooltipContentBody = (props) => {
   const {
     open,
     setFloating,
     floating,
-    floatingStyles
-  } = usePopover();
+    floatingStyles,
+    effectiveAnimationDuration
+  } = useTooltip();
   const {
     setActive,
     removeActive
@@ -1892,80 +1788,72 @@ var PopoverContentBody = (props) => {
   const style = useStyle();
   onMount(() => {
     const floatingEl = floating();
-    setActive(floatingEl);
+    if (floatingEl) setActive(floatingEl);
     onCleanup(() => {
-      removeActive(floatingEl);
+      if (floatingEl) removeActive(floatingEl);
     });
   });
-  return (() => {
-    var _el$ = _tmpl$30();
-    use(setFloating, _el$);
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
-      },
-      get style() {
-        return floatingStyles();
-      },
-      get ["data-open"]() {
-        return open();
-      }
-    }, rest), false, false);
-    return _el$;
-  })();
+  return createComponent(Motion.div, mergeProps({
+    initial: {
+      opacity: 0,
+      scale: 0.95
+    },
+    get animate() {
+      return open() ? {
+        opacity: 1,
+        scale: 1
+      } : {
+        opacity: 0,
+        scale: 0.95
+      };
+    },
+    get transition() {
+      return {
+        duration: effectiveAnimationDuration(),
+        easing: "ease-in-out"
+      };
+    },
+    ref: setFloating,
+    get ["class"]() {
+      return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
+    },
+    get style() {
+      return __spreadProps(__spreadValues({}, floatingStyles()), {
+        "z-index": 99999
+      });
+    }
+  }, rest, {
+    get children() {
+      return props.children;
+    }
+  }));
 };
-var PopoverContent = (props) => {
-  const {
-    open,
-    onClose,
-    reference,
-    floating
-  } = usePopover();
+var TooltipContent = (props) => {
   const {
-    active
-  } = useFocusManager();
+    shouldRender
+  } = useTooltip();
   const {
     container
   } = useAppearance();
-  const handleClickOutside = (e) => {
-    var _a, _b;
-    if ((_a = reference()) == null ? void 0 : _a.contains(e.target)) {
-      return;
-    }
-    const containerElement = container();
-    if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target)) || containerElement && e.target.shadowRoot === containerElement) {
-      return;
-    }
-    onClose();
-  };
-  const handleEscapeKey = (e) => {
-    if (active() !== floating()) {
-      return;
-    }
-    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(() => {
+  const portalContainer = () => {
     var _a;
-    document.body.removeEventListener("click", handleClickOutside);
-    (_a = container()) == null ? void 0 : _a.removeEventListener("click", handleClickOutside);
-    document.body.removeEventListener("keydown", handleEscapeKey);
-  });
+    return (_a = container()) != null ? _a : document.body;
+  };
   return createComponent(Show, {
     get when() {
-      return open();
+      return shouldRender();
     },
     get children() {
       return createComponent(Portal, {
+        get mount() {
+          return portalContainer();
+        },
         get children() {
-          return createComponent(PopoverContentBody, props);
+          return createComponent(Root, {
+            get children() {
+              return createComponent(TooltipContentBody, props);
+            }
+          });
         }
       });
     }
@@ -1982,22 +1870,28 @@ function mergeRefs(...refs) {
   return chain(refs);
 }
 
-// src/ui/components/primitives/Popover/PopoverTrigger.tsx
-var _tmpl$31 = /* @__PURE__ */ template(`<button>`);
-var PopoverTrigger = (props) => {
+// src/ui/components/primitives/Tooltip/TooltipTrigger.tsx
+var _tmpl$26 = /* @__PURE__ */ template(`<button>`);
+var TooltipTrigger = (props) => {
   const {
     setReference,
-    onToggle
-  } = usePopover();
+    setOpen
+  } = useTooltip();
   const style = useStyle();
-  const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
-  const handleClick = (e) => {
-    if (typeof local.onClick === "function") {
-      local.onClick(e);
+  const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
+  const handleMouseEnter = (e) => {
+    if (typeof local.onMouseEnter === "function") {
+      local.onMouseEnter(e);
     }
-    onToggle();
+    setOpen(true);
   };
   const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
+  const handleMouseLeave = (e) => {
+    if (typeof local.onMouseLeave === "function") {
+      local.onMouseLeave(e);
+    }
+    setOpen(false);
+  };
   if (local.asChild) {
     return createComponent(Dynamic, mergeProps({
       get component() {
@@ -2007,244 +1901,329 @@ var PopoverTrigger = (props) => {
         var _ref$ = ref();
         typeof _ref$ === "function" && _ref$(r$);
       },
-      onClick: handleClick
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
     }, rest));
   }
   return (() => {
-    var _el$ = _tmpl$31();
-    _el$.$$click = handleClick;
+    var _el$ = _tmpl$26();
+    _el$.addEventListener("mouseleave", () => {
+      setOpen(false);
+    });
+    _el$.addEventListener("mouseenter", () => {
+      setOpen(true);
+    });
     var _ref$2 = ref();
     typeof _ref$2 === "function" && use(_ref$2, _el$);
     spread(_el$, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "dropdownTrigger");
+        return style(local.appearanceKey || "tooltipTrigger");
       }
     }, rest), false, true);
     insert(_el$, () => props.children);
     return _el$;
   })();
 };
-delegateEvents(["click"]);
 
-// src/ui/components/primitives/Popover/index.ts
-var Popover = {
-  Root: PopoverRoot,
-  /**
-   * Popover.Trigger renders a `button` and has no default styling.
-   */
-  Trigger: PopoverTrigger,
+// src/ui/components/primitives/Tooltip/index.ts
+var Tooltip = {
+  Root: TooltipRoot,
   /**
-   * Popover.Content renders a `div` and has popover specific styling.
+   * Tooltip.Trigger renders a `button` and has no default styling.
    */
-  Content: PopoverContent,
+  Trigger: TooltipTrigger,
   /**
-   * Popover.Close renders a `button` and has no styling.
-   * Closes the popover when clicked.
-   * `onClick` function is propagated.
+   * Tooltip.Content renders a `div` and has popover specific styling.
    */
-  Close: PopoverClose
+  Content: TooltipContent
 };
-var dropdownContentVariants = () => "nt-p-1 nt-text-sm nt-min-w-52 nt-shadow-dropdown nt-h-fit nt-min-w-52 nt-w-max";
-var DropdownContent = (props) => {
-  const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
-  return createComponent(Popover.Content, mergeProps({
-    get appearanceKey() {
-      return local.appearanceKey || "dropdownContent";
+
+// src/ui/components/primitives/CopyToClipboard.tsx
+var _tmpl$27 = /* @__PURE__ */ template(`<button type=button>`);
+function CopyToClipboard(props) {
+  const [isCopied, setIsCopied] = createSignal(false);
+  const style = useStyle();
+  let timeoutId;
+  const defaultTooltipText = "Copied!";
+  const defaultTooltipDuration = 2e3;
+  function handleCopy() {
+    return __async(this, null, function* () {
+      var _a;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      try {
+        yield navigator.clipboard.writeText(props.textToCopy);
+        setIsCopied(true);
+        timeoutId = window.setTimeout(() => {
+          setIsCopied(false);
+          timeoutId = void 0;
+        }, (_a = props.tooltipDuration) != null ? _a : defaultTooltipDuration);
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+      }
+    });
+  }
+  return createComponent(Tooltip.Root, {
+    get open() {
+      return isCopied();
     },
-    get ["class"]() {
-      return cn(dropdownContentVariants(), local.class);
+    placement: "top",
+    animationDuration: 0.15,
+    get children() {
+      return [createComponent(Tooltip.Trigger, {
+        asChild: (triggerProps) => (() => {
+          var _el$ = _tmpl$27();
+          spread(_el$, mergeProps(triggerProps, {
+            "onClick": handleCopy,
+            get ["class"]() {
+              return style("button", "nt-cursor-pointer");
+            }
+          }), false, true);
+          insert(_el$, () => props.children);
+          return _el$;
+        })()
+      }), createComponent(Tooltip.Content, {
+        get children() {
+          var _a;
+          return (_a = props.tooltipText) != null ? _a : defaultTooltipText;
+        }
+      })];
     }
-  }, rest));
-};
-var dropdownItemVariants = () => "focus:nt-outline-none nt-flex nt-items-center nt-gap-1.5 nt-text-sm nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-2";
-var DropdownItem = (props) => {
-  const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class", "asChild"]);
+  });
+}
+
+// src/ui/components/elements/Footer.tsx
+var _tmpl$28 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">`);
+var _tmpl$29 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
+var _tmpl$32 = /* @__PURE__ */ template(`<a target=_blank class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
+var _tmpl$42 = /* @__PURE__ */ template(`<span class=nt-underline>Copy cURL`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-text-xs nt-text-secondary-foreground"><a href="https://go.novu.co/keyless?utm_campaign=footer-get_api_key"class="nt-underline nt-flex nt-items-center nt-gap-0.5"target=_blank rel="noopener noreferrer">Get API key</a><span>\u2022</span><span>\u2022</span><button type=button class=nt-underline>Send notification`);
+var _tmpl$62 = /* @__PURE__ */ template(`<div><div class="nt-flex nt-items-center nt-gap-1">`);
+var _tmpl$72 = /* @__PURE__ */ template(`<a href="https://go.novu.co/keyless?utm_campaign=keyless-mode"target=_blank rel="noopener noreferrer">Keyless mode`);
+var _tmpl$82 = /* @__PURE__ */ template(`<br>`);
+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]`;
+var commonAfter = 'after:nt-content-[""] after:nt-absolute after:nt-inset-0 after:-nt-top-12';
+var devModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-stripes)_l_c_h_/_0.07)_55%,transparent),linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
+var prodModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
+var Footer = () => {
   const {
-    onClose
-  } = usePopover();
-  const handleClick = (e) => {
-    if (typeof local.onClick === "function") {
-      local.onClick(e);
-    }
-    onClose();
-  };
-  if (local.asChild) {
-    return createComponent(Dynamic, mergeProps({
-      get component() {
-        return local.asChild;
-      },
-      onClick: handleClick
-    }, rest));
+    hideBranding,
+    isDevelopmentMode,
+    isKeyless
+  } = useInboxContext();
+  const novu = useNovu();
+  function handleTriggerHelloWorld() {
+    return __async(this, null, function* () {
+      try {
+        yield novu.notifications.triggerHelloWorldEvent();
+      } catch (error) {
+        console.error("Failed to send Hello World from UI via novu.notifications:", error);
+      }
+    });
   }
-  return createComponent(Popover.Close, mergeProps({
-    get appearanceKey() {
-      return local.appearanceKey || "dropdownItem";
-    },
-    get ["class"]() {
-      return cn(dropdownItemVariants(), local.class);
+  return createComponent(Show, {
+    get when() {
+      return !hideBranding() || isDevelopmentMode();
     },
-    onClick: (e) => {
-      if (typeof local.onClick === "function") {
-        local.onClick(e);
-      }
-      onClose();
-    }
-  }, rest));
-};
-var DropdownRoot = (props) => {
-  return createComponent(Popover.Root, mergeProps({
-    placement: "bottom",
-    fallbackPlacements: ["top"]
-  }, props));
-};
-var dropdownTriggerButtonVariants = () => `nt-relative nt-transition nt-outline-none focus-visible:nt-outline-nonefocus-visible:nt-ring-2 focus-visible:nt-ring-primary focus-visible:nt-ring-offset-2`;
-var DropdownTrigger = (props) => {
-  const style = useStyle();
-  const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
-  return createComponent(Popover.Trigger, mergeProps({
-    get ["class"]() {
-      return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
-    }
-  }, rest));
-};
-
-// src/ui/components/primitives/Dropdown/index.ts
-var Dropdown = {
-  Root: DropdownRoot,
-  /**
-   * Dropdown.Trigger renders a `button` and has no default styling.
-   */
-  Trigger: DropdownTrigger,
-  /**
-   * Dropdown.Content renders a `Popover.Content` by default.
-   */
-  Content: DropdownContent,
-  /**
-   * Dropdown.Close renders a `Popover.Close` by default.
-   */
-  Close: Popover.Close,
-  /**
-   * Dropdown.Item renders a `Popover.Close` with dropdown specific styling.
-   * Closes the popover when clicked.
-   * `onClick` function is propagated.
-   */
-  Item: DropdownItem
-};
-var Motion = new Proxy(Motion$1, {
-  get: (_, tag) => (props) => {
-    const {
-      animations
-    } = useAppearance();
-    return createComponent(Motion$1, mergeProps(props, {
-      tag,
-      get transition() {
-        return animations() ? props.transition : {
-          duration: 0
-        };
-      }
-    }));
-  }
-});
-var useKeyboardNavigation = ({
-  activeTab,
-  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 instanceof KeyboardEvent) || event.key !== "Tab") {
-        return;
-      }
-      const tabs = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]');
-      if (!tabs || !root.activeElement) {
-        return;
-      }
-      setKeyboardNavigation(Array.from(tabs).includes(root.activeElement));
-    };
-    root.addEventListener("keyup", handleTabKey);
-    return onCleanup(() => root.removeEventListener("keyup", handleTabKey));
-  });
-  createEffect(() => {
-    const root = getRoot();
-    const handleArrowKeys = (event) => {
-      var _a, _b;
-      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 : []);
-      const tabIds = tabElements.map((tab) => tab.id);
-      const currentIndex = tabIds.indexOf(activeTab());
-      const { length } = tabIds;
-      let activeIndex = currentIndex;
-      let newTab = activeTab();
-      if (event.key === "ArrowLeft") {
-        activeIndex = currentIndex === 0 ? length - 1 : currentIndex - 1;
-        newTab = tabIds[activeIndex];
-      } else if (event.key === "ArrowRight") {
-        activeIndex = currentIndex === length - 1 ? 0 : currentIndex + 1;
-        newTab = tabIds[activeIndex];
-      }
-      tabElements[activeIndex].focus();
-      setActiveTab(newTab);
-    };
-    root.addEventListener("keydown", handleArrowKeys);
-    return onCleanup(() => root.removeEventListener("keydown", handleArrowKeys));
+    get children() {
+      var _el$ = _tmpl$62(), _el$2 = _el$.firstChild;
+      _el$.style.setProperty("--stripes-size", "15px");
+      insert(_el$2, createComponent(Show, {
+        get when() {
+          return isDevelopmentMode();
+        },
+        get children() {
+          var _el$3 = _tmpl$28();
+          insert(_el$3, (() => {
+            var _c$ = memo(() => !!isKeyless());
+            return () => _c$() ? createComponent(Tooltip.Root, {
+              get children() {
+                return [createComponent(Tooltip.Trigger, {
+                  "class": "",
+                  get children() {
+                    return _tmpl$72();
+                  }
+                }), createComponent(Tooltip.Content, {
+                  get children() {
+                    return ["Temporary <Inbox />. All data will expire in 24 hours.", _tmpl$82(), "Connect API key to persist."];
+                  }
+                })];
+              }
+            }) : "Development mode";
+          })());
+          return _el$3;
+        }
+      }), null);
+      insert(_el$2, createComponent(Show, {
+        get when() {
+          return memo(() => !!isDevelopmentMode())() && !hideBranding();
+        },
+        get children() {
+          return _tmpl$29();
+        }
+      }), null);
+      insert(_el$2, createComponent(Show, {
+        get when() {
+          return !hideBranding();
+        },
+        get children() {
+          var _el$5 = _tmpl$32(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+          insert(_el$5, createComponent(Novu2, {
+            "class": "nt-size-2.5"
+          }), _el$7);
+          effect(() => setAttribute(_el$5, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
+          return _el$5;
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return isKeyless();
+        },
+        get children() {
+          var _el$8 = _tmpl$52(), _el$9 = _el$8.firstChild; _el$9.firstChild; var _el$11 = _el$9.nextSibling, _el$13 = _el$11.nextSibling, _el$14 = _el$13.nextSibling;
+          insert(_el$9, createComponent(ArrowUpRight, {
+            "class": "nt-ml-1"
+          }), null);
+          insert(_el$8, createComponent(CopyToClipboard, {
+            get textToCopy() {
+              return getCurlCommand();
+            },
+            get children() {
+              return _tmpl$42();
+            }
+          }), _el$13);
+          _el$14.$$click = (e) => {
+            e.preventDefault();
+            handleTriggerHelloWorld();
+          };
+          return _el$8;
+        }
+      }), null);
+      effect(() => className(_el$, cn(`nt-relative nt-flex nt-shrink-0 nt-flex-col nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-400`, {
+        [stripes]: isDevelopmentMode(),
+        [devModeGradient]: isDevelopmentMode(),
+        "nt-bg-[oklch(from_var(--nv-color-stripes)_l_c_h_/_0.1)]": isDevelopmentMode(),
+        [prodModeGradient]: !isDevelopmentMode()
+      })));
+      return _el$;
+    }
   });
 };
-
-// src/ui/components/primitives/Tabs/TabsRoot.tsx
-var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
-var TabsContext = createContext(void 0);
-var useTabsContext = () => {
-  const context = useContext(TabsContext);
-  if (!context) {
-    throw new Error("useTabsContext must be used within an TabsContext.Provider");
+function getCurrentDomain() {
+  if (isBrowser()) {
+    return window.location.hostname;
   }
-  return context;
+  return "";
+}
+function getCurlCommand() {
+  const identifier = window.localStorage.getItem("novu_keyless_application_identifier");
+  if (!identifier) {
+    console.error("Novu application identifier not found for cURL command.");
+    return "";
+  }
+  const DEFAULT_BACKEND_URL = typeof window !== "undefined" && window.NOVU_LOCAL_BACKEND_URL || "https://api.novu.co";
+  return `curl -X POST   ${DEFAULT_BACKEND_URL}/${DEFAULT_API_VERSION}/events/trigger   -H 'Authorization: Keyless ${identifier}'   -H 'Content-Type: application/json'   -d '{
+    "name": "hello-world",
+    "to": {
+      "subscriberId": "keyless-subscriber-id"
+    },
+    "payload": {
+      "body": "New From Keyless Environment",
+      "subject": "Hello World!"
+    }
+  }'`;
+}
+delegateEvents(["click"]);
+var _tmpl$30 = /* @__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: {
+      default: "nt-bg-gradient-to-b nt-from-20% nt-from-primary-foreground-alpha-200 nt-to-transparent nt-bg-primary nt-text-primary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-primary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-primary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-primary-foreground-alpha-50 after:nt-to-transparent",
+      secondary: "nt-bg-secondary nt-text-secondary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-secondary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-secondary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-secondary-foreground-alpha-50 after:nt-to-transparent",
+      ghost: "hover:nt-bg-neutral-alpha-100 nt-text-foreground-alpha-600 hover:nt-text-foreground-alpha-800",
+      unstyled: ""
+    },
+    size: {
+      none: "",
+      iconSm: "nt-p-1 nt-rounded-md after:nt-rounded-md before:nt-rounded-md focus-visible:nt-rounded-md",
+      icon: "nt-p-2.5 nt-rounded-xl before:nt-rounded-xl after:nt-rounded-xl focus-visible:nt-rounded-xl",
+      default: "nt-px-2 nt-py-1 nt-rounded-lg focus-visible:nt-rounded-lg before:nt-rounded-lg after:nt-rounded-lg",
+      sm: "nt-px-1 nt-py-px nt-rounded-md nt-text-xs nt-px-1 before:nt-rounded-md focus-visible:nt-rounded-md after:nt-rounded-md",
+      lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-lg after:nt-rounded-lg focus-visible:nt-rounded-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = (props) => {
+  const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
+  const style = useStyle();
+  return (() => {
+    var _el$ = _tmpl$30();
+    spread(_el$, mergeProps({
+      get ["data-variant"]() {
+        return props.variant;
+      },
+      get ["data-size"]() {
+        return props.size;
+      },
+      get ["class"]() {
+        return style(local.appearanceKey || "button", cn(buttonVariants({
+          variant: props.variant,
+          size: props.size
+        }), local.class));
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
 };
-var tabsRootVariants = () => "nt-flex nt-flex-col";
-var TabsRoot = (props) => {
-  var _a;
-  const [local, rest] = splitProps(props, ["defaultValue", "value", "class", "appearanceKey", "onChange", "children"]);
-  const [tabsContainer, setTabsContainer] = createSignal();
-  const [visibleTabs, setVisibleTabs] = createSignal([]);
-  const [activeTab, setActiveTab] = createSignal((_a = local.defaultValue) != null ? _a : "");
+var _tmpl$31 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$210 = /* @__PURE__ */ template(`<div><span>`);
+var DatePickerContext = createContext({
+  currentDate: () => /* @__PURE__ */ new Date(),
+  setCurrentDate: () => {
+  },
+  viewMonth: () => /* @__PURE__ */ new Date(),
+  setViewMonth: () => {
+  },
+  selectedDate: () => null,
+  setSelectedDate: () => {
+  },
+  maxDays: () => 0
+});
+var useDatePicker = () => useContext(DatePickerContext);
+var DatePicker = (props) => {
+  const [local, rest] = splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
   const style = useStyle();
-  useKeyboardNavigation({
-    tabsContainer,
-    activeTab,
-    setActiveTab
-  });
-  createEffect(() => {
-    if (local.value) {
-      setActiveTab(local.value);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const [currentDate, setCurrentDate] = createSignal(today);
+  const [viewMonth, setViewMonth] = createSignal(today);
+  const [selectedDate, setSelectedDate] = createSignal(local.value ? new Date(local.value) : null);
+  const handleDateSelect = (date) => {
+    setSelectedDate(date);
+    if (local.onDateChange) {
+      local.onDateChange(date);
     }
-  });
-  createEffect(() => {
-    var _a2;
-    (_a2 = local.onChange) == null ? void 0 : _a2.call(local, activeTab());
-  });
-  return createComponent(TabsContext.Provider, {
+  };
+  return createComponent(DatePickerContext.Provider, {
     value: {
-      activeTab,
-      setActiveTab,
-      visibleTabs,
-      setVisibleTabs
+      currentDate,
+      setCurrentDate,
+      viewMonth,
+      setViewMonth,
+      selectedDate,
+      setSelectedDate: handleDateSelect,
+      maxDays: () => props.maxDays
     },
     get children() {
-      var _el$ = _tmpl$33();
-      use(setTabsContainer, _el$);
+      var _el$ = _tmpl$31();
       spread(_el$, mergeProps({
         get ["class"]() {
-          return style(local.appearanceKey || "tabsRoot", cn(tabsRootVariants(), local.class));
+          return style("datePicker", cn("nt-p-2", local.class));
         }
       }, rest), false, true);
       insert(_el$, () => local.children);
@@ -2252,31 +2231,726 @@ var TabsRoot = (props) => {
     }
   });
 };
-
-// src/ui/components/primitives/Tabs/TabsContent.tsx
-var _tmpl$34 = /* @__PURE__ */ template(`<div role=tabpanel>`);
-var TabsContent = (props) => {
-  const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
+var DatePickerHeader = (props) => {
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "children"]);
   const style = useStyle();
   const {
-    activeTab
-  } = useTabsContext();
-  return createComponent(Show, {
-    get when() {
-      return activeTab() === local.value;
-    },
-    get children() {
-      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");
-        },
-        get id() {
-          return `tabpanel-${local.value}`;
-        },
-        get ["aria-labelledby"]() {
-          return local.value;
-        },
+    viewMonth,
+    setViewMonth,
+    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);
+    const currentMonth = currentDate();
+    if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
+      return;
+    }
+    setViewMonth(date);
+  };
+  const handleNextMonth = () => {
+    const date = new Date(viewMonth());
+    date.setMonth(date.getMonth() + 1);
+    const maxDaysValue = maxDays();
+    if (maxDaysValue > 0) {
+      const maxDate = new Date(currentDate());
+      maxDate.setDate(maxDate.getDate() + maxDaysValue);
+      if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
+        return;
+      }
+    }
+    setViewMonth(date);
+  };
+  const isPrevDisabled = () => {
+    const current = currentDate();
+    const view = viewMonth();
+    return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
+  };
+  const isNextDisabled = () => {
+    const maxDaysValue = maxDays();
+    if (maxDaysValue === 0) return false;
+    const view = viewMonth();
+    const maxDate = new Date(currentDate());
+    maxDate.setDate(maxDate.getDate() + maxDaysValue);
+    return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
+  };
+  return (() => {
+    var _el$2 = _tmpl$210(), _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));
+      }
+    }, rest), false, true);
+    insert(_el$2, createComponent(Button, {
+      appearanceKey: "datePickerControlPrevTrigger",
+      variant: "ghost",
+      onClick: (e) => {
+        e.stopPropagation();
+        handlePrevMonth();
+      },
+      get disabled() {
+        return isPrevDisabled();
+      },
+      "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(IconRendererWrapper, {
+          iconKey: "arrowLeft",
+          "class": prevIconClass,
+          get fallback() {
+            return createComponent(ArrowLeft, {
+              "class": prevIconClass
+            });
+          }
+        });
+      }
+    }), _el$3);
+    insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
+      month: "long",
+      year: "numeric"
+    }));
+    insert(_el$2, createComponent(Button, {
+      appearanceKey: "datePickerControlNextTrigger",
+      variant: "ghost",
+      onClick: (e) => {
+        e.stopPropagation();
+        handleNextMonth();
+      },
+      get disabled() {
+        return isNextDisabled();
+      },
+      "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(IconRendererWrapper, {
+          iconKey: "arrowRight",
+          "class": nextIconClass,
+          get fallback() {
+            return createComponent(ArrowRight, {
+              "class": nextIconClass
+            });
+          }
+        });
+      }
+    }), null);
+    effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
+    return _el$2;
+  })();
+};
+var DatePickerGridCellTrigger = (props) => {
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "date"]);
+  const {
+    selectedDate,
+    viewMonth,
+    setSelectedDate,
+    currentDate,
+    maxDays
+  } = useDatePicker();
+  const {
+    t
+  } = useLocalization();
+  const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
+  const isPastDate = () => {
+    const today = currentDate();
+    return props.date < today;
+  };
+  const isFutureDate = () => {
+    const maxDaysValue = maxDays();
+    if (maxDaysValue === 0) return false;
+    const maxDate = new Date(currentDate());
+    maxDate.setDate(maxDate.getDate() + maxDaysValue);
+    return props.date > maxDate;
+  };
+  const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
+  const isExceedingLimit = () => {
+    return isCurrentMonth && isFutureDate();
+  };
+  const buttonElement = createComponent(Button, mergeProps({
+    appearanceKey: "datePickerCalendarDay__button",
+    variant: "ghost",
+    disabled: isDisabled,
+    onClick: (e) => {
+      e.stopPropagation();
+      setSelectedDate(local.date);
+    },
+    get ["class"]() {
+      var _a;
+      return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
+        "nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
+        "nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
+      }, {
+        "nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
+      });
+    }
+  }, rest, {
+    get children() {
+      return local.date.getDate();
+    }
+  }));
+  if (isExceedingLimit()) {
+    return createComponent(Tooltip.Root, {
+      get children() {
+        return [createComponent(Tooltip.Trigger, {
+          children: buttonElement
+        }), createComponent(Tooltip.Content, {
+          get children() {
+            return t("snooze.datePicker.exceedingLimitTooltip", {
+              days: maxDays()
+            });
+          }
+        })];
+      }
+    });
+  }
+  return buttonElement;
+};
+var DatePickerCalendar = (props) => {
+  const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
+  const style = useStyle();
+  const {
+    viewMonth
+  } = useDatePicker();
+  const getDaysInMonth = () => {
+    const year = viewMonth().getFullYear();
+    const month = viewMonth().getMonth();
+    const firstDay = new Date(year, month, 1);
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const startingDay = firstDay.getDay();
+    const days = [];
+    for (let i = 0; i < startingDay; i += 1) {
+      const prevMonthDay = new Date(year, month, -i);
+      days.unshift(prevMonthDay);
+    }
+    for (let i = 1; i <= daysInMonth; i += 1) {
+      days.push(new Date(year, month, i));
+    }
+    const remainingCells = 7 - days.length % 7;
+    if (remainingCells < 7) {
+      for (let i = 1; i <= remainingCells; i += 1) {
+        days.push(new Date(year, month + 1, i));
+      }
+    }
+    return days;
+  };
+  return (() => {
+    var _el$8 = _tmpl$31();
+    _el$8.$$click = (e) => e.stopPropagation();
+    spread(_el$8, mergeProps({
+      get ["class"]() {
+        return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
+      }
+    }, rest), false, true);
+    insert(_el$8, () => getDaysInMonth().map((date) => {
+      return createComponent(DatePickerGridCellTrigger, {
+        date
+      });
+    }));
+    return _el$8;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$33 = /* @__PURE__ */ template(`<button>`);
+var PopoverClose = (props) => {
+  const {
+    onClose
+  } = usePopover();
+  const style = useStyle();
+  const [local, rest] = splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
+  const handleClick = (e) => {
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+    onClose();
+  };
+  if (local.asChild) {
+    return createComponent(Dynamic, mergeProps({
+      get component() {
+        return local.asChild;
+      },
+      onClick: handleClick
+    }, rest));
+  }
+  return (() => {
+    var _el$ = _tmpl$33();
+    _el$.$$click = handleClick;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return style(local.appearanceKey || "popoverClose", local.class);
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
+var Portal2 = (props) => {
+  const appearance = useAppearance();
+  let currentElement;
+  return [(() => {
+    var _el$ = _tmpl$34();
+    use((el) => {
+      currentElement = el;
+    }, _el$);
+    _el$.style.setProperty("display", "none");
+    return _el$;
+  })(), createComponent(Portal, mergeProps({
+    get mount() {
+      return closestNovuRootParent(currentElement, appearance.id());
+    }
+  }, props))];
+};
+var closestNovuRootParent = (el, id) => {
+  let element = el;
+  while (element && element.id !== `novu-root-${id}`) {
+    element = element.parentElement;
+  }
+  if (element && element.id === `novu-root-${id}`) {
+    return element;
+  }
+  return void 0;
+};
+var PopoverContext = createContext(void 0);
+function PopoverRoot(props) {
+  var _a;
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = createSignal((_a = props.open) != null ? _a : false);
+  const onOpenChange = () => {
+    var _a2;
+    return (_a2 = props.onOpenChange) != null ? _a2 : setUncontrolledIsOpen;
+  };
+  const open = () => {
+    var _a2;
+    return (_a2 = props.open) != null ? _a2 : uncontrolledIsOpen();
+  };
+  const [reference, setReference] = createSignal(null);
+  const [floating, setFloating] = createSignal(null);
+  const position = useFloating(reference, floating, {
+    strategy: "absolute",
+    placement: props.placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(10), flip({
+      fallbackPlacements: props.fallbackPlacements
+    }), shift()]
+  });
+  const floatingStyles = createMemo(() => {
+    var _a2, _b;
+    return {
+      position: position.strategy,
+      top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
+      left: `${(_b = position.x) != null ? _b : 0}px`
+    };
+  });
+  const onClose = () => {
+    onOpenChange()(false);
+  };
+  const onToggle = () => {
+    onOpenChange()((prev) => !prev);
+  };
+  return createComponent(PopoverContext.Provider, {
+    value: {
+      onToggle,
+      onClose,
+      reference,
+      setReference,
+      floating,
+      setFloating,
+      open,
+      floatingStyles
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function usePopover() {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error("usePopover must be used within Popover.Root component");
+  }
+  return context;
+}
+
+// src/ui/components/primitives/Popover/PopoverContent.tsx
+var _tmpl$35 = /* @__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 {
+    open,
+    setFloating,
+    floating,
+    floatingStyles
+  } = usePopover();
+  const {
+    setActive,
+    removeActive
+  } = useFocusManager();
+  const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
+  const style = useStyle();
+  onMount(() => {
+    const floatingEl = floating();
+    setActive(floatingEl);
+    onCleanup(() => {
+      removeActive(floatingEl);
+    });
+  });
+  return (() => {
+    var _el$ = _tmpl$35();
+    use(setFloating, _el$);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
+      },
+      get style() {
+        return floatingStyles();
+      },
+      get ["data-open"]() {
+        return open();
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
+};
+var PopoverContent = (props) => {
+  const {
+    open,
+    onClose,
+    reference,
+    floating
+  } = usePopover();
+  const {
+    active
+  } = useFocusManager();
+  const {
+    container
+  } = useAppearance();
+  const handleClickOutside = (e) => {
+    var _a, _b;
+    if ((_a = reference()) == null ? void 0 : _a.contains(e.target)) {
+      return;
+    }
+    const containerElement = container();
+    if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target)) || containerElement && e.target.shadowRoot === containerElement) {
+      return;
+    }
+    onClose();
+  };
+  const handleEscapeKey = (e) => {
+    if (active() !== floating()) {
+      return;
+    }
+    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, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal2, {
+        get children() {
+          return createComponent(PopoverContentBody, props);
+        }
+      });
+    }
+  });
+};
+var _tmpl$36 = /* @__PURE__ */ template(`<button>`);
+var PopoverTrigger = (props) => {
+  const {
+    setReference,
+    onToggle
+  } = usePopover();
+  const style = useStyle();
+  const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
+  const handleClick = (e) => {
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+    onToggle();
+  };
+  const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
+  if (local.asChild) {
+    return createComponent(Dynamic, mergeProps({
+      get component() {
+        return local.asChild;
+      },
+      ref(r$) {
+        var _ref$ = ref();
+        typeof _ref$ === "function" && _ref$(r$);
+      },
+      onClick: handleClick
+    }, rest));
+  }
+  return (() => {
+    var _el$ = _tmpl$36();
+    _el$.$$click = handleClick;
+    var _ref$2 = ref();
+    typeof _ref$2 === "function" && use(_ref$2, _el$);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return style(local.appearanceKey || "dropdownTrigger");
+      }
+    }, rest), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+// src/ui/components/primitives/Popover/index.ts
+var Popover = {
+  Root: PopoverRoot,
+  /**
+   * Popover.Trigger renders a `button` and has no default styling.
+   */
+  Trigger: PopoverTrigger,
+  /**
+   * Popover.Content renders a `div` and has popover specific styling.
+   */
+  Content: PopoverContent,
+  /**
+   * Popover.Close renders a `button` and has no styling.
+   * Closes the popover when clicked.
+   * `onClick` function is propagated.
+   */
+  Close: PopoverClose
+};
+var dropdownContentVariants = () => "nt-p-1 nt-text-sm nt-min-w-52 nt-shadow-dropdown nt-h-fit nt-min-w-52 nt-w-max";
+var DropdownContent = (props) => {
+  const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
+  return createComponent(Popover.Content, mergeProps({
+    get appearanceKey() {
+      return local.appearanceKey || "dropdownContent";
+    },
+    get ["class"]() {
+      return cn(dropdownContentVariants(), local.class);
+    }
+  }, rest));
+};
+var dropdownItemVariants = () => "focus:nt-outline-none nt-flex nt-items-center nt-gap-1.5 nt-text-sm nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-2";
+var DropdownItem = (props) => {
+  const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class", "asChild"]);
+  const {
+    onClose
+  } = usePopover();
+  const handleClick = (e) => {
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+    onClose();
+  };
+  if (local.asChild) {
+    return createComponent(Dynamic, mergeProps({
+      get component() {
+        return local.asChild;
+      },
+      onClick: handleClick
+    }, rest));
+  }
+  return createComponent(Popover.Close, mergeProps({
+    get appearanceKey() {
+      return local.appearanceKey || "dropdownItem";
+    },
+    get ["class"]() {
+      return cn(dropdownItemVariants(), local.class);
+    },
+    onClick: (e) => {
+      if (typeof local.onClick === "function") {
+        local.onClick(e);
+      }
+      onClose();
+    }
+  }, rest));
+};
+var DropdownRoot = (props) => {
+  return createComponent(Popover.Root, mergeProps({
+    placement: "bottom",
+    fallbackPlacements: ["top"]
+  }, props));
+};
+var dropdownTriggerButtonVariants = () => `nt-relative nt-transition nt-outline-none focus-visible:nt-outline-nonefocus-visible:nt-ring-2 focus-visible:nt-ring-primary focus-visible:nt-ring-offset-2`;
+var DropdownTrigger = (props) => {
+  const style = useStyle();
+  const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
+  return createComponent(Popover.Trigger, mergeProps({
+    get ["class"]() {
+      return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
+    }
+  }, rest));
+};
+
+// src/ui/components/primitives/Dropdown/index.ts
+var Dropdown = {
+  Root: DropdownRoot,
+  /**
+   * Dropdown.Trigger renders a `button` and has no default styling.
+   */
+  Trigger: DropdownTrigger,
+  /**
+   * Dropdown.Content renders a `Popover.Content` by default.
+   */
+  Content: DropdownContent,
+  /**
+   * Dropdown.Close renders a `Popover.Close` by default.
+   */
+  Close: Popover.Close,
+  /**
+   * Dropdown.Item renders a `Popover.Close` with dropdown specific styling.
+   * Closes the popover when clicked.
+   * `onClick` function is propagated.
+   */
+  Item: DropdownItem
+};
+var useKeyboardNavigation = ({
+  activeTab,
+  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 instanceof KeyboardEvent) || event.key !== "Tab") {
+        return;
+      }
+      const tabs = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]');
+      if (!tabs || !root.activeElement) {
+        return;
+      }
+      setKeyboardNavigation(Array.from(tabs).includes(root.activeElement));
+    };
+    root.addEventListener("keyup", handleTabKey);
+    return onCleanup(() => root.removeEventListener("keyup", handleTabKey));
+  });
+  createEffect(() => {
+    const root = getRoot();
+    const handleArrowKeys = (event) => {
+      var _a, _b;
+      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 : []);
+      const tabIds = tabElements.map((tab) => tab.id);
+      const currentIndex = tabIds.indexOf(activeTab());
+      const { length } = tabIds;
+      let activeIndex = currentIndex;
+      let newTab = activeTab();
+      if (event.key === "ArrowLeft") {
+        activeIndex = currentIndex === 0 ? length - 1 : currentIndex - 1;
+        newTab = tabIds[activeIndex];
+      } else if (event.key === "ArrowRight") {
+        activeIndex = currentIndex === length - 1 ? 0 : currentIndex + 1;
+        newTab = tabIds[activeIndex];
+      }
+      tabElements[activeIndex].focus();
+      setActiveTab(newTab);
+    };
+    root.addEventListener("keydown", handleArrowKeys);
+    return onCleanup(() => root.removeEventListener("keydown", handleArrowKeys));
+  });
+};
+
+// src/ui/components/primitives/Tabs/TabsRoot.tsx
+var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
+var TabsContext = createContext(void 0);
+var useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within an TabsContext.Provider");
+  }
+  return context;
+};
+var tabsRootVariants = () => "nt-flex nt-flex-col";
+var TabsRoot = (props) => {
+  var _a;
+  const [local, rest] = splitProps(props, ["defaultValue", "value", "class", "appearanceKey", "onChange", "children"]);
+  const [tabsContainer, setTabsContainer] = createSignal();
+  const [visibleTabs, setVisibleTabs] = createSignal([]);
+  const [activeTab, setActiveTab] = createSignal((_a = local.defaultValue) != null ? _a : "");
+  const style = useStyle();
+  useKeyboardNavigation({
+    tabsContainer,
+    activeTab,
+    setActiveTab
+  });
+  createEffect(() => {
+    if (local.value) {
+      setActiveTab(local.value);
+    }
+  });
+  createEffect(() => {
+    var _a2;
+    (_a2 = local.onChange) == null ? void 0 : _a2.call(local, activeTab());
+  });
+  return createComponent(TabsContext.Provider, {
+    value: {
+      activeTab,
+      setActiveTab,
+      visibleTabs,
+      setVisibleTabs
+    },
+    get children() {
+      var _el$ = _tmpl$37();
+      use(setTabsContainer, _el$);
+      spread(_el$, mergeProps({
+        get ["class"]() {
+          return style(local.appearanceKey || "tabsRoot", cn(tabsRootVariants(), local.class));
+        }
+      }, rest), false, true);
+      insert(_el$, () => local.children);
+      return _el$;
+    }
+  });
+};
+
+// src/ui/components/primitives/Tabs/TabsContent.tsx
+var _tmpl$38 = /* @__PURE__ */ template(`<div role=tabpanel>`);
+var TabsContent = (props) => {
+  const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
+  const style = useStyle();
+  const {
+    activeTab
+  } = useTabsContext();
+  return createComponent(Show, {
+    get when() {
+      return activeTab() === local.value;
+    },
+    get children() {
+      var _el$ = _tmpl$38();
+      spread(_el$, mergeProps({
+        get ["class"]() {
+          return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
+        },
+        get id() {
+          return `tabpanel-${local.value}`;
+        },
+        get ["aria-labelledby"]() {
+          return local.value;
+        },
         get ["data-state"]() {
           return activeTab() === local.value ? "active" : "inactive";
         }
@@ -2286,14 +2960,14 @@ var TabsContent = (props) => {
     }
   });
 };
-var _tmpl$35 = /* @__PURE__ */ template(`<div role=tablist>`);
-var _tmpl$210 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
+var _tmpl$39 = /* @__PURE__ */ template(`<div role=tablist>`);
+var _tmpl$211 = /* @__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$35();
+    var _el$ = _tmpl$39();
     var _ref$ = local.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
     spread(_el$, mergeProps({
@@ -2303,7 +2977,7 @@ var TabsList = (props) => {
     }, rest), false, true);
     insert(_el$, () => local.children);
     return _el$;
-  })(), _tmpl$210()];
+  })(), _tmpl$211()];
 };
 var tabsTriggerVariants = () => cn("nt-relative nt-transition nt-outline-none nt-text-foreground-alpha-600 nt-pb-[0.625rem]", `after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 after:nt-w-full after:nt-h-[2px]`, "after:nt-transition-opacity after:nt-duration-200", "data-[state=active]:after:nt-border-b-2 data-[state=active]:after:nt-border-primary data-[state=active]:after:nt-opacity-100", "data-[state=active]:nt-text-foreground after:nt-border-b-transparent after:nt-opacity-0", "focus-visible:nt-outline-none focus-visible:nt-rounded-lg focus-visible:nt-ring-2 focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2");
 var TabsTrigger = (props) => {
@@ -2374,8 +3048,8 @@ var inboxFilterLocalizationKeys = {
   archived: "inbox.filters.labels.archived",
   snoozed: "inbox.filters.labels.snoozed"
 };
-var _tmpl$36 = /* @__PURE__ */ template(`<span><span>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$40 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
 var cases = [{
   status: "unreadRead" /* UNREAD_READ */,
   iconKey: "unread",
@@ -2443,7 +3117,7 @@ var StatusItem = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$ = _tmpl$36(), _el$2 = _el$.firstChild;
+        var _el$ = _tmpl$40(), _el$2 = _el$.firstChild;
         insert(_el$, createComponent(IconRendererWrapper, {
           get iconKey() {
             return props.iconKey;
@@ -2451,7 +3125,7 @@ var StatusItem = (props) => {
           "class": itemIconClass,
           get fallback() {
             return (() => {
-              var _el$3 = _tmpl$211();
+              var _el$3 = _tmpl$212();
               className(_el$3, itemIconClass);
               insert(_el$3, () => props.icon());
               return _el$3;
@@ -2492,7 +3166,7 @@ var StatusItem = (props) => {
 };
 
 // src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
-var _tmpl$37 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$41 = /* @__PURE__ */ template(`<span>`);
 var StatusDropdown = () => {
   const style = useStyle();
   const {
@@ -2520,7 +3194,7 @@ var StatusDropdown = () => {
         }, triggerProps, {
           get children() {
             return [(() => {
-              var _el$ = _tmpl$37();
+              var _el$ = _tmpl$41();
               insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
               effect((_p$) => {
                 var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
@@ -2678,7 +3352,7 @@ var useReadAll = (props) => {
 };
 
 // src/ui/components/elements/Header/MoreActionsOptions.tsx
-var _tmpl$38 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<span>`);
 var iconKeyToComponentMap = {
   markAsRead: MarkAsRead,
   markAsArchived: MarkAsArchived,
@@ -2748,7 +3422,7 @@ var ActionsItem = (props) => {
           });
         }
       }), (() => {
-        var _el$ = _tmpl$38();
+        var _el$ = _tmpl$43();
         insert(_el$, () => t(props.localizationKey));
         effect((_p$) => {
           var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
@@ -2814,14 +3488,14 @@ var MoreActionsDropdown = () => {
 };
 
 // src/ui/components/elements/Header/ActionsContainer.tsx
-var _tmpl$39 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
 var ActionsContainer = (props) => {
   const style = useStyle();
   const cogsIconClass = style("icon", "nt-size-5", {
     iconKey: "cogs"
   });
   return (() => {
-    var _el$ = _tmpl$39();
+    var _el$ = _tmpl$44();
     insert(_el$, createComponent(MoreActionsDropdown, {}), null);
     insert(_el$, createComponent(Show, {
       get when() {
@@ -2853,11 +3527,11 @@ var ActionsContainer = (props) => {
 };
 
 // src/ui/components/elements/Header/Header.tsx
-var _tmpl$40 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<div>`);
 var Header = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$40();
+    var _el$ = _tmpl$45();
     insert(_el$, createComponent(StatusDropdown, {}), null);
     insert(_el$, createComponent(ActionsContainer, {
       get showPreferences() {
@@ -2868,7 +3542,7 @@ var Header = (props) => {
     return _el$;
   })();
 };
-var _tmpl$41 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div>`);
 var Root = (props) => {
   const [_, rest] = splitProps(props, ["class"]);
   const {
@@ -2884,7 +3558,7 @@ var Root = (props) => {
     },
     children: new Comment(" Powered by Novu - https://novu.co ")
   }), (() => {
-    var _el$ = _tmpl$41();
+    var _el$ = _tmpl$46();
     spread(_el$, mergeProps({
       get id() {
         return `novu-root-${id()}`;
@@ -2896,15 +3570,15 @@ var Root = (props) => {
     return _el$;
   })()];
 };
-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 _tmpl$47 = /* @__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();
+    var _el$ = _tmpl$47();
     spread(_el$, props, true, true);
     return _el$;
   })();
 };
-var _tmpl$44 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$48 = /* @__PURE__ */ template(`<div><div>`);
 var isInterpolateSizeSupported = () => {
   return CSS.supports("interpolate-size", "allow-keywords");
 };
@@ -2937,7 +3611,7 @@ var Collapsible = (props) => {
     return props.open ? `${scrollHeight()}px` : "0px";
   };
   return (() => {
-    var _el$ = _tmpl$44(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$48(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["class"]() {
         return style("collapsible", props.class);
@@ -2957,7 +3631,7 @@ var Collapsible = (props) => {
     return _el$;
   })();
 };
-var _tmpl$45 = /* @__PURE__ */ template(`<label><input type=checkbox class=nt-sr-only><div>`);
+var _tmpl$49 = /* @__PURE__ */ template(`<label><input type=checkbox class=nt-sr-only><div>`);
 var Switch = (props) => {
   const style = useStyle();
   const handleChange = () => {
@@ -2983,7 +3657,7 @@ var Switch = (props) => {
   const state = () => props.state;
   const disabled = () => props.disabled;
   return (() => {
-    var _el$ = _tmpl$45(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$49(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", handleChange);
     effect((_p$) => {
       var _v$ = style("channelSwitch", cn("nt-relative nt-inline-flex nt-cursor-pointer nt-items-center", {
@@ -3009,7 +3683,7 @@ var Switch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/ChannelRow.tsx
-var _tmpl$46 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
+var _tmpl$50 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
   const updatePreference = (enabled) => __async(void 0, null, function* () {
@@ -3023,7 +3697,7 @@ var ChannelRow = (props) => {
   const state = () => props.channel.state;
   const channel = () => props.channel.channel;
   return (() => {
-    var _el$ = _tmpl$46(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
+    var _el$ = _tmpl$50(), _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() {
@@ -3146,8 +3820,8 @@ var getLabel = (channel) => {
 };
 
 // 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$51 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$213 = /* @__PURE__ */ template(`<div><div><div><div><span></span></div></div><span>`);
 var _tmpl$310 = /* @__PURE__ */ template(`<span>`);
 var iconKeyToComponentMap2 = {
   cogs: Cogs,
@@ -3181,7 +3855,7 @@ var PreferencesRow = (props) => {
       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;
+      var _el$ = _tmpl$213(), _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);
       };
@@ -3229,7 +3903,7 @@ var PreferencesRow = (props) => {
           return isOpenChannels();
         },
         get children() {
-          var _el$7 = _tmpl$47();
+          var _el$7 = _tmpl$51();
           insert(_el$7, createComponent(Index, {
             get each() {
               return channels();
@@ -3302,19 +3976,19 @@ var WorkflowDescription = (props) => {
     return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
   };
   return (() => {
-    var _el$9 = _tmpl$47();
+    var _el$9 = _tmpl$51();
     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 _tmpl$53 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div><div></div><div>`);
 var SkeletonText = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$48();
+    var _el$ = _tmpl$53();
     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$;
   })();
@@ -3322,7 +3996,7 @@ var SkeletonText = (props) => {
 var SkeletonAvatar = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$2 = _tmpl$48();
+    var _el$2 = _tmpl$53();
     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;
   })();
@@ -3330,7 +4004,7 @@ var SkeletonAvatar = (props) => {
 var SkeletonSwitch = (props) => {
   const style = useStyle();
   return (() => {
-    var _el$3 = _tmpl$213(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    var _el$3 = _tmpl$214(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
     effect((_p$) => {
       var _v$ = style(props.appearanceKey, cn("nt-relative nt-inline-flex nt-items-center", props.class)), _v$2 = style(props.appearanceKey, "nt-h-4 nt-w-7 nt-rounded-full nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent"), _v$3 = style(props.thumbAppearanceKey, "nt-absolute nt-top-0.5 nt-left-0.5 nt-size-3 nt-rounded-full nt-bg-background nt-shadow");
       _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
@@ -3347,7 +4021,7 @@ var SkeletonSwitch = (props) => {
 };
 
 // src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
-var _tmpl$49 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$54 = /* @__PURE__ */ template(`<div>`);
 var channelIcons = [InApp, Email, Sms, Push, Chat];
 var PreferencesListSkeleton = (props) => {
   const style = useStyle();
@@ -3355,7 +4029,7 @@ var PreferencesListSkeleton = (props) => {
     t
   } = useLocalization();
   return (() => {
-    var _el$ = _tmpl$49();
+    var _el$ = _tmpl$54();
     insert(_el$, createComponent(Motion.div, {
       get animate() {
         return {
@@ -3397,7 +4071,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$49();
+                var _el$3 = _tmpl$54();
                 insert(_el$3, createComponent(SkeletonText, {
                   appearanceKey: "notificationList__skeletonText",
                   "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -3415,7 +4089,7 @@ var PreferencesListSkeleton = (props) => {
             }
           });
         })), (() => {
-          var _el$2 = _tmpl$49();
+          var _el$2 = _tmpl$54();
           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;
         })()];
@@ -3501,26 +4175,26 @@ var DefaultPreferences = (props) => {
     }
   });
 };
-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 _tmpl$55 = /* @__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();
+    var _el$ = _tmpl$55();
     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 _tmpl$56 = /* @__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();
+    var _el$ = _tmpl$56();
     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 _tmpl$57 = /* @__PURE__ */ template(`<div><div><span data-localization=preferences.group.info></span></div><div>`);
+var _tmpl$215 = /* @__PURE__ */ template(`<div><div><div><span></span></div><div><span>`);
 var GroupedPreferencesRow = (props) => {
   const style = useStyle();
   const {
@@ -3585,7 +4259,7 @@ var GroupedPreferencesRow = (props) => {
       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;
+      var _el$ = _tmpl$215(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
       _el$2.$$click = () => {
         setIsOpened((prev) => !prev);
       };
@@ -3619,7 +4293,7 @@ var GroupedPreferencesRow = (props) => {
           return isOpened();
         },
         get children() {
-          var _el$7 = _tmpl$52(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling;
+          var _el$7 = _tmpl$57(), _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());
@@ -3743,7 +4417,7 @@ var GroupedPreferences = (props) => {
 };
 
 // src/ui/components/elements/Preferences/Preferences.tsx
-var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$58 = /* @__PURE__ */ template(`<div>`);
 var Preferences = () => {
   var _a;
   const novu = useNovu();
@@ -3830,7 +4504,7 @@ var Preferences = () => {
     })) != null ? _c : [];
   });
   return (() => {
-    var _el$ = _tmpl$53();
+    var _el$ = _tmpl$58();
     insert(_el$, createComponent(PreferencesRow, {
       iconKey: "cogs",
       get preference() {
@@ -3869,648 +4543,188 @@ var Preferences = () => {
         });
       },
       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 nt-pr-0 [scrollbar-gutter:stable]")));
-    return _el$;
-  })();
-};
-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$54(), _el$2 = _el$.firstChild;
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.navigateToNotifications;
-      },
-      children: (navigateToNotifications) => createComponent(Button, {
-        appearanceKey: "preferencesHeader__back__button",
-        "class": "nt-text-foreground-alpha-600",
-        variant: "unstyled",
-        size: "none",
-        get onClick() {
-          return navigateToNotifications();
-        },
-        get children() {
-          return createComponent(IconRendererWrapper, {
-            iconKey: "arrowLeft",
-            "class": arrowLeftIconClass,
-            get fallback() {
-              return createComponent(ArrowLeft, {
-                "class": arrowLeftIconClass
-              });
-            }
-          });
-        }
-      })
-    }), _el$2);
-    insert(_el$2, () => t("preferences.title"));
-    effect((_p$) => {
-      var _v$ = style("preferencesHeader", "nt-flex nt-bg-neutral-alpha-25 nt-shrink-0 nt-border-b nt-border-border nt-items-center nt-py-3.5 nt-px-4 nt-gap-2"), _v$2 = style("preferencesHeader__title", "nt-text-base nt-font-medium");
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-var useTabsDropdown = ({ tabs }) => {
-  const [tabsList, setTabsList] = createSignal();
-  const [visibleTabs, setVisibleTabs] = createSignal([]);
-  const [dropdownTabs, setDropdownTabs] = createSignal([]);
-  onMount(() => {
-    const tabsListEl = tabsList();
-    if (!tabsListEl) return;
-    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
-    const observer = new IntersectionObserver(
-      (entries) => {
-        let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
-        if (tabsElements.length === visibleTabIds.length) {
-          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
-          observer.disconnect();
-          return;
-        }
-        visibleTabIds = visibleTabIds.slice(0, -1);
-        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
-        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
-        observer.disconnect();
-      },
-      { root: tabsListEl }
-    );
-    for (const tabElement of tabsElements) {
-      observer.observe(tabElement);
-    }
-  });
-  return { dropdownTabs, setTabsList, visibleTabs };
-};
-var _tmpl$55 = /* @__PURE__ */ template(`<strong>`);
-var _tmpl$215 = /* @__PURE__ */ template(`<p>`);
-var Bold = (props) => {
-  const style = useStyle();
-  return (() => {
-    var _el$ = _tmpl$55();
-    insert(_el$, () => props.children);
-    effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
-    return _el$;
-  })();
-};
-var Text = (props) => props.children;
-var Markdown = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey"]);
-  const style = useStyle();
-  const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
-  return (() => {
-    var _el$2 = _tmpl$215();
-    spread(_el$2, mergeProps({
-      get ["class"]() {
-        return style(local.appearanceKey, cn(local.class));
-      }
-    }, rest), false, true);
-    insert(_el$2, createComponent(For, {
-      get each() {
-        return tokens();
-      },
-      children: (token) => {
-        if (token.type === "bold") {
-          return createComponent(Bold, {
-            get appearanceKey() {
-              return local.strongAppearanceKey;
-            },
-            get children() {
-              return token.content;
-            }
-          });
-        } else {
-          return createComponent(Text, {
-            get children() {
-              return token.content;
-            }
-          });
-        }
-      }
-    }));
-    return _el$2;
-  })();
-};
-var Markdown_default = Markdown;
-var _tmpl$56 = /* @__PURE__ */ template(`<span>`);
-var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
-  variants: {
-    variant: {
-      secondary: "nt-bg-neutral-alpha-50"
-    },
-    size: {
-      default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
-    }
-  },
-  defaultVariants: {
-    variant: "secondary",
-    size: "default"
-  }
-});
-var Badge = (props) => {
-  const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
-  const style = useStyle();
-  return (() => {
-    var _el$ = _tmpl$56();
-    spread(_el$, mergeProps({
-      get ["data-variant"]() {
-        return props.variant;
-      },
-      get ["data-size"]() {
-        return props.size;
-      },
-      get ["class"]() {
-        return style(local.appearanceKey || "badge", cn(badgeVariants({
-          variant: props.variant,
-          size: props.size
-        }), local.class));
-      }
-    }, rest), false, false);
-    return _el$;
-  })();
-};
-var TooltipContext = createContext(void 0);
-function TooltipRoot(props) {
-  const [reference, setReference] = createSignal(null);
-  const [floating, setFloating] = createSignal(null);
-  const position = useFloating(reference, floating, {
-    placement: props.placement || "top",
-    strategy: "fixed",
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(10), flip({
-      fallbackPlacements: props.fallbackPlacements || ["bottom"]
-    }), shift()]
-  });
-  const [isOpen, setIsOpen] = useUncontrolledState({
-    value: props.open,
-    fallbackValue: false
-  });
-  return createComponent(TooltipContext.Provider, {
-    value: {
-      reference,
-      setReference,
-      floating,
-      setFloating,
-      open: isOpen,
-      setOpen: setIsOpen,
-      floatingStyles: () => {
-        var _a, _b;
-        return {
-          position: position.strategy,
-          top: `${(_a = position.y) != null ? _a : 0}px`,
-          left: `${(_b = position.x) != null ? _b : 0}px`
-        };
-      }
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function useTooltip() {
-  const context = useContext(TooltipContext);
-  if (!context) {
-    throw new Error("useTooltip must be used within Tooltip.Root component");
-  }
-  return context;
-}
-
-// src/ui/components/primitives/Tooltip/TooltipContent.tsx
-var _tmpl$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 {
-    open,
-    setFloating,
-    floating,
-    floatingStyles
-  } = useTooltip();
-  const {
-    setActive,
-    removeActive
-  } = useFocusManager();
-  const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
-  const style = useStyle();
-  onMount(() => {
-    const floatingEl = floating();
-    setActive(floatingEl);
-    onCleanup(() => {
-      removeActive(floatingEl);
-    });
-  });
-  return (() => {
-    var _el$ = _tmpl$57();
-    use(setFloating, _el$);
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
-      },
-      get style() {
-        return __spreadProps(__spreadValues({}, floatingStyles()), {
-          "z-index": 99999
+        return createComponent(GroupedPreferences, {
+          get groups() {
+            return groupedPreferences();
+          },
+          get loading() {
+            return loading();
+          },
+          updatePreference,
+          bulkUpdatePreferences
         });
-      },
-      get ["data-open"]() {
-        return open();
       }
-    }, rest), false, false);
+    }), null);
+    effect(() => className(_el$, style("preferencesContainer", "nt-px-3 nt-py-4 nt-flex nt-flex-col nt-gap-1 nt-overflow-y-auto nt-h-full nt-pr-0 [scrollbar-gutter:stable]")));
     return _el$;
   })();
 };
-var TooltipContent = (props) => {
-  const {
-    open
-  } = useTooltip();
+var _tmpl$59 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
+var PreferencesHeader = (props) => {
+  const style = useStyle();
   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();
+    t
+  } = useLocalization();
+  const arrowLeftIconClass = style("preferencesHeader__back__button__icon", "nt-size-4", {
+    iconKey: "arrowLeft"
+  });
+  return (() => {
+    var _el$ = _tmpl$59(), _el$2 = _el$.firstChild;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.navigateToNotifications;
+      },
+      children: (navigateToNotifications) => createComponent(Button, {
+        appearanceKey: "preferencesHeader__back__button",
+        "class": "nt-text-foreground-alpha-600",
+        variant: "unstyled",
+        size: "none",
+        get onClick() {
+          return navigateToNotifications();
         },
         get children() {
-          return createComponent(Root, {
-            get children() {
-              return createComponent(TooltipContentBody, props);
+          return createComponent(IconRendererWrapper, {
+            iconKey: "arrowLeft",
+            "class": arrowLeftIconClass,
+            get fallback() {
+              return createComponent(ArrowLeft, {
+                "class": arrowLeftIconClass
+              });
             }
           });
         }
-      });
-    }
-  });
-};
-var _tmpl$58 = /* @__PURE__ */ template(`<button>`);
-var TooltipTrigger = (props) => {
-  const {
-    setReference,
-    setOpen
-  } = useTooltip();
-  const style = useStyle();
-  const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
-  const handleMouseEnter = (e) => {
-    if (typeof local.onMouseEnter === "function") {
-      local.onMouseEnter(e);
-    }
-    setOpen(true);
-  };
-  const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
-  const handleMouseLeave = (e) => {
-    if (typeof local.onMouseLeave === "function") {
-      local.onMouseLeave(e);
-    }
-    setOpen(false);
-  };
-  if (local.asChild) {
-    return createComponent(Dynamic, mergeProps({
-      get component() {
-        return local.asChild;
-      },
-      ref(r$) {
-        var _ref$ = ref();
-        typeof _ref$ === "function" && _ref$(r$);
-      },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
-    }, rest));
-  }
-  return (() => {
-    var _el$ = _tmpl$58();
-    _el$.addEventListener("mouseleave", () => {
-      setOpen(false);
-    });
-    _el$.addEventListener("mouseenter", () => {
-      setOpen(true);
+      })
+    }), _el$2);
+    insert(_el$2, () => t("preferences.title"));
+    effect((_p$) => {
+      var _v$ = style("preferencesHeader", "nt-flex nt-bg-neutral-alpha-25 nt-shrink-0 nt-border-b nt-border-border nt-items-center nt-py-3.5 nt-px-4 nt-gap-2"), _v$2 = style("preferencesHeader__title", "nt-text-base nt-font-medium");
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
     });
-    var _ref$2 = ref();
-    typeof _ref$2 === "function" && use(_ref$2, _el$);
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return style(local.appearanceKey || "tooltipTrigger");
-      }
-    }, rest), false, true);
-    insert(_el$, () => props.children);
     return _el$;
   })();
 };
-
-// src/ui/components/primitives/Tooltip/index.ts
-var Tooltip = {
-  Root: TooltipRoot,
-  /**
-   * Tooltip.Trigger renders a `button` and has no default styling.
-   */
-  Trigger: TooltipTrigger,
-  /**
-   * Tooltip.Content renders a `div` and has popover specific styling.
-   */
-  Content: TooltipContent
-};
-var _tmpl$59 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$216 = /* @__PURE__ */ template(`<div><span>`);
-var DatePickerContext = createContext({
-  currentDate: () => /* @__PURE__ */ new Date(),
-  setCurrentDate: () => {
-  },
-  viewMonth: () => /* @__PURE__ */ new Date(),
-  setViewMonth: () => {
-  },
-  selectedDate: () => null,
-  setSelectedDate: () => {
-  },
-  maxDays: () => 0
-});
-var useDatePicker = () => useContext(DatePickerContext);
-var DatePicker = (props) => {
-  const [local, rest] = splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
-  const style = useStyle();
-  const today = /* @__PURE__ */ new Date();
-  today.setHours(0, 0, 0, 0);
-  const [currentDate, setCurrentDate] = createSignal(today);
-  const [viewMonth, setViewMonth] = createSignal(today);
-  const [selectedDate, setSelectedDate] = createSignal(local.value ? new Date(local.value) : null);
-  const handleDateSelect = (date) => {
-    setSelectedDate(date);
-    if (local.onDateChange) {
-      local.onDateChange(date);
-    }
-  };
-  return createComponent(DatePickerContext.Provider, {
-    value: {
-      currentDate,
-      setCurrentDate,
-      viewMonth,
-      setViewMonth,
-      selectedDate,
-      setSelectedDate: handleDateSelect,
-      maxDays: () => props.maxDays
-    },
-    get children() {
-      var _el$ = _tmpl$59();
-      spread(_el$, mergeProps({
-        get ["class"]() {
-          return style("datePicker", cn("nt-p-2", local.class));
+var useTabsDropdown = ({ tabs }) => {
+  const [tabsList, setTabsList] = createSignal();
+  const [visibleTabs, setVisibleTabs] = createSignal([]);
+  const [dropdownTabs, setDropdownTabs] = createSignal([]);
+  onMount(() => {
+    const tabsListEl = tabsList();
+    if (!tabsListEl) return;
+    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
+        if (tabsElements.length === visibleTabIds.length) {
+          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+          observer.disconnect();
+          return;
         }
-      }, rest), false, true);
-      insert(_el$, () => local.children);
-      return _el$;
+        visibleTabIds = visibleTabIds.slice(0, -1);
+        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
+        observer.disconnect();
+      },
+      { root: tabsListEl }
+    );
+    for (const tabElement of tabsElements) {
+      observer.observe(tabElement);
     }
   });
-};
-var DatePickerHeader = (props) => {
-  const [local, rest] = splitProps(props, ["class", "appearanceKey", "children"]);
-  const style = useStyle();
-  const {
-    viewMonth,
-    setViewMonth,
-    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);
-    const currentMonth = currentDate();
-    if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
-      return;
-    }
-    setViewMonth(date);
-  };
-  const handleNextMonth = () => {
-    const date = new Date(viewMonth());
-    date.setMonth(date.getMonth() + 1);
-    const maxDaysValue = maxDays();
-    if (maxDaysValue > 0) {
-      const maxDate = new Date(currentDate());
-      maxDate.setDate(maxDate.getDate() + maxDaysValue);
-      if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
-        return;
-      }
-    }
-    setViewMonth(date);
-  };
-  const isPrevDisabled = () => {
-    const current = currentDate();
-    const view = viewMonth();
-    return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
-  };
-  const isNextDisabled = () => {
-    const maxDaysValue = maxDays();
-    if (maxDaysValue === 0) return false;
-    const view = viewMonth();
-    const maxDate = new Date(currentDate());
-    maxDate.setDate(maxDate.getDate() + maxDaysValue);
-    return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
-  };
+  return { dropdownTabs, setTabsList, visibleTabs };
+};
+var _tmpl$60 = /* @__PURE__ */ template(`<strong>`);
+var _tmpl$216 = /* @__PURE__ */ template(`<p>`);
+var Bold = (props) => {
+  const style = useStyle();
+  return (() => {
+    var _el$ = _tmpl$60();
+    insert(_el$, () => props.children);
+    effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
+    return _el$;
+  })();
+};
+var Text = (props) => props.children;
+var Markdown = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey"]);
+  const style = useStyle();
+  const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
   return (() => {
-    var _el$2 = _tmpl$216(), _el$3 = _el$2.firstChild;
+    var _el$2 = _tmpl$216();
     spread(_el$2, mergeProps({
       get ["class"]() {
-        return style(local.appearanceKey || "datePickerControl", cn("nt-flex nt-items-center nt-justify-between nt-gap-1.5 nt-h-7 nt-p-1 nt-mb-2 nt-rounded-lg nt-bg-background", local.class));
+        return style(local.appearanceKey, cn(local.class));
       }
     }, rest), false, true);
-    insert(_el$2, createComponent(Button, {
-      appearanceKey: "datePickerControlPrevTrigger",
-      variant: "ghost",
-      onClick: (e) => {
-        e.stopPropagation();
-        handlePrevMonth();
-      },
-      get disabled() {
-        return isPrevDisabled();
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return tokens();
       },
-      "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(IconRendererWrapper, {
-          iconKey: "arrowLeft",
-          "class": prevIconClass,
-          get fallback() {
-            return createComponent(ArrowLeft, {
-              "class": prevIconClass
-            });
-          }
-        });
+      children: (token) => {
+        if (token.type === "bold") {
+          return createComponent(Bold, {
+            get appearanceKey() {
+              return local.strongAppearanceKey;
+            },
+            get children() {
+              return token.content;
+            }
+          });
+        } else {
+          return createComponent(Text, {
+            get children() {
+              return token.content;
+            }
+          });
+        }
       }
-    }), _el$3);
-    insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
-      month: "long",
-      year: "numeric"
     }));
-    insert(_el$2, createComponent(Button, {
-      appearanceKey: "datePickerControlNextTrigger",
-      variant: "ghost",
-      onClick: (e) => {
-        e.stopPropagation();
-        handleNextMonth();
-      },
-      get disabled() {
-        return isNextDisabled();
-      },
-      "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(IconRendererWrapper, {
-          iconKey: "arrowRight",
-          "class": nextIconClass,
-          get fallback() {
-            return createComponent(ArrowRight, {
-              "class": nextIconClass
-            });
-          }
-        });
-      }
-    }), null);
-    effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
     return _el$2;
   })();
 };
-var DatePickerGridCellTrigger = (props) => {
-  const [local, rest] = splitProps(props, ["class", "appearanceKey", "date"]);
-  const {
-    selectedDate,
-    viewMonth,
-    setSelectedDate,
-    currentDate,
-    maxDays
-  } = useDatePicker();
-  const {
-    t
-  } = useLocalization();
-  const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
-  const isPastDate = () => {
-    const today = currentDate();
-    return props.date < today;
-  };
-  const isFutureDate = () => {
-    const maxDaysValue = maxDays();
-    if (maxDaysValue === 0) return false;
-    const maxDate = new Date(currentDate());
-    maxDate.setDate(maxDate.getDate() + maxDaysValue);
-    return props.date > maxDate;
-  };
-  const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
-  const isExceedingLimit = () => {
-    return isCurrentMonth && isFutureDate();
-  };
-  const buttonElement = createComponent(Button, mergeProps({
-    appearanceKey: "datePickerCalendarDay__button",
-    variant: "ghost",
-    disabled: isDisabled,
-    onClick: (e) => {
-      e.stopPropagation();
-      setSelectedDate(local.date);
+var Markdown_default = Markdown;
+var _tmpl$61 = /* @__PURE__ */ template(`<span>`);
+var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
+  variants: {
+    variant: {
+      secondary: "nt-bg-neutral-alpha-50"
     },
-    get ["class"]() {
-      var _a;
-      return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
-        "nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
-        "nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
-      }, {
-        "nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
-      });
-    }
-  }, rest, {
-    get children() {
-      return local.date.getDate();
+    size: {
+      default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
     }
-  }));
-  if (isExceedingLimit()) {
-    return createComponent(Tooltip.Root, {
-      get children() {
-        return [createComponent(Tooltip.Trigger, {
-          children: buttonElement
-        }), createComponent(Tooltip.Content, {
-          get children() {
-            return t("snooze.datePicker.exceedingLimitTooltip", {
-              days: maxDays()
-            });
-          }
-        })];
-      }
-    });
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "default"
   }
-  return buttonElement;
-};
-var DatePickerCalendar = (props) => {
+});
+var Badge = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
-  const {
-    viewMonth
-  } = useDatePicker();
-  const getDaysInMonth = () => {
-    const year = viewMonth().getFullYear();
-    const month = viewMonth().getMonth();
-    const firstDay = new Date(year, month, 1);
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    const startingDay = firstDay.getDay();
-    const days = [];
-    for (let i = 0; i < startingDay; i += 1) {
-      const prevMonthDay = new Date(year, month, -i);
-      days.unshift(prevMonthDay);
-    }
-    for (let i = 1; i <= daysInMonth; i += 1) {
-      days.push(new Date(year, month, i));
-    }
-    const remainingCells = 7 - days.length % 7;
-    if (remainingCells < 7) {
-      for (let i = 1; i <= remainingCells; i += 1) {
-        days.push(new Date(year, month + 1, i));
-      }
-    }
-    return days;
-  };
   return (() => {
-    var _el$8 = _tmpl$59();
-    _el$8.$$click = (e) => e.stopPropagation();
-    spread(_el$8, mergeProps({
+    var _el$ = _tmpl$61();
+    spread(_el$, mergeProps({
+      get ["data-variant"]() {
+        return props.variant;
+      },
+      get ["data-size"]() {
+        return props.size;
+      },
       get ["class"]() {
-        return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
+        return style(local.appearanceKey || "badge", cn(badgeVariants({
+          variant: props.variant,
+          size: props.size
+        }), local.class));
       }
-    }, rest), false, true);
-    insert(_el$8, () => getDaysInMonth().map((date) => {
-      return createComponent(DatePickerGridCellTrigger, {
-        date
-      });
-    }));
-    return _el$8;
+    }, rest), false, false);
+    return _el$;
   })();
 };
-delegateEvents(["click"]);
-var _tmpl$60 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$63 = /* @__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: {
@@ -4530,7 +4744,7 @@ var Input = (props) => {
   const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
   const style = useStyle();
   return (() => {
-    var _el$ = _tmpl$60();
+    var _el$ = _tmpl$63();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return props.variant;
@@ -4550,7 +4764,7 @@ var Input = (props) => {
 };
 
 // src/ui/components/primitives/TimePicker.tsx
-var _tmpl$61 = /* @__PURE__ */ template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
+var _tmpl$64 = /* @__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();
@@ -4590,7 +4804,7 @@ var TimePicker = (props) => {
     }
   };
   return (() => {
-    var _el$ = _tmpl$61(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$64(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$.$$click = (e) => e.stopPropagation();
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -4678,7 +4892,7 @@ var enforceMinMax = (el) => {
 delegateEvents(["click"]);
 
 // src/ui/components/Notification/SnoozeDateTimePicker.tsx
-var _tmpl$62 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
+var _tmpl$65 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
 var fiveMinutesFromNow = () => {
   const futureTime = new Date(Date.now() + 5 * 60 * 1e3);
   const hours = futureTime.getHours();
@@ -4775,7 +4989,7 @@ var SnoozeDateTimePicker = (props) => {
     return t("snooze.datePicker.noDateSelectedTooltip");
   });
   return (() => {
-    var _el$ = _tmpl$62(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    var _el$ = _tmpl$65(), _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),
@@ -4860,7 +5074,7 @@ var SnoozeDateTimePicker = (props) => {
 delegateEvents(["click"]);
 
 // src/ui/components/Notification/NotificationActions.tsx
-var _tmpl$63 = /* @__PURE__ */ template(`<div><span>`);
+var _tmpl$66 = /* @__PURE__ */ template(`<div><span>`);
 var _tmpl$217 = /* @__PURE__ */ template(`<span>`);
 var SNOOZE_PRESETS = [{
   key: "snooze.options.anHourFromNow",
@@ -4907,7 +5121,7 @@ var SnoozeDropdownItem = (props) => {
     iconKey: "clock"
   });
   const content = [(() => {
-    var _el$ = _tmpl$63(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$66(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(IconRendererWrapper, {
       iconKey: "clock",
       "class": snoozeItemIconClass,
@@ -5304,7 +5518,7 @@ var renderNotificationActions = (notification, status) => {
 };
 
 // src/ui/components/Notification/DefaultNotification.tsx
-var _tmpl$64 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$67 = /* @__PURE__ */ template(`<img>`);
 var _tmpl$218 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$410 = /* @__PURE__ */ template(`<a><div><div></div><div></div><div>`);
@@ -5396,7 +5610,7 @@ var DefaultNotification = (props) => {
         })();
       },
       get children() {
-        var _el$2 = _tmpl$64();
+        var _el$2 = _tmpl$67();
         effect((_p$) => {
           var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
           _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
@@ -5647,14 +5861,30 @@ var NewMessagesCta = (props) => {
     }
   });
 };
-var _tmpl$65 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$68 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 16 16"fill=none><path fill=currentColor d="M12.1675 2.04492L11.5308 2.68164L11.1069 3.10645L12.9614 4.96094L12.7495 5.17383L10.894 3.31836L10.4692 3.74219L9.40967 4.80273L8.98486 5.22754L9.40967 5.65137L10.5747 6.81738L10.3628 7.03027L9.19775 5.86328L8.77295 5.43945L6.35889 7.85352L6.62744 8.26172C7.00257 8.83177 7.18147 9.50559 7.14111 10.1816L7.10986 10.4707C7.00656 11.1451 6.68818 11.7654 6.20557 12.2402L5.98877 12.4346C5.46027 12.8661 4.80786 13.1133 4.13135 13.1426L3.84033 13.1416C3.0614 13.1032 2.3236 12.7769 1.771 12.2266H1.77002C1.28602 11.744 0.974717 11.1186 0.877441 10.4473L0.849121 10.1572C0.814077 9.47419 1.00158 8.80051 1.38037 8.2373L1.55518 8.00293C2.04954 7.39769 2.75121 6.99767 3.52393 6.88086C4.29677 6.76406 5.0856 6.93884 5.73682 7.37109L6.146 7.64258L6.49268 7.29492L11.9546 1.83203L12.1675 2.04492ZM4.00537 7.10645C3.71967 7.11042 3.4363 7.15732 3.16553 7.24512L2.89893 7.34668C2.63748 7.46146 2.39532 7.61469 2.18018 7.80078L1.97803 7.99316C1.52375 8.46356 1.2476 9.0739 1.18994 9.71973L1.17822 9.99805C1.18392 10.6519 1.41417 11.2812 1.82568 11.7822L2.01318 11.9883C2.47551 12.4506 3.0805 12.7377 3.7251 12.8066L4.00342 12.8232C4.75062 12.8297 5.4708 12.5425 6.0083 12.0234L6.44775 11.5986L6.40186 11.5527C6.44537 11.4885 6.48869 11.4241 6.52686 11.3564L6.65479 11.1016C6.76956 10.84 6.84411 10.563 6.87646 10.2803L6.89404 9.99609C6.89801 9.71049 6.85899 9.42635 6.77881 9.15332L6.68506 8.88379C6.5776 8.61923 6.4315 8.3726 6.25146 8.15234L6.06006 7.94141C5.85804 7.73939 5.62719 7.56844 5.37549 7.43555L5.1167 7.31543C4.76396 7.17222 4.38604 7.10121 4.00537 7.10645Z"stroke=#525866 stroke-width=1.2>`);
+function Key(props) {
+  return (() => {
+    var _el$ = _tmpl$68();
+    spread(_el$, props, true, true);
+    return _el$;
+  })();
+}
+
+// src/ui/components/Notification/NotificationListSkeleton.tsx
+var _tmpl$69 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$219 = /* @__PURE__ */ template(`<p data-localization=notifications.emptyNotice>`);
+var _tmpl$312 = /* @__PURE__ */ template(`<div><p>Trigger your notification. No setup needed.</p><p>Temporary &lt;Inbox />. All data will expire in 24 hours. Connect API key to persists messages, enable
+                preferences, and connect email.</p><div><div>`);
 var NotificationListSkeleton = (props) => {
   const style = useStyle();
   const {
     t
   } = useLocalization();
+  const {
+    isKeyless
+  } = useInboxContext();
   return (() => {
-    var _el$ = _tmpl$65();
+    var _el$ = _tmpl$69();
     insert(_el$, createComponent(Motion.div, {
       get animate() {
         return {
@@ -5693,7 +5923,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$65();
+              var _el$3 = _tmpl$69();
               insert(_el$3, createComponent(SkeletonText, {
                 appearanceKey: "notificationList__skeletonText",
                 "class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
@@ -5707,7 +5937,7 @@ var NotificationListSkeleton = (props) => {
             })()];
           }
         }))), (() => {
-          var _el$2 = _tmpl$65();
+          var _el$2 = _tmpl$69();
           effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
           return _el$2;
         })()];
@@ -5739,9 +5969,12 @@ var NotificationListSkeleton = (props) => {
           get ["class"]() {
             return style("notificationListEmptyNotice", "nt-text-center");
           },
-          "data-localization": "notifications.emptyNotice",
           get children() {
-            return t("notifications.emptyNotice");
+            return memo(() => !!isKeyless())() ? createComponent(KeylessEmptyState, {}) : (() => {
+              var _el$4 = _tmpl$219();
+              insert(_el$4, () => t("notifications.emptyNotice"));
+              return _el$4;
+            })();
           }
         });
       }
@@ -5750,10 +5983,69 @@ var NotificationListSkeleton = (props) => {
     return _el$;
   })();
 };
+function KeylessEmptyState() {
+  const style = useStyle();
+  const novu = useNovu();
+  return (() => {
+    var _el$5 = _tmpl$312(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild;
+    insert(_el$8, createComponent(Button, {
+      variant: "secondary",
+      size: "sm",
+      get ["class"]() {
+        return style(
+          "notificationListEmptyNotice",
+          // eslint-disable-next-line max-len
+          "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-white nt-border nt-border-neutral-alpha-100 nt-shadow-sm nt-text-[12px] nt-font-medium"
+        );
+      },
+      onClick: () => window.open("https://go.novu.co/keyless?utm_campaign=empty-state-get_api_key", "_blank", "noopener noreferrer"),
+      get children() {
+        return [createComponent(Key, {
+          get ["class"]() {
+            return style("lockIcon", "nt-size-4 nt-mr-2");
+          }
+        }), "Get API key"];
+      }
+    }), _el$9);
+    insert(_el$9, createComponent(Button, {
+      variant: "default",
+      size: "sm",
+      get ["class"]() {
+        return style(
+          "notificationListEmptyNotice",
+          // eslint-disable-next-line max-len
+          "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-neutral-900 nt-text-white nt-shadow-sm nt-text-[12px] nt-font-medium"
+        );
+      },
+      onClick: () => novu.notifications.triggerHelloWorldEvent(),
+      get children() {
+        return [createComponent(Bell, {
+          get ["class"]() {
+            return style("bellIcon", "nt-size-4 nt-mr-2");
+          }
+        }), "Send 'Hello World!'"];
+      }
+    }));
+    effect((_p$) => {
+      var _v$ = style("notificationListEmptyNotice", "nt--mt-[50px]"), _v$2 = style("strong", "nt-text-[#000000] nt-mb-1"), _v$3 = style("notificationListEmptyNotice", "nt-mb-4"), _v$4 = style("notificationListEmptyNotice", "nt-flex nt-gap-4 nt-justify-center");
+      _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$5;
+  })();
+}
 
 // src/ui/components/Notification/NotificationList.tsx
-var _tmpl$66 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$219 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$70 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$220 = /* @__PURE__ */ template(`<div><div>`);
 var NotificationList = (props) => {
   var _a, _b, _c, _d;
   const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
@@ -5797,7 +6089,7 @@ var NotificationList = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$219(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$220(), _el$2 = _el$.firstChild;
     insert(_el$, createComponent(NewMessagesCta, {
       get count() {
         return count();
@@ -5854,7 +6146,7 @@ var NotificationList = (props) => {
             return !end();
           },
           get children() {
-            var _el$3 = _tmpl$66();
+            var _el$3 = _tmpl$70();
             use(setEl, _el$3);
             insert(_el$3, createComponent(NotificationListSkeleton, {
               loading: true
@@ -5876,13 +6168,13 @@ var NotificationList = (props) => {
     return _el$;
   })();
 };
-var _tmpl$67 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$71 = /* @__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$67();
+    var _el$ = _tmpl$71();
     insert(_el$, displayCount);
     effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
     return _el$;
@@ -5909,7 +6201,7 @@ var InboxTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$2 = _tmpl$67();
+        var _el$2 = _tmpl$71();
         insert(_el$2, () => props.label);
         effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
         return _el$2;
@@ -5949,7 +6241,7 @@ var InboxDropdownTab = (props) => {
     },
     get children() {
       return [(() => {
-        var _el$3 = _tmpl$67();
+        var _el$3 = _tmpl$71();
         insert(_el$3, () => props.label);
         effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
         return _el$3;
@@ -6150,7 +6442,7 @@ var InboxTabs = (props) => {
 };
 
 // src/ui/components/Inbox.tsx
-var _tmpl$68 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$73 = /* @__PURE__ */ template(`<div>`);
 var InboxPage = /* @__PURE__ */ function(InboxPage2) {
   InboxPage2["Notifications"] = "notifications";
   InboxPage2["Preferences"] = "preferences";
@@ -6175,7 +6467,7 @@ var InboxContent = (props) => {
     };
   });
   return (() => {
-    var _el$ = _tmpl$68();
+    var _el$ = _tmpl$73();
     insert(_el$, createComponent(Switch$1, {
       get children() {
         return [createComponent(Match, {
@@ -6484,7 +6776,7 @@ var Renderer = (props) => {
                                   portalDivElement.style.height = "100%";
                                 }
                               });
-                              return createComponent(Portal$1, {
+                              return createComponent(Portal, {
                                 mount: node,
                                 ref: (el) => {
                                   portalDivElement = el;