@vonage/vivid-react 5.21.0 → 5.23.0

package/index.js

@@ -1,28 +1,1070 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var src_initialization_initVivid_js = require("./initialization/initVivid.js");
-Object.keys(src_initialization_initVivid_js).forEach(function(k) {
-	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function() {
-			return src_initialization_initVivid_js[k];
-		}
+const require_chunk = require("./chunk-KmRHZBOW.js");
+let _vonage_vvd_context = require("@vonage/vvd-context");
+_vonage_vvd_context = require_chunk.__toESM(_vonage_vvd_context);
+let _vonage_vvd_fonts = require("@vonage/vvd-fonts");
+let react_dom_client = require("react-dom/client");
+//#region src/generated/style.core.all.js
+var style_core_all_default = {
+	id: "core.all",
+	css: `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.vvd-root {
+  color: var(--vvd-color-canvas-text);
+  color-scheme: var(--vvd-color-scheme);
+}
+
+:root.vvd-root {
+  background-color: var(--vvd-color-canvas);
+}
+
+.vvd-scrollbar {
+  --scrollbar-track-color: transparent;
+  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);
+}
+.vvd-scrollbar {
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+  scrollbar-width: thin;
+}
+.vvd-scrollbar ::-webkit-scrollbar {
+  width: 4px;
+}
+.vvd-scrollbar ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+}
+.vvd-scrollbar ::-webkit-scrollbar-thumb {
+  border: 0;
+  border-radius: 4px;
+  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));
+}
+
+.vvd-neutral-tint-elevation {
+  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);
+  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);
+  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);
+  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);
+  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);
+  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);
+  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);
+  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);
+  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);
+  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);
+  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);
+  --_vvd-tinted-shadow-surface-12dp: var(
+  	--vvd-neutral-tint-shadow-surface-12dp
+  );
+  --_vvd-tinted-shadow-surface-16dp: var(
+  	--vvd-neutral-tint-shadow-surface-16dp
+  );
+  --_vvd-tinted-shadow-surface-24dp: var(
+  	--vvd-neutral-tint-shadow-surface-24dp
+  );
+}
+.vvd-neutral-tint-elevation > * {
+  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);
+  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);
+  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);
+  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);
+  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);
+  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);
+  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);
+  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);
+  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);
+  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);
+  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);
+  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);
+  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);
+  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);
+}
+
+.vvd-root:root {
+  --vvd-size-font-scale-base: 1rem;
+  font-size: unset;
+}
+.vvd-root:root > body {
+  font: var(--vvd-typography-base);
+  font-feature-settings: "kern"; /* turns on kerning */
+  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
+  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
+}
+.vvd-root:not(:root) {
+  font: var(--vvd-typography-base);
+  font-feature-settings: "kern"; /* turns on kerning */
+  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
+  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
+}
+.vvd-root p,
+.vvd-root .font-base {
+  font: var(--vvd-typography-base);
+  margin-block: 16px;
+}
+.vvd-root p.tight,
+.vvd-root .font-base.tight {
+  margin-block: 0;
+}
+.vvd-root .font-base-bold {
+  font: var(--vvd-typography-base-bold);
+}
+.vvd-root .font-base-condensed {
+  font: var(--vvd-typography-base-condensed);
+}
+.vvd-root .font-base-condensed-bold {
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.vvd-root .font-base-extended {
+  font: var(--vvd-typography-base-extended);
+}
+.vvd-root .font-base-extended-bold {
+  font: var(--vvd-typography-base-extended-bold);
+}
+.vvd-root .font-base-code {
+  font: var(--vvd-typography-base-code);
+}
+.vvd-root b, .vvd-root strong {
+  font-weight: 600;
+}
+.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
+  font: var(--vvd-typography-base-code);
+}
+.vvd-root .headline {
+  font: var(--vvd-typography-headline);
+  margin-block: 40px;
+}
+.vvd-root .subtitle {
+  font: var(--vvd-typography-subtitle);
+  margin-block: 40px;
+}
+.vvd-root h1,
+.vvd-root .heading1 {
+  font: var(--vvd-typography-heading-1);
+  margin-block: 32px;
+}
+.vvd-root h2,
+.vvd-root .heading2 {
+  font: var(--vvd-typography-heading-2);
+  margin-block: 32px;
+}
+.vvd-root h3,
+.vvd-root .heading3 {
+  font: var(--vvd-typography-heading-3);
+  margin-block: 24px;
+}
+.vvd-root h4,
+.vvd-root .heading4 {
+  font: var(--vvd-typography-heading-4);
+  margin-block: 24px;
+}
+.vvd-root h5,
+.vvd-root .heading5 {
+  font: var(--vvd-typography-heading-5);
+  margin-block: 16px;
+}
+.vvd-root h6,
+.vvd-root .heading6 {
+  font: var(--vvd-typography-heading-6);
+  margin-block: 14px;
+}
+.vvd-root .headline b, .vvd-root .headline strong,
+.vvd-root .subtitle b,
+.vvd-root .subtitle strong,
+.vvd-root h1 b,
+.vvd-root h1 strong,
+.vvd-root .heading1 b,
+.vvd-root .heading1 strong,
+.vvd-root h2 b,
+.vvd-root h2 strong,
+.vvd-root .heading2 b,
+.vvd-root .heading2 strong,
+.vvd-root h3 b,
+.vvd-root h3 strong,
+.vvd-root .heading3 b,
+.vvd-root .heading3 strong,
+.vvd-root h4 b,
+.vvd-root h4 strong,
+.vvd-root .heading4 b,
+.vvd-root .heading4 strong,
+.vvd-root h5 b,
+.vvd-root h5 strong,
+.vvd-root .heading5 b,
+.vvd-root .heading5 strong,
+.vvd-root h6 b,
+.vvd-root h6 strong,
+.vvd-root .heading6 b,
+.vvd-root .heading6 strong {
+  font-weight: 500;
+}
+.vvd-root .headline.tight,
+.vvd-root .subtitle.tight,
+.vvd-root h1.tight,
+.vvd-root .heading1.tight,
+.vvd-root h2.tight,
+.vvd-root .heading2.tight,
+.vvd-root h3.tight,
+.vvd-root .heading3.tight,
+.vvd-root h4.tight,
+.vvd-root .heading4.tight,
+.vvd-root h5.tight,
+.vvd-root .heading5.tight,
+.vvd-root h6.tight,
+.vvd-root .heading6.tight {
+  margin-block: 0;
+}
+.vvd-root small,
+.vvd-root figcaption {
+  font: var(--vvd-typography-base-condensed);
+}
+.vvd-root sub,
+.vvd-root sup {
+  position: relative;
+  font: var(--vvd-typography-base-condensed);
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+.vvd-root sub {
+  bottom: -0.25em;
+}
+.vvd-root sup {
+  top: -0.5em;
+}
+`
+};
+//#endregion
+//#region src/generated/style.theme.dark.js
+var style_theme_dark_default = {
+	id: "theme.dark",
+	css: `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@property --vvd-size-density {
+  syntax: "<integer>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --vvd-size-font-scale-base {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+.vvd-root, ::part(vvd-root) {
+  --vvd-color-scheme: dark;
+  --vvd-color-canvas: #000000;
+  --vvd-color-canvas-text: #ffffff;
+  --vvd-color-neutral-50: #1a1a1a;
+  --vvd-color-neutral-100: #333333;
+  --vvd-color-neutral-200: #4d4d4d;
+  --vvd-color-neutral-300: #666666;
+  --vvd-color-neutral-400: #757575;
+  --vvd-color-neutral-500: #929292;
+  --vvd-color-neutral-600: #b3b3b3;
+  --vvd-color-neutral-700: #cccccc;
+  --vvd-color-neutral-800: #E6E6E6;
+  --vvd-color-neutral-900: #F2F2F2;
+  --vvd-color-neutral-950: #ffffff;
+  --vvd-color-cta-50: #26044d;
+  --vvd-color-cta-100: #440291;
+  --vvd-color-cta-200: #6405d1;
+  --vvd-color-cta-300: #871eff;
+  --vvd-color-cta-400: #9941ff;
+  --vvd-color-cta-500: #b27bf2;
+  --vvd-color-cta-600: #cba1fa;
+  --vvd-color-cta-700: #dcc1fc;
+  --vvd-color-cta-800: #ece2fa;
+  --vvd-color-cta-900: #f5f0fd;
+  --vvd-color-warning-50: #2A1502;
+  --vvd-color-warning-100: #522801;
+  --vvd-color-warning-200: #803807;
+  --vvd-color-warning-300: #A64C03;
+  --vvd-color-warning-400: #be5702;
+  --vvd-color-warning-500: #e07902;
+  --vvd-color-warning-600: #fa9f00;
+  --vvd-color-warning-700: #FACC4B;
+  --vvd-color-warning-800: #FDEAA0;
+  --vvd-color-warning-900: #FDF5D4;
+  --vvd-color-information-50: #071939;
+  --vvd-color-information-100: #0e306d;
+  --vvd-color-information-200: #094a9e;
+  --vvd-color-information-300: #0e65c2;
+  --vvd-color-information-400: #0276d5;
+  --vvd-color-information-500: #2997f0;
+  --vvd-color-information-600: #65baff;
+  --vvd-color-information-700: #9dd2fe;
+  --vvd-color-information-800: #d3e9fc;
+  --vvd-color-information-900: #e8f4fb;
+  --vvd-color-announcement-50: #32082c;
+  --vvd-color-announcement-100: #620256;
+  --vvd-color-announcement-200: #8f1669;
+  --vvd-color-announcement-300: #bb1e89;
+  --vvd-color-announcement-400: #d6219c;
+  --vvd-color-announcement-500: #e560bb;
+  --vvd-color-announcement-600: #fb8fd8;
+  --vvd-color-announcement-700: #f8b9e7;
+  --vvd-color-announcement-800: #ffdcf7;
+  --vvd-color-announcement-900: #ffedfb;
+  --vvd-color-success-50: #0a1e11;
+  --vvd-color-success-100: #183a1e;
+  --vvd-color-success-200: #155923;
+  --vvd-color-success-300: #167629;
+  --vvd-color-success-400: #1c8731;
+  --vvd-color-success-500: #30a849;
+  --vvd-color-success-600: #53ca6a;
+  --vvd-color-success-700: #86e090;
+  --vvd-color-success-800: #cfeed4;
+  --vvd-color-success-900: #e1f8e5;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-neutral-tint-50: #191828;
+  --vvd-color-neutral-tint-100: #31304f;
+  --vvd-color-neutral-tint-200: #494977;
+  --vvd-color-neutral-tint-300: #63628d;
+  --vvd-color-neutral-tint-400: #727198;
+  --vvd-color-neutral-tint-500: #908fae;
+  --vvd-color-neutral-tint-600: #b2b1c7;
+  --vvd-color-neutral-tint-700: #cbcbd9;
+  --vvd-color-neutral-tint-800: #e5e5ec;
+  --vvd-color-neutral-tint-900: #f2f3f9;
+  --vvd-color-surface-0dp: #0d0d0d;
+  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
+  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
+  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
+  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
+  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
+  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
+  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
+  --vvd-neutral-tint-color-surface-0dp: #191828;
+  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;
+  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;
+  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;
+  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;
+  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;
+  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);
+  --vvd-neutral-tint-shadow-surface-2dp: none;
+  --vvd-neutral-tint-shadow-surface-4dp: none;
+  --vvd-neutral-tint-shadow-surface-8dp: none;
+  --vvd-neutral-tint-shadow-surface-12dp: none;
+  --vvd-neutral-tint-shadow-surface-16dp: none;
+  --vvd-neutral-tint-shadow-surface-24dp: none;
+  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16) * 4.125)/1.3333333333333333 Montserrat;
+  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16) * 3.25)/1.3076923076923077 Montserrat;
+  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16) * 2.5)/1.3 Montserrat;
+  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16) * 2)/1.375 Montserrat;
+  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.625)/1.3846153846153846 Montserrat;
+  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.25)/1.4 Montserrat;
+  --vvd-typography-heading-5: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.125)/1.4 Montserrat;
+  --vvd-typography-heading-6: 500 calc(var(--vvd-size-font-scale-base, 16) * 1)/1.4 Montserrat;
+  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
+  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
+  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Roboto Mono;
+  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
+  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
+  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
+  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
+}
+
+.vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-color-scheme: light;
+  --vvd-color-canvas: #ffffff;
+  --vvd-color-canvas-text: #0d0d0d;
+  --vvd-color-neutral-50: #F2F2F2;
+  --vvd-color-neutral-100: #E6E6E6;
+  --vvd-color-neutral-200: #cccccc;
+  --vvd-color-neutral-300: #b3b3b3;
+  --vvd-color-neutral-400: #929292;
+  --vvd-color-neutral-500: #757575;
+  --vvd-color-neutral-600: #666666;
+  --vvd-color-neutral-700: #4d4d4d;
+  --vvd-color-neutral-800: #333333;
+  --vvd-color-neutral-900: #1a1a1a;
+  --vvd-color-neutral-950: #0d0d0d;
+  --vvd-color-cta-50: #f5f0fd;
+  --vvd-color-cta-100: #ece2fa;
+  --vvd-color-cta-200: #dcc1fc;
+  --vvd-color-cta-300: #cba1fa;
+  --vvd-color-cta-400: #b27bf2;
+  --vvd-color-cta-500: #9941ff;
+  --vvd-color-cta-600: #871eff;
+  --vvd-color-cta-700: #6405d1;
+  --vvd-color-cta-800: #440291;
+  --vvd-color-cta-900: #26044d;
+  --vvd-color-cta-950: #140623;
+  --vvd-color-warning-50: #FDF5D4;
+  --vvd-color-warning-100: #FDEAA0;
+  --vvd-color-warning-200: #FACC4B;
+  --vvd-color-warning-300: #fa9f00;
+  --vvd-color-warning-400: #e07902;
+  --vvd-color-warning-500: #be5702;
+  --vvd-color-warning-600: #A64C03;
+  --vvd-color-warning-700: #893000;
+  --vvd-color-warning-800: #522801;
+  --vvd-color-warning-900: #2A1502;
+  --vvd-color-warning-950: #150B01;
+  --vvd-color-information-50: #e8f4fb;
+  --vvd-color-information-100: #d3e9fc;
+  --vvd-color-information-200: #9dd2fe;
+  --vvd-color-information-300: #65baff;
+  --vvd-color-information-400: #2997f0;
+  --vvd-color-information-500: #0276d5;
+  --vvd-color-information-600: #0e65c2;
+  --vvd-color-information-700: #094a9e;
+  --vvd-color-information-800: #0e306d;
+  --vvd-color-information-900: #071939;
+  --vvd-color-information-950: #040d1d;
+  --vvd-color-announcement-50: #ffedfb;
+  --vvd-color-announcement-100: #ffdcf7;
+  --vvd-color-announcement-200: #f8b9e7;
+  --vvd-color-announcement-300: #fb8fd8;
+  --vvd-color-announcement-400: #e560bb;
+  --vvd-color-announcement-500: #d6219c;
+  --vvd-color-announcement-600: #bb1e89;
+  --vvd-color-announcement-700: #8f1669;
+  --vvd-color-announcement-800: #620256;
+  --vvd-color-announcement-900: #32082c;
+  --vvd-color-announcement-950: #1d031a;
+  --vvd-color-success-50: #e1f8e5;
+  --vvd-color-success-100: #cfeed4;
+  --vvd-color-success-200: #86e090;
+  --vvd-color-success-300: #53ca6a;
+  --vvd-color-success-400: #30a849;
+  --vvd-color-success-500: #1c8731;
+  --vvd-color-success-600: #167629;
+  --vvd-color-success-700: #155923;
+  --vvd-color-success-800: #183a1e;
+  --vvd-color-success-900: #0a1e11;
+  --vvd-color-success-950: #060f09;
+  --vvd-color-alert-50: #ffeef2;
+  --vvd-color-alert-100: #fedfdf;
+  --vvd-color-alert-200: #ffbbbb;
+  --vvd-color-alert-300: #fe9696;
+  --vvd-color-alert-400: #f75959;
+  --vvd-color-alert-500: #e61d1d;
+  --vvd-color-alert-600: #cd0d0d;
+  --vvd-color-alert-700: #9f0202;
+  --vvd-color-alert-800: #6e0000;
+  --vvd-color-alert-900: #3e0004;
+  --vvd-color-alert-950: #250004;
+  --vvd-color-neutral-tint-50: #f2f3f9;
+  --vvd-color-neutral-tint-100: #e5e5ec;
+  --vvd-color-neutral-tint-200: #cbcbd9;
+  --vvd-color-neutral-tint-300: #b2b1c7;
+  --vvd-color-neutral-tint-400: #908fae;
+  --vvd-color-neutral-tint-500: #727198;
+  --vvd-color-neutral-tint-600: #63628d;
+  --vvd-color-neutral-tint-700: #494977;
+  --vvd-color-neutral-tint-800: #31304f;
+  --vvd-color-neutral-tint-900: #191828;
+  --vvd-color-neutral-tint-950: #0d0c15;
+  --vvd-color-surface-0dp: #ffffff;
+  --vvd-color-surface-2dp: #ffffff;
+  --vvd-color-surface-4dp: #ffffff;
+  --vvd-color-surface-8dp: #ffffff;
+  --vvd-color-surface-12dp: #ffffff;
+  --vvd-color-surface-16dp: #ffffff;
+  --vvd-color-surface-24dp: #ffffff;
+  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);
+  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);
+}
+`
+};
+//#endregion
+//#region src/generated/style.theme.light.js
+var style_theme_light_default = {
+	id: "theme.light",
+	css: `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@property --vvd-size-density {
+  syntax: "<integer>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --vvd-size-font-scale-base {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+.vvd-root, ::part(vvd-root) {
+  --vvd-color-scheme: light;
+  --vvd-color-canvas: #ffffff;
+  --vvd-color-canvas-text: #0d0d0d;
+  --vvd-color-neutral-50: #F2F2F2;
+  --vvd-color-neutral-100: #E6E6E6;
+  --vvd-color-neutral-200: #cccccc;
+  --vvd-color-neutral-300: #b3b3b3;
+  --vvd-color-neutral-400: #929292;
+  --vvd-color-neutral-500: #757575;
+  --vvd-color-neutral-600: #666666;
+  --vvd-color-neutral-700: #4d4d4d;
+  --vvd-color-neutral-800: #333333;
+  --vvd-color-neutral-900: #1a1a1a;
+  --vvd-color-neutral-950: #0d0d0d;
+  --vvd-color-cta-50: #f5f0fd;
+  --vvd-color-cta-100: #ece2fa;
+  --vvd-color-cta-200: #dcc1fc;
+  --vvd-color-cta-300: #cba1fa;
+  --vvd-color-cta-400: #b27bf2;
+  --vvd-color-cta-500: #9941ff;
+  --vvd-color-cta-600: #871eff;
+  --vvd-color-cta-700: #6405d1;
+  --vvd-color-cta-800: #440291;
+  --vvd-color-cta-900: #26044d;
+  --vvd-color-cta-950: #140623;
+  --vvd-color-warning-50: #FDF5D4;
+  --vvd-color-warning-100: #FDEAA0;
+  --vvd-color-warning-200: #FACC4B;
+  --vvd-color-warning-300: #fa9f00;
+  --vvd-color-warning-400: #e07902;
+  --vvd-color-warning-500: #be5702;
+  --vvd-color-warning-600: #A64C03;
+  --vvd-color-warning-700: #893000;
+  --vvd-color-warning-800: #522801;
+  --vvd-color-warning-900: #2A1502;
+  --vvd-color-warning-950: #150B01;
+  --vvd-color-information-50: #e8f4fb;
+  --vvd-color-information-100: #d3e9fc;
+  --vvd-color-information-200: #9dd2fe;
+  --vvd-color-information-300: #65baff;
+  --vvd-color-information-400: #2997f0;
+  --vvd-color-information-500: #0276d5;
+  --vvd-color-information-600: #0e65c2;
+  --vvd-color-information-700: #094a9e;
+  --vvd-color-information-800: #0e306d;
+  --vvd-color-information-900: #071939;
+  --vvd-color-information-950: #040d1d;
+  --vvd-color-announcement-50: #ffedfb;
+  --vvd-color-announcement-100: #ffdcf7;
+  --vvd-color-announcement-200: #f8b9e7;
+  --vvd-color-announcement-300: #fb8fd8;
+  --vvd-color-announcement-400: #e560bb;
+  --vvd-color-announcement-500: #d6219c;
+  --vvd-color-announcement-600: #bb1e89;
+  --vvd-color-announcement-700: #8f1669;
+  --vvd-color-announcement-800: #620256;
+  --vvd-color-announcement-900: #32082c;
+  --vvd-color-announcement-950: #1d031a;
+  --vvd-color-success-50: #e1f8e5;
+  --vvd-color-success-100: #cfeed4;
+  --vvd-color-success-200: #86e090;
+  --vvd-color-success-300: #53ca6a;
+  --vvd-color-success-400: #30a849;
+  --vvd-color-success-500: #1c8731;
+  --vvd-color-success-600: #167629;
+  --vvd-color-success-700: #155923;
+  --vvd-color-success-800: #183a1e;
+  --vvd-color-success-900: #0a1e11;
+  --vvd-color-success-950: #060f09;
+  --vvd-color-alert-50: #ffeef2;
+  --vvd-color-alert-100: #fedfdf;
+  --vvd-color-alert-200: #ffbbbb;
+  --vvd-color-alert-300: #fe9696;
+  --vvd-color-alert-400: #f75959;
+  --vvd-color-alert-500: #e61d1d;
+  --vvd-color-alert-600: #cd0d0d;
+  --vvd-color-alert-700: #9f0202;
+  --vvd-color-alert-800: #6e0000;
+  --vvd-color-alert-900: #3e0004;
+  --vvd-color-alert-950: #250004;
+  --vvd-color-neutral-tint-50: #f2f3f9;
+  --vvd-color-neutral-tint-100: #e5e5ec;
+  --vvd-color-neutral-tint-200: #cbcbd9;
+  --vvd-color-neutral-tint-300: #b2b1c7;
+  --vvd-color-neutral-tint-400: #908fae;
+  --vvd-color-neutral-tint-500: #727198;
+  --vvd-color-neutral-tint-600: #63628d;
+  --vvd-color-neutral-tint-700: #494977;
+  --vvd-color-neutral-tint-800: #31304f;
+  --vvd-color-neutral-tint-900: #191828;
+  --vvd-color-neutral-tint-950: #0d0c15;
+  --vvd-color-surface-0dp: #ffffff;
+  --vvd-color-surface-2dp: #ffffff;
+  --vvd-color-surface-4dp: #ffffff;
+  --vvd-color-surface-8dp: #ffffff;
+  --vvd-color-surface-12dp: #ffffff;
+  --vvd-color-surface-16dp: #ffffff;
+  --vvd-color-surface-24dp: #ffffff;
+  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);
+  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);
+  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16) * 4.125)/1.3333333333333333 Montserrat;
+  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16) * 3.25)/1.3076923076923077 Montserrat;
+  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16) * 2.5)/1.3 Montserrat;
+  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16) * 2)/1.375 Montserrat;
+  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.625)/1.3846153846153846 Montserrat;
+  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.25)/1.4 Montserrat;
+  --vvd-typography-heading-5: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.125)/1.4 Montserrat;
+  --vvd-typography-heading-6: 500 calc(var(--vvd-size-font-scale-base, 16) * 1)/1.4 Montserrat;
+  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
+  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
+  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Roboto Mono;
+  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
+  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
+  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
+  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
+}
+
+.vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-color-scheme: dark;
+  --vvd-color-canvas: #000000;
+  --vvd-color-canvas-text: #ffffff;
+  --vvd-color-neutral-50: #1a1a1a;
+  --vvd-color-neutral-100: #333333;
+  --vvd-color-neutral-200: #4d4d4d;
+  --vvd-color-neutral-300: #666666;
+  --vvd-color-neutral-400: #757575;
+  --vvd-color-neutral-500: #929292;
+  --vvd-color-neutral-600: #b3b3b3;
+  --vvd-color-neutral-700: #cccccc;
+  --vvd-color-neutral-800: #E6E6E6;
+  --vvd-color-neutral-900: #F2F2F2;
+  --vvd-color-neutral-950: #ffffff;
+  --vvd-color-cta-50: #26044d;
+  --vvd-color-cta-100: #440291;
+  --vvd-color-cta-200: #6405d1;
+  --vvd-color-cta-300: #871eff;
+  --vvd-color-cta-400: #9941ff;
+  --vvd-color-cta-500: #b27bf2;
+  --vvd-color-cta-600: #cba1fa;
+  --vvd-color-cta-700: #dcc1fc;
+  --vvd-color-cta-800: #ece2fa;
+  --vvd-color-cta-900: #f5f0fd;
+  --vvd-color-warning-50: #2A1502;
+  --vvd-color-warning-100: #522801;
+  --vvd-color-warning-200: #803807;
+  --vvd-color-warning-300: #A64C03;
+  --vvd-color-warning-400: #be5702;
+  --vvd-color-warning-500: #e07902;
+  --vvd-color-warning-600: #fa9f00;
+  --vvd-color-warning-700: #FACC4B;
+  --vvd-color-warning-800: #FDEAA0;
+  --vvd-color-warning-900: #FDF5D4;
+  --vvd-color-information-50: #071939;
+  --vvd-color-information-100: #0e306d;
+  --vvd-color-information-200: #094a9e;
+  --vvd-color-information-300: #0e65c2;
+  --vvd-color-information-400: #0276d5;
+  --vvd-color-information-500: #2997f0;
+  --vvd-color-information-600: #65baff;
+  --vvd-color-information-700: #9dd2fe;
+  --vvd-color-information-800: #d3e9fc;
+  --vvd-color-information-900: #e8f4fb;
+  --vvd-color-announcement-50: #32082c;
+  --vvd-color-announcement-100: #620256;
+  --vvd-color-announcement-200: #8f1669;
+  --vvd-color-announcement-300: #bb1e89;
+  --vvd-color-announcement-400: #d6219c;
+  --vvd-color-announcement-500: #e560bb;
+  --vvd-color-announcement-600: #fb8fd8;
+  --vvd-color-announcement-700: #f8b9e7;
+  --vvd-color-announcement-800: #ffdcf7;
+  --vvd-color-announcement-900: #ffedfb;
+  --vvd-color-success-50: #0a1e11;
+  --vvd-color-success-100: #183a1e;
+  --vvd-color-success-200: #155923;
+  --vvd-color-success-300: #167629;
+  --vvd-color-success-400: #1c8731;
+  --vvd-color-success-500: #30a849;
+  --vvd-color-success-600: #53ca6a;
+  --vvd-color-success-700: #86e090;
+  --vvd-color-success-800: #cfeed4;
+  --vvd-color-success-900: #e1f8e5;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-neutral-tint-50: #191828;
+  --vvd-color-neutral-tint-100: #31304f;
+  --vvd-color-neutral-tint-200: #494977;
+  --vvd-color-neutral-tint-300: #63628d;
+  --vvd-color-neutral-tint-400: #727198;
+  --vvd-color-neutral-tint-500: #908fae;
+  --vvd-color-neutral-tint-600: #b2b1c7;
+  --vvd-color-neutral-tint-700: #cbcbd9;
+  --vvd-color-neutral-tint-800: #e5e5ec;
+  --vvd-color-neutral-tint-900: #f2f3f9;
+  --vvd-color-surface-0dp: #0d0d0d;
+  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
+  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
+  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
+  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
+  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
+  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
+  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
+  --vvd-neutral-tint-color-surface-0dp: #191828;
+  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;
+  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;
+  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;
+  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;
+  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;
+  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);
+  --vvd-neutral-tint-shadow-surface-2dp: none;
+  --vvd-neutral-tint-shadow-surface-4dp: none;
+  --vvd-neutral-tint-shadow-surface-8dp: none;
+  --vvd-neutral-tint-shadow-surface-12dp: none;
+  --vvd-neutral-tint-shadow-surface-16dp: none;
+  --vvd-neutral-tint-shadow-surface-24dp: none;
+}
+`
+};
+//#endregion
+//#region src/generated/style.font.spezia.js
+var style_font_spezia_default = {
+	id: "font.spezia",
+	css: `@font-face {
+  font-display: block;
+  font-family: SpeziaCompleteVariableUpright;
+  font-stretch: 50% 200%;
+  font-weight: 1 1000;
+  src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
+}
+@font-face {
+  font-display: block;
+  font-family: SpeziaMonoCompleteVariable;
+  font-stretch: 50% 200%;
+  font-weight: 1 1000;
+  src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
+}
+.vvd-root {
+  --vvd-typography-headline: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333
+  	speziacompletevariableupright;
+  --vvd-typography-subtitle: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077
+  	speziacompletevariableupright;
+  --vvd-typography-heading-1: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3
+  	speziacompletevariableupright;
+  --vvd-typography-heading-2: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375
+  	speziacompletevariableupright;
+  --vvd-typography-heading-3: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846
+  	speziacompletevariableupright;
+  --vvd-typography-heading-4: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4
+  	speziacompletevariableupright;
+  --vvd-typography-heading-5: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 1.125) / 1.4
+  	speziacompletevariableupright;
+  --vvd-typography-heading-6: 500 condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 1) / 1.4
+  	speziacompletevariableupright;
+  --vvd-typography-base: 400 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
+  	speziacompletevariableupright;
+  --vvd-typography-base-bold: 600 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
+  	speziacompletevariableupright;
+  --vvd-typography-base-code: 400 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
+  	speziamonocompletevariable;
+  --vvd-typography-base-condensed: 400 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
+  	speziacompletevariableupright;
+  --vvd-typography-base-condensed-bold: 600 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
+  	speziacompletevariableupright;
+  --vvd-typography-base-extended: 400 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
+  	speziacompletevariableupright;
+  --vvd-typography-base-extended-bold: 600 ultra-condensed
+  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
+  	speziacompletevariableupright;
+}
+`
+};
+//#endregion
+//#region src/generated/vivid.version.js
+var vivid_version_default = {
+	v2: "2.46.3",
+	v3: `5.23.0`
+};
+//#endregion
+//#region src/initialization/initVivid.js
+var vividDataAttributePrefix = "data-vivid";
+var appendStyleElement = (document = window.document) => (styleDescriptor) => {
+	const attributeName = `${vividDataAttributePrefix}-id`;
+	if (document.querySelectorAll(`[${attributeName}="${styleDescriptor.id}"]`).length > 0) return;
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute("type", "text/css");
+	styleElement.setAttribute(attributeName, styleDescriptor.id);
+	styleElement.innerHTML = styleDescriptor.css;
+	document.head.append(styleElement);
+};
+/**
+* mounts Vivid context (styles) & Fonts into the target scope / document
+* - target scope may by any `HTMLElement` or `Document` or `DocumentFragment` (including `ShadowRoot`)
+* - default target (when not specified) is the document visible in the current scope
+* - the API is idempotent, the style/s will be mounted only once, even if API called multiple times
+*
+* @param {Document | DocumentFragment | HTMLElement} target - target document/shadow root/element to mount the CSS into
+* @param {Function} callback - callback function to be invoked once init is done
+* @param {Object} options - options config how to init vivid. `theme` - dark | light, `font` - proprietary | oss
+*
+* @throws {Error} error - if the provided target argument is `null` or not a Node of type `Document` / `DocumentFragment` / `HTMLElement`
+*/
+var initVivid = (target, callback, options = {}) => {
+	let targetElement = target;
+	if (targetElement instanceof HTMLElement) {
+		targetElement.classList.add("vivid-scope");
+		targetElement.setAttribute(`${vividDataAttributePrefix}-v2`, vivid_version_default.v2);
+		targetElement.classList.add("vvd-root");
+		targetElement.setAttribute(`${vividDataAttributePrefix}-v3`, vivid_version_default.v3);
+		targetElement = void 0;
+	}
+	if (!options.theme) options.theme = "light";
+	const appendStyle = appendStyleElement();
+	appendStyle(style_core_all_default);
+	appendStyle(options.theme === "light" ? style_theme_light_default : style_theme_dark_default);
+	if (options.font === "proprietary") appendStyle(style_font_spezia_default);
+	return Promise.all([(0, _vonage_vvd_fonts.init)(), _vonage_vvd_context.default.mount(targetElement)]).then(callback);
+};
+//#endregion
+//#region src/patches/vwcDataGrid.js
+var createVaadinGridStylePatchElement = () => {
+	const styleElement = document.createElement("style");
+	styleElement.innerHTML = `
+      #header {
+        z-index: 0;
+      }
+      [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+        overflow: visible;
+      }`;
+	return styleElement;
+};
+/**
+* Patches `VwcDataGrid` (styles) to allow cell overflow to show
+* - `VwcSlider` tooltips off the cell boundaries uncropped by the grid
+*
+* @param {HTMLElement} gridElement - target datagrid element to mount the CSS into
+* @example <VwcDataGrid ref={vwcDataGridElementCellOverflowDecorator} />
+*/
+var vwcDataGridElementCellOverflowDecorator = (gridElement) => setTimeout(() => {
+	(gridElement?.shadowRoot.querySelector("vaadin-grid")?.shadowRoot)?.append(createVaadinGridStylePatchElement());
+}, 0);
+//#endregion
+//#region src/patches/vwcTooltip.js
+/**
+* Patches provided HTMLElement (styles) to crop long text and
+* shows browser tooltip when actually cropped
+*
+* @param {HTMLElement} element - target element to apply the text cropping logic to
+* @example <span ref={vwcTooltipEllipsisDecorator(text)} >{text}</span>
+*/
+var vwcTooltipEllipsisDecorator = (fullText) => (element) => setTimeout(() => {
+	if (element?.clientHeight < element?.scrollHeight && element) element.setAttribute("title", fullText);
+}, 0);
+/**
+* Patches provided VwcTooltip instance to open/close tooltip on mouse hover
+*
+* @param {HTMLElement} tooltipElement - target element to apply behavior to
+* @param {number} timeout - timeout before showing tooltip, default: 1000
+* @param {string} minWidth - min width in pixels, default: 'none'
+* @example <VwcTooltip ref={vwcTooltipShowOnHoverDecorator()} />
+*/
+var vwcTooltipShowOnHoverDecorator = (minWidth = "none", timeout = 1e3) => (tooltipElement) => setTimeout(() => {
+	if (!tooltipElement) return;
+	const anchorElement = document.getElementById(tooltipElement.anchor);
+	if (!anchorElement) return;
+	anchorElement.style.setProperty("pointer-events", "auto");
+	tooltipElement.style.setProperty("--tooltip-inline-size", minWidth);
+	tooltipElement.shadowRoot.querySelector("vwc-popup").setAttribute("strategy", "absolute");
+	let showTimeoutHandler;
+	anchorElement.addEventListener("mouseover", () => {
+		showTimeoutHandler = setTimeout(() => {
+			tooltipElement.open = true;
+		}, timeout);
 	});
-});
-var src_patches_index_js = require("./patches/index.js");
-Object.keys(src_patches_index_js).forEach(function(k) {
-	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function() {
-			return src_patches_index_js[k];
-		}
+	anchorElement.addEventListener("mouseout", () => {
+		clearTimeout(showTimeoutHandler);
+		tooltipElement.open = false;
 	});
-});
-var src_dataGrid_index_js = require("./dataGrid/index.js");
-Object.keys(src_dataGrid_index_js).forEach(function(k) {
-	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function() {
-			return src_dataGrid_index_js[k];
-		}
-	});
-});
+}, 0);
+//#endregion
+//#region src/patches/VwcCard/vwcCardWithMenu.js
+/**
+* Patches provided `VwcCard` (styles) to allow a sub menu triggered from an
+* action in the card to appear over the card and not inside of it
+*
+* @param {HTMLElement} element - target `VwcCard` element containing the action
+* that triggers the menu
+* @example <VwcCard ref={vwcCardWithMenu}><VwcMenu slot='actions' /></VwcCard>
+*/
+var vwcCardWithMenu = (element) => setTimeout(() => {
+	const card = element?.shadowRoot.querySelector(".vwc-card");
+	if (card) card.style.overflow = "unset";
+}, 0);
+//#endregion
+//#region src/patches/VwcCard/vwcCardHeadingCrop.js
+/**
+* Patches provided `VwcCard` (styles) to crop long heading text and
+* shows browser tooltip when actually cropped
+*
+* @param {HTMLElement} element - target `VwcCard` element to apply the `heading` cropping logic to
+* @example <VwcCard ref={vwcCardHeadingCropDecorator(text)} heading={text} />
+*/
+var vwcCardHeadingCropDecorator = (text) => (element) => setTimeout(() => {
+	const cardContentElement = element?.shadowRoot.querySelector(".vwc-card-content");
+	const titleElement = element?.shadowRoot.querySelector(".vwc-card-title");
+	vwcTooltipEllipsisDecorator(text)(titleElement);
+	if (cardContentElement?.clientWidth < titleElement?.clientWidth) {
+		const computedCardContentStyle = window.getComputedStyle(cardContentElement, null);
+		titleElement.setAttribute("title", text);
+		titleElement.style.width = computedCardContentStyle.getPropertyValue("width");
+		titleElement.style.overflow = "hidden";
+		titleElement.style.display = "block";
+		titleElement.style["white-space"] = "nowrap";
+		titleElement.style["text-overflow"] = "ellipsis";
+	}
+}, 0);
+//#endregion
+//#region src/patches/vwcNoteContentOverflow.js
+var createStyleElement = () => {
+	const styleElement = document.createElement("style");
+	styleElement.innerHTML = `
+      .vwc-note {
+        contain: inherit !important;
+      }`;
+	return styleElement;
+};
+/**
+* Patches `VwcNote` (styles) to allow content overflow
+*
+* @param {HTMLElement} noteElement - target element to mount the CSS into
+* @example <VwcNote ref={vwcNoteContentOverflowDecorator} />
+*/
+var vwcNoteContentOverflowDecorator = (noteElement) => setTimeout(() => {
+	(noteElement?.shadowRoot)?.append(createStyleElement());
+}, 0);
+//#endregion
+//#region src/patches/vwcSnackBarHtmlMessage.js
+var createHtmlMessageElement = (html) => {
+	const element = document.createElement("div");
+	element.setAttribute("class", "mdc-snackbar__label");
+	element.setAttribute("role", "status");
+	element.setAttribute("aria-live", "polite");
+	element.innerHTML = html;
+	return element;
+};
+/**
+* Patches `VwcSnackbar` to allow html message text
+*
+* @param {HTMLElement} element - target element to patch
+* @example <VwcSnackbar ref={vwcSnackBarHtmlMessageDecorator('<b>bold</b>')} />
+*/
+var vwcSnackBarHtmlMessageDecorator = (htmlMessage = "<b>bold</b>") => (element) => setTimeout(() => {
+	const component = element?.shadowRoot.querySelector(".header-and-label");
+	component?.style.setProperty("width", "100%");
+	component?.append(createHtmlMessageElement(htmlMessage));
+}, 0);
+//#endregion
+//#region src/patches/vwcSetAttributeValue.js
+/**
+* Patches attribute value. You can pass now a `value` to the `VwcIconButton` as
+* in normal buttons
+*
+* @param {any} attribute
+* @param {any} value
+* @param {HTMLElement} element
+* @returns
+*/
+var vwcSetAttributeValue = (attribute, value) => (element) => {
+	element?.setAttribute(attribute, value);
+};
+//#endregion
+//#region src/dataGrid/index.js
+/**
+* Renders the cell contents using React 18.x api
+*
+* @param {ReactNode} children - renderer contents
+* @param {Container & { rootRenderer?: Root }} container - HTMLElement root container
+*/
+var cellRendererFactory = (children, container) => {
+	const root = container?.rootRenderer ?? (0, react_dom_client.createRoot)(container);
+	root.render(children);
+	container.rootRenderer = root;
+};
+//#endregion
+exports.cellRendererFactory = cellRendererFactory;
+exports.initVivid = initVivid;
+exports.vwcCardHeadingCropDecorator = vwcCardHeadingCropDecorator;
+exports.vwcCardWithMenu = vwcCardWithMenu;
+exports.vwcDataGridElementCellOverflowDecorator = vwcDataGridElementCellOverflowDecorator;
+exports.vwcNoteContentOverflowDecorator = vwcNoteContentOverflowDecorator;
+exports.vwcSetAttributeValue = vwcSetAttributeValue;
+exports.vwcSnackBarHtmlMessageDecorator = vwcSnackBarHtmlMessageDecorator;
+exports.vwcTooltipEllipsisDecorator = vwcTooltipEllipsisDecorator;
+exports.vwcTooltipShowOnHoverDecorator = vwcTooltipShowOnHoverDecorator;