@novu/js 3.11.0 → 3.12.0-rc.2

package/dist/cjs/ui/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkQQNKEWGC_js = require('../chunk-QQNKEWGC.js');
-var chunkVWSQDNZX_js = require('../chunk-VWSQDNZX.js');
+var chunkSZEUW4CB_js = require('../chunk-SZEUW4CB.js');
+var chunkOZV3TKWX_js = require('../chunk-OZV3TKWX.js');
 var chunk7B52C2XE_js = require('../chunk-7B52C2XE.js');
 var web = require('solid-js/web');
 var solidJs = require('solid-js');
@@ -37,12 +37,13 @@ function _interopNamespace(e) {
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
-// _v71190j6q:/home/runner/_work/novu/novu/packages/js/src/ui/index.directcss
-var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-bottom-0{bottom:0}.nt-left-0{left:0}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.-nt-m-1{margin:-.25rem}.nt-mx-auto{margin-left:auto;margin-right:auto}.-nt-mt-2{margin-top:-.5rem}.-nt-mt-\\[2px\\]{margin-top:-2px}.nt--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-3{margin-bottom:.75rem}.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-1\\.5{margin-top:.375rem}.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-3\\.5{height:.875rem}.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-max-h-\\[160px\\]{max-height:160px}.nt-min-h-0{min-height:0}.nt-w-1\\.5{width:.375rem}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[3px\\]{width:3px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-min-w-\\[120px\\]{min-width:120px}.nt-min-w-\\[220px\\]{min-width:220px}.nt-min-w-\\[74px\\]{min-width:74px}.nt-max-w-56{max-width:14rem}.nt-max-w-\\[120px\\]{max-width:120px}.nt-max-w-\\[220px\\]{max-width:220px}.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-primary{border-color:var(--nv-color-primary)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-severity-high{background-color:var(--nv-color-severity-high)}.nt-bg-severity-high-alpha-100{background-color:var(--nv-color-severity-high-alpha-100)}.nt-bg-severity-high-alpha-200{background-color:var(--nv-color-severity-high-alpha-200)}.nt-bg-severity-high-alpha-300{background-color:var(--nv-color-severity-high-alpha-300)}.nt-bg-severity-high-alpha-50{background-color:var(--nv-color-severity-high-alpha-50)}.nt-bg-severity-low{background-color:var(--nv-color-severity-low)}.nt-bg-severity-low-alpha-100{background-color:var(--nv-color-severity-low-alpha-100)}.nt-bg-severity-low-alpha-200{background-color:var(--nv-color-severity-low-alpha-200)}.nt-bg-severity-low-alpha-300{background-color:var(--nv-color-severity-low-alpha-300)}.nt-bg-severity-low-alpha-50{background-color:var(--nv-color-severity-low-alpha-50)}.nt-bg-severity-medium{background-color:var(--nv-color-severity-medium)}.nt-bg-severity-medium-alpha-100{background-color:var(--nv-color-severity-medium-alpha-100)}.nt-bg-severity-medium-alpha-200{background-color:var(--nv-color-severity-medium-alpha-200)}.nt-bg-severity-medium-alpha-300{background-color:var(--nv-color-severity-medium-alpha-300)}.nt-bg-severity-medium-alpha-50{background-color:var(--nv-color-severity-medium-alpha-50)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.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{padding-top:.5rem}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-left{text-align:left}.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-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity,1))}.nt-text-neutral-alpha-500{color:var(--nv-color-neutral-alpha-500)}.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-ring-offset-background{--tw-ring-offset-color:var(--nv-color-background)}.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-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-foreground\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-foreground) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-high\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-high) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-high\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-high) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-low\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-low) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-low\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-low) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-medium\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-medium) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-medium\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-medium) 80% c h)}.\\[--bell-gradient-start\\:var\\(--nv-color-foreground\\)\\]{--bell-gradient-start:var(--nv-color-foreground)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-high\\)\\]{--bell-gradient-start:var(--nv-color-severity-high)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-low\\)\\]{--bell-gradient-start:var(--nv-color-severity-low)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-medium\\)\\]{--bell-gradient-start:var(--nv-color-severity-medium)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}.before\\:nt-m-1:before{content:var(--tw-content);margin:.25rem}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-full:before{border-radius:var(--nv-radius-full);content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-severity-high-alpha-200:before{background-color:var(--nv-color-severity-high-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-high-alpha-300:before{background-color:var(--nv-color-severity-high-alpha-300);content:var(--tw-content)}.before\\:nt-bg-severity-low-alpha-200:before{background-color:var(--nv-color-severity-low-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-low-alpha-300:before{background-color:var(--nv-color-severity-low-alpha-300);content:var(--tw-content)}.before\\:nt-bg-severity-medium-alpha-200:before{background-color:var(--nv-color-severity-medium-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-medium-alpha-300:before{background-color:var(--nv-color-severity-medium-alpha-300);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-bg-severity-high-alpha-50:hover{background-color:var(--nv-color-severity-high-alpha-50)}.hover\\:nt-bg-severity-low-alpha-50:hover{background-color:var(--nv-color-severity-low-alpha-50)}.hover\\:nt-bg-severity-medium-alpha-50:hover{background-color:var(--nv-color-severity-medium-alpha-50)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100{opacity:1}.nt-group:hover .group-hover\\:nt-bg-severity-high-alpha-500{background-color:var(--nv-color-severity-high-alpha-500)}.nt-group:hover .group-hover\\:nt-bg-severity-low-alpha-500{background-color:var(--nv-color-severity-low-alpha-500)}.nt-group:hover .group-hover\\:nt-bg-severity-medium-alpha-500{background-color:var(--nv-color-severity-medium-alpha-500)}.nt-group:hover .group-hover\\:nt-opacity-0{opacity:0}.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.nt-peer:focus-visible~.peer-focus-visible\\:nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-peer:focus-visible~.peer-focus-visible\\:nt-ring-2{--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)}.nt-peer:focus-visible~.peer-focus-visible\\:nt-ring-offset-2{--tw-ring-offset-width:2px}.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\\]\\:nt-cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\\[checked\\]\\:nt-border-none[data-checked],.data-\\[indeterminate\\]\\:nt-border-none[data-indeterminate]{border-style:none}.data-\\[checked\\]\\:nt-bg-primary[data-checked],.data-\\[indeterminate\\]\\:nt-bg-primary[data-indeterminate]{background-color:var(--nv-color-primary)}.data-\\[checked\\]\\:nt-text-primary-foreground[data-checked]{color:var(--nv-color-primary-foreground)}.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-\\[indeterminate\\]\\:nt-text-primary-foreground[data-indeterminate]{color:var(--nv-color-primary-foreground)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[disabled\\]\\:nt-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-12 .nv-notificationList{padding-bottom:3rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-12 .nv-preferencesContainer{padding-bottom:3rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_stop\\]\\:nt-transition-\\[stop-color\\] stop{transition-duration:.15s;transition-property:stop-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
+// _e80bchi7b:/Users/pavlotymchuk/projects/js/novu-2/packages/js/src/ui/index.directcss
+var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-bottom-0{bottom:0}.nt-left-0{left:0}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.-nt-m-1{margin:-.25rem}.nt-mx-auto{margin-left:auto;margin-right:auto}.-nt-mt-2{margin-top:-.5rem}.-nt-mt-\\[2px\\]{margin-top:-2px}.nt--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-3{margin-bottom:.75rem}.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-1\\.5{margin-top:.375rem}.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-6{height:1.5rem;width:1.5rem}.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-3\\.5{height:.875rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-6{height:1.5rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-auto{height:auto}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-max-h-\\[160px\\]{max-height:160px}.nt-min-h-0{min-height:0}.nt-min-h-\\[272px\\]{min-height:272px}.nt-w-1\\.5{width:.375rem}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[350px\\]{width:350px}.nt-w-\\[3px\\]{width:3px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-min-w-\\[120px\\]{min-width:120px}.nt-min-w-\\[220px\\]{min-width:220px}.nt-min-w-\\[74px\\]{min-width:74px}.nt-max-w-56{max-width:14rem}.nt-max-w-\\[120px\\]{max-width:120px}.nt-max-w-\\[220px\\]{max-width:220px}.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))}@keyframes nt-shimmer{0%{opacity:1}50%{opacity:.6}to{opacity:1}}.nt-animate-shimmer{animation:nt-shimmer 1.5s ease-in-out infinite}@keyframes nt-spin{to{transform:rotate(1turn)}}.nt-animate-spin{animation:nt-spin 1s linear infinite}.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-overflow-x-hidden{overflow-x:hidden}.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-rounded-b-lg{border-bottom-left-radius:var(--nv-radius-lg);border-bottom-right-radius:var(--nv-radius-lg)}.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-primary{border-color:var(--nv-color-primary)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-severity-high{background-color:var(--nv-color-severity-high)}.nt-bg-severity-high-alpha-100{background-color:var(--nv-color-severity-high-alpha-100)}.nt-bg-severity-high-alpha-200{background-color:var(--nv-color-severity-high-alpha-200)}.nt-bg-severity-high-alpha-300{background-color:var(--nv-color-severity-high-alpha-300)}.nt-bg-severity-high-alpha-50{background-color:var(--nv-color-severity-high-alpha-50)}.nt-bg-severity-low{background-color:var(--nv-color-severity-low)}.nt-bg-severity-low-alpha-100{background-color:var(--nv-color-severity-low-alpha-100)}.nt-bg-severity-low-alpha-200{background-color:var(--nv-color-severity-low-alpha-200)}.nt-bg-severity-low-alpha-300{background-color:var(--nv-color-severity-low-alpha-300)}.nt-bg-severity-low-alpha-50{background-color:var(--nv-color-severity-low-alpha-50)}.nt-bg-severity-medium{background-color:var(--nv-color-severity-medium)}.nt-bg-severity-medium-alpha-100{background-color:var(--nv-color-severity-medium-alpha-100)}.nt-bg-severity-medium-alpha-200{background-color:var(--nv-color-severity-medium-alpha-200)}.nt-bg-severity-medium-alpha-300{background-color:var(--nv-color-severity-medium-alpha-300)}.nt-bg-severity-medium-alpha-50{background-color:var(--nv-color-severity-medium-alpha-50)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.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-12{padding-bottom:3rem}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2{padding-top:.5rem}.nt-pt-2\\.5{padding-top:.625rem}.nt-pt-8{padding-top:2rem}.nt-text-left{text-align:left}.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-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity,1))}.nt-text-neutral-alpha-500{color:var(--nv-color-neutral-alpha-500)}.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-ring-offset-background{--tw-ring-offset-color:var(--nv-color-background)}.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-\\[width\\]{transition-duration:.15s;transition-property:width;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-transition-opacity{transition-duration:.15s;transition-property:opacity;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)}.nt-will-change-\\[width\\]{will-change:width}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-foreground\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-foreground) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-high\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-high) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-high\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-high) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-low\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-low) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-low\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-low) 80% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-medium\\)_45\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-medium) 45% c h)}.\\[--bell-gradient-end\\:oklch\\(from_var\\(--nv-color-severity-medium\\)_80\\%_c_h\\)\\]{--bell-gradient-end:oklch(from var(--nv-color-severity-medium) 80% c h)}.\\[--bell-gradient-start\\:var\\(--nv-color-foreground\\)\\]{--bell-gradient-start:var(--nv-color-foreground)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-high\\)\\]{--bell-gradient-start:var(--nv-color-severity-high)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-low\\)\\]{--bell-gradient-start:var(--nv-color-severity-low)}.\\[--bell-gradient-start\\:var\\(--nv-color-severity-medium\\)\\]{--bell-gradient-start:var(--nv-color-severity-medium)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[line-height\\:16px\\]{line-height:16px}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}.before\\:nt-m-1:before{content:var(--tw-content);margin:.25rem}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-full:before{border-radius:var(--nv-radius-full);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-severity-high-alpha-200:before{background-color:var(--nv-color-severity-high-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-high-alpha-300:before{background-color:var(--nv-color-severity-high-alpha-300);content:var(--tw-content)}.before\\:nt-bg-severity-low-alpha-200:before{background-color:var(--nv-color-severity-low-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-low-alpha-300:before{background-color:var(--nv-color-severity-low-alpha-300);content:var(--tw-content)}.before\\:nt-bg-severity-medium-alpha-200:before{background-color:var(--nv-color-severity-medium-alpha-200);content:var(--tw-content)}.before\\:nt-bg-severity-medium-alpha-300:before{background-color:var(--nv-color-severity-medium-alpha-300);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-bg-severity-high-alpha-50:hover{background-color:var(--nv-color-severity-high-alpha-50)}.hover\\:nt-bg-severity-low-alpha-50:hover{background-color:var(--nv-color-severity-low-alpha-50)}.hover\\:nt-bg-severity-medium-alpha-50:hover{background-color:var(--nv-color-severity-medium-alpha-50)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100{opacity:1}.nt-group:hover .group-hover\\:nt-bg-severity-high-alpha-500{background-color:var(--nv-color-severity-high-alpha-500)}.nt-group:hover .group-hover\\:nt-bg-severity-low-alpha-500{background-color:var(--nv-color-severity-low-alpha-500)}.nt-group:hover .group-hover\\:nt-bg-severity-medium-alpha-500{background-color:var(--nv-color-severity-medium-alpha-500)}.nt-group:hover .group-hover\\:nt-opacity-0{opacity:0}.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.nt-peer:focus-visible~.peer-focus-visible\\:nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-peer:focus-visible~.peer-focus-visible\\:nt-ring-2{--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)}.nt-peer:focus-visible~.peer-focus-visible\\:nt-ring-offset-2{--tw-ring-offset-width:2px}.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\\]\\:nt-cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\\[checked\\]\\:nt-border-none[data-checked],.data-\\[indeterminate\\]\\:nt-border-none[data-indeterminate]{border-style:none}.data-\\[checked\\]\\:nt-bg-primary[data-checked],.data-\\[indeterminate\\]\\:nt-bg-primary[data-indeterminate]{background-color:var(--nv-color-primary)}.data-\\[checked\\]\\:nt-text-primary-foreground[data-checked]{color:var(--nv-color-primary-foreground)}.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-\\[indeterminate\\]\\:nt-text-primary-foreground[data-indeterminate]{color:var(--nv-color-primary-foreground)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[disabled\\]\\:nt-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-12 .nv-notificationList{padding-bottom:3rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-12 .nv-preferencesContainer{padding-bottom:3rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_stop\\]\\:nt-transition-\\[stop-color\\] stop{transition-duration:.15s;transition-property:stop-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
 
 // src/ui/config/appearanceKeys.ts
-var appearanceKeys = [
+var commonAppearanceKeys = [
   // Primitives
+  "root",
   "button",
   "input",
   "icon",
@@ -50,6 +51,27 @@ var appearanceKeys = [
   "popoverContent",
   "popoverTrigger",
   "popoverClose",
+  "collapsible",
+  "tooltipContent",
+  "tooltipTrigger"
+];
+var inboxAppearanceKeys = [
+  // General
+  "bellIcon",
+  "lockIcon",
+  "bellContainer",
+  "severityHigh__bellContainer",
+  "severityMedium__bellContainer",
+  "severityLow__bellContainer",
+  "bellSeverityGlow",
+  "severityGlowHigh__bellSeverityGlow",
+  "severityGlowMedium__bellSeverityGlow",
+  "severityGlowLow__bellSeverityGlow",
+  "bellDot",
+  "preferences__button",
+  "preferencesContainer",
+  "inboxHeader",
+  "loading",
   "dropdownContent",
   "dropdownTrigger",
   "dropdownItem",
@@ -58,9 +80,6 @@ var appearanceKeys = [
   "dropdownItemLeft__icon",
   "dropdownItemRight__icon",
   "dropdownItem__icon",
-  "collapsible",
-  "tooltipContent",
-  "tooltipTrigger",
   "datePicker",
   "datePickerGrid",
   "datePickerGridRow",
@@ -99,23 +118,6 @@ var appearanceKeys = [
   "tabsContent",
   "tabsTrigger",
   "dots",
-  // General
-  "root",
-  "bellIcon",
-  "lockIcon",
-  "bellContainer",
-  "severityHigh__bellContainer",
-  "severityMedium__bellContainer",
-  "severityLow__bellContainer",
-  "bellSeverityGlow",
-  "severityGlowHigh__bellSeverityGlow",
-  "severityGlowMedium__bellSeverityGlow",
-  "severityGlowLow__bellSeverityGlow",
-  "bellDot",
-  "preferences__button",
-  "preferencesContainer",
-  "inboxHeader",
-  "loading",
   // Inbox
   "inboxContent",
   "inbox__popoverTrigger",
@@ -304,8 +306,51 @@ var appearanceKeys = [
   // Text formatting
   "strong"
 ];
-var defaultLocalization = {
-  locale: "en-US",
+var subscriptionAppearanceKeys = [
+  // Subscription
+  "subscriptionContainer",
+  // Subscription Button
+  "subscriptionButton__button",
+  "subscriptionButtonContainer",
+  "subscriptionButtonIcon",
+  "subscriptionButtonLabel",
+  // Subscription Popover
+  "subscription__popoverTriggerContainer",
+  "subscription__popoverTrigger",
+  "subscriptionTriggerIcon",
+  "subscription__popoverContent",
+  // Subscription Preferences
+  "subscriptionPreferencesContainer",
+  "subscriptionPreferencesHeaderContainer",
+  "subscriptionPreferencesHeader",
+  "subscriptionPreferencesInfoIcon",
+  "subscriptionPreferencesContent",
+  "subscriptionPreferencesGroupsContainer",
+  // Subscription Preferences Fallback
+  "subscriptionPreferencesFallback",
+  "subscriptionPreferencesFallbackTexts",
+  "subscriptionPreferencesFallbackHeader",
+  "subscriptionPreferencesFallbackDescription",
+  // Subscription Preference Row
+  "subscriptionPreferenceRow",
+  "subscriptionPreferenceLabel",
+  // Subscription Preference Group Row
+  "subscriptionPreferenceGroupContainer",
+  "subscriptionPreferenceGroupHeader",
+  "subscriptionPreferenceGroupLabelContainer",
+  "subscriptionPreferenceGroupLabelIcon",
+  "subscriptionPreferenceGroupLabel",
+  "subscriptionPreferenceGroupActionsContainer",
+  "subscriptionPreferenceGroupActionsContainerRight__icon",
+  "subscriptionPreferenceGroupBody",
+  "subscriptionPreferenceGroupWorkflowRow",
+  "subscriptionPreferenceGroupWorkflowLabel"
+];
+var appearanceKeys = [...commonAppearanceKeys, ...inboxAppearanceKeys, ...subscriptionAppearanceKeys];
+var commonLocalization = {
+  locale: "en-US"
+};
+var defaultInboxLocalization = chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, commonLocalization), {
   "inbox.filters.dropdownOptions.unread": "Unread only",
   "inbox.filters.dropdownOptions.default": "Unread & read",
   "inbox.filters.dropdownOptions.archived": "Archived",
@@ -360,7 +405,18 @@ var defaultLocalization = {
   "snooze.options.customTime": "Custom time...",
   "snooze.options.inOneDay": "Tomorrow",
   "snooze.options.inOneWeek": "Next week"
-};
+});
+var defaultSubscriptionLocalization = chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, commonLocalization), {
+  "subscription.subscribe": "Subscribe",
+  "subscription.unsubscribe": "Unsubscribe",
+  "subscription.preferences.header": "Manage subscription",
+  "subscription.preferences.headerInfo": "Manage which updates you\u2019d like to receive. Note: Workflow and global settings control delivery and take precedence when disabled.",
+  "subscription.preferences.notSubscribed.header": "You\u2019re not subscribed.",
+  "subscription.preferences.notSubscribed.description": "Subscribe to receive updates on new activity.",
+  "subscription.preferences.empty.header": "You\u2019re subscribed.",
+  "subscription.preferences.empty.description": "Nothing to manage right now."
+});
+var defaultLocalization = chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, defaultInboxLocalization), defaultSubscriptionLocalization);
 var [dynamicLocalization, setDynamicLocalization] = solidJs.createSignal({});
 
 // src/ui/config/defaultVariables.ts
@@ -393,7 +449,10 @@ function createInfiniteScroll(fetcher, options) {
   const [after, setAfter] = solidJs.createSignal(void 0);
   const [end, setEnd] = solidJs.createSignal(false);
   const [contents, { mutate, refetch }] = solidJs.createResource(
-    () => ({ trigger: true, after: after() }),
+    () => {
+      var _a;
+      return { trigger: true, after: after(), dependency: (_a = options.dependency) == null ? void 0 : _a.call(options) };
+    },
     (params) => fetcher(params.after)
   );
   let observedElement = null;
@@ -747,10 +806,10 @@ var NotificationVisibilityTracker = class {
 
 // src/ui/helpers/useNotificationVisibility.ts
 function useNotificationVisibility() {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   let tracker = null;
-  solidJs.onMount(() => {
-    tracker = new NotificationVisibilityTracker(novu.notifications.inboxService);
+  solidJs.createEffect(() => {
+    tracker = new NotificationVisibilityTracker(novuAccessor().notifications.inboxService);
     solidJs.onCleanup(() => {
       if (tracker) {
         tracker.destroy();
@@ -990,6 +1049,9 @@ var useStyle = () => {
       iconKey,
       context
     }) => {
+      if (!key) {
+        return cn(className);
+      }
       const appearanceKeyParts = key.split("__");
       let finalAppearanceKeys = [];
       for (let i = 0; i < appearanceKeyParts.length; i += 1) {
@@ -1084,46 +1146,32 @@ function requestLock(id, cb) {
     promiseResolve();
   };
 }
-var useBrowserTabsChannel = ({
-  channelName,
-  onMessage
-}) => {
-  const [tabsChannel] = solidJs.createSignal(new BroadcastChannel(channelName));
-  const postMessage = (args) => {
-    const channel = tabsChannel();
-    channel.postMessage(args);
-  };
-  solidJs.onMount(() => {
-    const listener = (event) => {
-      onMessage(event.data);
-    };
-    const channel = tabsChannel();
-    channel.addEventListener("message", listener);
-    solidJs.onCleanup(() => {
-      channel.removeEventListener("message", listener);
-    });
-  });
-  return { postMessage };
-};
 
 // src/ui/helpers/useWebSocketEvent.ts
 var useWebSocketEvent = ({
   event: webSocketEvent,
   eventHandler: onMessage
 }) => {
-  const novu = useNovu();
-  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:c=${novu.contextKey}:e=${webSocketEvent}`;
-  const { postMessage } = useBrowserTabsChannel({ channelName, onMessage });
-  const updateReadCount = (data) => {
-    onMessage(data);
-    postMessage(data);
-  };
-  solidJs.onMount(() => {
+  const novuAccessor = useNovu();
+  solidJs.createEffect(() => {
+    const currentNovu = novuAccessor();
+    const channelName = `nv_ws_connection:a=${currentNovu.applicationIdentifier}:s=${currentNovu.subscriberId}:c=${currentNovu.contextKey}:e=${webSocketEvent}`;
+    const tabsChannel = new BroadcastChannel(channelName);
+    const listener = (event) => {
+      onMessage(event.data);
+    };
+    tabsChannel.addEventListener("message", listener);
+    const updateReadCount = (data) => {
+      onMessage(data);
+      tabsChannel.postMessage(data);
+    };
     let cleanup;
     const resolveLock = requestLock(channelName, () => {
-      cleanup = novu.on(webSocketEvent, updateReadCount);
+      cleanup = currentNovu.on(webSocketEvent, updateReadCount);
     });
     solidJs.onCleanup(() => {
+      tabsChannel.removeEventListener("message", listener);
+      tabsChannel.close();
       if (cleanup) {
         cleanup();
       }
@@ -1243,9 +1291,10 @@ var useNovuEvent = ({
   event,
   eventHandler
 }) => {
-  const novu = useNovu();
-  solidJs.onMount(() => {
-    const cleanup = novu.on(event, eventHandler);
+  const novuAccessor = useNovu();
+  solidJs.createEffect(() => {
+    const currentNovu = novuAccessor();
+    const cleanup = currentNovu.on(event, eventHandler);
     solidJs.onCleanup(() => {
       cleanup();
     });
@@ -1287,15 +1336,6 @@ function useLocalization() {
   return context;
 }
 
-// src/ui/types.ts
-var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
-  NotificationStatus2["UNREAD_READ"] = "unreadRead";
-  NotificationStatus2["UNREAD"] = "unread";
-  NotificationStatus2["ARCHIVED"] = "archived";
-  NotificationStatus2["SNOOZED"] = "snoozed";
-  return NotificationStatus2;
-})(NotificationStatus || {});
-
 // src/ui/context/InboxContext.tsx
 var InboxContext = solidJs.createContext(void 0);
 var STATUS_TO_FILTER = {
@@ -1455,11 +1495,12 @@ var useInboxContext = () => {
 };
 var NovuContext = solidJs.createContext(void 0);
 function NovuProvider(props) {
-  const novu = solidJs.createMemo(() => props.novu || new chunkQQNKEWGC_js.Novu(props.options));
+  const novu = solidJs.createMemo(() => {
+    const novuValue = typeof props.novu === "function" ? props.novu() : props.novu;
+    return novuValue || new chunkSZEUW4CB_js.Novu(props.options);
+  });
   return web.createComponent(NovuContext.Provider, {
-    get value() {
-      return novu();
-    },
+    value: novu,
     get children() {
       return props.children;
     }
@@ -1477,7 +1518,7 @@ function useNovu() {
 var MIN_AMOUNT_OF_NOTIFICATIONS = 1;
 var CountContext = solidJs.createContext(void 0);
 var CountProvider = (props) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   const {
     isOpened,
     tabs,
@@ -1513,7 +1554,7 @@ var CountProvider = (props) => {
     });
     const {
       data
-    } = yield novu.notifications.count({
+    } = yield novuAccessor().notifications.count({
       filters
     });
     if (!data) {
@@ -1533,7 +1574,8 @@ var CountProvider = (props) => {
     }
     setUnreadCounts(newMap);
   });
-  solidJs.onMount(() => {
+  solidJs.createEffect(() => {
+    novuAccessor();
     updateTabCounts();
   });
   useWebSocketEvent({
@@ -1555,7 +1597,7 @@ var CountProvider = (props) => {
     }
   });
   const updateNewNotificationCountsOrCache = (tabLabel, notification, tags, data, severity) => {
-    const notificationsCache = novu.notifications.cache;
+    const notificationsCache = novuAccessor().notifications.cache;
     const limitValue = limit();
     const tabSpecificFilterForCache = chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, filter()), {
       tags,
@@ -1607,8 +1649,8 @@ var CountProvider = (props) => {
           const tabTags = getTagsFromTab(tab);
           const tabDataFilterCriteria = (_a = tab.filter) == null ? void 0 : _a.data;
           const tabSeverityFilterCriteria = (_b = tab.filter) == null ? void 0 : _b.severity;
-          const matchesTagFilter = chunkQQNKEWGC_js.checkNotificationTagFilter(notification.tags, tabTags);
-          const matchesDataFilterCriteria = chunkQQNKEWGC_js.checkNotificationDataFilter(notification.data, tabDataFilterCriteria);
+          const matchesTagFilter = chunkSZEUW4CB_js.checkNotificationTagFilter(notification.tags, tabTags);
+          const matchesDataFilterCriteria = chunkSZEUW4CB_js.checkNotificationDataFilter(notification.data, tabDataFilterCriteria);
           const matchesSeverityFilterCriteria = !tabSeverityFilterCriteria || Array.isArray(tabSeverityFilterCriteria) && tabSeverityFilterCriteria.length === 0 || Array.isArray(tabSeverityFilterCriteria) && tabSeverityFilterCriteria.includes(notification.severity) || !Array.isArray(tabSeverityFilterCriteria) && tabSeverityFilterCriteria === notification.severity;
           if (matchesTagFilter && matchesDataFilterCriteria && matchesSeverityFilterCriteria) {
             const filterKey = createKey({
@@ -2507,7 +2549,7 @@ function CopyToClipboard(props) {
 // src/ui/components/elements/Footer.tsx
 var _tmpl$31 = /* @__PURE__ */ web.template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">`);
 var _tmpl$210 = /* @__PURE__ */ web.template(`<span class="nt-z-10 nt-text-xs">\u2022`);
-var _tmpl$32 = /* @__PURE__ */ web.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$32 = /* @__PURE__ */ web.template(`<a target=_blank class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs></span><span class=nt-text-xs>Novu`);
 var _tmpl$42 = /* @__PURE__ */ web.template(`<span class=nt-underline>Copy cURL`);
 var _tmpl$52 = /* @__PURE__ */ web.template(`<div class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-text-xs nt-text-secondary-foreground"><a href=https://go.novu.co/keyless class="nt-underline nt-flex nt-items-center nt-gap-0.5"target=_blank rel="noopener noreferrer">Get API key</a><span>\u2022</span><span>\u2022</span><button type=button class=nt-underline>Send notification`);
 var _tmpl$62 = /* @__PURE__ */ web.template(`<div><div class="nt-flex nt-items-center nt-gap-1">`);
@@ -2517,17 +2559,17 @@ var stripes = `before:nt-content-[""] before:nt-absolute before:nt-inset-0 befor
 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 = () => {
+var Footer = (props) => {
   const {
     hideBranding,
     isDevelopmentMode,
     isKeyless
   } = useInboxContext();
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   function handleTriggerHelloWorld() {
     return chunk7B52C2XE_js.__async(this, null, function* () {
       try {
-        yield novu.notifications.triggerHelloWorldEvent();
+        yield novuAccessor().notifications.triggerHelloWorldEvent();
       } catch (error) {
         console.error("Failed to send Hello World from UI via novu.notifications:", error);
       }
@@ -2580,6 +2622,7 @@ var Footer = () => {
         },
         get children() {
           var _el$5 = _tmpl$32(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+          web.insert(_el$6, () => props.name ? `${props.name} by` : "Inbox by");
           web.insert(_el$5, web.createComponent(Novu2, {
             "class": "nt-size-2.5"
           }), _el$7);
@@ -2622,7 +2665,7 @@ var Footer = () => {
   });
 };
 function getCurrentDomain() {
-  if (chunkQQNKEWGC_js.isBrowser()) {
+  if (chunkSZEUW4CB_js.isBrowser()) {
     return window.location.hostname;
   }
   return "";
@@ -2634,7 +2677,7 @@ function getCurlCommand() {
     return "";
   }
   const DEFAULT_BACKEND_URL = typeof window !== "undefined" && window.NOVU_LOCAL_BACKEND_URL || "https://api.novu.co";
-  return `curl -X POST   ${DEFAULT_BACKEND_URL}/${chunkQQNKEWGC_js.DEFAULT_API_VERSION}/events/trigger   -H 'Authorization: Keyless ${identifier}'   -H 'Content-Type: application/json'   -d '{
+  return `curl -X POST   ${DEFAULT_BACKEND_URL}/${chunkSZEUW4CB_js.DEFAULT_API_VERSION}/events/trigger   -H 'Authorization: Keyless ${identifier}'   -H 'Content-Type: application/json'   -d '{
     "name": "hello-world",
     "to": {
       "subscriberId": "keyless-subscriber-id"
@@ -2659,9 +2702,9 @@ var buttonVariants = classVarianceAuthority.cva(cn('nt-inline-flex nt-gap-4 nt-i
       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",
+      default: "nt-h-6 nt-px-2 nt-py-1 nt-rounded-md focus-visible:nt-rounded-md before:nt-rounded-md after:nt-rounded-md",
       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"
+      lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-md after:nt-rounded-md focus-visible:nt-rounded-md"
     }
   },
   defaultVariants: {
@@ -2698,7 +2741,7 @@ var Button = (props) => {
 var _tmpl$34 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=size-4><path d="M5 12l5 5l10 -10">`);
 var _tmpl$211 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=size-4><path d="M5 12l14 0">`);
 var Checkbox = (props) => {
-  const [local, others] = solidJs.splitProps(props, ["class"]);
+  const [local, others] = solidJs.splitProps(props, ["id", "class"]);
   return web.createComponent(CheckboxPrimitive__namespace.Root, web.mergeProps({
     get ["class"]() {
       return cn("nt-items-top nt-group nt-relative nt-flex", local.class);
@@ -2706,7 +2749,10 @@ var Checkbox = (props) => {
   }, others, {
     get children() {
       return [web.createComponent(CheckboxPrimitive__namespace.Input, {
-        "class": "nt-peer"
+        "class": "nt-peer",
+        get id() {
+          return local.id;
+        }
       }), web.createComponent(CheckboxPrimitive__namespace.Control, {
         "class": "nt-size-4 nt-shrink-0 nt-rounded-sm nt-border nt-border-primary nt-ring-offset-background data-[disabled]:nt-cursor-not-allowed data-[disabled]:nt-opacity-50 peer-focus-visible:nt-outline-none peer-focus-visible:nt-ring-2 peer-focus-visible:ntring-ring peer-focus-visible:nt-ring-offset-2 data-[checked]:nt-border-none data-[indeterminate]:nt-border-none data-[checked]:nt-bg-primary data-[indeterminate]:nt-bg-primary data-[checked]:nt-text-primary-foreground data-[indeterminate]:nt-text-primary-foreground",
         get children() {
@@ -3168,7 +3214,17 @@ function usePopover() {
 
 // src/ui/components/primitives/Popover/PopoverContent.tsx
 var _tmpl$38 = /* @__PURE__ */ web.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 popoverContentVariants = classVarianceAuthority.cva(cn("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"), {
+  variants: {
+    size: {
+      inbox: "nt-w-[400px] nt-h-[600px]",
+      subscription: "nt-w-[350px] nt-h-auto"
+    }
+  },
+  defaultVariants: {
+    size: "inbox"
+  }
+});
 var PopoverContentBody = (props) => {
   const {
     open,
@@ -3196,7 +3252,10 @@ var PopoverContentBody = (props) => {
       get ["class"]() {
         return style({
           key: local.appearanceKey || "popoverContent",
-          className: cn(popoverContentVariants(), local.class)
+          className: cn(popoverContentVariants({
+            size: props.size
+          }), local.class),
+          context: props.context
         });
       },
       get style() {
@@ -4032,14 +4091,14 @@ var StatusDropdown = () => {
 
 // src/ui/api/hooks/useArchiveAll.ts
 var useArchiveAll = (props) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   const archiveAll = (..._0) => chunk7B52C2XE_js.__async(void 0, [..._0], function* ({
     tags,
     data
   } = {}) {
     var _a, _b;
     try {
-      yield novu.notifications.archiveAll({ tags, data });
+      yield novuAccessor().notifications.archiveAll({ tags, data });
       (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
     } catch (error) {
       (_b = void 0 ) == null ? void 0 : _b.call(props, error);
@@ -4050,14 +4109,14 @@ var useArchiveAll = (props) => {
 
 // src/ui/api/hooks/useArchiveAllRead.ts
 var useArchiveAllRead = (props) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   const archiveAllRead = (..._0) => chunk7B52C2XE_js.__async(void 0, [..._0], function* ({
     tags,
     data
   } = {}) {
     var _a, _b;
     try {
-      yield novu.notifications.archiveAllRead({ tags, data });
+      yield novuAccessor().notifications.archiveAllRead({ tags, data });
       (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
     } catch (error) {
       (_b = void 0 ) == null ? void 0 : _b.call(props, error);
@@ -4066,63 +4125,67 @@ var useArchiveAllRead = (props) => {
   return { archiveAllRead };
 };
 var useNotificationsInfiniteScroll = (props) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   let filter = chunk7B52C2XE_js.__spreadValues({}, props.options());
   const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll(
     (after) => chunk7B52C2XE_js.__async(void 0, null, function* () {
       var _a, _b;
-      const { data: data2 } = yield novu.notifications.list(chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, props.options() || {}), { after }));
+      const { data: data2 } = yield novuAccessor().notifications.list(chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, props.options() || {}), { after }));
       return { data: (_a = data2 == null ? void 0 : data2.notifications) != null ? _a : [], hasMore: (_b = data2 == null ? void 0 : data2.hasMore) != null ? _b : false };
     }),
     {
-      paginationField: "id"
+      paginationField: "id",
+      dependency: novuAccessor
     }
   );
-  solidJs.onMount(() => {
+  solidJs.createEffect(() => {
     const listener = ({ data: data2 }) => {
-      if (!data2 || !chunkQQNKEWGC_js.isSameFilter(filter, data2.filter)) {
+      if (!data2 || !chunkSZEUW4CB_js.isSameFilter(filter, data2.filter)) {
         return;
       }
       mutate({ data: data2.notifications, hasMore: data2.hasMore });
     };
-    const cleanup = novu.on("notifications.list.updated", listener);
+    const cleanup = novuAccessor().on("notifications.list.updated", listener);
     solidJs.onCleanup(() => cleanup());
   });
   solidJs.createEffect(() => chunk7B52C2XE_js.__async(void 0, null, function* () {
     const newFilter = chunk7B52C2XE_js.__spreadValues({}, props.options());
-    if (chunkQQNKEWGC_js.isSameFilter(filter, newFilter)) {
+    if (chunkSZEUW4CB_js.isSameFilter(filter, newFilter)) {
       return;
     }
-    novu.notifications.clearCache();
+    novuAccessor().notifications.clearCache();
     yield reset();
     filter = newFilter;
   }));
   const refetch = (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({ filter: filter2 }) {
-    novu.notifications.clearCache({ filter: filter2 });
+    novuAccessor().notifications.clearCache({ filter: filter2 });
     yield reset();
   });
   return { data, initialLoading, setEl, end, refetch };
 };
 var usePreferences = (options) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   const [loading, setLoading] = solidJs.createSignal(true);
-  const [preferences, { mutate, refetch }] = solidJs.createResource(options || {}, (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({ tags, severity, criticality }) {
-    try {
-      const response = yield novu.preferences.list({ tags, severity, criticality });
-      return response.data;
-    } catch (error) {
-      console.error("Error fetching preferences:", error);
-      throw error;
-    }
-  }));
-  solidJs.onMount(() => {
+  const [preferences, { mutate, refetch }] = solidJs.createResource(
+    () => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, options), { dependency: novuAccessor() }),
+    (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({ tags, severity, criticality }) {
+      try {
+        const response = yield novuAccessor().preferences.list({ tags, severity, criticality });
+        return response.data;
+      } catch (error) {
+        console.error("Error fetching preferences:", error);
+        throw error;
+      }
+    })
+  );
+  solidJs.createEffect(() => {
     const listener = ({ data }) => {
       if (!data) {
         return;
       }
       mutate(data);
     };
-    const cleanup = novu.on("preferences.list.updated", listener);
+    const cleanup = novuAccessor().on("preferences.list.updated", listener);
     solidJs.onCleanup(() => cleanup());
   });
   solidJs.createEffect(() => {
@@ -4133,14 +4196,14 @@ var usePreferences = (options) => {
 
 // src/ui/api/hooks/useReadAll.ts
 var useReadAll = (props) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   const readAll = (..._0) => chunk7B52C2XE_js.__async(void 0, [..._0], function* ({
     tags,
     data
   } = {}) {
     var _a, _b;
     try {
-      yield novu.notifications.readAll({ tags, data });
+      yield novuAccessor().notifications.readAll({ tags, data });
       (_a = props == null ? void 0 : props.onSuccess) == null ? void 0 : _a.call(props);
     } catch (error) {
       (_b = void 0 ) == null ? void 0 : _b.call(props, error);
@@ -4643,23 +4706,25 @@ var Switch2 = (props) => {
         className: cn("nt-relative nt-inline-flex nt-cursor-pointer nt-items-center", {
           "nt-opacity-50 nt-cursor-not-allowed": disabled()
         })
-      }), _v$2 = disabled(), _v$3 = style({
+      }), _v$2 = props.id, _v$3 = disabled(), _v$4 = style({
         key: "channelSwitchThumb",
         className: cn(`nt-h-4 nt-w-7 nt-rounded-full nt-bg-neutral-alpha-300 after:nt-absolute after:nt-top-0.5 after:nt-size-3 after:nt-left-0.5 after:nt-rounded-full after:nt-bg-background after:nt-transition-all after:nt-content-[''] nt-transition-all nt-duration-200 after:nt-duration-200 shadow-sm`, {
           "nt-bg-primary nt-shadow-none nt-border-neutral-alpha-400 after:nt-translate-x-full after:nt-border-background": isChecked(),
           "after:nt-translate-x-1/2": isIndeterminate()
         })
-      }), _v$4 = state();
+      }), _v$5 = state();
       _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && web.setAttribute(_el$3, "data-state", _p$.o = _v$4);
+      _v$2 !== _p$.t && web.setAttribute(_el$2, "id", _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$2.disabled = _p$.a = _v$3);
+      _v$4 !== _p$.o && web.className(_el$3, _p$.o = _v$4);
+      _v$5 !== _p$.i && web.setAttribute(_el$3, "data-state", _p$.i = _v$5);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0
+      o: void 0,
+      i: void 0
     });
     web.effect(() => _el$2.checked = isChecked());
     return _el$;
@@ -4667,7 +4732,7 @@ var Switch2 = (props) => {
 };
 
 // src/ui/components/elements/Preferences/ChannelRow.tsx
-var _tmpl$57 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span></div><div>`);
+var _tmpl$57 = /* @__PURE__ */ web.template(`<div><div><div></div><label></label></div><div>`);
 var ChannelRow = (props) => {
   const style = useStyle();
   const updatePreference = (enabled) => chunk7B52C2XE_js.__async(void 0, null, function* () {
@@ -4680,6 +4745,10 @@ var ChannelRow = (props) => {
   });
   const state = () => props.channel.state;
   const channel = () => props.channel.channel;
+  const channelId = () => {
+    var _a;
+    return `channel-${(_a = props.workflowId) != null ? _a : ""}-${channel()}`;
+  };
   return (() => {
     var _el$ = _tmpl$57(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
     web.insert(_el$3, web.createComponent(ChannelIcon, {
@@ -4697,6 +4766,9 @@ var ChannelRow = (props) => {
     }));
     web.insert(_el$4, () => getLabel(channel()));
     web.insert(_el$5, web.createComponent(Switch2, {
+      get id() {
+        return channelId();
+      },
       get state() {
         return state();
       },
@@ -4716,7 +4788,7 @@ var ChannelRow = (props) => {
         }
       }), _v$2 = style({
         key: "channelLabelContainer",
-        className: "nt-flex nt-items-center nt-gap-2 nt-text-foreground",
+        className: "nt-flex nt-items-center nt-gap-2 nt-text-foreground nt-w-full",
         context: {
           preference: props.preference,
           preferenceGroup: props.preferenceGroup
@@ -4728,14 +4800,14 @@ var ChannelRow = (props) => {
           preference: props.preference,
           preferenceGroup: props.preferenceGroup
         }
-      }), _v$4 = style({
+      }), _v$4 = channelId(), _v$5 = style({
         key: "channelLabel",
-        className: "nt-text-sm nt-font-semibold",
+        className: "nt-text-sm nt-font-semibold nt-w-full nt-cursor-pointer",
         context: {
           preference: props.preference,
           preferenceGroup: props.preferenceGroup
         }
-      }), _v$5 = style({
+      }), _v$6 = style({
         key: "channelSwitchContainer",
         className: "nt-flex nt-items-center",
         context: {
@@ -4746,15 +4818,17 @@ var ChannelRow = (props) => {
       _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
       _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && web.className(_el$4, _p$.o = _v$4);
-      _v$5 !== _p$.i && web.className(_el$5, _p$.i = _v$5);
+      _v$4 !== _p$.o && web.setAttribute(_el$4, "for", _p$.o = _v$4);
+      _v$5 !== _p$.i && web.className(_el$4, _p$.i = _v$5);
+      _v$6 !== _p$.n && web.className(_el$5, _p$.n = _v$6);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0
+      i: void 0,
+      n: void 0
     });
     return _el$;
   })();
@@ -6330,7 +6404,7 @@ web.delegateEvents(["click"]);
 var _tmpl$67 = /* @__PURE__ */ web.template(`<div>`);
 var Preferences = () => {
   var _a, _b, _c;
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   const style = useStyle();
   const {
     preferencesFilter,
@@ -6375,7 +6449,7 @@ var Preferences = () => {
     });
   });
   const bulkUpdatePreferences = (preferences2) => (channels) => chunk7B52C2XE_js.__async(void 0, null, function* () {
-    yield novu.preferences.bulkUpdate(preferences2.map((el) => {
+    yield novuAccessor().preferences.bulkUpdate(preferences2.map((el) => {
       const oldChannels = Object.keys(el.channels);
       const channelsToUpdate = Object.keys(channels).filter((channel) => oldChannels.includes(channel)).reduce((acc, channel) => {
         acc[channel] = channels[channel];
@@ -6617,7 +6691,7 @@ var Text = (props) => props.children;
 var Markdown = (props) => {
   const [local, rest] = solidJs.splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey", "context"]);
   const style = useStyle();
-  const tokens = solidJs.createMemo(() => chunkVWSQDNZX_js.parseMarkdownIntoTokens(local.children));
+  const tokens = solidJs.createMemo(() => chunkOZV3TKWX_js.parseMarkdownIntoTokens(local.children));
   return (() => {
     var _el$2 = _tmpl$222();
     web.spread(_el$2, web.mergeProps({
@@ -7536,6 +7610,10 @@ var DefaultNotification = (props) => {
     status
   } = useInboxContext();
   const [minutesPassed, setMinutesPassed] = solidJs.createSignal(0);
+  const severity = solidJs.createMemo(() => {
+    var _a;
+    return (_a = props.notification.severity) != null ? _a : "none" /* NONE */;
+  });
   const createdAt = solidJs.createMemo(() => {
     minutesPassed();
     return formatToRelativeTime({
@@ -7906,22 +7984,22 @@ var DefaultNotification = (props) => {
     web.effect((_p$) => {
       var _a;
       var _v$ = style({
-        key: SEVERITY_TO_NOTIFICATION_KEYS[props.notification.severity],
+        key: SEVERITY_TO_NOTIFICATION_KEYS[severity()],
         className: cn("nt-transition nt-w-full nt-text-sm hover:nt-bg-primary-alpha-25 nt-group nt-relative nt-flex nt-items-start nt-p-4 nt-gap-2", "[&:not(:first-child)]:nt-border-t nt-border-neutral-alpha-100", {
           "nt-cursor-pointer": !props.notification.isRead || !!((_a = props.notification.redirect) == null ? void 0 : _a.url),
-          "nt-bg-severity-high-alpha-100 hover:nt-bg-severity-high-alpha-50": props.notification.severity === "high" /* HIGH */,
-          "nt-bg-severity-medium-alpha-100 hover:nt-bg-severity-medium-alpha-50": props.notification.severity === "medium" /* MEDIUM */,
-          "nt-bg-severity-low-alpha-100 hover:nt-bg-severity-low-alpha-50": props.notification.severity === "low" /* LOW */
+          "nt-bg-severity-high-alpha-100 hover:nt-bg-severity-high-alpha-50": severity() === "high" /* HIGH */,
+          "nt-bg-severity-medium-alpha-100 hover:nt-bg-severity-medium-alpha-50": severity() === "medium" /* MEDIUM */,
+          "nt-bg-severity-low-alpha-100 hover:nt-bg-severity-low-alpha-50": severity() === "low" /* LOW */
         }),
         context: {
           notification: props.notification
         }
       }), _v$2 = style({
-        key: SEVERITY_TO_BAR_KEYS[props.notification.severity],
+        key: SEVERITY_TO_BAR_KEYS[severity()],
         className: cn("nt-transition nt-absolute nt-left-0 nt-top-0 nt-bottom-0 nt-w-[3px]", {
-          "nt-bg-severity-high group-hover:nt-bg-severity-high-alpha-500": props.notification.severity === "high" /* HIGH */,
-          "nt-bg-severity-medium group-hover:nt-bg-severity-medium-alpha-500": props.notification.severity === "medium" /* MEDIUM */,
-          "nt-bg-severity-low group-hover:nt-bg-severity-low-alpha-500": props.notification.severity === "low" /* LOW */
+          "nt-bg-severity-high group-hover:nt-bg-severity-high-alpha-500": severity() === "high" /* HIGH */,
+          "nt-bg-severity-medium group-hover:nt-bg-severity-medium-alpha-500": severity() === "medium" /* MEDIUM */,
+          "nt-bg-severity-low group-hover:nt-bg-severity-low-alpha-500": severity() === "low" /* LOW */
         }),
         context: {
           notification: props.notification
@@ -8174,7 +8252,7 @@ var NotificationListSkeleton = (props) => {
 };
 function KeylessEmptyState() {
   const style = useStyle();
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   return (() => {
     var _el$5 = _tmpl$315(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild;
     web.insert(_el$8, web.createComponent(Button, {
@@ -8207,7 +8285,7 @@ function KeylessEmptyState() {
           className: "nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-neutral-900 nt-text-white nt-shadow-sm nt-text-[12px] nt-font-medium"
         });
       },
-      onClick: () => novu.notifications.triggerHelloWorldEvent(),
+      onClick: () => novuAccessor().notifications.triggerHelloWorldEvent(),
       get children() {
         return [web.createComponent(Bell, {
           get ["class"]() {
@@ -8968,97 +9046,1512 @@ var Inbox = (props) => {
     }
   });
 };
-
-// src/ui/components/Renderer.tsx
-var novuComponents = {
-  Inbox,
-  InboxContent,
-  Bell: Bell2,
-  Notifications: (props) => {
-    if (props.renderNotification) {
-      const _a = props, otherProps = chunk7B52C2XE_js.__objRest(_a, [
-        "renderBody",
-        "renderSubject",
-        "renderAvatar",
-        "renderDefaultActions",
-        "renderCustomActions"
-      ]);
-      return web.createComponent(InboxContent, web.mergeProps(otherProps, {
-        hideNav: true,
-        get initialPage() {
-          return InboxPage.Notifications;
-        }
-      }));
+var useSubscription = (options) => {
+  const novuAccessor = useNovu();
+  const identifier = () => {
+    var _a;
+    const subscriberId = novuAccessor().subscriberId;
+    return (_a = options.identifier) != null ? _a : chunkOZV3TKWX_js.buildSubscriptionIdentifier({ topicKey: options.topicKey, subscriberId });
+  };
+  const [loading, setLoading] = solidJs.createSignal(true);
+  const [subscription, { mutate, refetch }] = solidJs.createResource(options || {}, (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({ topicKey }) {
+    try {
+      const response = yield novuAccessor().subscriptions.get({ topicKey, identifier: identifier() });
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching subscription:", error);
+      throw error;
     }
-    const _b = props, propsWithoutRenderNotification = chunk7B52C2XE_js.__objRest(_b, [
-      "renderNotification"
-    ]);
-    return web.createComponent(InboxContent, web.mergeProps(propsWithoutRenderNotification, {
-      hideNav: true,
-      get initialPage() {
-        return InboxPage.Notifications;
+  }));
+  const create = (args) => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    setLoading(true);
+    const response = yield novuAccessor().subscriptions.create(args);
+    if (response.data) {
+      mutate(response.data);
+    }
+    setLoading(false);
+    return response;
+  });
+  const remove = (args) => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    setLoading(true);
+    const response = "subscription" in args ? yield novuAccessor().subscriptions.delete({ subscription: args.subscription }) : yield novuAccessor().subscriptions.delete({ topicKey: args.topicKey, subscriptionId: args.subscriptionId });
+    mutate(null);
+    setLoading(false);
+    return response;
+  });
+  solidJs.onMount(() => {
+    const listener = ({ data }) => {
+      if (!data || data.topicKey !== options.topicKey || data.identifier !== identifier()) {
+        return;
       }
-    }));
-  },
-  Preferences: (props) => {
-    if (props.renderNotification) {
-      const _a = props, otherProps = chunk7B52C2XE_js.__objRest(_a, [
-        "renderBody",
-        "renderSubject",
-        "renderAvatar",
-        "renderDefaultActions",
-        "renderCustomActions"
-      ]);
-      return web.createComponent(InboxContent, web.mergeProps(otherProps, {
-        hideNav: true,
-        get initialPage() {
-          return InboxPage.Preferences;
-        }
-      }));
-    }
-    const _b = props, propsWithoutRenderNotification = chunk7B52C2XE_js.__objRest(_b, [
-      "renderNotification"
-    ]);
-    return web.createComponent(InboxContent, web.mergeProps(propsWithoutRenderNotification, {
-      hideNav: true,
-      get initialPage() {
-        return InboxPage.Preferences;
+      mutate(data);
+      setLoading(false);
+    };
+    const currentNovu = novuAccessor();
+    const cleanupCreatePending = currentNovu.on("subscription.create.pending", ({ args }) => {
+      if (!args || args.topicKey !== options.topicKey || args.identifier !== identifier()) {
+        return;
       }
-    }));
-  }
-};
-var Renderer = (props) => {
-  const nodes = () => [...props.nodes.keys()];
-  solidJs.onMount(() => {
-    var _a;
-    const id = NOVU_DEFAULT_CSS_ID;
-    const root = props.container instanceof ShadowRoot ? props.container : document;
-    const el = root.getElementById(id);
-    if (el) {
-      return;
-    }
-    const styleEl = document.createElement("style");
-    styleEl.id = id;
-    styleEl.innerHTML = ui_default;
-    const stylesContainer = (_a = props.container) != null ? _a : document.head;
-    stylesContainer.insertBefore(styleEl, stylesContainer.firstChild);
+      setLoading(true);
+    });
+    const cleanupCreate = currentNovu.on("subscription.create.resolved", listener);
+    const cleanupUpdate = currentNovu.on("subscription.update.resolved", listener);
+    const cleanupDeletePending = currentNovu.on("subscription.delete.pending", ({ args }) => {
+      var _a, _b;
+      const subscriptionId = (_a = subscription()) == null ? void 0 : _a.id;
+      const subscriptionIdentifier = (_b = subscription()) == null ? void 0 : _b.identifier;
+      if (!args || "subscriptionId" in args && args.subscriptionId !== subscriptionId && args.subscriptionId !== subscriptionIdentifier || "subscription" in args && args.subscription.id !== subscriptionId && args.subscription.identifier !== subscriptionIdentifier) {
+        return;
+      }
+      setLoading(true);
+    });
+    const cleanupDelete = currentNovu.on("subscription.delete.resolved", ({ args }) => {
+      var _a, _b;
+      const subscriptionId = (_a = subscription()) == null ? void 0 : _a.id;
+      const subscriptionIdentifier = (_b = subscription()) == null ? void 0 : _b.identifier;
+      if (!args || "subscriptionId" in args && args.subscriptionId !== subscriptionId && args.subscriptionId !== subscriptionIdentifier || "subscription" in args && args.subscription.id !== subscriptionId && args.subscription.identifier !== subscriptionIdentifier) {
+        return;
+      }
+      mutate(null);
+      setLoading(false);
+    });
     solidJs.onCleanup(() => {
-      styleEl.remove();
+      cleanupCreatePending();
+      cleanupCreate();
+      cleanupDeletePending();
+      cleanupUpdate();
+      cleanupDelete();
     });
   });
-  return web.createComponent(NovuProvider, {
-    get options() {
-      return props.options;
+  solidJs.createEffect(() => {
+    setLoading(subscription.loading);
+  });
+  return { subscription, loading, mutate, refetch, create, remove };
+};
+var _tmpl$84 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 16 16"><path fill=currentColor d="M9.237 12.088c0 .362-.128.71-.357.965-.23.255-.541.398-.866.398s-.637-.143-.866-.398a1.45 1.45 0 0 1-.357-.965zM11.23 4.373a.39.39 0 0 1 .53.57l-7.402 6.903a.39.39 0 0 1-.531-.57zM11.058 6.652q.015.162.015.327v.4A4.37 4.37 0 0 0 12 10.097l.142.177c.16.2.2.487.1.732a.61.61 0 0 1-.557.402H5.96zM8.014 2.55c.338 0 .612.305.612.682v.41c.53.119 1.011.392 1.404.775L4.215 9.84c.478-.707.74-1.57.74-2.46v-.4c0-1.648 1.052-3.023 2.448-3.338v-.409c0-.377.273-.681.61-.681">`);
+function BellCross(props) {
+  return (() => {
+    var _el$ = _tmpl$84();
+    web.spread(_el$, props, true, true);
+    return _el$;
+  })();
+}
+var _tmpl$85 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 16 16"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.1 d="M7.206 12.5c.08.152.196.278.336.366a.86.86 0 0 0 .916 0 .96.96 0 0 0 .336-.366m.58-6.5h2.75M10.75 4.5v3m.918 1.732q.156.227.338.431.091.11.113.257a.54.54 0 0 1-.033.282.5.5 0 0 1-.17.217.43.43 0 0 1-.25.08H4.334a.43.43 0 0 1-.25-.08.5.5 0 0 1-.17-.217.54.54 0 0 1 .081-.539C4.604 8.978 5.25 8.25 5.25 6c0-.515.121-1.02.352-1.47.231-.448.564-.824.967-1.092a2.6 2.6 0 0 1 1.333-.436c.471-.018.94.096 1.358.332">`);
+function BellPlus(props) {
+  return (() => {
+    var _el$ = _tmpl$85();
+    web.spread(_el$, props, true, true);
+    return _el$;
+  })();
+}
+var _tmpl$86 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg fill=currentColor viewBox="0 0 24 24"><path d="M18.364 5.636 16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364">`);
+function Loader(props) {
+  return (() => {
+    var _el$ = _tmpl$86();
+    web.spread(_el$, props, true, true);
+    return _el$;
+  })();
+}
+
+// src/ui/components/subscription/SubscriptionButton.tsx
+var _tmpl$87 = /* @__PURE__ */ web.template(`<span><span>`);
+var iconKeyToComponentMap3 = {
+  bellCross: BellCross,
+  bellPlus: BellPlus
+};
+var SubscriptionButton = (props) => {
+  const style = useStyle();
+  const {
+    t
+  } = useLocalization();
+  const subscription = solidJs.createMemo(() => {
+    var _a;
+    return (_a = props.subscription) != null ? _a : void 0;
+  });
+  const iconKey = solidJs.createMemo(() => props.subscription ? "bellCross" : "bellPlus");
+  const IconComponent = solidJs.createMemo(() => iconKeyToComponentMap3[iconKey()]);
+  return web.createComponent(Button, {
+    get ["class"]() {
+      return style({
+        key: "subscriptionButton__button",
+        className: "nt-transition-[width] nt-duration-800 nt-will-change-[width]",
+        context: {
+          subscription: subscription()
+        }
+      });
     },
-    get novu() {
-      return props.novu;
+    variant: "secondary",
+    get onClick() {
+      return props.onClick;
+    },
+    get disabled() {
+      return props.loading;
     },
     get children() {
-      return web.createComponent(LocalizationProvider, {
-        get localization() {
-          return props.localization;
+      var _el$ = _tmpl$87(), _el$2 = _el$.firstChild;
+      web.insert(_el$, web.createComponent(Motion.span, {
+        initial: {
+          opacity: 1
         },
-        get children() {
+        get animate() {
+          return {
+            opacity: props.loading ? 0 : 1
+          };
+        },
+        transition: {
+          easing: "ease-in-out",
+          duration: 0.2
+        },
+        "class": "nt-inline-flex nt-items-center",
+        get children() {
+          return web.createComponent(IconRendererWrapper, {
+            get iconKey() {
+              return iconKey();
+            },
+            get ["class"]() {
+              return style({
+                key: "subscriptionButtonIcon",
+                className: "nt-text-foreground-alpha-600 nt-size-3.5",
+                iconKey: iconKey(),
+                context: {
+                  subscription: subscription()
+                }
+              });
+            },
+            get fallback() {
+              var _a;
+              return web.memo(() => !!IconComponent())() && ((_a = IconComponent()) == null ? void 0 : _a({
+                class: style({
+                  key: "subscriptionButtonIcon",
+                  className: "nt-text-foreground-alpha-600 nt-size-3.5",
+                  iconKey: iconKey(),
+                  context: {
+                    subscription: subscription()
+                  }
+                })
+              }));
+            }
+          });
+        }
+      }), _el$2);
+      web.insert(_el$, web.createComponent(Motion.span, {
+        initial: {
+          opacity: 1
+        },
+        get animate() {
+          return {
+            opacity: props.loading ? 1 : 0
+          };
+        },
+        transition: {
+          easing: "ease-in-out",
+          duration: 0.2
+        },
+        "class": "nt-absolute nt-left-0 nt-inline-flex nt-items-center",
+        get children() {
+          return web.createComponent(IconRendererWrapper, {
+            iconKey: "loader",
+            get ["class"]() {
+              return style({
+                key: "subscriptionButtonIcon",
+                className: "nt-text-foreground-alpha-600 nt-size-3.5 nt-animate-spin",
+                iconKey: iconKey(),
+                context: {
+                  subscription: subscription()
+                }
+              });
+            },
+            get fallback() {
+              return web.createComponent(Loader, {
+                get ["class"]() {
+                  return style({
+                    key: "subscriptionButtonIcon",
+                    className: "nt-text-foreground-alpha-600 nt-size-3.5 nt-animate-spin",
+                    iconKey: iconKey(),
+                    context: {
+                      subscription: subscription()
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      }), _el$2);
+      web.insert(_el$2, (() => {
+        var _c$ = web.memo(() => !!props.subscription);
+        return () => _c$() ? t("subscription.unsubscribe") : t("subscription.subscribe");
+      })());
+      web.effect((_p$) => {
+        var _v$ = style({
+          key: "subscriptionButtonContainer",
+          className: "nt-relative nt-overflow-hidden nt-inline-flex nt-items-center nt-justify-center nt-gap-1",
+          context: {
+            subscription: subscription()
+          }
+        }), _v$2 = style({
+          key: "subscriptionButtonLabel",
+          className: "[line-height:16px]",
+          context: {
+            subscription: subscription()
+          }
+        }), _v$3 = props.subscription ? "subscription.unsubscribe" : "subscription.subscribe";
+        _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+        _v$3 !== _p$.a && web.setAttribute(_el$2, "data-localization", _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      });
+      return _el$;
+    }
+  });
+};
+var _tmpl$88 = /* @__PURE__ */ web.template(`<div>`);
+var _tmpl$227 = /* @__PURE__ */ web.template(`<div><div><div><span></span></div><div><span>`);
+var _tmpl$316 = /* @__PURE__ */ web.template(`<div><label>`);
+var SubscriptionPreferenceGroupRow = (props) => {
+  const style = useStyle();
+  const {
+    t
+  } = useLocalization();
+  const [isOpened, setIsOpened] = solidJs.createSignal(false);
+  const preferences = solidJs.createMemo(() => props.group.group);
+  const groupState = solidJs.createMemo(() => {
+    const enabledCount = preferences().filter((pref) => {
+      return pref.preference.enabled;
+    }).length;
+    if (enabledCount === 0) {
+      return {
+        checked: false,
+        indeterminate: false
+      };
+    }
+    if (enabledCount === preferences().length) {
+      return {
+        checked: true,
+        indeterminate: false
+      };
+    }
+    return {
+      checked: false,
+      indeterminate: true
+    };
+  });
+  const handleGroupChange = (checked) => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    const updates = props.group.group.map((pref) => ({
+      workflowId: pref.preference.workflow.identifier || pref.preference.workflow.id,
+      value: checked
+    }));
+    yield props.subscription.bulkUpdatePreferences(updates);
+  });
+  const handlePreferenceChange = (preference) => (checked) => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    yield preference.update({
+      value: checked
+    });
+  });
+  const getPreferenceChecked = (preference) => {
+    return preference.enabled;
+  };
+  return (() => {
+    var _el$ = _tmpl$227(), _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);
+    };
+    web.insert(_el$3, web.createComponent(IconRendererWrapper, {
+      iconKey: "nodeTree",
+      get ["class"]() {
+        return style({
+          key: "subscriptionPreferenceGroupLabelIcon",
+          className: "nt-text-foreground-alpha-600 nt-size-3.5",
+          context: {
+            group: props.group
+          }
+        });
+      },
+      get fallback() {
+        return web.createComponent(NodeTree, {
+          get ["class"]() {
+            return style({
+              key: "subscriptionPreferenceGroupLabelIcon",
+              className: "nt-text-foreground-alpha-600 nt-size-3.5",
+              context: {
+                group: props.group
+              }
+            });
+          }
+        });
+      }
+    }), _el$4);
+    web.insert(_el$4, () => props.group.label);
+    web.insert(_el$5, web.createComponent(Checkbox, {
+      get checked() {
+        return groupState().checked;
+      },
+      get indeterminate() {
+        return groupState().indeterminate;
+      },
+      onChange: handleGroupChange,
+      onClick: (e) => {
+        e.stopPropagation();
+      }
+    }), _el$6);
+    web.insert(_el$6, web.createComponent(IconRendererWrapper, {
+      iconKey: "arrowDropDown",
+      get ["class"]() {
+        return style({
+          key: "moreTabs__icon",
+          className: "nt-size-4"
+        });
+      },
+      get fallback() {
+        return web.createComponent(ArrowDropDown, {
+          get ["class"]() {
+            return style({
+              key: "moreTabs__icon",
+              className: "nt-size-4"
+            });
+          }
+        });
+      }
+    }));
+    web.insert(_el$, web.createComponent(Collapsible, {
+      get open() {
+        return isOpened();
+      },
+      get children() {
+        var _el$7 = _tmpl$88();
+        web.insert(_el$7, web.createComponent(solidJs.For, {
+          get each() {
+            return preferences();
+          },
+          children: (el) => (() => {
+            var _el$8 = _tmpl$316(), _el$9 = _el$8.firstChild;
+            web.insert(_el$9, () => {
+              var _a;
+              return (_a = el.label) != null ? _a : t(el.preference.workflow.identifier);
+            });
+            web.insert(_el$8, web.createComponent(Checkbox, {
+              get id() {
+                return `subscription-preference-${el.preference.workflow.identifier}`;
+              },
+              get checked() {
+                return getPreferenceChecked(el.preference);
+              },
+              get onChange() {
+                return handlePreferenceChange(el.preference);
+              }
+            }), null);
+            web.effect((_p$) => {
+              var _a;
+              var _v$1 = style({
+                key: "subscriptionPreferenceGroupWorkflowRow",
+                className: "nt-flex nt-items-center nt-justify-between nt-p-2 nt-rounded nt-gap-2",
+                context: {
+                  preference: el
+                }
+              }), _v$10 = `subscription-preference-${el.preference.workflow.identifier}`, _v$11 = style({
+                key: "subscriptionPreferenceGroupWorkflowLabel",
+                className: "nt-text-sm nt-truncate nt-text-start nt-w-full nt-cursor-pointer",
+                context: {
+                  preference: el
+                }
+              }), _v$12 = el.preference.workflow.identifier, _v$13 = (_a = el.label) != null ? _a : t(el.preference.workflow.identifier);
+              _v$1 !== _p$.e && web.className(_el$8, _p$.e = _v$1);
+              _v$10 !== _p$.t && web.setAttribute(_el$9, "for", _p$.t = _v$10);
+              _v$11 !== _p$.a && web.className(_el$9, _p$.a = _v$11);
+              _v$12 !== _p$.o && web.setAttribute(_el$9, "data-localization", _p$.o = _v$12);
+              _v$13 !== _p$.i && web.setAttribute(_el$9, "title", _p$.i = _v$13);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
+            });
+            return _el$8;
+          })()
+        }));
+        web.effect(() => web.className(_el$7, style({
+          key: "subscriptionPreferenceGroupBody",
+          className: "nt-flex nt-p-2 nt-flex-col nt-gap-1 nt-bg-background nt-rounded-b-lg",
+          context: {
+            group: props.group
+          }
+        })));
+        return _el$7;
+      }
+    }), null);
+    web.effect((_p$) => {
+      var _v$ = style({
+        key: "subscriptionPreferenceGroupContainer",
+        className: "nt-bg-neutral-alpha-25 nt-rounded-lg nt-border nt-border-neutral-alpha-50",
+        context: {
+          group: props.group
+        }
+      }), _v$2 = isOpened(), _v$3 = style({
+        key: "subscriptionPreferenceGroupHeader",
+        className: "nt-flex nt-justify-between nt-p-2 nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden",
+        context: {
+          group: props.group
+        }
+      }), _v$4 = style({
+        key: "subscriptionPreferenceGroupLabelContainer",
+        className: "nt-overflow-hidden nt-flex nt-items-center nt-gap-1",
+        context: {
+          group: props.group
+        }
+      }), _v$5 = style({
+        key: "subscriptionPreferenceGroupLabel",
+        className: "nt-text-sm nt-font-semibold nt-truncate nt-text-start nt-mr-2",
+        context: {
+          group: props.group
+        }
+      }), _v$6 = isOpened(), _v$7 = props.group.label, _v$8 = style({
+        key: "subscriptionPreferenceGroupActionsContainer",
+        className: "nt-flex nt-items-center nt-gap-1",
+        context: {
+          group: props.group
+        }
+      }), _v$9 = style({
+        key: "subscriptionPreferenceGroupActionsContainerRight__icon",
+        className: "nt-text-foreground-alpha-600 nt-transition-all nt-duration-200 data-[open=true]:nt-transform data-[open=true]:nt-rotate-180",
+        context: {
+          group: props.group
+        }
+      }), _v$0 = isOpened();
+      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && web.setAttribute(_el$, "data-open", _p$.t = _v$2);
+      _v$3 !== _p$.a && web.className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && web.className(_el$3, _p$.o = _v$4);
+      _v$5 !== _p$.i && web.className(_el$4, _p$.i = _v$5);
+      _v$6 !== _p$.n && web.setAttribute(_el$4, "data-open", _p$.n = _v$6);
+      _v$7 !== _p$.s && web.setAttribute(_el$4, "title", _p$.s = _v$7);
+      _v$8 !== _p$.h && web.className(_el$5, _p$.h = _v$8);
+      _v$9 !== _p$.r && web.className(_el$6, _p$.r = _v$9);
+      _v$0 !== _p$.d && web.setAttribute(_el$6, "data-open", _p$.d = _v$0);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0
+    });
+    return _el$;
+  })();
+};
+web.delegateEvents(["click"]);
+var _tmpl$89 = /* @__PURE__ */ web.template(`<div><label>`);
+var SubscriptionPreferenceRow = (props) => {
+  const style = useStyle();
+  const {
+    t
+  } = useLocalization();
+  const preference = solidJs.createMemo(() => props.preference.preference);
+  const handleChange = (checked) => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    yield preference().update({
+      value: checked
+    });
+  });
+  const isChecked = () => {
+    return preference().enabled;
+  };
+  return (() => {
+    var _el$ = _tmpl$89(), _el$2 = _el$.firstChild;
+    web.insert(_el$2, () => {
+      var _a;
+      return (_a = props.preference.label) != null ? _a : t(preference().workflow.identifier);
+    });
+    web.insert(_el$, web.createComponent(Checkbox, {
+      get id() {
+        return `subscription-preference-${preference().workflow.identifier}`;
+      },
+      get checked() {
+        return isChecked();
+      },
+      onChange: handleChange
+    }), null);
+    web.effect((_p$) => {
+      var _a;
+      var _v$ = style({
+        key: "subscriptionPreferenceRow",
+        className: "nt-flex nt-items-center nt-justify-between nt-p-2 nt-rounded-lg nt-gap-2",
+        context: {
+          preference: props.preference
+        }
+      }), _v$2 = `subscription-preference-${preference().workflow.identifier}`, _v$3 = style({
+        key: "subscriptionPreferenceLabel",
+        className: "nt-text-sm nt-font-medium nt-truncate nt-text-start nt-w-full nt-cursor-pointer",
+        context: {
+          preference: props.preference
+        }
+      }), _v$4 = preference().workflow.identifier, _v$5 = (_a = props.preference.label) != null ? _a : t(preference().workflow.identifier);
+      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && web.setAttribute(_el$2, "for", _p$.t = _v$2);
+      _v$3 !== _p$.a && web.className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && web.setAttribute(_el$2, "data-localization", _p$.o = _v$4);
+      _v$5 !== _p$.i && web.setAttribute(_el$2, "title", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+};
+var _tmpl$90 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg width=138 height=100 fill=none viewBox="0 0 138 100"><rect width=131.1 height=33.1 x=3.025 y=.45 stroke=#e1e4ea stroke-dasharray="10 2.7"stroke-width=.9 rx=3.55></rect><rect width=123.1 height=25.1 x=7.025 y=4.45 fill=#fff rx=1.55></rect><rect width=123.1 height=25.1 x=7.025 y=4.45 stroke=#f2f2f2 stroke-width=.9 rx=1.55></rect><g clip-path=url(#a)><path stroke=#cacfd8 stroke-linecap=round stroke-linejoin=round stroke-width=1.08 d="m66.7 17 1.25 1.25 2.5-2.5M72.74 17a4.167 4.167 0 1 1-8.333 0 4.167 4.167 0 0 1 8.334 0"></path></g><g filter=url(#b)><g clip-path=url(#c)><rect width=132 height=29 x=1.724 y=67.207 fill=#fcfcfc rx=4 transform="rotate(-4 1.724 67.207)"></rect><path fill=#f4f4f4 d="M10.402 76.625a4 4 0 0 1 3.711-4.27l9.976-.697a4 4 0 0 1 4.27 3.711l.627 8.978a4 4 0 0 1-3.711 4.27l-9.976.697a4 4 0 0 1-4.27-3.71z"></path><path fill=#e4e4e4 d="M19.345 75.498c-.316.022-.55.319-.527.664l.027.374c-1.28.38-2.172 1.706-2.067 3.214l.026.367a3.97 3.97 0 0 1-.69 2.546l-.12.171a.67.67 0 0 0-.049.677.57.57 0 0 0 .546.332l6.84-.479a.57.57 0 0 0 .495-.404.67.67 0 0 0-.141-.664l-.143-.152a3.96 3.96 0 0 1-1.038-2.426l-.026-.366c-.105-1.508-1.173-2.699-2.493-2.896l-.026-.374c-.025-.345-.299-.606-.614-.584m1.479 9.555c.197-.248.294-.575.271-.906l-1.14.08-1.14.08c.023.331.165.64.395.86.23.218.53.328.832.307.303-.021.584-.172.782-.42"></path><rect width=27 height=3 x=36.373 y=75.311 fill=url(#d) rx=1.5 transform="rotate(-4 36.373 75.31)"></rect><rect width=59 height=3 x=36.722 y=80.299 fill=url(#e) rx=1.5 transform="rotate(-4 36.722 80.299)"></rect><rect width=59 height=3 x=36.722 y=80.299 fill=url(#f) rx=1.5 transform="rotate(-4 36.722 80.299)"></rect></g><rect width=132 height=29 x=1.724 y=67.207 stroke=#e6e6e6 stroke-opacity=.5 stroke-width=.6 rx=4 transform="rotate(-4 1.724 67.207)"></rect></g><path stroke=#e1e4ea stroke-linejoin=bevel d="M68.596 37v23.614"></path><defs><linearGradient id=d x1=29.846 x2=67.676 y1=76.586 y2=76.586 gradientUnits=userSpaceOnUse><stop stop-color=#e4e4e4></stop><stop offset=.48 stop-color=#f1f1f1></stop><stop offset=.992 stop-color=#fcfcfc stop-opacity=.75></stop></linearGradient><linearGradient id=e x1=22.458 x2=105.123 y1=81.574 y2=81.574 gradientUnits=userSpaceOnUse><stop stop-color=#e4e4e4></stop><stop offset=.48 stop-color=#f1f1f1></stop><stop offset=.992 stop-color=#fcfcfc stop-opacity=.75></stop></linearGradient><linearGradient id=f x1=22.458 x2=105.123 y1=81.574 y2=81.574 gradientUnits=userSpaceOnUse><stop stop-color=#e4e4e4></stop><stop offset=.48 stop-color=#f1f1f1></stop><stop offset=.992 stop-color=#fcfcfc stop-opacity=.75></stop></linearGradient><clipPath id=a><path fill=#fff d="M63.575 12h10v10h-10z"></path></clipPath><clipPath id=c><rect width=132 height=29 x=1.724 y=67.207 fill=#fff rx=4 transform="rotate(-4 1.724 67.207)"></rect></clipPath><filter id=b width=137.15 height=41.586 x=0 y=57.969 color-interpolation-filters=sRGB filterUnits=userSpaceOnUse><feFlood flood-opacity=0 result=BackgroundImageFix></feFlood><feColorMatrix in=SourceAlpha result=hardAlpha values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy=1.693></feOffset><feGaussianBlur stdDeviation=.847></feGaussianBlur><feColorMatrix values="0 0 0 0 0.917008 0 0 0 0 0.917008 0 0 0 0 0.917008 0 0 0 0.02 0"></feColorMatrix><feBlend in2=BackgroundImageFix result=effect1_dropShadow_4908_18899></feBlend><feBlend in=SourceGraphic in2=effect1_dropShadow_4908_18899 result=shape></feBlend><feColorMatrix in=SourceAlpha result=hardAlpha values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy=-2></feOffset><feComposite in2=hardAlpha k2=-1 k3=1 operator=arithmetic></feComposite><feColorMatrix values="0 0 0 0 0.975488 0 0 0 0 0.975488 0 0 0 0 0.975488 0 0 0 1 0"></feColorMatrix><feBlend in2=shape result=effect2_innerShadow_4908_18899>`);
+var EmptyState = () => {
+  return _tmpl$90();
+};
+var _tmpl$91 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg width=136 height=88 fill=none viewBox="0 0 136 88"><g filter=url(#a)><g clip-path=url(#b)><rect width=132 height=29 x=1.993 y=.301 fill=#fcfcfc rx=4></rect><path fill=#f4f4f4 d="M9.993 10.3a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9a4 4 0 0 1-4 4h-10a4 4 0 0 1-4-4z"></path><path fill=#e4e4e4 d="M18.993 9.8c-.316 0-.572.28-.572.626v.375c-1.303.289-2.285 1.55-2.285 3.062v.367c0 .918-.31 1.805-.866 2.493l-.133.162a.67.67 0 0 0-.094.672.57.57 0 0 0 .521.369h6.857a.57.57 0 0 0 .522-.37.67.67 0 0 0-.095-.671l-.132-.162a3.96 3.96 0 0 1-.866-2.492v-.368c0-1.511-.982-2.773-2.286-3.062v-.375c0-.346-.255-.625-.571-.625m.809 9.636c.214-.235.334-.553.334-.885H17.85c0 .332.12.65.334.885s.505.365.809.365c.303 0 .594-.131.809-.365"></path><rect width=27 height=3 x=35.993 y=10.801 fill=url(#c) rx=1.5></rect><rect width=59 height=3 x=35.993 y=15.801 fill=url(#d) rx=1.5></rect><rect width=59 height=3 x=35.993 y=15.801 fill=url(#e) rx=1.5></rect></g><rect width=132 height=29 x=1.993 y=.301 stroke=#e6e6e6 stroke-opacity=.5 stroke-width=.6 rx=4></rect></g><rect width=131.1 height=33.1 x=2.443 y=53.751 stroke=#e1e4ea stroke-dasharray="10 2.7"stroke-width=.9 rx=3.55></rect><rect width=123.1 height=25.1 x=6.443 y=57.751 fill=#fff rx=1.55></rect><rect width=123.1 height=25.1 x=6.443 y=57.751 stroke=#f2f2f2 stroke-width=.9 rx=1.55></rect><path fill=#cacfd8 d="M68.743 71.145v.784a2.25 2.25 0 0 0-3 2.122h-.75a3 3 0 0 1 3.75-2.906m-.75-.47a2.25 2.25 0 1 1-.001-4.498 2.25 2.25 0 0 1 .001 4.499m0-.75a1.5 1.5 0 1 0 0-2.999 1.5 1.5 0 0 0 0 3m2.47 2.25-.686-.685.53-.53 1.591 1.59-1.59 1.592-.531-.53.686-.686h-1.345v-.75z"></path><path stroke=#e1e4ea stroke-linejoin=bevel d="M67.993 50.3v-18"></path><defs><linearGradient id=c x1=29.466 x2=67.295 y1=12.076 y2=12.076 gradientUnits=userSpaceOnUse><stop stop-color=#e4e4e4></stop><stop offset=.48 stop-color=#f1f1f1></stop><stop offset=.992 stop-color=#fcfcfc stop-opacity=.75></stop></linearGradient><linearGradient id=d x1=21.729 x2=104.394 y1=17.076 y2=17.076 gradientUnits=userSpaceOnUse><stop stop-color=#e4e4e4></stop><stop offset=.48 stop-color=#f1f1f1></stop><stop offset=.992 stop-color=#fcfcfc stop-opacity=.75></stop></linearGradient><linearGradient id=e x1=21.729 x2=104.394 y1=17.076 y2=17.076 gradientUnits=userSpaceOnUse><stop stop-color=#e4e4e4></stop><stop offset=.48 stop-color=#f1f1f1></stop><stop offset=.992 stop-color=#fcfcfc stop-opacity=.75></stop></linearGradient><clipPath id=b><rect width=132 height=29 x=1.993 y=.301 fill=#fff rx=4></rect></clipPath><filter id=a width=135.986 height=32.988 x=0 y=0 color-interpolation-filters=sRGB filterUnits=userSpaceOnUse><feFlood flood-opacity=0 result=BackgroundImageFix></feFlood><feColorMatrix in=SourceAlpha result=hardAlpha values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy=1.693></feOffset><feGaussianBlur stdDeviation=.847></feGaussianBlur><feColorMatrix values="0 0 0 0 0.917008 0 0 0 0 0.917008 0 0 0 0 0.917008 0 0 0 0.02 0"></feColorMatrix><feBlend in2=BackgroundImageFix result=effect1_dropShadow_4850_12317></feBlend><feBlend in=SourceGraphic in2=effect1_dropShadow_4850_12317 result=shape></feBlend><feColorMatrix in=SourceAlpha result=hardAlpha values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy=-2></feOffset><feComposite in2=hardAlpha k2=-1 k3=1 operator=arithmetic></feComposite><feColorMatrix values="0 0 0 0 0.975488 0 0 0 0 0.975488 0 0 0 0 0.975488 0 0 0 1 0"></feColorMatrix><feBlend in2=shape result=effect2_innerShadow_4850_12317>`);
+var NotSubscribedState = () => {
+  return _tmpl$91();
+};
+var _tmpl$92 = /* @__PURE__ */ web.template(`<div><div></div><div></div><div>`);
+var SubscriptionPreferencesListSkeleton = () => {
+  const style = useStyle();
+  return (() => {
+    var _el$ = _tmpl$92(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+    web.insert(_el$2, web.createComponent(SkeletonText, {
+      appearanceKey: "notificationList__skeletonText",
+      "class": "nt-h-3.5 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded-sm nt-animate-shimmer"
+    }), null);
+    web.insert(_el$2, web.createComponent(SkeletonText, {
+      appearanceKey: "preferencesList__skeletonText",
+      "class": "nt-size-4 nt-bg-neutral-alpha-50 nt-rounded-sm nt-animate-shimmer"
+    }), null);
+    web.insert(_el$3, web.createComponent(SkeletonText, {
+      appearanceKey: "notificationList__skeletonText",
+      "class": "nt-h-3.5 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded-sm nt-animate-shimmer"
+    }), null);
+    web.insert(_el$3, web.createComponent(SkeletonText, {
+      appearanceKey: "preferencesList__skeletonText",
+      "class": "nt-size-4 nt-bg-neutral-alpha-50 nt-rounded-sm nt-animate-shimmer"
+    }), null);
+    web.insert(_el$4, web.createComponent(SkeletonText, {
+      appearanceKey: "notificationList__skeletonText",
+      "class": "nt-h-3.5 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded-sm nt-animate-shimmer"
+    }), null);
+    web.insert(_el$4, web.createComponent(SkeletonText, {
+      appearanceKey: "preferencesList__skeletonText",
+      "class": "nt-size-4 nt-bg-neutral-alpha-50 nt-rounded-sm nt-animate-shimmer"
+    }), null);
+    web.effect((_p$) => {
+      var _v$ = style({
+        key: "preferencesList__skeletonContent",
+        className: "nt-flex nt-flex-col nt-w-full nt-gap-3 nt-py-2"
+      }), _v$2 = style({
+        key: "preferencesList__skeletonItem",
+        className: "nt-flex nt-items-center nt-justify-between"
+      }), _v$3 = style({
+        key: "preferencesList__skeletonItem",
+        className: "nt-flex nt-items-center nt-justify-between"
+      }), _v$4 = style({
+        key: "preferencesList__skeletonItem",
+        className: "nt-flex nt-items-center nt-justify-between"
+      });
+      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && web.className(_el$4, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+};
+
+// src/ui/components/subscription/SubscriptionPreferencesFallback.tsx
+var _tmpl$93 = /* @__PURE__ */ web.template(`<div><div><span></span><span>`);
+var SubscriptionPreferencesFallback = (props) => {
+  const style = useStyle();
+  const {
+    t
+  } = useLocalization();
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return !props.loading;
+    },
+    get fallback() {
+      return web.createComponent(SubscriptionPreferencesListSkeleton, {});
+    },
+    get children() {
+      var _el$ = _tmpl$93(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          var _a;
+          return ((_a = props.subscription) == null ? void 0 : _a.preferences.length) === 0;
+        },
+        get fallback() {
+          return web.createComponent(NotSubscribedState, {});
+        },
+        get children() {
+          return web.createComponent(EmptyState, {});
+        }
+      }), _el$2);
+      web.insert(_el$3, (() => {
+        var _c$ = web.memo(() => {
+          var _a;
+          return ((_a = props.subscription) == null ? void 0 : _a.preferences.length) === 0;
+        });
+        return () => _c$() ? t("subscription.preferences.empty.header") : t("subscription.preferences.notSubscribed.header");
+      })());
+      web.insert(_el$4, (() => {
+        var _c$2 = web.memo(() => {
+          var _a;
+          return ((_a = props.subscription) == null ? void 0 : _a.preferences.length) === 0;
+        });
+        return () => _c$2() ? t("subscription.preferences.empty.description") : t("subscription.preferences.notSubscribed.description");
+      })());
+      web.insert(_el$, web.createComponent(SubscriptionButton, {
+        get subscription() {
+          return props.subscription;
+        },
+        get loading() {
+          return props.loading;
+        },
+        get onClick() {
+          return props.onSubscribeClick;
+        }
+      }), null);
+      web.effect((_p$) => {
+        var _a, _b, _c, _d, _e, _f;
+        var _v$ = style({
+          key: "subscriptionPreferencesFallback",
+          className: "nt-flex nt-flex-col nt-items-center nt-justify-center nt-pt-8 nt-pb-12 nt-gap-6",
+          context: {
+            subscription: (_a = props.subscription) != null ? _a : void 0
+          }
+        }), _v$2 = style({
+          key: "subscriptionPreferencesFallbackTexts",
+          className: "nt-flex nt-flex-col nt-items-center nt-justify-center nt-gap-1",
+          context: {
+            subscription: (_b = props.subscription) != null ? _b : void 0
+          }
+        }), _v$3 = style({
+          key: "subscriptionPreferencesFallbackHeader",
+          className: "nt-text-xs nt-font-medium",
+          context: {
+            subscription: (_c = props.subscription) != null ? _c : void 0
+          }
+        }), _v$4 = ((_d = props.subscription) == null ? void 0 : _d.preferences.length) === 0 ? "subscription.preferences.empty.header" : "subscription.preferences.notSubscribed.header", _v$5 = style({
+          key: "subscriptionPreferencesFallbackDescription",
+          className: "nt-text-xs nt-font-medium nt-text-foreground-alpha-400",
+          context: {
+            subscription: (_e = props.subscription) != null ? _e : void 0
+          }
+        }), _v$6 = ((_f = props.subscription) == null ? void 0 : _f.preferences.length) === 0 ? "subscription.preferences.empty.description" : "subscription.preferences.notSubscribed.description";
+        _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+        _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
+        _v$4 !== _p$.o && web.setAttribute(_el$3, "data-localization", _p$.o = _v$4);
+        _v$5 !== _p$.i && web.className(_el$4, _p$.i = _v$5);
+        _v$6 !== _p$.n && web.setAttribute(_el$4, "data-localization", _p$.n = _v$6);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0
+      });
+      return _el$;
+    }
+  });
+};
+
+// src/ui/components/subscription/SubscriptionPreferences.tsx
+var _tmpl$94 = /* @__PURE__ */ web.template(`<div class=nt-max-w-56>`);
+var _tmpl$228 = /* @__PURE__ */ web.template(`<div><p>`);
+var _tmpl$317 = /* @__PURE__ */ web.template(`<div>`);
+var SubscriptionPreferences = (props) => {
+  const style = useStyle();
+  const {
+    isDevelopmentMode
+  } = useInboxContext();
+  const {
+    t
+  } = useLocalization();
+  const groupedPreferences = solidJs.createMemo(() => {
+    var _a, _b, _c;
+    const subscriptionPreferences = (_b = (_a = props.subscription) == null ? void 0 : _a.preferences) != null ? _b : [];
+    return (_c = props.preferences.map((preferenceFilter) => {
+      var _a2;
+      if (typeof preferenceFilter === "string") {
+        const foundPreference = subscriptionPreferences.find((el) => {
+          var _a3, _b2;
+          return ((_a3 = el.workflow) == null ? void 0 : _a3.id) === preferenceFilter || ((_b2 = el.workflow) == null ? void 0 : _b2.identifier) === preferenceFilter;
+        });
+        if (foundPreference) {
+          return {
+            label: foundPreference.workflow.name,
+            preference: foundPreference
+          };
+        }
+      }
+      if (typeof preferenceFilter === "object" && "workflowId" in preferenceFilter) {
+        const foundPreference = subscriptionPreferences.find((pref) => {
+          var _a3, _b2;
+          return ((_a3 = pref.workflow) == null ? void 0 : _a3.id) === preferenceFilter.workflowId || ((_b2 = pref.workflow) == null ? void 0 : _b2.identifier) === preferenceFilter.workflowId;
+        });
+        if (foundPreference) {
+          return {
+            label: (_a2 = preferenceFilter.label) != null ? _a2 : foundPreference.workflow.name,
+            preference: foundPreference
+          };
+        }
+      }
+      if (typeof preferenceFilter === "object" && "filter" in preferenceFilter) {
+        let foundPreferences = [];
+        if (typeof preferenceFilter.filter === "object" && "workflows" in preferenceFilter.filter) {
+          const {
+            workflows
+          } = preferenceFilter.filter;
+          foundPreferences = subscriptionPreferences.filter((pref) => {
+            return workflows == null ? void 0 : workflows.some((workflow) => {
+              var _a3, _b2;
+              return workflow.workflowId === ((_a3 = pref.workflow) == null ? void 0 : _a3.id) || workflow.workflowId === ((_b2 = pref.workflow) == null ? void 0 : _b2.identifier);
+            });
+          }).map((pref) => {
+            var _a3;
+            const workflow = workflows == null ? void 0 : workflows.find((workflow2) => {
+              var _a4, _b2;
+              return workflow2.workflowId === ((_a4 = pref.workflow) == null ? void 0 : _a4.id) || workflow2.workflowId === ((_b2 = pref.workflow) == null ? void 0 : _b2.identifier);
+            });
+            return {
+              label: (_a3 = workflow == null ? void 0 : workflow.label) != null ? _a3 : pref.workflow.name,
+              preference: pref
+            };
+          });
+        } else if (typeof preferenceFilter.filter === "object" && ("workflowIds" in preferenceFilter.filter || "tags" in preferenceFilter.filter)) {
+          const {
+            workflowIds,
+            tags
+          } = preferenceFilter.filter;
+          foundPreferences = subscriptionPreferences.filter((pref) => {
+            var _a3, _b2, _c2, _d;
+            return (workflowIds == null ? void 0 : workflowIds.includes((_b2 = (_a3 = pref.workflow) == null ? void 0 : _a3.id) != null ? _b2 : "")) || (workflowIds == null ? void 0 : workflowIds.includes((_d = (_c2 = pref.workflow) == null ? void 0 : _c2.identifier) != null ? _d : "")) || (tags == null ? void 0 : tags.some((tag) => {
+              var _a4, _b3;
+              return (_b3 = (_a4 = pref.workflow) == null ? void 0 : _a4.tags) == null ? void 0 : _b3.includes(tag);
+            }));
+          }).map((pref) => ({
+            label: pref.workflow.name,
+            preference: pref
+          }));
+        }
+        return {
+          label: preferenceFilter.label,
+          group: foundPreferences
+        };
+      }
+      return void 0;
+    }).filter((el) => el !== void 0)) != null ? _c : [];
+  });
+  solidJs.createEffect(() => {
+    setDynamicLocalization((prev) => {
+      var _a;
+      return chunk7B52C2XE_js.__spreadValues(chunk7B52C2XE_js.__spreadValues({}, prev), (_a = props.subscription) == null ? void 0 : _a.preferences.reduce((acc, preference) => {
+        var _a2, _b;
+        if (((_a2 = preference.workflow) == null ? void 0 : _a2.identifier) && ((_b = preference.workflow) == null ? void 0 : _b.name)) {
+          acc[preference.workflow.identifier] = preference.workflow.name;
+        }
+        return acc;
+      }, {}));
+    });
+  });
+  return (() => {
+    var _el$ = _tmpl$317();
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return !props.renderPreferences;
+      },
+      get fallback() {
+        return web.createComponent(ExternalElementRenderer, {
+          render: (el) => {
+            var _a;
+            if (props.renderPreferences) {
+              return props.renderPreferences(el, (_a = props.subscription) != null ? _a : void 0, props.loading);
+            }
+            return () => {
+            };
+          }
+        });
+      },
+      get children() {
+        return [(() => {
+          var _el$2 = _tmpl$228(), _el$3 = _el$2.firstChild;
+          web.insert(_el$3, () => t("subscription.preferences.header"));
+          web.insert(_el$2, web.createComponent(Tooltip.Root, {
+            get children() {
+              return [web.createComponent(Tooltip.Trigger, {
+                get children() {
+                  return web.createComponent(IconRenderer, {
+                    iconKey: "info",
+                    get ["class"]() {
+                      var _a;
+                      return style({
+                        key: "subscriptionPreferencesInfoIcon",
+                        className: "nt-text-foreground-alpha-600 nt-size-3.5",
+                        context: {
+                          subscription: (_a = props.subscription) != null ? _a : void 0
+                        }
+                      });
+                    },
+                    fallback: Info
+                  });
+                }
+              }), web.createComponent(Tooltip.Content, {
+                "data-localization": "subscription.preferences.headerInfo",
+                get children() {
+                  var _el$4 = _tmpl$94();
+                  web.insert(_el$4, () => t("subscription.preferences.headerInfo"));
+                  return _el$4;
+                }
+              })];
+            }
+          }), null);
+          web.effect((_p$) => {
+            var _a, _b;
+            var _v$ = style({
+              key: "subscriptionPreferencesHeaderContainer",
+              className: "nt-px-3 nt-py-2 nt-border-b nt-border-neutral-alpha-100 nt-flex nt-items-center nt-gap-1",
+              context: {
+                subscription: (_a = props.subscription) != null ? _a : void 0
+              }
+            }), _v$2 = style({
+              key: "subscriptionPreferencesHeader",
+              className: "nt-text-base nt-font-medium",
+              context: {
+                subscription: (_b = props.subscription) != null ? _b : void 0
+              }
+            });
+            _v$ !== _p$.e && web.className(_el$2, _p$.e = _v$);
+            _v$2 !== _p$.t && web.className(_el$3, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$2;
+        })(), (() => {
+          var _el$5 = _tmpl$317();
+          web.insert(_el$5, web.createComponent(solidJs.Show, {
+            get when() {
+              var _a, _b, _c, _d;
+              return !props.loading && ((_b = (_a = props.subscription) == null ? void 0 : _a.preferences) == null ? void 0 : _b.length) && ((_d = (_c = props.subscription) == null ? void 0 : _c.preferences) == null ? void 0 : _d.length) > 0;
+            },
+            get fallback() {
+              return web.createComponent(SubscriptionPreferencesFallback, {
+                get subscription() {
+                  var _a;
+                  return (_a = props.subscription) != null ? _a : void 0;
+                },
+                get loading() {
+                  return props.loading;
+                },
+                get onSubscribeClick() {
+                  return props.onSubscribeClick;
+                }
+              });
+            },
+            get children() {
+              var _el$6 = _tmpl$317();
+              web.insert(_el$6, web.createComponent(solidJs.Index, {
+                get each() {
+                  return groupedPreferences();
+                },
+                children: (preference) => web.createComponent(solidJs.Show, {
+                  get when() {
+                    return preference().group;
+                  },
+                  get fallback() {
+                    return web.createComponent(SubscriptionPreferenceRow, {
+                      get preference() {
+                        return preference();
+                      }
+                    });
+                  },
+                  get children() {
+                    return web.createComponent(solidJs.Show, {
+                      get when() {
+                        var _a;
+                        return (_a = preference().group) == null ? void 0 : _a.length;
+                      },
+                      get children() {
+                        return web.createComponent(SubscriptionPreferenceGroupRow, {
+                          get group() {
+                            return preference();
+                          },
+                          get subscription() {
+                            return props.subscription;
+                          }
+                        });
+                      }
+                    });
+                  }
+                })
+              }));
+              web.effect(() => {
+                var _a;
+                return web.className(_el$6, style({
+                  key: "subscriptionPreferencesGroupsContainer",
+                  className: "nt-flex nt-flex-col nt-gap-2 nt-p-3 nt-pb-12",
+                  context: {
+                    subscription: (_a = props.subscription) != null ? _a : void 0
+                  }
+                }));
+              });
+              return _el$6;
+            }
+          }));
+          web.effect(() => {
+            var _a;
+            return web.className(_el$5, style({
+              key: "subscriptionPreferencesContent",
+              // the height is set here to ensure that the content is not jumping when the preferences are loaded or when the empty state is shown
+              className: "nt-min-h-[272px]",
+              context: {
+                subscription: (_a = props.subscription) != null ? _a : void 0
+              }
+            }));
+          });
+          return _el$5;
+        })(), web.createComponent(Footer, {
+          name: "Subscriptions"
+        })];
+      }
+    }));
+    web.effect(() => {
+      var _a;
+      return web.className(_el$, style({
+        key: "subscriptionPreferencesContainer",
+        className: cn("nt-w-full nt-h-full nt-flex nt-flex-col [&_.nv-preferencesContainer]:nt-pb-8 [&_.nv-notificationList]:nt-pb-8 nt-overflow-x-hidden", {
+          "[&_.nv-preferencesContainer]:nt-pb-12 [&_.nv-notificationList]:nt-pb-12": isDevelopmentMode(),
+          "[&_.nv-preferencesContainer]:nt-pb-8 [&_.nv-notificationList]:nt-pb-8": !isDevelopmentMode()
+        }),
+        context: {
+          subscription: (_a = props.subscription) != null ? _a : void 0
+        }
+      }));
+    });
+    return _el$;
+  })();
+};
+
+// src/ui/components/subscription/SubscriptionCog.tsx
+var ANIMATION_CONFIG = {
+  initial: {
+    opacity: 0,
+    x: 20,
+    width: 0,
+    marginLeft: 0
+  },
+  animate: {
+    opacity: 1,
+    x: 0,
+    width: "auto",
+    marginLeft: "6px"
+  },
+  exit: {
+    opacity: 0,
+    x: 20,
+    width: 0,
+    marginLeft: 0
+  },
+  transition: {
+    duration: 0.3,
+    easing: [0, 0, 0.2, 1]
+  }
+};
+var SubscriptionCog = (props) => {
+  const style = useStyle();
+  const subscription = solidJs.createMemo(() => {
+    var _a;
+    return (_a = props.subscription) != null ? _a : void 0;
+  });
+  const hasSubscription = solidJs.createMemo(() => !!subscription());
+  const containerClass = solidJs.createMemo(() => style({
+    key: "subscription__popoverTriggerContainer",
+    className: "nt-h-6",
+    context: {
+      subscription: subscription()
+    }
+  }));
+  const triggerClass = solidJs.createMemo(() => style({
+    key: "subscription__popoverTrigger",
+    className: "nt-p-1 nt-size-6",
+    context: {
+      subscription: subscription()
+    }
+  }));
+  const iconClass = solidJs.createMemo(() => style({
+    key: "subscriptionTriggerIcon",
+    className: "nt-text-foreground-alpha-600 nt-size-3.5",
+    context: {
+      subscription: subscription()
+    }
+  }));
+  const renderTrigger = (triggerProps) => web.createComponent(solidMotionone.Presence, {
+    exitBeforeEnter: true,
+    get children() {
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return hasSubscription();
+        },
+        get children() {
+          return web.createComponent(solidMotionone.Motion.span, {
+            get initial() {
+              return ANIMATION_CONFIG.initial;
+            },
+            get animate() {
+              return ANIMATION_CONFIG.animate;
+            },
+            get exit() {
+              return ANIMATION_CONFIG.exit;
+            },
+            get transition() {
+              return ANIMATION_CONFIG.transition;
+            },
+            style: {
+              opacity: 1,
+              transform: "translateX(0px)",
+              width: "auto",
+              "margin-left": "6px"
+            },
+            get ["class"]() {
+              return containerClass();
+            },
+            get children() {
+              return web.createComponent(Button, web.mergeProps({
+                get ["class"]() {
+                  return triggerClass();
+                },
+                variant: "secondary"
+              }, triggerProps, {
+                get disabled() {
+                  return !subscription() || props.loading;
+                },
+                get children() {
+                  return web.createComponent(Cogs, {
+                    get ["class"]() {
+                      return iconClass();
+                    }
+                  });
+                }
+              }));
+            }
+          });
+        }
+      });
+    }
+  });
+  return web.createComponent(Popover.Root, {
+    get open() {
+      return props.isOpen;
+    },
+    get onOpenChange() {
+      return props.onOpenChange;
+    },
+    get placement() {
+      var _a;
+      return (_a = props.placement) != null ? _a : "bottom-end";
+    },
+    get offset() {
+      return props.placementOffset;
+    },
+    get children() {
+      return [web.createComponent(Popover.Trigger, {
+        asChild: renderTrigger
+      }), web.createComponent(solidJs.Show, {
+        get when() {
+          return subscription();
+        },
+        children: (subscription2) => web.createComponent(Popover.Content, {
+          portal: true,
+          appearanceKey: "subscription__popoverContent",
+          size: "subscription",
+          get context() {
+            return {
+              subscription: subscription2()
+            };
+          },
+          get children() {
+            return web.createComponent(SubscriptionPreferences, {
+              get preferences() {
+                return props.preferences;
+              },
+              get renderPreferences() {
+                return props.renderPreferences;
+              },
+              get subscription() {
+                return subscription2();
+              },
+              get loading() {
+                return props.loading;
+              },
+              get onSubscribeClick() {
+                return props.onSubscribeClick;
+              }
+            });
+          }
+        })
+      })];
+    }
+  });
+};
+
+// src/ui/components/subscription/Subscription.tsx
+var _tmpl$95 = /* @__PURE__ */ web.template(`<div>`);
+var Subscription = (props) => {
+  const style = useStyle();
+  const {
+    isOpened,
+    setIsOpened
+  } = useInboxContext();
+  const isOpen = () => {
+    var _a;
+    return (_a = props == null ? void 0 : props.open) != null ? _a : isOpened();
+  };
+  const {
+    subscription,
+    loading,
+    create,
+    remove
+  } = useSubscription({
+    topicKey: props.topicKey,
+    identifier: props.identifier
+  });
+  const onSubscribeClick = () => {
+    const currentSubscription = subscription();
+    if (currentSubscription) {
+      remove({
+        subscription: currentSubscription
+      });
+    } else {
+      const preferences = props.preferences.map((preference) => {
+        if (typeof preference === "object" && "workflowId" in preference && preference.workflowId) {
+          return {
+            workflowId: preference.workflowId,
+            enabled: preference.enabled
+          };
+        } else if (typeof preference === "object" && "filter" in preference && preference.filter) {
+          return {
+            filter: preference.filter,
+            enabled: preference.enabled
+          };
+        }
+        return preference;
+      });
+      create({
+        topicKey: props.topicKey,
+        identifier: props.identifier,
+        preferences
+      });
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$95();
+    web.insert(_el$, web.createComponent(SubscriptionButton, {
+      get subscription() {
+        return subscription();
+      },
+      get loading() {
+        return loading();
+      },
+      onClick: onSubscribeClick
+    }), null);
+    web.insert(_el$, web.createComponent(SubscriptionCog, {
+      get isOpen() {
+        return isOpen();
+      },
+      onOpenChange: setIsOpened,
+      get subscription() {
+        return subscription();
+      },
+      get loading() {
+        return loading();
+      },
+      get placement() {
+        var _a;
+        return (_a = props.placement) != null ? _a : "bottom-end";
+      },
+      get placementOffset() {
+        return props.placementOffset;
+      },
+      get preferences() {
+        return props.preferences;
+      },
+      get renderPreferences() {
+        return props.renderPreferences;
+      },
+      onSubscribeClick
+    }), null);
+    web.effect(() => {
+      var _a;
+      return web.className(_el$, style({
+        key: "subscriptionContainer",
+        className: cn("nt-flex nt-items-center"),
+        context: {
+          subscription: (_a = subscription()) != null ? _a : void 0
+        }
+      }));
+    });
+    return _el$;
+  })();
+};
+var SubscriptionButtonWrapper = (props) => {
+  const {
+    subscription,
+    loading,
+    create,
+    remove
+  } = useSubscription({
+    topicKey: props.topicKey,
+    identifier: props.identifier
+  });
+  const onSubscribeClick = () => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    var _a, _b, _c, _d, _e;
+    const currentSubscription = subscription();
+    (_a = props.onClick) == null ? void 0 : _a.call(props, {
+      subscription: currentSubscription != null ? currentSubscription : void 0
+    });
+    if (currentSubscription) {
+      const {
+        error
+      } = yield remove({
+        subscription: currentSubscription
+      });
+      if (error) {
+        (_b = props.onDeleteError) == null ? void 0 : _b.call(props, error);
+        return;
+      }
+      (_c = props.onDeleteSuccess) == null ? void 0 : _c.call(props);
+    } else {
+      const preferences = props.preferences.map((preference) => {
+        if (typeof preference === "object" && "workflowId" in preference && preference.workflowId) {
+          return {
+            workflowId: preference.workflowId,
+            enabled: preference.enabled
+          };
+        } else if (typeof preference === "object" && "filter" in preference && preference.filter) {
+          return {
+            filter: preference.filter,
+            enabled: preference.enabled
+          };
+        }
+        return preference;
+      });
+      const {
+        data,
+        error
+      } = yield create({
+        topicKey: props.topicKey,
+        identifier: props.identifier,
+        preferences
+      });
+      if (data) {
+        (_d = props.onCreateSuccess) == null ? void 0 : _d.call(props, {
+          subscription: data
+        });
+        return;
+      }
+      (_e = props.onCreateError) == null ? void 0 : _e.call(props, error);
+    }
+  });
+  return web.createComponent(SubscriptionButton, {
+    get subscription() {
+      return subscription();
+    },
+    get loading() {
+      return loading();
+    },
+    onClick: onSubscribeClick
+  });
+};
+var SubscriptionPreferencesWrapper = (props) => {
+  const {
+    subscription,
+    loading,
+    create,
+    remove
+  } = useSubscription({
+    topicKey: props.topicKey,
+    identifier: props.identifier
+  });
+  const onSubscribeClick = () => chunk7B52C2XE_js.__async(void 0, null, function* () {
+    var _a, _b, _c, _d, _e;
+    const currentSubscription = subscription();
+    (_a = props.onClick) == null ? void 0 : _a.call(props, {
+      subscription: currentSubscription != null ? currentSubscription : void 0
+    });
+    if (currentSubscription) {
+      const {
+        error
+      } = yield remove({
+        subscription: currentSubscription
+      });
+      if (error) {
+        (_b = props.onDeleteError) == null ? void 0 : _b.call(props, error);
+        return;
+      }
+      (_c = props.onDeleteSuccess) == null ? void 0 : _c.call(props);
+    } else {
+      const preferences = props.preferences.map((preference) => {
+        if (typeof preference === "object" && "workflowId" in preference && preference.workflowId) {
+          return {
+            workflowId: preference.workflowId,
+            enabled: preference.enabled
+          };
+        } else if (typeof preference === "object" && "filter" in preference && preference.filter) {
+          return {
+            filter: preference.filter,
+            enabled: preference.enabled
+          };
+        }
+        return preference;
+      });
+      const {
+        data,
+        error
+      } = yield create({
+        topicKey: props.topicKey,
+        identifier: props.identifier,
+        preferences
+      });
+      if (data) {
+        (_d = props.onCreateSuccess) == null ? void 0 : _d.call(props, {
+          subscription: data
+        });
+        return;
+      }
+      (_e = props.onCreateError) == null ? void 0 : _e.call(props, error);
+    }
+  });
+  return web.createComponent(SubscriptionPreferences, {
+    get preferences() {
+      return props.preferences;
+    },
+    get subscription() {
+      return subscription();
+    },
+    get loading() {
+      return loading();
+    },
+    onSubscribeClick
+  });
+};
+
+// src/ui/components/Renderer.tsx
+var novuComponents = {
+  Inbox,
+  InboxContent,
+  Bell: Bell2,
+  Notifications: (props) => {
+    if (props.renderNotification) {
+      const _a = props, otherProps = chunk7B52C2XE_js.__objRest(_a, [
+        "renderBody",
+        "renderSubject",
+        "renderAvatar",
+        "renderDefaultActions",
+        "renderCustomActions"
+      ]);
+      return web.createComponent(InboxContent, web.mergeProps(otherProps, {
+        hideNav: true,
+        get initialPage() {
+          return InboxPage.Notifications;
+        }
+      }));
+    }
+    const _b = props, propsWithoutRenderNotification = chunk7B52C2XE_js.__objRest(_b, [
+      "renderNotification"
+    ]);
+    return web.createComponent(InboxContent, web.mergeProps(propsWithoutRenderNotification, {
+      hideNav: true,
+      get initialPage() {
+        return InboxPage.Notifications;
+      }
+    }));
+  },
+  Preferences: (props) => {
+    if (props.renderNotification) {
+      const _a = props, otherProps = chunk7B52C2XE_js.__objRest(_a, [
+        "renderBody",
+        "renderSubject",
+        "renderAvatar",
+        "renderDefaultActions",
+        "renderCustomActions"
+      ]);
+      return web.createComponent(InboxContent, web.mergeProps(otherProps, {
+        hideNav: true,
+        get initialPage() {
+          return InboxPage.Preferences;
+        }
+      }));
+    }
+    const _b = props, propsWithoutRenderNotification = chunk7B52C2XE_js.__objRest(_b, [
+      "renderNotification"
+    ]);
+    return web.createComponent(InboxContent, web.mergeProps(propsWithoutRenderNotification, {
+      hideNav: true,
+      get initialPage() {
+        return InboxPage.Preferences;
+      }
+    }));
+  },
+  Subscription,
+  SubscriptionButton: SubscriptionButtonWrapper,
+  SubscriptionPreferences: SubscriptionPreferencesWrapper
+};
+var SUBSCRIPTION_COMPONENTS = ["Subscription", "SubscriptionButton", "SubscriptionPreferences"];
+var Renderer = (props) => {
+  const nodes = () => [...props.nodes.keys()];
+  solidJs.onMount(() => {
+    var _a;
+    const id = NOVU_DEFAULT_CSS_ID;
+    const root = props.container instanceof ShadowRoot ? props.container : document;
+    const el = root.getElementById(id);
+    if (el) {
+      return;
+    }
+    const styleEl = document.createElement("style");
+    styleEl.id = id;
+    styleEl.innerHTML = ui_default;
+    const stylesContainer = (_a = props.container) != null ? _a : document.head;
+    stylesContainer.insertBefore(styleEl, stylesContainer.firstChild);
+    solidJs.onCleanup(() => {
+      styleEl.remove();
+    });
+  });
+  return web.createComponent(NovuProvider, {
+    get options() {
+      return props.options;
+    },
+    get novu() {
+      return props.novu;
+    },
+    get children() {
+      return web.createComponent(LocalizationProvider, {
+        get localization() {
+          return props.localization;
+        },
+        get children() {
           return web.createComponent(AppearanceProvider, {
             get id() {
               return props.novuUI.id;
@@ -9093,34 +10586,60 @@ var Renderer = (props) => {
                       return props.routerPush;
                     },
                     get children() {
-                      return web.createComponent(CountProvider, {
-                        get children() {
-                          return web.createComponent(solidJs.For, {
-                            get each() {
-                              return nodes();
-                            },
-                            children: (node) => {
-                              const novuComponent = () => props.nodes.get(node);
-                              let portalDivElement;
-                              const Component = novuComponents[novuComponent().name];
-                              solidJs.onMount(() => {
-                                if (!["Notifications", "Preferences", "InboxContent"].includes(novuComponent().name)) return;
-                                if (node instanceof HTMLElement) {
-                                  node.style.height = "100%";
-                                }
-                                if (portalDivElement) {
-                                  portalDivElement.style.height = "100%";
+                      return web.createComponent(solidJs.For, {
+                        get each() {
+                          return nodes();
+                        },
+                        children: (node) => {
+                          const novuComponent = () => props.nodes.get(node);
+                          let portalDivElement;
+                          const Component = novuComponents[novuComponent().name];
+                          solidJs.onMount(() => {
+                            if (!["Notifications", "Preferences", "InboxContent"].includes(novuComponent().name)) return;
+                            if (node instanceof HTMLElement) {
+                              node.style.height = "100%";
+                            }
+                            if (portalDivElement) {
+                              portalDivElement.style.height = "100%";
+                            }
+                          });
+                          return web.createComponent(solidJs.Switch, {
+                            get fallback() {
+                              return web.createComponent(CountProvider, {
+                                get children() {
+                                  return web.createComponent(web.Portal, {
+                                    mount: node,
+                                    ref: (el) => {
+                                      portalDivElement = el;
+                                    },
+                                    get children() {
+                                      return web.createComponent(Root, {
+                                        get children() {
+                                          return web.createComponent(Component, web.mergeProps(() => novuComponent().props));
+                                        }
+                                      });
+                                    }
+                                  });
                                 }
                               });
-                              return web.createComponent(web.Portal, {
-                                mount: node,
-                                ref: (el) => {
-                                  portalDivElement = el;
+                            },
+                            get children() {
+                              return web.createComponent(solidJs.Match, {
+                                get when() {
+                                  return SUBSCRIPTION_COMPONENTS.includes(novuComponent().name);
                                 },
                                 get children() {
-                                  return web.createComponent(Root, {
+                                  return web.createComponent(web.Portal, {
+                                    mount: node,
+                                    ref: (el) => {
+                                      portalDivElement = el;
+                                    },
                                     get children() {
-                                      return web.createComponent(Component, web.mergeProps(() => novuComponent().props));
+                                      return web.createComponent(Root, {
+                                        get children() {
+                                          return web.createComponent(Component, web.mergeProps(() => novuComponent().props));
+                                        }
+                                      });
                                     }
                                   });
                                 }
@@ -9142,7 +10661,7 @@ var Renderer = (props) => {
 };
 
 // src/ui/novuUI.tsx
-var _dispose, _container, _setContainer, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _preferencesFilter, _setPreferencesFilter, _preferenceGroups, _setPreferenceGroups, _preferencesSort, _setPreferencesSort, _predefinedNovu, _NovuUI_instances, getContainerElement_fn, mountComponentRenderer_fn, updateComponentProps_fn;
+var _dispose, _container, _setContainer, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _preferencesFilter, _setPreferencesFilter, _preferenceGroups, _setPreferenceGroups, _preferencesSort, _setPreferencesSort, _novu, _setNovu, _NovuUI_instances, getContainerElement_fn, mountComponentRenderer_fn, updateComponentProps_fn;
 var NovuUI = class {
   constructor(props) {
     chunk7B52C2XE_js.__privateAdd(this, _NovuUI_instances);
@@ -9168,7 +10687,8 @@ var NovuUI = class {
     chunk7B52C2XE_js.__privateAdd(this, _setPreferenceGroups);
     chunk7B52C2XE_js.__privateAdd(this, _preferencesSort);
     chunk7B52C2XE_js.__privateAdd(this, _setPreferencesSort);
-    chunk7B52C2XE_js.__privateAdd(this, _predefinedNovu);
+    chunk7B52C2XE_js.__privateAdd(this, _novu);
+    chunk7B52C2XE_js.__privateAdd(this, _setNovu);
     var _a;
     this.id = generateRandomString(16);
     const [appearance, setAppearance] = solidJs.createSignal(props.appearance);
@@ -9181,6 +10701,7 @@ var NovuUI = class {
     const [preferencesSort, setPreferencesSort] = solidJs.createSignal(props.preferencesSort);
     const [routerPush, setRouterPush] = solidJs.createSignal(props.routerPush);
     const [container, setContainer] = solidJs.createSignal(chunk7B52C2XE_js.__privateMethod(this, _NovuUI_instances, getContainerElement_fn).call(this, props.container));
+    const [novu, setNovu] = solidJs.createSignal(props.novu);
     chunk7B52C2XE_js.__privateSet(this, _mountedElements, mountedElements);
     chunk7B52C2XE_js.__privateSet(this, _setMountedElements, setMountedElements);
     chunk7B52C2XE_js.__privateSet(this, _appearance, appearance);
@@ -9193,7 +10714,8 @@ var NovuUI = class {
     chunk7B52C2XE_js.__privateSet(this, _setTabs, setTabs);
     chunk7B52C2XE_js.__privateSet(this, _routerPush, routerPush);
     chunk7B52C2XE_js.__privateSet(this, _setRouterPush, setRouterPush);
-    chunk7B52C2XE_js.__privateSet(this, _predefinedNovu, props.novu);
+    chunk7B52C2XE_js.__privateSet(this, _novu, novu);
+    chunk7B52C2XE_js.__privateSet(this, _setNovu, setNovu);
     chunk7B52C2XE_js.__privateSet(this, _preferencesFilter, preferencesFilter);
     chunk7B52C2XE_js.__privateSet(this, _setPreferencesFilter, setPreferencesFilter);
     chunk7B52C2XE_js.__privateSet(this, _preferenceGroups, preferenceGroups);
@@ -9228,6 +10750,9 @@ var NovuUI = class {
       return newMountedElements;
     });
   }
+  updateNovu(novu) {
+    chunk7B52C2XE_js.__privateGet(this, _setNovu).call(this, novu);
+  }
   updateAppearance(appearance) {
     chunk7B52C2XE_js.__privateGet(this, _setAppearance).call(this, appearance);
   }
@@ -9284,7 +10809,8 @@ _preferenceGroups = new WeakMap();
 _setPreferenceGroups = new WeakMap();
 _preferencesSort = new WeakMap();
 _setPreferencesSort = new WeakMap();
-_predefinedNovu = new WeakMap();
+_novu = new WeakMap();
+_setNovu = new WeakMap();
 _NovuUI_instances = new WeakSet();
 getContainerElement_fn = function(container) {
   var _a;
@@ -9345,7 +10871,7 @@ mountComponentRenderer_fn = function() {
         return chunk7B52C2XE_js.__privateGet(_a = _self$, _routerPush).call(_a);
       },
       get novu() {
-        return chunk7B52C2XE_js.__privateGet(_self$, _predefinedNovu);
+        return chunk7B52C2XE_js.__privateGet(_self$, _novu);
       },
       get container() {
         var _a;
@@ -9368,5 +10894,4 @@ updateComponentProps_fn = function(element, props) {
   });
 };
 
-exports.NotificationStatus = NotificationStatus;
 exports.NovuUI = NovuUI;