@vonage/vivid-vue 5.28.1 → 5.30.0

package/dist/index.cjs

@@ -207,7 +207,7 @@ var VAccordionItem_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -493,7 +493,7 @@ var VAlert_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -911,7 +911,7 @@ var VAvatar_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Sets the element's icon
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -1106,7 +1106,7 @@ var VBadge_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -1250,7 +1250,7 @@ var VBanner_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -1682,7 +1682,7 @@ var VButton_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -2287,7 +2287,7 @@ var VCard_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Sets the element's icon.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -3018,7 +3018,7 @@ var VCombobox_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -4073,6 +4073,13 @@ var VDatePicker_default = (0, vue.defineComponent)({
 		event: "update:modelValue"
 	} : void 0,
 	props: {
+		appearance: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Sets the element's disabled state. A disabled element will not be included during form submission.
+		*/
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -4203,6 +4210,7 @@ var VDatePicker_default = (0, vue.defineComponent)({
 		if (isVue2) return (0, vue.h)(this.componentName, {
 			ref: "element",
 			attrs: {
+				...this.appearance !== void 0 ? { "appearance": this.appearance } : {},
 				...this.disabled !== void 0 ? { "disabled": this.disabled } : {},
 				...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
 				...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
@@ -4251,6 +4259,7 @@ var VDatePicker_default = (0, vue.defineComponent)({
 			ref: "element",
 			class: "vvd-component",
 			...handleVue3Props({
+				...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
 				...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
 				...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
 				...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
@@ -4299,6 +4308,13 @@ var VDatePicker_default = (0, vue.defineComponent)({
 var VDateRangePicker_default = (0, vue.defineComponent)({
 	name: "VDateRangePicker",
 	props: {
+		appearance: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Sets the element's disabled state. A disabled element will not be included during form submission.
+		*/
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -4467,6 +4483,7 @@ var VDateRangePicker_default = (0, vue.defineComponent)({
 		if (isVue2) return (0, vue.h)(this.componentName, {
 			ref: "element",
 			attrs: {
+				...this.appearance !== void 0 ? { "appearance": this.appearance } : {},
 				...this.disabled !== void 0 ? { "disabled": this.disabled } : {},
 				...this.end !== void 0 ? { "current-end": this.end } : {},
 				...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -4525,6 +4542,7 @@ var VDateRangePicker_default = (0, vue.defineComponent)({
 			ref: "element",
 			class: "vvd-component",
 			...handleVue3Props({
+				...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
 				...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
 				...this.end !== void 0 ? { "^current-end": this.end } : {},
 				...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
@@ -4590,6 +4608,13 @@ var VDateTimePicker_default = (0, vue.defineComponent)({
 		event: "update:modelValue"
 	} : void 0,
 	props: {
+		appearance: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Forces a 12h or 24h clock to be used.
+		*/
 		clock: {
 			type: String,
 			default: void 0
@@ -4769,6 +4794,7 @@ var VDateTimePicker_default = (0, vue.defineComponent)({
 		if (isVue2) return (0, vue.h)(this.componentName, {
 			ref: "element",
 			attrs: {
+				...this.appearance !== void 0 ? { "appearance": this.appearance } : {},
 				...this.clock !== void 0 ? { "clock": this.clock } : {},
 				...this.disabled !== void 0 ? { "disabled": this.disabled } : {},
 				...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -4824,6 +4850,7 @@ var VDateTimePicker_default = (0, vue.defineComponent)({
 			ref: "element",
 			class: "vvd-component",
 			...handleVue3Props({
+				...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
 				...this.clock !== void 0 ? { "^clock": this.clock } : {},
 				...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
 				...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
@@ -5164,7 +5191,7 @@ var VDialog_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the Dialog should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -5508,7 +5535,7 @@ var VEmptyState_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the Empty State should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and `icon-name`s.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -5520,6 +5547,13 @@ var VEmptyState_default = (0, vue.defineComponent)({
 		iconDecoration: {
 			type: String,
 			default: void 0
+		},
+		/**
+		* Sets the element's size
+		*/
+		size: {
+			type: String,
+			default: void 0
 		}
 	},
 	emits: [
@@ -5544,7 +5578,8 @@ var VEmptyState_default = (0, vue.defineComponent)({
 				...this.connotation !== void 0 ? { "connotation": this.connotation } : {},
 				...this.headline !== void 0 ? { "headline": this.headline } : {},
 				...this.icon !== void 0 ? { "icon": this.icon } : {},
-				...this.iconDecoration !== void 0 ? { "icon-decoration": this.iconDecoration } : {}
+				...this.iconDecoration !== void 0 ? { "icon-decoration": this.iconDecoration } : {},
+				...this.size !== void 0 ? { "size": this.size } : {}
 			},
 			class: "vvd-component",
 			on: {
@@ -5579,7 +5614,8 @@ var VEmptyState_default = (0, vue.defineComponent)({
 				...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
 				...this.headline !== void 0 ? { "^headline": this.headline } : {},
 				...this.icon !== void 0 ? { "^icon": this.icon } : {},
-				...this.iconDecoration !== void 0 ? { "^icon-decoration": this.iconDecoration } : {}
+				...this.iconDecoration !== void 0 ? { "^icon-decoration": this.iconDecoration } : {},
+				...this.size !== void 0 ? { "^size": this.size } : {}
 			}),
 			"onBlur": (event) => {
 				this.$emit("blur", event);
@@ -5674,7 +5710,7 @@ var VFab_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -6415,7 +6451,7 @@ var VIcon_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Indicates which icon to resolve. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		name: {
 			type: String,
@@ -7235,7 +7271,7 @@ var VMenuItem_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -7473,7 +7509,7 @@ var VNavDisclosure_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -7639,7 +7675,7 @@ var VNavItem_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -7809,7 +7845,7 @@ var VNote_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -7949,7 +7985,7 @@ var VNumberField_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -8022,6 +8058,13 @@ var VNumberField_default = (0, vue.defineComponent)({
 			default: void 0
 		},
 		/**
+		* Always hides the stepper buttons, regardless of the configured `step`.
+		*/
+		noSteppers: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
 		* Using this attribute is not a valid substitute for a labeling element.
 		*/
@@ -8065,10 +8108,11 @@ var VNumberField_default = (0, vue.defineComponent)({
 			default: void 0
 		},
 		/**
-		* Amount to increment or decrement the value by
+		* Amount to increment or decrement the value by.
+		* Set to `"any"` to allow any decimal value and hide the stepper buttons.
 		*/
 		step: {
-			type: Number,
+			type: [Number, String],
 			default: void 0
 		},
 		/**
@@ -8185,6 +8229,7 @@ var VNumberField_default = (0, vue.defineComponent)({
 				...this.min !== void 0 ? { "min": this.min } : {},
 				...this.minlength !== void 0 ? { "minlength": this.minlength } : {},
 				...this.name !== void 0 ? { "name": this.name } : {},
+				...this.noSteppers !== void 0 ? { "no-steppers": this.noSteppers } : {},
 				...this.placeholder !== void 0 ? { "placeholder": this.placeholder } : {},
 				...this.readonly !== void 0 ? { "readonly": this.readonly } : {},
 				...this.required !== void 0 ? { "required": this.required } : {},
@@ -8250,6 +8295,7 @@ var VNumberField_default = (0, vue.defineComponent)({
 				...this.min !== void 0 ? { "^min": this.min } : {},
 				...this.minlength !== void 0 ? { "^minlength": this.minlength } : {},
 				...this.name !== void 0 ? { "^name": this.name } : {},
+				...this.noSteppers !== void 0 && this.noSteppers !== false ? { "^no-steppers": this.noSteppers } : {},
 				...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
 				...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
 				...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
@@ -8402,7 +8448,7 @@ var VOption_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -9585,7 +9631,11 @@ var VRadioGroup_default = (0, vue.defineComponent)({
 					this.$emit("keyup", event);
 				}
 			}
-		}, [this.$slots.default, handleNamedSlotV2("helper-text", this.$slots["helper-text"])]);
+		}, [
+			this.$slots.default,
+			handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
+			handleNamedSlotV2("helper-text", this.$slots["helper-text"])
+		]);
 		return (0, vue.h)(this.componentName, {
 			ref: "element",
 			class: "vvd-component",
@@ -9622,7 +9672,11 @@ var VRadioGroup_default = (0, vue.defineComponent)({
 			"onKeyup": (event) => {
 				this.$emit("keyup", event);
 			}
-		}, [this.$slots.default?.(), handleNamedSlotV3("helper-text", this.$slots["helper-text"]?.())]);
+		}, [
+			this.$slots.default?.(),
+			handleNamedSlotV3("contextual-help", this.$slots["contextual-help"]?.()),
+			handleNamedSlotV3("helper-text", this.$slots["helper-text"]?.())
+		]);
 	}
 });
 //#endregion
@@ -10281,7 +10335,7 @@ var VSearchableSelect_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -10679,7 +10733,7 @@ var VSelect_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -11752,7 +11806,7 @@ var VSplitButton_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -11906,7 +11960,7 @@ var VStatus_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -12215,7 +12269,7 @@ var VTab_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -13113,7 +13167,7 @@ var VTag_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -13726,7 +13780,7 @@ var VTextField_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -14059,6 +14113,13 @@ var VTimePicker_default = (0, vue.defineComponent)({
 		event: "update:modelValue"
 	} : void 0,
 	props: {
+		appearance: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Forces a 12h or 24h clock to be used.
+		*/
 		clock: {
 			type: String,
 			default: void 0
@@ -14210,6 +14271,7 @@ var VTimePicker_default = (0, vue.defineComponent)({
 		if (isVue2) return (0, vue.h)(this.componentName, {
 			ref: "element",
 			attrs: {
+				...this.appearance !== void 0 ? { "appearance": this.appearance } : {},
 				...this.clock !== void 0 ? { "clock": this.clock } : {},
 				...this.disabled !== void 0 ? { "disabled": this.disabled } : {},
 				...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -14261,6 +14323,7 @@ var VTimePicker_default = (0, vue.defineComponent)({
 			ref: "element",
 			class: "vvd-component",
 			...handleVue3Props({
+				...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
 				...this.clock !== void 0 ? { "^clock": this.clock } : {},
 				...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
 				...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
@@ -14583,7 +14646,7 @@ var VTreeItem_default = (0, vue.defineComponent)({
 		/**
 		* A decorative icon the custom element should have. See the [Vivid Icon
 		* Gallery](/icons/icons-gallery/) for available icons and their names.
-		* See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+		* See the Vivid Icon Gallery for available icons: https://apps.vivid.vonage.com/icons/icons-gallery/
 		*/
 		icon: {
 			type: String,
@@ -15275,6 +15338,8 @@ var Icon = /* @__PURE__ */ function(Icon) {
 	Icon["densityMediumSolid"] = "density-medium-solid";
 	Icon["designToolsLine"] = "design-tools-line";
 	Icon["designToolsSolid"] = "design-tools-solid";
+	Icon["deviceSwitchingLine"] = "device-switching-line";
+	Icon["deviceSwitchingSolid"] = "device-switching-solid";
 	Icon["devicesLine"] = "devices-line";
 	Icon["devicesSolid"] = "devices-solid";
 	Icon["disableCallLine"] = "disable-call-line";
@@ -15419,6 +15484,8 @@ var Icon = /* @__PURE__ */ function(Icon) {
 	Icon["filesSolid"] = "files-solid";
 	Icon["filterLine"] = "filter-line";
 	Icon["filterSolid"] = "filter-solid";
+	Icon["finishFlagLine"] = "finish-flag-line";
+	Icon["finishFlagSolid"] = "finish-flag-solid";
 	Icon["fiveLine"] = "five-line";
 	Icon["fiveSolid"] = "five-solid";
 	Icon["flagAfghanistan"] = "flag-afghanistan";
@@ -15628,6 +15695,8 @@ var Icon = /* @__PURE__ */ function(Icon) {
 	Icon["heartSolid"] = "heart-solid";
 	Icon["helpLine"] = "help-line";
 	Icon["helpSolid"] = "help-solid";
+	Icon["highlightColorLine"] = "highlight-color-line";
+	Icon["highlightColorSolid"] = "highlight-color-solid";
 	Icon["highlightLine"] = "highlight-line";
 	Icon["highlightSolid"] = "highlight-solid";
 	Icon["historyLine"] = "history-line";
@@ -15752,6 +15821,8 @@ var Icon = /* @__PURE__ */ function(Icon) {
 	Icon["messageSolid"] = "message-solid";
 	Icon["messageTemplateLine"] = "message-template-line";
 	Icon["messageTemplateSolid"] = "message-template-solid";
+	Icon["metaStyleColor"] = "meta-style-color";
+	Icon["metaStyleMono"] = "meta-style-mono";
 	Icon["micMuteLine"] = "mic-mute-line";
 	Icon["micMuteSolid"] = "mic-mute-solid";
 	Icon["microphone2Line"] = "microphone-2-line";
@@ -15950,6 +16021,8 @@ var Icon = /* @__PURE__ */ function(Icon) {
 	Icon["removeUserSolid"] = "remove-user-solid";
 	Icon["reorderHorizontalLine"] = "reorder-horizontal-line";
 	Icon["reorderHorizontalSolid"] = "reorder-horizontal-solid";
+	Icon["reorderLine"] = "reorder-line";
+	Icon["reorderSolid"] = "reorder-solid";
 	Icon["reorderVerticalLine"] = "reorder-vertical-line";
 	Icon["reorderVerticalSolid"] = "reorder-vertical-solid";
 	Icon["replyAllLine"] = "reply-all-line";
@@ -16050,10 +16123,14 @@ var Icon = /* @__PURE__ */ function(Icon) {
 	Icon["strikethroughSolid"] = "strikethrough-solid";
 	Icon["subAccountLine"] = "sub-account-line";
 	Icon["subAccountSolid"] = "sub-account-solid";
+	Icon["subscriptLine"] = "subscript-line";
+	Icon["subscriptSolid"] = "subscript-solid";
 	Icon["subtitlesLine"] = "subtitles-line";
 	Icon["subtitlesSolid"] = "subtitles-solid";
 	Icon["sugarcrmColor"] = "sugarcrm-color";
 	Icon["sugarcrmMono"] = "sugarcrm-mono";
+	Icon["superscriptLine"] = "superscript-line";
+	Icon["superscriptSolid"] = "superscript-solid";
 	Icon["surprisedLine"] = "surprised-line";
 	Icon["surprisedSolid"] = "surprised-solid";
 	Icon["swiftColor"] = "swift-color";
@@ -16251,7 +16328,7 @@ var theme_light_default = "/**\n * Do not edit directly, this file was auto-gene
 var theme_dark_default = "/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --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);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --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);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.25)/1.4 Montserrat;\n  --vvd-typography-heading-5: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.125)/1.4 Montserrat;\n  --vvd-typography-heading-6: 500 calc(var(--vvd-size-font-scale-base, 16) * 1)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --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);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --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);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
 //#endregion
 //#region ../styles/dist/fonts/spezia-variable.css?raw
-var spezia_variable_default = "@font-face {\n  font-display: block;\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-display: block;\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  	speziacompletevariableupright;\n  --vvd-typography-subtitle: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  	speziacompletevariableupright;\n  --vvd-typography-heading-1: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3\n  	speziacompletevariableupright;\n  --vvd-typography-heading-2: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375\n  	speziacompletevariableupright;\n  --vvd-typography-heading-3: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  	speziacompletevariableupright;\n  --vvd-typography-heading-4: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4\n  	speziacompletevariableupright;\n  --vvd-typography-heading-5: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1.125) / 1.4\n  	speziacompletevariableupright;\n  --vvd-typography-heading-6: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1) / 1.4\n  	speziacompletevariableupright;\n  --vvd-typography-base: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  	speziacompletevariableupright;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  	speziacompletevariableupright;\n  --vvd-typography-base-code: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  	speziamonocompletevariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  	speziacompletevariableupright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  	speziacompletevariableupright;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  	speziacompletevariableupright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  	speziacompletevariableupright;\n}\n";
+var spezia_variable_default = "@charset \"UTF-8\";\n@font-face {\n  font-display: block;\n  font-family: Spezia;\n  font-stretch: 50% 200%;\n  font-style: normal;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-display: block;\n  font-family: Spezia;\n  font-stretch: 50% 200%;\n  font-style: italic;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableItalicWeb.woff2\") format(\"woff2\");\n}\n/* @deprecated — use \"Spezia\" instead. Will be removed in a future major release. */\n@font-face {\n  font-display: block;\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-style: normal;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-display: block;\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  	spezia;\n  --vvd-typography-subtitle: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  	spezia;\n  --vvd-typography-heading-1: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3 spezia;\n  --vvd-typography-heading-2: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375 spezia;\n  --vvd-typography-heading-3: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  	spezia;\n  --vvd-typography-heading-4: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4 spezia;\n  --vvd-typography-heading-5: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1.125) / 1.4 spezia;\n  --vvd-typography-heading-6: 500 condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 1) / 1.4 spezia;\n  --vvd-typography-base: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  	spezia;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  	spezia;\n  --vvd-typography-base-code: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  	speziamonocompletevariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  	spezia;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  	spezia;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5 spezia;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5 spezia;\n}\n";
 var optionalStyles = {
 	theme: {
 		name: "core/theme",