@vonage/vivid-vue 4.5.0 → 4.7.0

package/index.js

@@ -1,5 +1,5 @@
 import { ref, version, onBeforeMount, defineComponent, h } from 'vue';
-import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerCombobox, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerSelect, registerSelectableBox, registerSideDrawer, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
+import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerCombobox, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
 
 const CustomComponentPrefix = ref("vvd3");
 function setCustomComponentPrefix(prefix) {
@@ -94,13 +94,27 @@ const VAccordion = defineComponent({
           },
           class: "vvd-component",
           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),
-            change: (event) => this.$emit("change", event)
+            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);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -113,13 +127,27 @@ const VAccordion = defineComponent({
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
         ...this.expandMode !== void 0 ? { "^expand-mode": this.expandMode } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -263,13 +291,27 @@ const VAccordionItem = defineComponent({
           },
           class: "vvd-component",
           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),
-            change: (event) => this.$emit("change", event)
+            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);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -294,13 +336,27 @@ const VAccordionItem = defineComponent({
         ...this.noIndicator !== void 0 && this.noIndicator !== false ? { "^no-indicator": this.noIndicator } : {},
         ...this.meta !== void 0 ? { "^meta": this.meta } : {},
         ...this.size !== void 0 ? { "^size": this.size } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -397,12 +453,24 @@ const VActionGroup = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -419,12 +487,24 @@ const VActionGroup = defineComponent({
         ...this.tight !== void 0 && this.tight !== false ? { "^tight": this.tight } : {},
         ...this.role !== void 0 ? { "^role": this.role } : {},
         ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -572,14 +652,30 @@ const VAlert = defineComponent({
           },
           class: "vvd-component",
           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),
-            open: (event) => this.$emit("open", event),
-            close: (event) => this.$emit("close", event)
+            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);
+            },
+            open: (event) => {
+              this.$emit("open", event);
+            },
+            close: (event) => {
+              this.$emit("close", event);
+            }
           }
         },
         [
@@ -609,14 +705,30 @@ const VAlert = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.strategy !== void 0 ? { "^strategy": this.strategy } : {},
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onOpen: (event) => this.$emit("open", event),
-        onClose: (event) => this.$emit("close", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onOpen: (event) => {
+          this.$emit("open", event);
+        },
+        onClose: (event) => {
+          this.$emit("close", event);
+        }
       },
       [
         // @ts-ignore
@@ -760,12 +872,24 @@ const VAudioPlayer = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -788,12 +912,24 @@ const VAudioPlayer = defineComponent({
         ...this.notime !== void 0 && this.notime !== false ? { "^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),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -903,12 +1039,24 @@ const VAvatar = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -930,12 +1078,24 @@ const VAvatar = defineComponent({
         ...this.size !== void 0 ? { "^size": this.size } : {},
         ...this.icon !== void 0 ? { "^icon": this.icon } : {},
         ...this.initials !== void 0 ? { "^initials": this.initials } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -1044,12 +1204,24 @@ const VBadge = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -1071,12 +1243,24 @@ const VBadge = defineComponent({
         ...this.shape !== void 0 ? { "^shape": this.shape } : {},
         ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
         ...this.text !== void 0 ? { "^text": this.text } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -1177,12 +1361,24 @@ const VBanner = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -1209,12 +1405,24 @@ const VBanner = defineComponent({
         ...this.ariaLive !== void 0 ? { "^aria-live": this.ariaLive } : {},
         ...this.text !== void 0 ? { "^text": this.text } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -1288,12 +1496,24 @@ const VBreadcrumb = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -1305,12 +1525,24 @@ const VBreadcrumb = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -1428,12 +1660,24 @@ const VBreadcrumbItem = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -1454,12 +1698,24 @@ const VBreadcrumbItem = defineComponent({
         ...this.target !== void 0 ? { "^target": this.target } : {},
         ...this.type !== void 0 ? { "^type": this.type } : {},
         ...this.text !== void 0 ? { "^text": this.text } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -1720,12 +1976,24 @@ const VButton = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -1773,12 +2041,24 @@ const VButton = defineComponent({
         ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
         ...this.rel !== void 0 ? { "^rel": this.rel } : {},
         ...this.target !== void 0 ? { "^target": this.target } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -1896,12 +2176,24 @@ const VCalendar = defineComponent({
             ...this.locales !== void 0 ? { locales: this.locales } : {}
           },
           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)
+            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);
+            }
           }
         },
         [
@@ -1933,12 +2225,24 @@ const VCalendar = defineComponent({
         ...this.startDay !== void 0 ? { "^start-day": this.startDay } : {},
         ...this.locales !== void 0 ? { ".locales": this.locales } : {},
         ...this.hour12 !== void 0 && this.hour12 !== false ? { "^hour12": this.hour12 } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -2066,12 +2370,24 @@ const VCalendarEvent = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -2090,12 +2406,24 @@ const VCalendarEvent = defineComponent({
         ...this.overlapCount !== void 0 ? { "^overlap-count": this.overlapCount } : {},
         ...this.start !== void 0 ? { "^start": this.start } : {},
         ...this.duration !== void 0 ? { "^duration": this.duration } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -2205,12 +2533,24 @@ const VCard = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -2240,12 +2580,24 @@ const VCard = defineComponent({
         ...this.text !== void 0 ? { "^text": this.text } : {},
         ...this.icon !== void 0 ? { "^icon": this.icon } : {},
         ...this.elevation !== void 0 ? { "^elevation": this.elevation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -2428,11 +2780,21 @@ const VCheckbox = defineComponent({
           },
           class: "vvd-component",
           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),
+            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);
+            },
             change: (event) => {
               this.$emit(
                 "update:modelValue",
@@ -2440,7 +2802,9 @@ const VCheckbox = defineComponent({
               );
               this.$emit("change", event);
             },
-            input: (event) => this.$emit("input", event)
+            input: (event) => {
+              this.$emit("input", event);
+            }
           }
         },
         [
@@ -2471,11 +2835,21 @@ const VCheckbox = defineComponent({
         ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
         ...this.tabindex !== void 0 ? { "^tabindex": this.tabindex } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onChange: (event) => {
           this.$emit(
             "update:modelValue",
@@ -2483,7 +2857,9 @@ const VCheckbox = defineComponent({
           );
           this.$emit("change", event);
         },
-        onInput: (event) => this.$emit("input", event)
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -2698,12 +3074,24 @@ const VCombobox = defineComponent({
           },
           class: "vvd-component",
           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),
+            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);
+            },
             change: (event) => {
               this.$emit(
                 "update:modelValue",
@@ -2736,12 +3124,24 @@ const VCombobox = defineComponent({
         ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
         ...this.placement !== void 0 ? { "^placement": this.placement } : {},
         ...this.fixedDropdown !== void 0 && this.fixedDropdown !== false ? { "^fixed-dropdown": this.fixedDropdown } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
         onChange: (event) => {
           this.$emit(
             "update:modelValue",
@@ -2864,13 +3264,27 @@ const VDataGrid = defineComponent({
             ...this.rowsData !== void 0 ? { rowsData: this.rowsData } : {}
           },
           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),
-            "cell-click": (event) => this.$emit("cell-click", event)
+            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);
+            },
+            "cell-click": (event) => {
+              this.$emit("cell-click", event);
+            }
           }
         },
         [this.$slots.default]
@@ -2887,13 +3301,27 @@ const VDataGrid = defineComponent({
         ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
         ...this.selectionMode !== void 0 ? { "^selection-mode": this.selectionMode } : {},
         ...this.rowsData !== void 0 ? { ".rowsData": this.rowsData } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onCellClick: (event) => {
+          this.$emit("cell-click", event);
+        }
       },
       [
         // @ts-ignore
@@ -3023,15 +3451,33 @@ const VDataGridCell = defineComponent({
             ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {}
           },
           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),
-            sort: (event) => this.$emit("sort", event),
-            "cell-click": (event) => this.$emit("cell-click", event),
-            "cell-focused": (event) => this.$emit("cell-focused", event)
+            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);
+            },
+            sort: (event) => {
+              this.$emit("sort", event);
+            },
+            "cell-click": (event) => {
+              this.$emit("cell-click", event);
+            },
+            "cell-focused": (event) => {
+              this.$emit("cell-focused", event);
+            }
           }
         },
         [this.$slots.default]
@@ -3048,15 +3494,33 @@ const VDataGridCell = defineComponent({
         ...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {},
         ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
         ...this.ariaSort !== void 0 ? { "^aria-sort": this.ariaSort } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onSort: (event) => this.$emit("sort", event),
-        onCellClick: (event) => this.$emit("cell-click", event),
-        onCellFocused: (event) => this.$emit("cell-focused", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onSort: (event) => {
+          this.$emit("sort", event);
+        },
+        onCellClick: (event) => {
+          this.$emit("cell-click", event);
+        },
+        onCellFocused: (event) => {
+          this.$emit("cell-focused", event);
+        }
       },
       [
         // @ts-ignore
@@ -3167,14 +3631,30 @@ const VDataGridRow = defineComponent({
           },
           class: "vvd-component",
           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),
-            "cell-click": (event) => this.$emit("cell-click", event),
-            "row-focused": (event) => this.$emit("row-focused", event)
+            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);
+            },
+            "cell-click": (event) => {
+              this.$emit("cell-click", event);
+            },
+            "row-focused": (event) => {
+              this.$emit("row-focused", event);
+            }
           }
         },
         [this.$slots.default]
@@ -3189,14 +3669,30 @@ const VDataGridRow = defineComponent({
         ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
         ...this.rowType !== void 0 ? { "^row-type": this.rowType } : {},
         ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onCellClick: (event) => this.$emit("cell-click", event),
-        onRowFocused: (event) => this.$emit("row-focused", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onCellClick: (event) => {
+          this.$emit("cell-click", event);
+        },
+        onRowFocused: (event) => {
+          this.$emit("row-focused", event);
+        }
       },
       [
         // @ts-ignore
@@ -3339,11 +3835,21 @@ const VDatePicker = defineComponent({
           },
           class: "vvd-component",
           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),
+            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(
                 "update:modelValue",
@@ -3351,8 +3857,12 @@ const VDatePicker = defineComponent({
               );
               this.$emit("input", event);
             },
-            change: (event) => this.$emit("change", event),
-            "clear-click": (event) => this.$emit("clear-click", event)
+            change: (event) => {
+              this.$emit("change", event);
+            },
+            "clear-click": (event) => {
+              this.$emit("clear-click", event);
+            }
           }
         },
         [
@@ -3378,11 +3888,21 @@ const VDatePicker = defineComponent({
         ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
         ...(this.modelValue ?? this.value) !== void 0 ? { "^current-value": this.modelValue ?? this.value } : {},
         ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onInput: (event) => {
           this.$emit(
             "update:modelValue",
@@ -3390,8 +3910,12 @@ const VDatePicker = defineComponent({
           );
           this.$emit("input", event);
         },
-        onChange: (event) => this.$emit("change", event),
-        onClearClick: (event) => this.$emit("clear-click", event)
+        onChange: (event) => {
+          this.$emit("change", event);
+        },
+        onClearClick: (event) => {
+          this.$emit("clear-click", event);
+        }
       },
       [
         // @ts-ignore
@@ -3576,11 +4100,21 @@ const VDateRangePicker = defineComponent({
           },
           class: "vvd-component",
           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),
+            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:start": (event) => {
               this.$emit("update:start", event.target.start);
               this.$emit("input:start", event);
@@ -3589,9 +4123,15 @@ const VDateRangePicker = 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)
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            },
+            "clear-click": (event) => {
+              this.$emit("clear-click", event);
+            }
           }
         },
         [
@@ -3621,11 +4161,21 @@ const VDateRangePicker = defineComponent({
         ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
         ...this.value !== void 0 ? { "^current-value": this.value } : {},
         ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         "onInput:start": (event) => {
           this.$emit("update:start", event.target.start);
           this.$emit("input:start", event);
@@ -3634,9 +4184,15 @@ const VDateRangePicker = 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)
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        },
+        onClearClick: (event) => {
+          this.$emit("clear-click", event);
+        }
       },
       [
         // @ts-ignore
@@ -3797,19 +4353,37 @@ const VDialPad = defineComponent({
           },
           class: "vvd-component",
           on: {
-            click: (event) => this.$emit("click", event),
-            keydown: (event) => this.$emit("keydown", event),
-            keyup: (event) => this.$emit("keyup", event),
-            change: (event) => this.$emit("change", event),
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            },
             input: (event) => {
               this.$emit("update:modelValue", event.target.value);
               this.$emit("input", event);
             },
-            blur: (event) => this.$emit("blur", event),
-            focus: (event) => this.$emit("focus", event),
-            "keypad-click": (event) => this.$emit("keypad-click", event),
-            dial: (event) => this.$emit("dial", event),
-            "end-call": (event) => this.$emit("end-call", event)
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            "keypad-click": (event) => {
+              this.$emit("keypad-click", event);
+            },
+            dial: (event) => {
+              this.$emit("dial", event);
+            },
+            "end-call": (event) => {
+              this.$emit("end-call", event);
+            }
           }
         },
         [this.$slots.default]
@@ -3832,19 +4406,37 @@ const VDialPad = defineComponent({
         ...this.noInput !== void 0 && this.noInput !== false ? { "^no-input": this.noInput } : {},
         ...this.endCallButtonLabel !== void 0 ? { "^end-call-button-label": this.endCallButtonLabel } : {},
         ...this.callButtonLabel !== void 0 ? { "^call-button-label": this.callButtonLabel } : {},
-        onClick: (event) => this.$emit("click", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onChange: (event) => this.$emit("change", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        },
         onInput: (event) => {
           this.$emit("update:modelValue", event.target.value);
           this.$emit("input", event);
         },
-        onBlur: (event) => this.$emit("blur", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onKeypadClick: (event) => this.$emit("keypad-click", event),
-        onDial: (event) => this.$emit("dial", event),
-        onEndCall: (event) => this.$emit("end-call", event)
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onKeypadClick: (event) => {
+          this.$emit("keypad-click", event);
+        },
+        onDial: (event) => {
+          this.$emit("dial", event);
+        },
+        onEndCall: (event) => {
+          this.$emit("end-call", event);
+        }
       },
       [
         // @ts-ignore
@@ -3975,12 +4567,24 @@ const VDialog = defineComponent({
           },
           class: "vvd-component",
           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),
+            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);
+            },
             open: (event) => {
               this.$emit("update:open", event.target.open);
               this.$emit("open", event);
@@ -4022,12 +4626,24 @@ const VDialog = defineComponent({
         ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
         ...this.noLightDismiss !== void 0 && this.noLightDismiss !== false ? { "^no-light-dismiss": this.noLightDismiss } : {},
         ...this.modal !== void 0 && this.modal !== false ? { "^modal": this.modal } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
         onOpen: (event) => {
           this.$emit("update:open", event.target.open);
           this.$emit("open", event);
@@ -4131,12 +4747,24 @@ const VDivider = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -4150,12 +4778,24 @@ const VDivider = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
         ...this.role !== void 0 ? { "^role": this.role } : {},
         ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -4252,12 +4892,24 @@ const VEmptyState = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -4279,12 +4931,24 @@ const VEmptyState = defineComponent({
         ...this.headline !== void 0 ? { "^headline": this.headline } : {},
         ...this.icon !== void 0 ? { "^icon": this.icon } : {},
         ...this.iconDecoration !== void 0 ? { "^icon-decoration": this.iconDecoration } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -4473,12 +5137,24 @@ const VFab = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -4512,12 +5188,24 @@ const VFab = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.size !== void 0 ? { "^size": this.size } : {},
         ...this.label !== void 0 ? { "^label": this.label } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -4681,13 +5369,27 @@ const VFilePicker = defineComponent({
           },
           class: "vvd-component",
           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),
-            change: (event) => this.$emit("change", event)
+            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);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -4715,13 +5417,27 @@ const VFilePicker = defineComponent({
         ...this.maxFileSize !== void 0 ? { "^max-file-size": this.maxFileSize } : {},
         ...this.accept !== void 0 ? { "^accept": this.accept } : {},
         ...this.size !== void 0 ? { "^size": this.size } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -4803,12 +5519,24 @@ const VHeader = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -4828,12 +5556,24 @@ const VHeader = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
         ...this.elevationShadow !== void 0 && this.elevationShadow !== false ? { "^elevation-shadow": this.elevationShadow } : {},
         ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -4930,18 +5670,30 @@ const VIcon = defineComponent({
           },
           class: "vvd-component",
           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)
-          }
-        },
-        [this.$slots.default]
-      );
-    }
-    return h(
+            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);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
       this.componentName,
       {
         ref: "element",
@@ -4950,12 +5702,24 @@ const VIcon = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.size !== void 0 ? { "^size": this.size } : {},
         ...this.name !== void 0 ? { "^name": this.name } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -5065,12 +5829,24 @@ const VLayout = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -5087,12 +5863,24 @@ const VLayout = defineComponent({
         ...this.columnSpacing !== void 0 ? { "^column-spacing": this.columnSpacing } : {},
         ...this.rowSpacing !== void 0 ? { "^row-spacing": this.rowSpacing } : {},
         ...this.autoSizing !== void 0 ? { "^auto-sizing": this.autoSizing } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -5138,6 +5926,13 @@ const VMenu = defineComponent({
      * indicates whether the menu will automatically close when focus moves away from it.
      */
     autoDismiss: { type: Boolean, default: void 0 },
+    /**
+     * The strategy-absolute attribute.
+     */
+    positionStrategy: {
+      type: String,
+      default: void 0
+    },
     /**
      * indicates whether the menu is open
      */
@@ -5219,6 +6014,7 @@ const VMenu = defineComponent({
             ...this.placement !== void 0 ? { placement: this.placement } : {},
             ...this.trigger !== void 0 ? { trigger: this.trigger } : {},
             ...this.autoDismiss !== void 0 ? { "auto-dismiss": this.autoDismiss } : {},
+            ...this.positionStrategy !== void 0 ? { "position-strategy": this.positionStrategy } : {},
             ...this.open !== void 0 ? { open: this.open } : {}
           },
           class: "vvd-component",
@@ -5226,14 +6022,30 @@ const VMenu = defineComponent({
             ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
           },
           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),
-            open: (event) => this.$emit("open", event),
-            close: (event) => this.$emit("close", event)
+            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);
+            },
+            open: (event) => {
+              this.$emit("open", event);
+            },
+            close: (event) => {
+              this.$emit("close", event);
+            }
           }
         },
         [
@@ -5258,15 +6070,32 @@ const VMenu = defineComponent({
         ...this.placement !== void 0 ? { "^placement": this.placement } : {},
         ...this.trigger !== void 0 ? { "^trigger": this.trigger } : {},
         ...this.autoDismiss !== void 0 && this.autoDismiss !== false ? { "^auto-dismiss": this.autoDismiss } : {},
+        ...this.positionStrategy !== void 0 ? { "^position-strategy": this.positionStrategy } : {},
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onOpen: (event) => this.$emit("open", event),
-        onClose: (event) => this.$emit("close", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onOpen: (event) => {
+          this.$emit("open", event);
+        },
+        onClose: (event) => {
+          this.$emit("close", event);
+        }
       },
       [
         // @ts-ignore
@@ -5425,13 +6254,27 @@ const VMenuItem = defineComponent({
           },
           class: "vvd-component",
           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),
-            "expanded-change": (event) => this.$emit("expanded-change", event),
+            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);
+            },
+            "expanded-change": (event) => {
+              this.$emit("expanded-change", event);
+            },
             change: (event) => {
               this.$emit(
                 "update:modelValue",
@@ -5468,13 +6311,27 @@ const VMenuItem = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.checkTrailing !== void 0 && this.checkTrailing !== false ? { "^check-trailing": this.checkTrailing } : {},
         ...this.checkAppearance !== void 0 ? { "^check-appearance": this.checkAppearance } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onExpandedChange: (event) => this.$emit("expanded-change", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onExpandedChange: (event) => {
+          this.$emit("expanded-change", event);
+        },
         onChange: (event) => {
           this.$emit(
             "update:modelValue",
@@ -5557,12 +6414,24 @@ const VNav = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -5574,12 +6443,24 @@ const VNav = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -5680,13 +6561,27 @@ const VNavDisclosure = defineComponent({
           },
           class: "vvd-component",
           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),
-            toggle: (event) => this.$emit("toggle", event)
+            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);
+            },
+            toggle: (event) => {
+              this.$emit("toggle", event);
+            }
           }
         },
         [
@@ -5709,13 +6604,27 @@ const VNavDisclosure = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onToggle: (event) => this.$emit("toggle", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onToggle: (event) => {
+          this.$emit("toggle", event);
+        }
       },
       [
         // @ts-ignore
@@ -5863,12 +6772,24 @@ const VNavItem = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -5898,12 +6819,24 @@ const VNavItem = defineComponent({
         ...this.text !== void 0 ? { "^text": this.text } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -5993,12 +6926,24 @@ const VNote = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -6017,12 +6962,24 @@ const VNote = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { "^headline": this.headline } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -6134,6 +7091,13 @@ const VNumberField = defineComponent({
      * Sets the width of the element to a specified number of characters.
      */
     size: { type: Number, default: void 0 },
+    /**
+     * The size the number-field should have.
+     */
+    scale: {
+      type: String,
+      default: void 0
+    },
     /**
      * Amount to increment or decrement the value by
      */
@@ -6266,6 +7230,7 @@ const VNumberField = defineComponent({
             ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
             ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
             ...this.size !== void 0 ? { size: this.size } : {},
+            ...this.scale !== void 0 ? { scale: this.scale } : {},
             ...this.step !== void 0 ? { step: this.step } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
             ...this.min !== void 0 ? { min: this.min } : {},
@@ -6277,11 +7242,21 @@ const VNumberField = defineComponent({
           },
           class: "vvd-component",
           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),
+            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(
                 "update:modelValue",
@@ -6289,7 +7264,9 @@ const VNumberField = defineComponent({
               );
               this.$emit("input", event);
             },
-            change: (event) => this.$emit("change", event)
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -6323,6 +7300,7 @@ const VNumberField = defineComponent({
         ...this.maxlength !== void 0 ? { "^maxlength": this.maxlength } : {},
         ...this.minlength !== void 0 ? { "^minlength": this.minlength } : {},
         ...this.size !== void 0 ? { "^size": this.size } : {},
+        ...this.scale !== void 0 ? { "^scale": this.scale } : {},
         ...this.step !== void 0 ? { "^step": this.step } : {},
         ...this.max !== void 0 ? { "^max": this.max } : {},
         ...this.min !== void 0 ? { "^min": this.min } : {},
@@ -6331,11 +7309,21 @@ const VNumberField = defineComponent({
         ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
         ...this.shape !== void 0 ? { "^shape": this.shape } : {},
         ...this.autoComplete !== void 0 ? { "^autoComplete": this.autoComplete } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onInput: (event) => {
           this.$emit(
             "update:modelValue",
@@ -6343,7 +7331,9 @@ const VNumberField = defineComponent({
           );
           this.$emit("input", event);
         },
-        onChange: (event) => this.$emit("change", event)
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -6456,12 +7446,24 @@ const VOption = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -6484,12 +7486,24 @@ const VOption = defineComponent({
         ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
         ...this.text !== void 0 ? { "^text": this.text } : {},
         ...this.label !== void 0 ? { "^label": this.label } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -6595,13 +7609,27 @@ const VPagination = defineComponent({
           },
           class: "vvd-component",
           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),
-            "pagination-change": (event) => this.$emit("pagination-change", event)
+            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);
+            },
+            "pagination-change": (event) => {
+              this.$emit("pagination-change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -6618,13 +7646,27 @@ const VPagination = defineComponent({
         ...this.navIcons !== void 0 && this.navIcons !== false ? { "^nav-icons": this.navIcons } : {},
         ...this.total !== void 0 ? { "^total": this.total } : {},
         ...this.selectedIndex !== void 0 ? { "^selected-index": this.selectedIndex } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onPaginationChange: (event) => this.$emit("pagination-change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onPaginationChange: (event) => {
+          this.$emit("pagination-change", event);
+        }
       },
       [
         // @ts-ignore
@@ -6737,12 +7779,24 @@ const VProgress = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -6762,12 +7816,24 @@ const VProgress = defineComponent({
         ...this.shape !== void 0 ? { "^shape": this.shape } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -6872,12 +7938,24 @@ const VProgressRing = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -6896,12 +7974,24 @@ const VProgressRing = defineComponent({
         ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.size !== void 0 ? { "^size": this.size } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -7040,13 +8130,27 @@ const VRadio = defineComponent({
           },
           class: "vvd-component",
           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),
-            change: (event) => this.$emit("change", event)
+            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);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -7069,16 +8173,30 @@ const VRadio = defineComponent({
         ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
         ...this.label !== void 0 ? { "^label": this.label } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
-      },
-      [
-        // @ts-ignore
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
+      },
+      [
+        // @ts-ignore
         this.$slots.default && this.$slots.default()
       ]
     );
@@ -7197,12 +8315,24 @@ const VRadioGroup = defineComponent({
           },
           class: "vvd-component",
           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),
+            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);
+            },
             change: (event) => {
               this.$emit(
                 "update:modelValue",
@@ -7227,12 +8357,24 @@ const VRadioGroup = defineComponent({
         ...(this.modelValue ?? this.value) !== void 0 ? { "^value": this.modelValue ?? this.value } : {},
         ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
         ...this.label !== void 0 ? { "^label": this.label } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
         onChange: (event) => {
           this.$emit(
             "update:modelValue",
@@ -7457,11 +8599,21 @@ const VRangeSlider = defineComponent({
           },
           class: "vvd-component",
           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),
+            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:start": (event) => {
               this.$emit("update:start", event.target.start);
               this.$emit("input:start", event);
@@ -7470,8 +8622,12 @@ const VRangeSlider = 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)
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -7502,11 +8658,21 @@ const VRangeSlider = defineComponent({
         ...this.markers !== void 0 && this.markers !== false ? { "^markers": this.markers } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.pin !== void 0 && this.pin !== false ? { "^pin": this.pin } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         "onInput:start": (event) => {
           this.$emit("update:start", event.target.start);
           this.$emit("input:start", event);
@@ -7515,8 +8681,12 @@ const VRangeSlider = 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)
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -7526,6 +8696,303 @@ const VRangeSlider = defineComponent({
   }
 });
 
+const VSearchableSelect = defineComponent({
+  name: "VSearchableSelect",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    /**
+     * The success text for the form element.
+     */
+    successText: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
+    /**
+     * The helper text for the form element.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * 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 current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    shape: { type: String, default: void 0 },
+    fixedDropdown: { type: Boolean, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    open: { type: Boolean, default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    externalTags: { type: Boolean, default: void 0 },
+    maxLines: { type: Number, default: void 0 },
+    /**
+     * Adds a clear button to the input field that clears the selected values.
+     */
+    clearable: { type: Boolean, default: void 0 },
+    /**
+     * List of selected option values.
+     */
+    values: { type: Array, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fired when the selected options change
+     * @type {CustomEvent<undefined>}
+     */
+    "input",
+    /**
+     * Fired when the selected options change
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
+    /**
+     * Fires when the modelValue value changes
+     * @type {string}
+     */
+    "update:modelValue",
+    /**
+     * Fires when the values value changes
+     * @type {string[]}
+     */
+    "update:values"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "searchable-select",
+      registerSearchableSelect
+    );
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...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 ? { value: this.initialValue } : {},
+            ...(this.modelValue ?? this.value) !== void 0 ? { "current-value": this.modelValue ?? this.value } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.fixedDropdown !== void 0 ? { "fixed-dropdown": this.fixedDropdown } : {},
+            ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
+            ...this.open !== void 0 ? { open: this.open } : {},
+            ...this.multiple !== void 0 ? { multiple: this.multiple } : {},
+            ...this.externalTags !== void 0 ? { "external-tags": this.externalTags } : {},
+            ...this.maxLines !== void 0 ? { "max-lines": this.maxLines } : {},
+            ...this.clearable !== void 0 ? { clearable: this.clearable } : {}
+          },
+          class: "vvd-component",
+          domProps: {
+            ...this.values !== void 0 ? { values: this.values } : {}
+          },
+          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(
+                "update:modelValue",
+                event.target.value
+              );
+              this.$emit("update:values", event.target.values);
+              this.$emit("input", event);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon Slot to add an icon to the control.
+          handleNamedSlot("icon", this.$slots["icon"]),
+          // @slot meta Slot to add meta content to the control.
+          handleNamedSlot("meta", this.$slots["meta"]),
+          // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"]),
+          // @slot no-options Message that appears when no options are available.
+          handleNamedSlot("no-options", this.$slots["no-options"]),
+          // @slot no-matches Message that appears when no options match the search query.
+          handleNamedSlot("no-matches", this.$slots["no-matches"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
+        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+        ...this.label !== void 0 ? { "^label": this.label } : {},
+        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+        ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
+        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+        ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
+        ...(this.modelValue ?? this.value) !== void 0 ? { "^current-value": this.modelValue ?? this.value } : {},
+        ...this.name !== void 0 ? { "^name": this.name } : {},
+        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+        ...this.fixedDropdown !== void 0 && this.fixedDropdown !== false ? { "^fixed-dropdown": this.fixedDropdown } : {},
+        ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
+        ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+        ...this.multiple !== void 0 && this.multiple !== false ? { "^multiple": this.multiple } : {},
+        ...this.externalTags !== void 0 && this.externalTags !== false ? { "^external-tags": this.externalTags } : {},
+        ...this.maxLines !== void 0 ? { "^max-lines": this.maxLines } : {},
+        ...this.clearable !== void 0 && this.clearable !== false ? { "^clearable": this.clearable } : {},
+        ...this.values !== void 0 ? { ".values": this.values } : {},
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit(
+            "update:modelValue",
+            event.target.value
+          );
+          this.$emit("update:values", event.target.values);
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot icon Slot to add an icon to the control.
+        handleNamedSlot("icon", this.$slots["icon"]),
+        // @slot meta Slot to add meta content to the control.
+        handleNamedSlot("meta", this.$slots["meta"]),
+        // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"]),
+        // @slot no-options Message that appears when no options are available.
+        handleNamedSlot("no-options", this.$slots["no-options"]),
+        // @slot no-matches Message that appears when no options match the search query.
+        handleNamedSlot("no-matches", this.$slots["no-matches"])
+      ]
+    );
+  }
+});
+
 const VSelect = defineComponent({
   name: "VSelect",
   model: isVue2 ? {
@@ -7613,6 +9080,13 @@ const VSelect = defineComponent({
      * Indicates if the listbox is in multi-selection mode.
      */
     multiple: { type: Boolean, default: void 0 },
+    /**
+     * The size the select should have.
+     */
+    scale: {
+      type: String,
+      default: void 0
+    },
     /**
      * The appearance attribute.
      */
@@ -7740,6 +9214,7 @@ const VSelect = defineComponent({
             ...this.open !== void 0 ? { open: this.open } : {},
             ...this.position !== void 0 ? { position: this.position } : {},
             ...this.multiple !== void 0 ? { multiple: this.multiple } : {},
+            ...this.scale !== void 0 ? { scale: this.scale } : {},
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
             ...this.shape !== void 0 ? { shape: this.shape } : {},
             ...this.fixedDropdown !== void 0 ? { "fixed-dropdown": this.fixedDropdown } : {},
@@ -7747,11 +9222,21 @@ const VSelect = defineComponent({
           },
           class: "vvd-component",
           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),
+            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(
                 "update:modelValue",
@@ -7759,7 +9244,9 @@ const VSelect = defineComponent({
               );
               this.$emit("input", event);
             },
-            change: (event) => this.$emit("change", event)
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -7793,15 +9280,26 @@ const VSelect = defineComponent({
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
         ...this.position !== void 0 ? { "^position": this.position } : {},
         ...this.multiple !== void 0 && this.multiple !== false ? { "^multiple": this.multiple } : {},
+        ...this.scale !== void 0 ? { "^scale": this.scale } : {},
         ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
         ...this.shape !== void 0 ? { "^shape": this.shape } : {},
         ...this.fixedDropdown !== void 0 && this.fixedDropdown !== false ? { "^fixed-dropdown": this.fixedDropdown } : {},
         ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onInput: (event) => {
           this.$emit(
             "update:modelValue",
@@ -7809,7 +9307,9 @@ const VSelect = defineComponent({
           );
           this.$emit("input", event);
         },
-        onChange: (event) => this.$emit("change", event)
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -7931,13 +9431,27 @@ const VSelectableBox = defineComponent({
           },
           class: "vvd-component",
           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),
-            change: (event) => this.$emit("change", event)
+            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);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -7956,13 +9470,27 @@ const VSelectableBox = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.controlType !== void 0 ? { "^control-type": this.controlType } : {},
         ...this.tight !== void 0 && this.tight !== false ? { "^tight": this.tight } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -8062,14 +9590,30 @@ const VSideDrawer = defineComponent({
           },
           class: "vvd-component",
           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),
-            close: (event) => this.$emit("close", event),
-            open: (event) => this.$emit("open", event)
+            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);
+            },
+            close: (event) => {
+              this.$emit("close", event);
+            },
+            open: (event) => {
+              this.$emit("open", event);
+            }
           }
         },
         [
@@ -8089,14 +9633,30 @@ const VSideDrawer = defineComponent({
         ...this.modal !== void 0 && this.modal !== false ? { "^modal": this.modal } : {},
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
         ...this.trailing !== void 0 && this.trailing !== false ? { "^trailing": this.trailing } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onClose: (event) => this.$emit("close", event),
-        onOpen: (event) => this.$emit("open", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onClose: (event) => {
+          this.$emit("close", event);
+        },
+        onOpen: (event) => {
+          this.$emit("open", event);
+        }
       },
       [
         // @ts-ignore
@@ -8294,12 +9854,24 @@ const VSlider = defineComponent({
           },
           class: "vvd-component",
           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),
+            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);
+            },
             change: (event) => {
               this.$emit(
                 "update:modelValue",
@@ -8334,12 +9906,24 @@ const VSlider = defineComponent({
         ...this.markers !== void 0 && this.markers !== false ? { "^markers": this.markers } : {},
         ...this.pin !== void 0 && this.pin !== false ? { "^pin": this.pin } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
         onChange: (event) => {
           this.$emit(
             "update:modelValue",
@@ -8493,14 +10077,30 @@ const VSplitButton = defineComponent({
           },
           class: "vvd-component",
           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),
-            "action-click": (event) => this.$emit("action-click", event),
-            "indicator-click": (event) => this.$emit("indicator-click", event)
+            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);
+            },
+            "action-click": (event) => {
+              this.$emit("action-click", event);
+            },
+            "indicator-click": (event) => {
+              this.$emit("indicator-click", event);
+            }
           }
         },
         [
@@ -8527,14 +10127,30 @@ const VSplitButton = defineComponent({
         ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
         ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
         ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onActionClick: (event) => this.$emit("action-click", event),
-        onIndicatorClick: (event) => this.$emit("indicator-click", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onActionClick: (event) => {
+          this.$emit("action-click", event);
+        },
+        onIndicatorClick: (event) => {
+          this.$emit("indicator-click", event);
+        }
       },
       [
         // @ts-ignore
@@ -8690,12 +10306,24 @@ const VSwitch = defineComponent({
           },
           class: "vvd-component",
           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),
+            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);
+            },
             change: (event) => {
               this.$emit(
                 "update:modelValue",
@@ -8724,12 +10352,24 @@ const VSwitch = defineComponent({
         ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
         ...this.label !== void 0 ? { "^label": this.label } : {},
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
         onChange: (event) => {
           this.$emit(
             "update:modelValue",
@@ -8787,6 +10427,10 @@ const VTab = defineComponent({
      * Indicates the tab's label.
      */
     label: { type: String, default: void 0 },
+    /**
+     * Indicates the tab's label.
+     */
+    removable: { type: Boolean, default: void 0 },
     tabIndex: { type: Number, default: void 0 },
     ariaSelected: { type: String, default: void 0 }
   },
@@ -8822,7 +10466,14 @@ const VTab = defineComponent({
      */
     "input"
   ],
-  methods: {},
+  methods: {
+    _handleCloseClick(e) {
+      return this.element?._handleCloseClick(e);
+    },
+    _onKeyDown(e) {
+      return this.element?._onKeyDown(e);
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent("tab", registerTab);
     const element = ref(null);
@@ -8842,17 +10493,30 @@ const VTab = defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.shape !== void 0 ? { shape: this.shape } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.removable !== void 0 ? { removable: this.removable } : {},
             ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {},
             ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [
@@ -8874,14 +10538,27 @@ const VTab = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.shape !== void 0 ? { "^shape": this.shape } : {},
         ...this.label !== void 0 ? { "^label": this.label } : {},
+        ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
         ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {},
         ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -8953,12 +10630,24 @@ const VTabPanel = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -8970,12 +10659,24 @@ const VTabPanel = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -9114,13 +10815,27 @@ const VTabs = defineComponent({
           },
           class: "vvd-component",
           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),
-            change: (event) => this.$emit("change", event)
+            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);
+            },
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -9138,13 +10853,27 @@ const VTabs = defineComponent({
         ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
         ...this.gutters !== void 0 ? { "^gutters": this.gutters } : {},
         ...this.scrollablePanel !== void 0 && this.scrollablePanel !== false ? { "^scrollable-panel": this.scrollablePanel } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -9286,14 +11015,30 @@ const VTag = defineComponent({
           },
           class: "vvd-component",
           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),
-            "selected-change": (event) => this.$emit("selected-change", event),
-            removed: (event) => this.$emit("removed", event)
+            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);
+            },
+            "selected-change": (event) => {
+              this.$emit("selected-change", event);
+            },
+            removed: (event) => {
+              this.$emit("removed", event);
+            }
           }
         },
         [
@@ -9318,14 +11063,30 @@ const VTag = defineComponent({
         ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
         ...this.selectable !== void 0 && this.selectable !== false ? { "^selectable": this.selectable } : {},
         ...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onSelectedChange: (event) => this.$emit("selected-change", event),
-        onRemoved: (event) => this.$emit("removed", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onSelectedChange: (event) => {
+          this.$emit("selected-change", event);
+        },
+        onRemoved: (event) => {
+          this.$emit("removed", event);
+        }
       },
       [
         // @ts-ignore
@@ -9399,12 +11160,24 @@ const VTagGroup = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -9417,12 +11190,24 @@ const VTagGroup = defineComponent({
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
         ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -9649,11 +11434,21 @@ const VTextArea = defineComponent({
           },
           class: "vvd-component",
           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),
+            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(
                 "update:modelValue",
@@ -9661,7 +11456,9 @@ const VTextArea = defineComponent({
               );
               this.$emit("input", event);
             },
-            change: (event) => this.$emit("change", event)
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -9699,11 +11496,21 @@ const VTextArea = defineComponent({
         ...this.rows !== void 0 ? { "^rows": this.rows } : {},
         ...this.spellcheck !== void 0 && this.spellcheck !== false ? { "^spellcheck": this.spellcheck } : {},
         ...this.wrap !== void 0 ? { "^wrap": this.wrap } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onInput: (event) => {
           this.$emit(
             "update:modelValue",
@@ -9711,7 +11518,9 @@ const VTextArea = defineComponent({
           );
           this.$emit("input", event);
         },
-        onChange: (event) => this.$emit("change", event)
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -9843,7 +11652,14 @@ const VTextField = defineComponent({
       default: void 0
     },
     shape: { type: String, default: void 0 },
-    autoComplete: { type: String, default: void 0 }
+    autoComplete: { type: String, default: void 0 },
+    /**
+     * The size the text-field should have.
+     */
+    scale: {
+      type: String,
+      default: void 0
+    }
   },
   emits: [
     /**
@@ -9940,15 +11756,26 @@ const VTextField = defineComponent({
             ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
             ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
+            ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {},
+            ...this.scale !== void 0 ? { scale: this.scale } : {}
           },
           class: "vvd-component",
           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),
+            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(
                 "update:modelValue",
@@ -9956,7 +11783,9 @@ const VTextField = defineComponent({
               );
               this.$emit("input", event);
             },
-            change: (event) => this.$emit("change", event)
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -10003,11 +11832,22 @@ const VTextField = defineComponent({
         ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
         ...this.shape !== void 0 ? { "^shape": this.shape } : {},
         ...this.autoComplete !== void 0 ? { "^autoComplete": this.autoComplete } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        ...this.scale !== void 0 ? { "^scale": this.scale } : {},
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onInput: (event) => {
           this.$emit(
             "update:modelValue",
@@ -10015,7 +11855,9 @@ const VTextField = defineComponent({
           );
           this.$emit("input", event);
         },
-        onChange: (event) => this.$emit("change", event)
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -10191,11 +12033,21 @@ const VTimePicker = defineComponent({
           },
           class: "vvd-component",
           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),
+            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(
                 "update:modelValue",
@@ -10203,7 +12055,9 @@ const VTimePicker = defineComponent({
               );
               this.$emit("input", event);
             },
-            change: (event) => this.$emit("change", event)
+            change: (event) => {
+              this.$emit("change", event);
+            }
           }
         },
         [
@@ -10233,11 +12087,21 @@ const VTimePicker = defineComponent({
         ...this.clock !== void 0 ? { "^clock": this.clock } : {},
         ...this.min !== void 0 ? { "^min": this.min } : {},
         ...this.max !== void 0 ? { "^max": this.max } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
         onInput: (event) => {
           this.$emit(
             "update:modelValue",
@@ -10245,7 +12109,9 @@ const VTimePicker = defineComponent({
           );
           this.$emit("input", event);
         },
-        onChange: (event) => this.$emit("change", event)
+        onChange: (event) => {
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -10354,12 +12220,24 @@ const VToggletip = defineComponent({
             ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
           },
           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)
+            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);
+            }
           }
         },
         [
@@ -10382,12 +12260,24 @@ const VToggletip = defineComponent({
         ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
         ...this.placement !== void 0 ? { "^placement": this.placement } : {},
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -10484,12 +12374,24 @@ const VTooltip = defineComponent({
             ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
           },
           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)
+            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);
+            }
           }
         },
         [
@@ -10509,12 +12411,24 @@ const VTooltip = defineComponent({
         ...this.text !== void 0 ? { "^text": this.text } : {},
         ...this.placement !== void 0 ? { "^placement": this.placement } : {},
         ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -10622,14 +12536,30 @@ const VTreeItem = defineComponent({
           },
           class: "vvd-component",
           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),
-            "expanded-change": (event) => this.$emit("expanded-change", event),
-            "selected-change": (event) => this.$emit("selected-change", event)
+            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);
+            },
+            "expanded-change": (event) => {
+              this.$emit("expanded-change", event);
+            },
+            "selected-change": (event) => {
+              this.$emit("selected-change", event);
+            }
           }
         },
         [
@@ -10652,14 +12582,30 @@ const VTreeItem = defineComponent({
         ...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
         ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
         ...this.text !== void 0 ? { "^text": this.text } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onExpandedChange: (event) => this.$emit("expanded-change", event),
-        onSelectedChange: (event) => this.$emit("selected-change", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onExpandedChange: (event) => {
+          this.$emit("expanded-change", event);
+        },
+        onSelectedChange: (event) => {
+          this.$emit("selected-change", event);
+        }
       },
       [
         // @ts-ignore
@@ -10742,12 +12688,24 @@ const VTreeView = defineComponent({
           },
           class: "vvd-component",
           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)
+            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);
+            }
           }
         },
         [this.$slots.default]
@@ -10760,12 +12718,24 @@ const VTreeView = defineComponent({
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
         ...this.renderCollapsedNodes !== void 0 && this.renderCollapsedNodes !== false ? { "^render-collapsed-nodes": this.renderCollapsedNodes } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        }
       },
       [
         // @ts-ignore
@@ -10886,15 +12856,33 @@ const VVideoPlayer = defineComponent({
           },
           class: "vvd-component",
           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),
-            play: (event) => this.$emit("play", event),
-            pause: (event) => this.$emit("pause", event),
-            ended: (event) => this.$emit("ended", event)
+            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);
+            },
+            play: (event) => {
+              this.$emit("play", event);
+            },
+            pause: (event) => {
+              this.$emit("pause", event);
+            },
+            ended: (event) => {
+              this.$emit("ended", event);
+            }
           }
         },
         [this.$slots.default]
@@ -10912,15 +12900,33 @@ const VVideoPlayer = defineComponent({
         ...this.loop !== void 0 && this.loop !== false ? { "^loop": this.loop } : {},
         ...this.playbackRates !== void 0 ? { "^playback-rates": this.playbackRates } : {},
         ...this.skipBy !== void 0 ? { "^skip-by": this.skipBy } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onPlay: (event) => this.$emit("play", event),
-        onPause: (event) => this.$emit("pause", event),
-        onEnded: (event) => this.$emit("ended", event)
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onPlay: (event) => {
+          this.$emit("play", event);
+        },
+        onPause: (event) => {
+          this.$emit("pause", event);
+        },
+        onEnded: (event) => {
+          this.$emit("ended", event);
+        }
       },
       [
         // @ts-ignore
@@ -12154,17 +14160,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 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 tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 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 Wed, 04 Sep 2024 12:17:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 04 Sep 2024 12:17:48 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 tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 07 Oct 2024 13:48:37 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 Wed, 04 Sep 2024 12:17:48 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, 07 Oct 2024 13:48:37 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 Wed, 04 Sep 2024 12:17:48 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, 07 Oct 2024 13:48:37 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 Wed, 04 Sep 2024 12:17:48 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, 07 Oct 2024 13:48:37 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",
@@ -12262,4 +14268,4 @@ const vivid3 = {
   }
 };
 
-export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3 };
+export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3 };