@vonage/vivid-vue 3.58.0 → 3.60.0

package/index.cjs

@@ -72,7 +72,7 @@ const VAccordion = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when the active item changes
-     * @type {unknown}
+     * @type {CustomEvent<string | null>}
      */
     "change"
   ],
@@ -237,7 +237,7 @@ const VAccordionItem = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when the button is invoked
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change"
   ],
@@ -539,12 +539,12 @@ const VAlert = vue.defineComponent({
     "input",
     /**
      * Fired when the alert is opened
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "open",
     /**
      * Fired when the alert is closed
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "close"
   ],
@@ -688,7 +688,11 @@ const VAudioPlayer = vue.defineComponent({
     skipBy: {
       type: String,
       default: void 0
-    }
+    },
+    /**
+     * Sets the available playback rates. When an empty string, no choices will be available
+     */
+    playbackRates: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -758,7 +762,8 @@ const VAudioPlayer = vue.defineComponent({
             ...this.src !== void 0 ? { src: this.src } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.notime !== void 0 ? { notime: this.notime } : {},
-            ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {}
+            ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {},
+            ...this.playbackRates !== void 0 ? { "playback-rates": this.playbackRates } : {}
           },
           class: "vvd-component",
           on: {
@@ -789,6 +794,7 @@ const VAudioPlayer = vue.defineComponent({
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.notime !== void 0 ? { notime: this.notime } : {},
         ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {},
+        ...this.playbackRates !== void 0 ? { "playback-rates": this.playbackRates } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -1493,6 +1499,11 @@ const VButton = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -1712,6 +1723,9 @@ const VButton = vue.defineComponent({
             ...this.target !== void 0 ? { target: this.target } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -1737,6 +1751,7 @@ const VButton = vue.defineComponent({
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -2291,6 +2306,11 @@ const VCheckbox = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -2312,6 +2332,10 @@ const VCheckbox = vue.defineComponent({
      * Require the field to be completed prior to form submission.
      */
     required: { type: Boolean, default: void 0 },
+    /**
+     * Provides the default checkedness of the input element
+     */
+    defaultChecked: { type: Boolean, default: void 0 },
     /**
      * Provides the default checkedness of the input element
      */
@@ -2373,17 +2397,17 @@ const VCheckbox = vue.defineComponent({
      */
     "keyup",
     /**
-     * Emits a custom change event when the checked state changes
-     * @type {unknown}
+     * Emitted when the checked state changes.
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
-     * Event that emits when the component checked state changes
-     * @type {unknown}
+     * Emitted when the checked state changes.
+     * @type {CustomEvent<undefined>}
      */
     "input",
     /**
-     * Emits a custom change event when the checked state changes
+     * Emitted when the checked state changes.
      * @type {boolean}
      */
     "update:modelValue"
@@ -2419,6 +2443,10 @@ const VCheckbox = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {},
+            ...this.defaultChecked !== void 0 ? { defaultChecked: this.defaultChecked } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -2453,10 +2481,12 @@ const VCheckbox = vue.defineComponent({
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.defaultChecked !== void 0 ? { ".defaultChecked": this.defaultChecked } : {},
         ...this.checked !== void 0 ? { checked: this.checked } : {},
         ...this.modelValue ?? this.currentChecked !== void 0 ? { "current-checked": this.modelValue ?? this.currentChecked } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -2510,6 +2540,11 @@ const VCombobox = vue.defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -2565,6 +2600,13 @@ const VCombobox = vue.defineComponent({
      * The disabled state of the listbox.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The appearance attribute.
+     */
+    appearance: {
+      type: String,
+      default: void 0
+    },
     /**
      * the placement of the combobox
      *
@@ -2612,7 +2654,7 @@ const VCombobox = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when the value updates
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -2677,10 +2719,14 @@ const VCombobox = vue.defineComponent({
             ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
             ...this.position !== void 0 ? { position: this.position } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
             ...this.placement !== void 0 ? { placement: this.placement } : {},
             ...this.fixedDropdown !== void 0 ? { "fixed-dropdown": this.fixedDropdown } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -2708,6 +2754,7 @@ const VCombobox = vue.defineComponent({
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -2717,6 +2764,7 @@ const VCombobox = vue.defineComponent({
         ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
         ...this.position !== void 0 ? { position: this.position } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
         ...this.placement !== void 0 ? { placement: this.placement } : {},
         ...this.fixedDropdown !== void 0 ? { "fixed-dropdown": this.fixedDropdown } : {},
         onClick: (event) => this.$emit("click", event),
@@ -2815,7 +2863,7 @@ const VDataGrid = vue.defineComponent({
     "input",
     /**
      * Event that fires when a cell is clicked
-     * @type {unknown}
+     * @type {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>}
      */
     "cell-click"
   ],
@@ -2956,21 +3004,21 @@ const VDataGridCell = vue.defineComponent({
      * @type {Event}
      */
     "input",
-    /**
-     * Fires a custom 'cell-focused' event when focus is on the cell or its contents
-     * @type {unknown}
-     */
-    "cell-focused",
     /**
      * Event that fires when a sortable column header is clicked
-     * @type {unknown}
+     * @type {CustomEvent<{columnDataKey: string, ariaSort: string | null}>}
      */
     "sort",
     /**
      * Event that fires when a cell is clicked
-     * @type {unknown}
+     * @type {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>}
      */
-    "cell-click"
+    "cell-click",
+    /**
+     * Fires a custom 'cell-focused' event when focus is on the cell or its contents
+     * @type {CustomEvent<HTMLElement>}
+     */
+    "cell-focused"
   ],
   methods: {
     handleKeydown(e) {
@@ -3013,9 +3061,9 @@ const VDataGridCell = vue.defineComponent({
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
             input: (event) => this.$emit("input", event),
-            "cell-focused": (event) => this.$emit("cell-focused", event),
             sort: (event) => this.$emit("sort", event),
-            "cell-click": (event) => this.$emit("cell-click", event)
+            "cell-click": (event) => this.$emit("cell-click", event),
+            "cell-focused": (event) => this.$emit("cell-focused", event)
           }
         },
         [this.$slots.default]
@@ -3038,9 +3086,9 @@ const VDataGridCell = vue.defineComponent({
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
         onInput: (event) => this.$emit("input", event),
-        onCellFocused: (event) => this.$emit("cell-focused", event),
         onSort: (event) => this.$emit("sort", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
+        onCellClick: (event) => this.$emit("cell-click", event),
+        onCellFocused: (event) => this.$emit("cell-focused", event)
       },
       [
         // @ts-ignore
@@ -3111,15 +3159,15 @@ const VDataGridRow = vue.defineComponent({
      */
     "input",
     /**
-     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
-     * @type {unknown}
+     * Event that fires when a cell is clicked
+     * @type {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>}
      */
-    "row-focused",
+    "cell-click",
     /**
-     * Event that fires when a cell is clicked
-     * @type {unknown}
+     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+     * @type {CustomEvent<HTMLElement>}
      */
-    "cell-click"
+    "row-focused"
   ],
   methods: {
     handleFocusout(e) {
@@ -3157,8 +3205,8 @@ const VDataGridRow = vue.defineComponent({
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
             input: (event) => this.$emit("input", event),
-            "row-focused": (event) => this.$emit("row-focused", event),
-            "cell-click": (event) => this.$emit("cell-click", event)
+            "cell-click": (event) => this.$emit("cell-click", event),
+            "row-focused": (event) => this.$emit("row-focused", event)
           }
         },
         [this.$slots.default]
@@ -3179,8 +3227,8 @@ const VDataGridRow = vue.defineComponent({
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
         onInput: (event) => this.$emit("input", event),
-        onRowFocused: (event) => this.$emit("row-focused", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
+        onCellClick: (event) => this.$emit("cell-click", event),
+        onRowFocused: (event) => this.$emit("row-focused", event)
       },
       [
         // @ts-ignore
@@ -3232,6 +3280,10 @@ const VDatePicker = vue.defineComponent({
      * The earliest accepted date of the date-picker.
      */
     min: { type: String, default: void 0 },
+    /**
+     * The initial value of the date-picker.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the date-picker.
      */
@@ -3276,17 +3328,22 @@ const VDatePicker = vue.defineComponent({
      */
     "keyup",
     /**
-     * Fires when the value of an element has been changed.
-     * @type {Event}
+     * Emitted when the date is changed by the user.
+     * @type {CustomEvent<undefined>}
      */
     "input",
     /**
-     * Event emitted when the clear value changes
-     * @type {unknown}
+     * Emitted when the date is changed by the user.
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
+    /**
+     * Event emitted when the clear button is clicked.
+     * @type {CustomEvent<undefined>}
      */
     "clear-click",
     /**
-     * Fires when the value of an element has been changed.
+     * Emitted when the date is changed by the user.
      * @type {string}
      */
     "update:modelValue"
@@ -3317,6 +3374,9 @@ const VDatePicker = vue.defineComponent({
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -3330,6 +3390,7 @@ const VDatePicker = vue.defineComponent({
               );
               this.$emit("input", event);
             },
+            change: (event) => this.$emit("change", event),
             "clear-click": (event) => this.$emit("clear-click", event)
           }
         },
@@ -3353,6 +3414,7 @@ const VDatePicker = vue.defineComponent({
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.modelValue ?? this.value !== void 0 ? { value: this.modelValue ?? this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -3368,6 +3430,7 @@ const VDatePicker = vue.defineComponent({
           );
           this.$emit("input", event);
         },
+        onChange: (event) => this.$emit("change", event),
         onClearClick: (event) => this.$emit("clear-click", event)
       },
       [
@@ -3414,6 +3477,16 @@ const VDateRangePicker = vue.defineComponent({
      * The latest accepted date of the date-picker.
      */
     max: { type: String, default: void 0 },
+    /**
+     * The initial start value. This value sets the `start` property
+     * only when the `start` property has not been explicitly set.
+     */
+    initialStart: { type: String, default: void 0 },
+    /**
+     * The initial end value. This value sets the `end` property
+     * only when the `end` property has not been explicitly set.
+     */
+    initialEnd: { type: String, default: void 0 },
     /**
      * The current start value of the element. This property serves as a mechanism
      * to set the `start` property through both property assignment and the
@@ -3450,6 +3523,10 @@ const VDateRangePicker = vue.defineComponent({
      * The earliest accepted date of the date-picker.
      */
     min: { type: String, default: void 0 },
+    /**
+     * The initial value of the date-picker.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the date-picker.
      */
@@ -3489,24 +3566,29 @@ const VDateRangePicker = vue.defineComponent({
      * @type {KeyboardEvent}
      */
     "keyup",
-    /**
-     * Fires when the value of an element has been changed.
-     * @type {Event}
-     */
-    "input",
     /**
      * Event emitted when the start value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input:start",
     /**
      * Event emitted when the end value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input:end",
     /**
-     * Event emitted when the clear value changes
-     * @type {unknown}
+     * Emitted when either the start or end value changes
+     * @type {CustomEvent<undefined>}
+     */
+    "input",
+    /**
+     * Emitted when either the start or end value changes
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
+    /**
+     * Event emitted when the clear button is clicked.
+     * @type {CustomEvent<undefined>}
      */
     "clear-click",
     /**
@@ -3551,13 +3633,17 @@ const VDateRangePicker = vue.defineComponent({
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialStart !== void 0 ? { initialStart: this.initialStart } : {},
+            ...this.initialEnd !== void 0 ? { initialEnd: this.initialEnd } : {},
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
             "input:start": (event) => {
               this.$emit("update:start", event.target.start);
               this.$emit("input:start", event);
@@ -3566,6 +3652,8 @@ const VDateRangePicker = vue.defineComponent({
               this.$emit("update:end", event.target.end);
               this.$emit("input:end", event);
             },
+            input: (event) => this.$emit("input", event),
+            change: (event) => this.$emit("change", event),
             "clear-click": (event) => this.$emit("clear-click", event)
           }
         },
@@ -3588,9 +3676,12 @@ const VDateRangePicker = vue.defineComponent({
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
+        ...this.initialStart !== void 0 ? { ".initialStart": this.initialStart } : {},
+        ...this.initialEnd !== void 0 ? { ".initialEnd": this.initialEnd } : {},
         ...this.start ?? this.currentStart !== void 0 ? { "current-start": this.start ?? this.currentStart } : {},
         ...this.end ?? this.currentEnd !== void 0 ? { "current-end": this.end ?? this.currentEnd } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -3599,7 +3690,6 @@ const VDateRangePicker = vue.defineComponent({
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
         "onInput:start": (event) => {
           this.$emit("update:start", event.target.start);
           this.$emit("input:start", event);
@@ -3608,6 +3698,8 @@ const VDateRangePicker = vue.defineComponent({
           this.$emit("update:end", event.target.end);
           this.$emit("input:end", event);
         },
+        onInput: (event) => this.$emit("input", event),
+        onChange: (event) => this.$emit("change", event),
         onClearClick: (event) => this.$emit("clear-click", event)
       },
       [
@@ -3698,37 +3790,37 @@ const VDialPad = vue.defineComponent({
     "keyup",
     /**
      * Emitted when the text field value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
      * Emitted when the text field value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input",
     /**
      * Emitted when the text field loses focus
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "blur",
     /**
      * Emitted when the text field receives focus
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "focus",
     /**
      * Emitted when a digit button is clicked
-     * @type {unknown}
+     * @type {CustomEvent<HTMLElement>}
      */
     "keypad-click",
     /**
      * Emitted when the call button is clicked
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "dial",
     /**
      * Emitted when the end call button is clicked
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "end-call",
     /**
@@ -3891,8 +3983,8 @@ const VDialog = vue.defineComponent({
      */
     "input",
     /**
-     * Fired when the dialog is closed.
-     * @type {unknown}
+     * The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.
+     * @type {CustomEvent<string>}
      */
     "close"
   ],
@@ -4245,6 +4337,11 @@ const VFab = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -4396,6 +4493,9 @@ const VFab = vue.defineComponent({
             ...this.label !== void 0 ? { label: this.label } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -4421,6 +4521,7 @@ const VFab = vue.defineComponent({
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -4479,6 +4580,11 @@ const VFilePicker = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -4553,7 +4659,7 @@ const VFilePicker = vue.defineComponent({
     "input",
     /**
      * Emitted when a file is added or removed.
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change"
   ],
@@ -4604,6 +4710,9 @@ const VFilePicker = vue.defineComponent({
             ...this.size !== void 0 ? { size: this.size } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -4631,6 +4740,7 @@ const VFilePicker = vue.defineComponent({
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -5100,12 +5210,12 @@ const VMenu = vue.defineComponent({
     "input",
     /**
      * Fired when the menu is opened
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "open",
     /**
      * Fired when the menu is closed
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "close"
   ],
@@ -5308,12 +5418,12 @@ const VMenuItem = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'expanded-change' event when the expanded state changes
-     * @type {unknown}
+     * @type {CustomEvent<HTMLElement>}
      */
     "expanded-change",
     /**
      * Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -5575,7 +5685,7 @@ const VNavDisclosure = vue.defineComponent({
     "input",
     /**
      * Event emitted when the nav disclosure is toggled.
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "toggle"
   ],
@@ -6001,6 +6111,11 @@ const VNumberField = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -6038,10 +6153,6 @@ const VNumberField = vue.defineComponent({
      * Indicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information.
      */
     autofocus: { type: Boolean, default: void 0 },
-    /**
-     * When true, spin buttons will not be rendered
-     */
-    hideStep: { type: Boolean, default: void 0 },
     /**
      * Sets the placeholder value of the element, generally used to provide a hint to the user.
      */
@@ -6117,12 +6228,12 @@ const VNumberField = vue.defineComponent({
     "keyup",
     /**
      * Fires a custom 'input' event when the value has changed
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input",
     /**
      * Fires a custom 'change' event when the value has changed
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -6132,6 +6243,9 @@ const VNumberField = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    stepChanged(_, next) {
+      return this.element?.stepChanged(_, next);
+    },
     /**
      * {@inheritDoc (FormAssociated:interface).validate}
      */
@@ -6139,19 +6253,22 @@ const VNumberField = vue.defineComponent({
       return this.element?.validate();
     },
     /**
-     * Selects all the text in the number field
+     * Increments the value using the step value
      */
-    select() {
-      return this.element?.select();
-    },
-    stepChanged(_previous, next) {
-      return this.element?.stepChanged(_previous, next);
-    },
     stepUp() {
       return this.element?.stepUp();
     },
+    /**
+     * Decrements the value using the step value
+     */
     stepDown() {
       return this.element?.stepDown();
+    },
+    /**
+     * Selects all the text in the number field
+     */
+    select() {
+      return this.element?.select();
     }
   },
   setup(props, ctx) {
@@ -6183,7 +6300,6 @@ const VNumberField = vue.defineComponent({
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-            ...this.hideStep !== void 0 ? { "hide-step": this.hideStep } : {},
             ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
             ...this.list !== void 0 ? { list: this.list } : {},
             ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
@@ -6199,6 +6315,9 @@ const VNumberField = vue.defineComponent({
             ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -6235,13 +6354,13 @@ const VNumberField = vue.defineComponent({
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-        ...this.hideStep !== void 0 ? { "hide-step": this.hideStep } : {},
         ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
         ...this.list !== void 0 ? { list: this.list } : {},
         ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
@@ -6306,6 +6425,11 @@ const VOption = vue.defineComponent({
      * The selected attribute value. This sets the initial selected value.
      */
     selected: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the option. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the option. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -6379,6 +6503,9 @@ const VOption = vue.defineComponent({
             ...this.label !== void 0 ? { label: this.label } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -6405,6 +6532,7 @@ const VOption = vue.defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.selected !== void 0 ? { selected: this.selected } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
@@ -6483,7 +6611,7 @@ const VPagination = vue.defineComponent({
     "input",
     /**
      * Fires when the page changes.
-     * @type {unknown}
+     * @type {CustomEvent<{selectedIndex: number, total: number, oldIndex: number}>}
      */
     "pagination-change"
   ],
@@ -6849,6 +6977,11 @@ const VRadio = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -6870,6 +7003,10 @@ const VRadio = vue.defineComponent({
      * Require the field to be completed prior to form submission.
      */
     required: { type: Boolean, default: void 0 },
+    /**
+     * Provides the default checkedness of the input element
+     */
+    defaultChecked: { type: Boolean, default: void 0 },
     /**
      * Provides the default checkedness of the input element
      */
@@ -6931,8 +7068,8 @@ const VRadio = vue.defineComponent({
      */
     "input",
     /**
-     * Emits a custom change event when the checked state changes
-     * @type {unknown}
+     * Fires a custom 'change' event when the value changes
+     * @type {CustomEvent<undefined>}
      */
     "change"
   ],
@@ -6963,6 +7100,10 @@ const VRadio = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {},
+            ...this.defaultChecked !== void 0 ? { defaultChecked: this.defaultChecked } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -6983,10 +7124,12 @@ const VRadio = vue.defineComponent({
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.defaultChecked !== void 0 ? { ".defaultChecked": this.defaultChecked } : {},
         ...this.checked !== void 0 ? { checked: this.checked } : {},
         ...this.currentChecked !== void 0 ? { "current-checked": this.currentChecked } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -7089,7 +7232,7 @@ const VRadioGroup = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when the value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -7191,6 +7334,11 @@ const VRangeSlider = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -7212,6 +7360,11 @@ const VRangeSlider = vue.defineComponent({
      * Require the field to be completed prior to form submission.
      */
     required: { type: Boolean, default: void 0 },
+    /**
+     * The initial start value. This value sets the `start` property
+     * only when the `start` property has not been explicitly set.
+     */
+    initialStart: { type: String, default: void 0 },
     /**
      * The current start value of the element. This property serves as a mechanism
      * to set the `start` property through both property assignment and the
@@ -7228,6 +7381,11 @@ const VRangeSlider = vue.defineComponent({
      * and don't support IDL attribute binding.
      */
     start: { type: String, default: void 0 },
+    /**
+     * The initial end value. This value sets the `end` property
+     * only when the `end` property has not been explicitly set.
+     */
+    initialEnd: { type: String, default: void 0 },
     /**
      * The current end value of the element. This property serves as a mechanism
      * to set the `end` property through both property assignment and the
@@ -7309,21 +7467,26 @@ const VRangeSlider = vue.defineComponent({
      * @type {KeyboardEvent}
      */
     "keyup",
-    /**
-     * Fires when the value of an element has been changed.
-     * @type {Event}
-     */
-    "input",
     /**
      * Event emitted when the start value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input:start",
     /**
      * Event emitted when the end value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input:end",
+    /**
+     * Event emitted when either the start or end value changes.
+     * @type {CustomEvent<undefined>}
+     */
+    "input",
+    /**
+     * Event emitted when either the start or end value changes.
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
     /**
      * Event emitted when the start value changes
      * @type {string}
@@ -7374,13 +7537,17 @@ const VRangeSlider = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {},
+            ...this.initialStart !== void 0 ? { initialStart: this.initialStart } : {},
+            ...this.initialEnd !== void 0 ? { initialEnd: this.initialEnd } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
             "input:start": (event) => {
               this.$emit("update:start", event.target.start);
               this.$emit("input:start", event);
@@ -7388,7 +7555,9 @@ const VRangeSlider = vue.defineComponent({
             "input:end": (event) => {
               this.$emit("update:end", event.target.end);
               this.$emit("input:end", event);
-            }
+            },
+            input: (event) => this.$emit("input", event),
+            change: (event) => this.$emit("change", event)
           }
         },
         [this.$slots.default]
@@ -7402,11 +7571,14 @@ const VRangeSlider = vue.defineComponent({
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.initialStart !== void 0 ? { ".initialStart": this.initialStart } : {},
         ...this.start ?? this.currentStart !== void 0 ? { "current-start": this.start ?? this.currentStart } : {},
+        ...this.initialEnd !== void 0 ? { ".initialEnd": this.initialEnd } : {},
         ...this.end ?? this.currentEnd !== void 0 ? { "current-end": this.end ?? this.currentEnd } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
@@ -7421,7 +7593,6 @@ const VRangeSlider = vue.defineComponent({
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
         "onInput:start": (event) => {
           this.$emit("update:start", event.target.start);
           this.$emit("input:start", event);
@@ -7429,7 +7600,9 @@ const VRangeSlider = vue.defineComponent({
         "onInput:end": (event) => {
           this.$emit("update:end", event.target.end);
           this.$emit("input:end", event);
-        }
+        },
+        onInput: (event) => this.$emit("input", event),
+        onChange: (event) => this.$emit("change", event)
       },
       [
         // @ts-ignore
@@ -7482,6 +7655,11 @@ const VSelect = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -7574,12 +7752,12 @@ const VSelect = vue.defineComponent({
     "keyup",
     /**
      * Fires a custom 'input' event when the value updates
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "input",
     /**
      * Fires a custom 'change' event when the value updates
-     * @type {unknown}
+     * @type {CustomEvent<HTMLElement>}
      */
     "change",
     /**
@@ -7615,6 +7793,9 @@ const VSelect = vue.defineComponent({
     },
     setDefaultSelectedOption() {
       return this.element?.setDefaultSelectedOption();
+    },
+    slottedOptionsChanged(prev, next) {
+      return this.element?.slottedOptionsChanged(prev, next);
     }
   },
   setup(props, ctx) {
@@ -7650,6 +7831,9 @@ const VSelect = vue.defineComponent({
             ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -7690,6 +7874,7 @@ const VSelect = vue.defineComponent({
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -7804,7 +7989,7 @@ const VSelectableBox = vue.defineComponent({
     "input",
     /**
      * Fired when the checked state changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change"
   ],
@@ -7936,12 +8121,12 @@ const VSideDrawer = vue.defineComponent({
     "input",
     /**
      * Fired when the side drawer is closed.
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "close",
     /**
      * Fired when the side drawer is opened.
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "open"
   ],
@@ -8030,6 +8215,11 @@ const VSlider = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -8133,7 +8323,7 @@ const VSlider = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when the slider value changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -8192,6 +8382,9 @@ const VSlider = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -8218,6 +8411,7 @@ const VSlider = vue.defineComponent({
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -8351,12 +8545,12 @@ const VSplitButton = vue.defineComponent({
     "input",
     /**
      * Event emitted when the action button is clicked
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "action-click",
     /**
      * Event emitted when the indicator button is clicked
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "indicator-click"
   ],
@@ -8462,6 +8656,11 @@ const VSwitch = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -8483,6 +8682,10 @@ const VSwitch = vue.defineComponent({
      * Require the field to be completed prior to form submission.
      */
     required: { type: Boolean, default: void 0 },
+    /**
+     * Provides the default checkedness of the input element
+     */
+    defaultChecked: { type: Boolean, default: void 0 },
     /**
      * Provides the default checkedness of the input element
      */
@@ -8552,7 +8755,7 @@ const VSwitch = vue.defineComponent({
     "input",
     /**
      * Emits a custom change event when the checked state changes
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -8587,6 +8790,10 @@ const VSwitch = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {},
+            ...this.defaultChecked !== void 0 ? { defaultChecked: this.defaultChecked } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -8613,10 +8820,12 @@ const VSwitch = vue.defineComponent({
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.defaultChecked !== void 0 ? { ".defaultChecked": this.defaultChecked } : {},
         ...this.checked !== void 0 ? { checked: this.checked } : {},
         ...this.modelValue ?? this.currentChecked !== void 0 ? { "current-checked": this.modelValue ?? this.currentChecked } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -8960,7 +9169,7 @@ const VTabs = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when a tab is clicked or during keyboard navigation
-     * @type {unknown}
+     * @type {CustomEvent<HTMLElement>}
      */
     "change"
   ],
@@ -9136,7 +9345,17 @@ const VTag = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fires when the selected state changes
+     * @type {CustomEvent<undefined>}
+     */
+    "selected-change",
+    /**
+     * Fires when the tag is removed
+     * @type {CustomEvent<undefined>}
+     */
+    "removed"
   ],
   methods: {
     remove() {
@@ -9179,7 +9398,9 @@ const VTag = vue.defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => this.$emit("input", event),
+            "selected-change": (event) => this.$emit("selected-change", event),
+            removed: (event) => this.$emit("removed", event)
           }
         },
         [
@@ -9209,7 +9430,9 @@ const VTag = vue.defineComponent({
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onInput: (event) => this.$emit("input", event),
+        onSelectedChange: (event) => this.$emit("selected-change", event),
+        onRemoved: (event) => this.$emit("removed", event)
       },
       [
         // @ts-ignore
@@ -9354,6 +9577,11 @@ const VTextArea = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -9472,7 +9700,7 @@ const VTextArea = vue.defineComponent({
     "input",
     /**
      * Emits a custom 'change' event when the textarea emits a change event
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -9532,6 +9760,9 @@ const VTextArea = vue.defineComponent({
             ...this.wrap !== void 0 ? { wrap: this.wrap } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -9567,6 +9798,7 @@ const VTextArea = vue.defineComponent({
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
@@ -9650,6 +9882,11 @@ const VTextField = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -9762,7 +9999,7 @@ const VTextField = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'change' event when the value has changed
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
@@ -9827,6 +10064,9 @@ const VTextField = vue.defineComponent({
             ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -9870,6 +10110,7 @@ const VTextField = vue.defineComponent({
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -9948,6 +10189,11 @@ const VTimePicker = vue.defineComponent({
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -10029,17 +10275,17 @@ const VTimePicker = vue.defineComponent({
      */
     "keyup",
     /**
-     * Fires when the value of an element has been changed.
-     * @type {Event}
+     * Emitted when the time is changed by the user.
+     * @type {CustomEvent<undefined>}
      */
     "input",
     /**
      * Emitted when the time is changed by the user.
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "change",
     /**
-     * Fires when the value of an element has been changed.
+     * Emitted when the time is changed by the user.
      * @type {string}
      */
     "update:modelValue"
@@ -10074,6 +10320,9 @@ const VTimePicker = vue.defineComponent({
             ...this.max !== void 0 ? { max: this.max } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.initialValue !== void 0 ? { initialValue: this.initialValue } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -10107,6 +10356,7 @@ const VTimePicker = vue.defineComponent({
         ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.initialValue !== void 0 ? { ".initialValue": this.initialValue } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
@@ -10475,12 +10725,12 @@ const VTreeItem = vue.defineComponent({
     "input",
     /**
      * Fires a custom 'expanded-change' event when the expanded state changes
-     * @type {unknown}
+     * @type {CustomEvent<HTMLElement>}
      */
     "expanded-change",
     /**
      * Fires a custom 'selected-change' event when the selected state changes
-     * @type {unknown}
+     * @type {CustomEvent<HTMLElement>}
      */
     "selected-change"
   ],
@@ -10730,17 +10980,17 @@ const VVideoPlayer = vue.defineComponent({
     "input",
     /**
      * Fired when the video is played
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "play",
     /**
      * Fired when the video is paused
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "pause",
     /**
      * Fired when the video is ended
-     * @type {unknown}
+     * @type {CustomEvent<undefined>}
      */
     "ended"
   ],
@@ -12038,17 +12288,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\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: 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-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-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\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-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-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-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 #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 #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}\n";
+const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\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: 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-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-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\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-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-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-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}\n";
 
-const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:24 GMT\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-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-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-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 #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 #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-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/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-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}\n";
+const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\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-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-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-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-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/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-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}\n";
 
 const fontsSpeziaVariableCss = "@font-face {\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\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  \tcalc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n}\n";
 
-const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:23 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
+const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
 
-const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:23 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n";
+const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Jun 2024 13:57:23 GMT\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n";
+const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Mon, 01 Jul 2024 13:24:07 GMT\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n";
 
 const theme = {
   name: "core/theme",