@vonage/vivid-vue 4.14.4 → 4.16.0

package/index.js

@@ -8,6 +8,27 @@ function setCustomComponentPrefix(prefix) {
 
 const isVue2 = version.startsWith("2");
 
+function handleVue3Props(props) {
+  if (
+    /* v8 ignore next 8 */
+    // @ts-ignore
+    import.meta.env.SSR !== false && // @ts-ignore
+    (globalThis.process && process.server) !== false && // @ts-ignore
+    (globalThis.process && process.server || // @ts-ignore
+    import.meta.env?.SSR)
+  ) {
+    const newProps = {};
+    for (const key in props) {
+      if (key[0] === "^") {
+        newProps[key.slice(1)] = props[key];
+      }
+    }
+    return newProps;
+  } else {
+    return props;
+  }
+}
+
 function registerComponent(type, registerFunction) {
   const componentName = ref(`${CustomComponentPrefix.value}-${type}`);
   onBeforeMount(() => {
@@ -125,8 +146,10 @@ const VAccordion = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.expandMode !== void 0 ? { "^expand-mode": this.expandMode } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.expandMode !== void 0 ? { "^expand-mode": this.expandMode } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -326,16 +349,18 @@ const VAccordionItem = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.headingLevel !== void 0 ? { "^heading-level": this.headingLevel } : {},
-        ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
-        ...this.id !== void 0 ? { "^id": this.id } : {},
-        ...this.heading !== void 0 ? { "^heading": this.heading } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...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.headingLevel !== void 0 ? { "^heading-level": this.headingLevel } : {},
+          ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
+          ...this.id !== void 0 ? { "^id": this.id } : {},
+          ...this.heading !== void 0 ? { "^heading": this.heading } : {},
+          ...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);
         },
@@ -481,12 +506,14 @@ const VActionGroup = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...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);
         },
@@ -693,17 +720,19 @@ const VAlert = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
-        ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
-        ...this.placement !== void 0 ? { "^placement": this.placement } : {},
-        ...this.headline !== void 0 ? { "^headline": this.headline } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.timeoutms !== void 0 ? { "^timeoutms": this.timeoutms } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.strategy !== void 0 ? { "^strategy": this.strategy } : {},
-        ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
+          ...this.placement !== void 0 ? { "^placement": this.placement } : {},
+          ...this.headline !== void 0 ? { "^headline": this.headline } : {},
+          ...this.text !== void 0 ? { "^text": this.text } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.timeoutms !== void 0 ? { "^timeoutms": this.timeoutms } : {},
+          ...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);
         },
@@ -899,18 +928,20 @@ const VAudioPlayer = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.playButtonAriaLabel !== void 0 ? { "^play-button-aria-label": this.playButtonAriaLabel } : {},
-        ...this.pauseButtonAriaLabel !== void 0 ? { "^pause-button-aria-label": this.pauseButtonAriaLabel } : {},
-        ...this.sliderAriaLabel !== void 0 ? { "^slider-aria-label": this.sliderAriaLabel } : {},
-        ...this.skipForwardAriaLabel !== void 0 ? { "^skip-forward-aria-label": this.skipForwardAriaLabel } : {},
-        ...this.skipBackwardAriaLabel !== void 0 ? { "^skip-backward-aria-label": this.skipBackwardAriaLabel } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.src !== void 0 ? { "^src": this.src } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.playButtonAriaLabel !== void 0 ? { "^play-button-aria-label": this.playButtonAriaLabel } : {},
+          ...this.pauseButtonAriaLabel !== void 0 ? { "^pause-button-aria-label": this.pauseButtonAriaLabel } : {},
+          ...this.sliderAriaLabel !== void 0 ? { "^slider-aria-label": this.sliderAriaLabel } : {},
+          ...this.skipForwardAriaLabel !== void 0 ? { "^skip-forward-aria-label": this.skipForwardAriaLabel } : {},
+          ...this.skipBackwardAriaLabel !== void 0 ? { "^skip-backward-aria-label": this.skipBackwardAriaLabel } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.src !== void 0 ? { "^src": this.src } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...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);
         },
@@ -1070,13 +1101,15 @@ const VAvatar = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.initials !== void 0 ? { "^initials": this.initials } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...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);
         },
@@ -1235,13 +1268,15 @@ const VBadge = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
+        ...handleVue3Props({
+          ...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.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...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);
         },
@@ -1394,16 +1429,18 @@ const VBanner = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.dismissAriaLabel !== void 0 ? { "^dismiss-aria-label": this.dismissAriaLabel } : {},
-        ...this.role !== void 0 ? { "^role": this.role } : {},
-        ...this.actionHref !== void 0 ? { "^action-href": this.actionHref } : {},
-        ...this.actionText !== void 0 ? { "^action-text": this.actionText } : {},
-        ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
-        ...this.ariaLive !== void 0 ? { "^aria-live": this.ariaLive } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+        ...handleVue3Props({
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.dismissAriaLabel !== void 0 ? { "^dismiss-aria-label": this.dismissAriaLabel } : {},
+          ...this.role !== void 0 ? { "^role": this.role } : {},
+          ...this.actionHref !== void 0 ? { "^action-href": this.actionHref } : {},
+          ...this.actionText !== void 0 ? { "^action-text": this.actionText } : {},
+          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
+          ...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);
         },
@@ -1523,7 +1560,9 @@ const VBreadcrumb = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -1695,17 +1734,19 @@ const VBreadcrumbItem = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.download !== void 0 ? { "^download": this.download } : {},
-        ...this.href !== void 0 ? { "^href": this.href } : {},
-        ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
-        ...this.ping !== void 0 ? { "^ping": this.ping } : {},
-        ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
-        ...this.rel !== void 0 ? { "^rel": this.rel } : {},
-        ...this.target !== void 0 ? { "^target": this.target } : {},
-        ...this.type !== void 0 ? { "^type": this.type } : {},
-        ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
+        ...handleVue3Props({
+          ...this.download !== void 0 ? { "^download": this.download } : {},
+          ...this.href !== void 0 ? { "^href": this.href } : {},
+          ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
+          ...this.ping !== void 0 ? { "^ping": this.ping } : {},
+          ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
+          ...this.rel !== void 0 ? { "^rel": this.rel } : {},
+          ...this.target !== void 0 ? { "^target": this.target } : {},
+          ...this.type !== void 0 ? { "^type": this.type } : {},
+          ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.text !== void 0 ? { "^text": this.text } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -2019,39 +2060,41 @@ const VButton = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
-        ...this.formnovalidate !== void 0 && this.formnovalidate !== false ? { "^formnovalidate": this.formnovalidate } : {},
-        ...this.title !== void 0 ? { "^title": this.title } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.stacked !== void 0 && this.stacked !== false ? { "^stacked": this.stacked } : {},
-        ...this.pending !== void 0 && this.pending !== false ? { "^pending": this.pending } : {},
-        ...this.dropdownIndicator !== void 0 && this.dropdownIndicator !== false ? { "^dropdown-indicator": this.dropdownIndicator } : {},
-        ...this.active !== void 0 && this.active !== false ? { "^active": this.active } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.href !== void 0 ? { "^href": this.href } : {},
-        ...this.download !== void 0 ? { "^download": this.download } : {},
-        ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
-        ...this.ping !== void 0 ? { "^ping": this.ping } : {},
-        ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
-        ...this.rel !== void 0 ? { "^rel": this.rel } : {},
-        ...this.target !== void 0 ? { "^target": this.target } : {},
-        ...this.form !== void 0 ? { "^form": this.form } : {},
-        ...this.formaction !== void 0 ? { "^formaction": this.formaction } : {},
-        ...this.formenctype !== void 0 ? { "^formenctype": this.formenctype } : {},
-        ...this.formmethod !== void 0 ? { "^formmethod": this.formmethod } : {},
-        ...this.formtarget !== void 0 ? { "^formtarget": this.formtarget } : {},
-        ...this.type !== void 0 ? { "^type": this.type } : {},
+        ...handleVue3Props({
+          ...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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
+          ...this.formnovalidate !== void 0 && this.formnovalidate !== false ? { "^formnovalidate": this.formnovalidate } : {},
+          ...this.title !== void 0 ? { "^title": this.title } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.stacked !== void 0 && this.stacked !== false ? { "^stacked": this.stacked } : {},
+          ...this.pending !== void 0 && this.pending !== false ? { "^pending": this.pending } : {},
+          ...this.dropdownIndicator !== void 0 && this.dropdownIndicator !== false ? { "^dropdown-indicator": this.dropdownIndicator } : {},
+          ...this.active !== void 0 && this.active !== false ? { "^active": this.active } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.href !== void 0 ? { "^href": this.href } : {},
+          ...this.download !== void 0 ? { "^download": this.download } : {},
+          ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
+          ...this.ping !== void 0 ? { "^ping": this.ping } : {},
+          ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
+          ...this.rel !== void 0 ? { "^rel": this.rel } : {},
+          ...this.target !== void 0 ? { "^target": this.target } : {},
+          ...this.form !== void 0 ? { "^form": this.form } : {},
+          ...this.formaction !== void 0 ? { "^formaction": this.formaction } : {},
+          ...this.formenctype !== void 0 ? { "^formenctype": this.formenctype } : {},
+          ...this.formmethod !== void 0 ? { "^formmethod": this.formmethod } : {},
+          ...this.formtarget !== void 0 ? { "^formtarget": this.formtarget } : {},
+          ...this.type !== void 0 ? { "^type": this.type } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -2231,11 +2274,13 @@ const VCalendar = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.datetime !== void 0 ? { ".datetime": this.datetime } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.datetime !== void 0 ? { ".datetime": this.datetime } : {},
+          ...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);
         },
@@ -2409,14 +2454,16 @@ const VCalendarEvent = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.heading !== void 0 ? { "^heading": this.heading } : {},
-        ...this.description !== void 0 ? { "^description": this.description } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.overlapCount !== void 0 ? { "^overlap-count": this.overlapCount } : {},
-        ...this.start !== void 0 ? { "^start": this.start } : {},
-        ...this.duration !== void 0 ? { "^duration": this.duration } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.heading !== void 0 ? { "^heading": this.heading } : {},
+          ...this.description !== void 0 ? { "^description": this.description } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...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);
         },
@@ -2584,13 +2631,15 @@ const VCard = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.headline !== void 0 ? { "^headline": this.headline } : {},
-        ...this.subtitle !== void 0 ? { "^subtitle": this.subtitle } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.elevation !== void 0 ? { "^elevation": this.elevation } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.headline !== void 0 ? { "^headline": this.headline } : {},
+          ...this.subtitle !== void 0 ? { "^subtitle": this.subtitle } : {},
+          ...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);
         },
@@ -2842,23 +2891,25 @@ const VCheckbox = defineComponent({
       {
         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.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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
-        ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.tabindex !== void 0 ? { "^tabindex": this.tabindex } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.ariaChecked !== void 0 ? { "^aria-checked": this.ariaChecked } : {},
-        ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+        ...handleVue3Props({
+          ...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.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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
+          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.tabindex !== void 0 ? { "^tabindex": this.tabindex } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.ariaChecked !== void 0 ? { "^aria-checked": this.ariaChecked } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -2902,6 +2953,18 @@ const VCombobox = defineComponent({
     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.
      */
@@ -3078,6 +3141,9 @@ const VCombobox = defineComponent({
         {
           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.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -3124,7 +3190,15 @@ const VCombobox = defineComponent({
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot icon Slot to add an icon to the combobox control.
+          handleNamedSlot("icon", this.$slots["icon"]),
+          // @slot meta Slot to add meta content to the combobox control.
+          handleNamedSlot("meta", this.$slots["meta"]),
+          // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -3132,22 +3206,27 @@ const VCombobox = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.initialValue !== void 0 ? { "^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.autocomplete !== void 0 ? { "^autocomplete": this.autocomplete } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.scale !== void 0 ? { "^scale": this.scale } : {},
-        ...this.placement !== void 0 ? { "^placement": this.placement } : {},
-        ...this.fixedDropdown !== void 0 && this.fixedDropdown !== false ? { "^fixed-dropdown": this.fixedDropdown } : {},
-        ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+        ...handleVue3Props({
+          ...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.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...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.autocomplete !== void 0 ? { "^autocomplete": this.autocomplete } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.scale !== void 0 ? { "^scale": this.scale } : {},
+          ...this.placement !== void 0 ? { "^placement": this.placement } : {},
+          ...this.fixedDropdown !== void 0 && this.fixedDropdown !== false ? { "^fixed-dropdown": this.fixedDropdown } : {},
+          ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+          ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -3176,7 +3255,13 @@ const VCombobox = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot icon Slot to add an icon to the combobox control.
+        handleNamedSlot("icon", this.$slots["icon"]),
+        // @slot meta Slot to add meta content to the combobox control.
+        handleNamedSlot("meta", this.$slots["meta"]),
+        // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -3319,12 +3404,14 @@ const VDataGrid = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.noTabbing !== void 0 && this.noTabbing !== false ? { "^no-tabbing": this.noTabbing } : {},
-        ...this.generateHeader !== void 0 ? { "^generate-header": this.generateHeader } : {},
-        ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
-        ...this.selectionMode !== void 0 ? { "^selection-mode": this.selectionMode } : {},
-        ...this.rowsData !== void 0 ? { ".rowsData": this.rowsData } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.noTabbing !== void 0 && this.noTabbing !== false ? { "^no-tabbing": this.noTabbing } : {},
+          ...this.generateHeader !== void 0 ? { "^generate-header": this.generateHeader } : {},
+          ...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);
         },
@@ -3512,12 +3599,14 @@ const VDataGridCell = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.cellType !== void 0 ? { "^cell-type": this.cellType } : {},
-        ...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {},
-        ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
-        ...this.ariaSort !== void 0 ? { "^aria-sort": this.ariaSort } : {},
-        ...this.columnDefinition !== void 0 ? { ".columnDefinition": this.columnDefinition } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.cellType !== void 0 ? { "^cell-type": this.cellType } : {},
+          ...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {},
+          ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
+          ...this.ariaSort !== void 0 ? { "^aria-sort": this.ariaSort } : {},
+          ...this.columnDefinition !== void 0 ? { ".columnDefinition": this.columnDefinition } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -3690,10 +3779,12 @@ const VDataGridRow = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...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);
         },
@@ -3902,17 +3993,19 @@ const VDatePicker = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...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);
         },
@@ -4171,21 +4264,23 @@ const VDateRangePicker = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
-        ...this.initialStart !== void 0 ? { "^start": this.initialStart } : {},
-        ...this.initialEnd !== void 0 ? { "^end": this.initialEnd } : {},
-        ...this.start !== void 0 ? { "^current-start": this.start } : {},
-        ...this.end !== void 0 ? { "^current-end": this.end } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.initialStart !== void 0 ? { "^start": this.initialStart } : {},
+          ...this.initialEnd !== void 0 ? { "^end": this.initialEnd } : {},
+          ...this.start !== void 0 ? { "^current-start": this.start } : {},
+          ...this.end !== void 0 ? { "^current-end": this.end } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...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);
         },
@@ -4419,18 +4514,20 @@ const VDialPad = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-        ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
-        ...(this.modelValue ?? this.value) !== void 0 ? { "^value": this.modelValue ?? this.value } : {},
-        ...this.pattern !== void 0 ? { "^pattern": this.pattern } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...this.pending !== void 0 && this.pending !== false ? { "^pending": this.pending } : {},
-        ...this.callActive !== void 0 && this.callActive !== false ? { "^call-active": this.callActive } : {},
-        ...this.noCall !== void 0 && this.noCall !== false ? { "^no-call": this.noCall } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
+          ...(this.modelValue ?? this.value) !== void 0 ? { "^value": this.modelValue ?? this.value } : {},
+          ...this.pattern !== void 0 ? { "^pattern": this.pattern } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.pending !== void 0 && this.pending !== false ? { "^pending": this.pending } : {},
+          ...this.callActive !== void 0 && this.callActive !== false ? { "^call-active": this.callActive } : {},
+          ...this.noCall !== void 0 && this.noCall !== false ? { "^no-call": this.noCall } : {},
+          ...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);
         },
@@ -4666,20 +4763,22 @@ const VDialog = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.iconPlacement !== void 0 ? { "^icon-placement": this.iconPlacement } : {},
-        ...this.subtitle !== void 0 ? { "^subtitle": this.subtitle } : {},
-        ...this.headline !== void 0 ? { "^headline": this.headline } : {},
-        ...this.fullWidthBody !== void 0 && this.fullWidthBody !== false ? { "^full-width-body": this.fullWidthBody } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
-        ...this.noLightDismiss !== void 0 && this.noLightDismiss !== false ? { "^no-light-dismiss": this.noLightDismiss } : {},
-        ...this.noDismissOnEsc !== void 0 && this.noDismissOnEsc !== false ? { "^no-dismiss-on-esc": this.noDismissOnEsc } : {},
-        ...this.noDismissButton !== void 0 && this.noDismissButton !== false ? { "^no-dismiss-button": this.noDismissButton } : {},
-        ...this.nonDismissible !== void 0 && this.nonDismissible !== false ? { "^non-dismissible": this.nonDismissible } : {},
-        ...this.modal !== void 0 && this.modal !== false ? { "^modal": this.modal } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.iconPlacement !== void 0 ? { "^icon-placement": this.iconPlacement } : {},
+          ...this.subtitle !== void 0 ? { "^subtitle": this.subtitle } : {},
+          ...this.headline !== void 0 ? { "^headline": this.headline } : {},
+          ...this.fullWidthBody !== void 0 && this.fullWidthBody !== false ? { "^full-width-body": this.fullWidthBody } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+          ...this.noLightDismiss !== void 0 && this.noLightDismiss !== false ? { "^no-light-dismiss": this.noLightDismiss } : {},
+          ...this.noDismissOnEsc !== void 0 && this.noDismissOnEsc !== false ? { "^no-dismiss-on-esc": this.noDismissOnEsc } : {},
+          ...this.noDismissButton !== void 0 && this.noDismissButton !== false ? { "^no-dismiss-button": this.noDismissButton } : {},
+          ...this.nonDismissible !== void 0 && this.nonDismissible !== false ? { "^non-dismissible": this.nonDismissible } : {},
+          ...this.modal !== void 0 && this.modal !== false ? { "^modal": this.modal } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -4832,9 +4931,11 @@ const VDivider = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.role !== void 0 ? { "^role": this.role } : {},
-        ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
+        ...handleVue3Props({
+          ...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);
         },
@@ -4983,11 +5084,13 @@ const VEmptyState = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.headline !== void 0 ? { "^headline": this.headline } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.iconDecoration !== void 0 ? { "^icon-decoration": this.iconDecoration } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.headline !== void 0 ? { "^headline": this.headline } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.iconDecoration !== void 0 ? { "^icon-decoration": this.iconDecoration } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -5226,25 +5329,27 @@ const VFab = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.formnovalidate !== void 0 && this.formnovalidate !== false ? { "^formnovalidate": this.formnovalidate } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
-        ...this.form !== void 0 ? { "^form": this.form } : {},
-        ...this.formaction !== void 0 ? { "^formaction": this.formaction } : {},
-        ...this.formenctype !== void 0 ? { "^formenctype": this.formenctype } : {},
-        ...this.formmethod !== void 0 ? { "^formmethod": this.formmethod } : {},
-        ...this.formtarget !== void 0 ? { "^formtarget": this.formtarget } : {},
-        ...this.type !== void 0 ? { "^type": this.type } : {},
+        ...handleVue3Props({
+          ...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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.formnovalidate !== void 0 && this.formnovalidate !== false ? { "^formnovalidate": this.formnovalidate } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
+          ...this.form !== void 0 ? { "^form": this.form } : {},
+          ...this.formaction !== void 0 ? { "^formaction": this.formaction } : {},
+          ...this.formenctype !== void 0 ? { "^formenctype": this.formenctype } : {},
+          ...this.formmethod !== void 0 ? { "^formmethod": this.formmethod } : {},
+          ...this.formtarget !== void 0 ? { "^formtarget": this.formtarget } : {},
+          ...this.type !== void 0 ? { "^type": this.type } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -5511,23 +5616,25 @@ const VFilePicker = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-        ...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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.singleFile !== void 0 && this.singleFile !== false ? { "^single-file": this.singleFile } : {},
-        ...this.maxFiles !== void 0 ? { "^max-files": this.maxFiles } : {},
-        ...this.maxFileSize !== void 0 ? { "^max-file-size": this.maxFileSize } : {},
-        ...this.accept !== void 0 ? { "^accept": this.accept } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.invalidFileTypeError !== void 0 ? { "^invalid-file-type-error": this.invalidFileTypeError } : {},
-        ...this.maxFilesExceededError !== void 0 ? { "^max-files-exceeded-error": this.maxFilesExceededError } : {},
-        ...this.fileTooBigError !== void 0 ? { "^file-too-big-error": this.fileTooBigError } : {},
+        ...handleVue3Props({
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.singleFile !== void 0 && this.singleFile !== false ? { "^single-file": this.singleFile } : {},
+          ...this.maxFiles !== void 0 ? { "^max-files": this.maxFiles } : {},
+          ...this.maxFileSize !== void 0 ? { "^max-file-size": this.maxFileSize } : {},
+          ...this.accept !== void 0 ? { "^accept": this.accept } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.invalidFileTypeError !== void 0 ? { "^invalid-file-type-error": this.invalidFileTypeError } : {},
+          ...this.maxFilesExceededError !== void 0 ? { "^max-files-exceeded-error": this.maxFilesExceededError } : {},
+          ...this.fileTooBigError !== void 0 ? { "^file-too-big-error": this.fileTooBigError } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -5664,9 +5771,11 @@ const VHeader = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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 } : {},
+        ...handleVue3Props({
+          ...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);
         },
@@ -5809,10 +5918,12 @@ const VIcon = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...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);
         },
@@ -5968,12 +6079,14 @@ const VLayout = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.gutters !== void 0 ? { "^gutters": this.gutters } : {},
-        ...this.columnBasis !== void 0 ? { "^column-basis": this.columnBasis } : {},
-        ...this.columnSpacing !== void 0 ? { "^column-spacing": this.columnSpacing } : {},
-        ...this.rowSpacing !== void 0 ? { "^row-spacing": this.rowSpacing } : {},
-        ...this.autoSizing !== void 0 ? { "^auto-sizing": this.autoSizing } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.gutters !== void 0 ? { "^gutters": this.gutters } : {},
+          ...this.columnBasis !== void 0 ? { "^column-basis": this.columnBasis } : {},
+          ...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);
         },
@@ -6176,14 +6289,16 @@ const VMenu = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...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);
         },
@@ -6412,17 +6527,19 @@ const VMenuItem = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
-        ...this.role !== void 0 ? { "^role": this.role } : {},
-        ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^checked": this.modelValue ?? this.checked } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.textSecondary !== void 0 ? { "^text-secondary": this.textSecondary } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
+          ...this.role !== void 0 ? { "^role": this.role } : {},
+          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^checked": this.modelValue ?? this.checked } : {},
+          ...this.text !== void 0 ? { "^text": this.text } : {},
+          ...this.textSecondary !== void 0 ? { "^text-secondary": this.textSecondary } : {},
+          ...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);
         },
@@ -6554,7 +6671,9 @@ const VNav = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -6710,12 +6829,14 @@ const VNavDisclosure = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...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);
         },
@@ -6926,20 +7047,22 @@ const VNavItem = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.download !== void 0 ? { "^download": this.download } : {},
-        ...this.href !== void 0 ? { "^href": this.href } : {},
-        ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
-        ...this.ping !== void 0 ? { "^ping": this.ping } : {},
-        ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
-        ...this.rel !== void 0 ? { "^rel": this.rel } : {},
-        ...this.target !== void 0 ? { "^target": this.target } : {},
-        ...this.type !== void 0 ? { "^type": this.type } : {},
-        ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+        ...handleVue3Props({
+          ...this.download !== void 0 ? { "^download": this.download } : {},
+          ...this.href !== void 0 ? { "^href": this.href } : {},
+          ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
+          ...this.ping !== void 0 ? { "^ping": this.ping } : {},
+          ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
+          ...this.rel !== void 0 ? { "^rel": this.rel } : {},
+          ...this.target !== void 0 ? { "^target": this.target } : {},
+          ...this.type !== void 0 ? { "^type": this.type } : {},
+          ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...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);
         },
@@ -7079,10 +7202,12 @@ const VNote = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.headline !== void 0 ? { "^headline": this.headline } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+        ...handleVue3Props({
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...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);
         },
@@ -7402,34 +7527,36 @@ const VNumberField = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
-        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-        ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
-        ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
-        ...this.list !== void 0 ? { "^list": this.list } : {},
-        ...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 } : {},
-        ...this.incrementButtonAriaLabel !== void 0 ? { "^increment-button-aria-label": this.incrementButtonAriaLabel } : {},
-        ...this.decrementButtonAriaLabel !== void 0 ? { "^decrement-button-aria-label": this.decrementButtonAriaLabel } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.autoComplete !== void 0 ? { "^autoComplete": this.autoComplete } : {},
+        ...handleVue3Props({
+          ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
+          ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
+          ...this.list !== void 0 ? { "^list": this.list } : {},
+          ...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 } : {},
+          ...this.incrementButtonAriaLabel !== void 0 ? { "^increment-button-aria-label": this.incrementButtonAriaLabel } : {},
+          ...this.decrementButtonAriaLabel !== void 0 ? { "^decrement-button-aria-label": this.decrementButtonAriaLabel } : {},
+          ...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);
         },
@@ -7606,15 +7733,17 @@ const VOption = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
-        ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.value !== void 0 ? { ".value": this.value } : {},
+        ...handleVue3Props({
+          ...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.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
+          ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.text !== void 0 ? { "^text": this.text } : {},
+          ...this.value !== void 0 ? { ".value": this.value } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -7769,12 +7898,14 @@ const VPagination = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...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);
         },
@@ -7936,15 +8067,17 @@ const VProgress = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.value !== void 0 ? { "^value": this.value } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
-        ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.value !== void 0 ? { "^value": this.value } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...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);
         },
@@ -8095,14 +8228,16 @@ const VProgressRing = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
-        ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.value !== void 0 && this.value !== false ? { "^value": this.value } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.value !== void 0 && this.value !== false ? { "^value": this.value } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -8290,18 +8425,20 @@ const VRadio = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
-        ...this.checked !== void 0 && this.checked !== false ? { "^current-checked": this.checked } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
+        ...handleVue3Props({
+          ...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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
+          ...this.checked !== void 0 && this.checked !== false ? { "^current-checked": this.checked } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -8483,13 +8620,15 @@ const VRadioGroup = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...(this.modelValue ?? this.value) !== void 0 ? { "^value": this.modelValue ?? this.value } : {},
-        ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...(this.modelValue ?? this.value) !== void 0 ? { "^value": this.modelValue ?? this.value } : {},
+          ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -8771,26 +8910,28 @@ const VRangeSlider = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.initialStart !== void 0 ? { "^start": this.initialStart } : {},
-        ...this.start !== void 0 ? { "^current-start": this.start } : {},
-        ...this.initialEnd !== void 0 ? { "^end": this.initialEnd } : {},
-        ...this.end !== void 0 ? { "^current-end": this.end } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
-        ...this.step !== void 0 ? { "^step": this.step } : {},
-        ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
-        ...this.ariaStartLabel !== void 0 ? { "^aria-start-label": this.ariaStartLabel } : {},
-        ...this.ariaEndLabel !== void 0 ? { "^aria-end-label": this.ariaEndLabel } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.initialStart !== void 0 ? { "^start": this.initialStart } : {},
+          ...this.start !== void 0 ? { "^current-start": this.start } : {},
+          ...this.initialEnd !== void 0 ? { "^end": this.initialEnd } : {},
+          ...this.end !== void 0 ? { "^current-end": this.end } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.step !== void 0 ? { "^step": this.step } : {},
+          ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
+          ...this.ariaStartLabel !== void 0 ? { "^aria-start-label": this.ariaStartLabel } : {},
+          ...this.ariaEndLabel !== void 0 ? { "^aria-end-label": this.ariaEndLabel } : {},
+          ...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);
         },
@@ -9059,28 +9200,30 @@ const VSearchableSelect = defineComponent({
       {
         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 } : {},
+        ...handleVue3Props({
+          ...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);
         },
@@ -9386,26 +9529,28 @@ const VSelect = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaControls !== void 0 ? { "^aria-controls": this.ariaControls } : {},
-        ...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.multiple !== void 0 && this.multiple !== false ? { "^multiple": this.multiple } : {},
-        ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaControls !== void 0 ? { "^aria-controls": this.ariaControls } : {},
+          ...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.multiple !== void 0 && this.multiple !== false ? { "^multiple": this.multiple } : {},
+          ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+          ...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);
         },
@@ -9583,14 +9728,16 @@ const VSelectableBox = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.checked !== void 0 && this.checked !== false ? { "^checked": this.checked } : {},
-        ...this.clickable !== void 0 && this.clickable !== false ? { "^clickable": this.clickable } : {},
-        ...this.clickableBox !== void 0 && this.clickableBox !== false ? { "^clickable-box": this.clickableBox } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.checked !== void 0 && this.checked !== false ? { "^checked": this.checked } : {},
+          ...this.clickable !== void 0 && this.clickable !== false ? { "^clickable": this.clickable } : {},
+          ...this.clickableBox !== void 0 && this.clickableBox !== false ? { "^clickable-box": this.clickableBox } : {},
+          ...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);
         },
@@ -9757,11 +9904,13 @@ const VSideDrawer = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
+          ...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);
         },
@@ -10024,23 +10173,25 @@ const VSlider = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
-        ...this.step !== void 0 ? { "^step": this.step } : {},
-        ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
-        ...this.mode !== void 0 ? { "^mode": this.mode } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.ariaValuetext !== void 0 ? { "^aria-valuetext": this.ariaValuetext } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.step !== void 0 ? { "^step": this.step } : {},
+          ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
+          ...this.mode !== void 0 ? { "^mode": this.mode } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.ariaValuetext !== void 0 ? { "^aria-valuetext": this.ariaValuetext } : {},
+          ...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);
         },
@@ -10250,18 +10401,20 @@ const VSplitButton = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...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);
         },
@@ -10478,18 +10631,20 @@ const VSwitch = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.value !== void 0 ? { "^current-value": this.value } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
-        ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+        ...handleVue3Props({
+          ...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.value !== void 0 ? { "^current-value": this.value } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
+          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -10669,16 +10824,18 @@ const VTab = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...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.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 } : {},
+        ...handleVue3Props({
+          ...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.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);
         },
@@ -10796,7 +10953,9 @@ const VTabPanel = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -10971,14 +11130,16 @@ const VTabs = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
-        ...this.activeid !== void 0 ? { "^activeid": this.activeid } : {},
-        ...this.activeindicator !== void 0 && this.activeindicator !== false ? { "^activeindicator": this.activeindicator } : {},
-        ...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 } : {},
-        ...this.tabsLayout !== void 0 ? { "^tabs-layout": this.tabsLayout } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
+          ...this.activeid !== void 0 ? { "^activeid": this.activeid } : {},
+          ...this.activeindicator !== void 0 && this.activeindicator !== false ? { "^activeindicator": this.activeindicator } : {},
+          ...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 } : {},
+          ...this.tabsLayout !== void 0 ? { "^tabs-layout": this.tabsLayout } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -11179,16 +11340,18 @@ const VTag = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-        ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-        ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
+          ...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);
         },
@@ -11314,8 +11477,10 @@ const VTagGroup = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -11599,29 +11764,31 @@ const VTextArea = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
-        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-        ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...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.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-        ...this.readOnly !== void 0 && this.readOnly !== false ? { "^readOnly": this.readOnly } : {},
-        ...this.resize !== void 0 ? { "^resize": this.resize } : {},
-        ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
-        ...this.form !== void 0 ? { "^form": this.form } : {},
-        ...this.list !== void 0 ? { "^list": this.list } : {},
-        ...this.maxlength !== void 0 ? { "^maxlength": this.maxlength } : {},
-        ...this.minlength !== void 0 ? { "^minlength": this.minlength } : {},
-        ...this.name !== void 0 ? { "^name": this.name } : {},
-        ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
-        ...this.cols !== void 0 ? { "^cols": this.cols } : {},
-        ...this.rows !== void 0 ? { "^rows": this.rows } : {},
-        ...this.spellcheck !== void 0 && this.spellcheck !== false ? { "^spellcheck": this.spellcheck } : {},
-        ...this.wrap !== void 0 ? { "^wrap": this.wrap } : {},
+        ...handleVue3Props({
+          ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...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.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.readOnly !== void 0 && this.readOnly !== false ? { "^readOnly": this.readOnly } : {},
+          ...this.resize !== void 0 ? { "^resize": this.resize } : {},
+          ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
+          ...this.form !== void 0 ? { "^form": this.form } : {},
+          ...this.list !== void 0 ? { "^list": this.list } : {},
+          ...this.maxlength !== void 0 ? { "^maxlength": this.maxlength } : {},
+          ...this.minlength !== void 0 ? { "^minlength": this.minlength } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
+          ...this.cols !== void 0 ? { "^cols": this.cols } : {},
+          ...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);
         },
@@ -11939,33 +12106,35 @@ const VTextField = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
-        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-        ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
-        ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
-        ...this.type !== void 0 ? { "^type": this.type } : {},
-        ...this.list !== void 0 ? { "^list": this.list } : {},
-        ...this.maxlength !== void 0 ? { "^maxlength": this.maxlength } : {},
-        ...this.minlength !== void 0 ? { "^minlength": this.minlength } : {},
-        ...this.pattern !== void 0 ? { "^pattern": this.pattern } : {},
-        ...this.size !== void 0 ? { "^size": this.size } : {},
-        ...this.spellcheck !== void 0 && this.spellcheck !== false ? { "^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.scale !== void 0 ? { "^scale": this.scale } : {},
-        ...this.inputmode !== void 0 ? { "^inputmode": this.inputmode } : {},
+        ...handleVue3Props({
+          ...this.successText !== void 0 ? { "^success-text": this.successText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
+          ...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
+          ...this.type !== void 0 ? { "^type": this.type } : {},
+          ...this.list !== void 0 ? { "^list": this.list } : {},
+          ...this.maxlength !== void 0 ? { "^maxlength": this.maxlength } : {},
+          ...this.minlength !== void 0 ? { "^minlength": this.minlength } : {},
+          ...this.pattern !== void 0 ? { "^pattern": this.pattern } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.spellcheck !== void 0 && this.spellcheck !== false ? { "^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.scale !== void 0 ? { "^scale": this.scale } : {},
+          ...this.inputmode !== void 0 ? { "^inputmode": this.inputmode } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -12205,21 +12374,23 @@ const VTimePicker = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-        ...this.label !== void 0 ? { "^label": this.label } : {},
-        ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
-        ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-        ...this.minutesStep !== void 0 ? { "^minutes-step": this.minutesStep } : {},
-        ...this.secondsStep !== void 0 ? { "^seconds-step": this.secondsStep } : {},
-        ...this.clock !== void 0 ? { "^clock": this.clock } : {},
-        ...this.min !== void 0 ? { "^min": this.min } : {},
-        ...this.max !== void 0 ? { "^max": this.max } : {},
+        ...handleVue3Props({
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...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.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.minutesStep !== void 0 ? { "^minutes-step": this.minutesStep } : {},
+          ...this.secondsStep !== void 0 ? { "^seconds-step": this.secondsStep } : {},
+          ...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);
         },
@@ -12387,12 +12558,14 @@ const VToggletip = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.headline !== void 0 ? { "^headline": this.headline } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.headline !== void 0 ? { "^headline": this.headline } : {},
+          ...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);
         },
@@ -12539,11 +12712,13 @@ const VTooltip = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.placement !== void 0 ? { "^placement": this.placement } : {},
-        ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+        ...handleVue3Props({
+          ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...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);
         },
@@ -12719,12 +12894,14 @@ const VTreeItem = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.text !== void 0 ? { "^text": this.text } : {},
-        ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
-        ...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
-        ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+        ...handleVue3Props({
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.text !== void 0 ? { "^text": this.text } : {},
+          ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
+          ...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {}
+        }),
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -12863,8 +13040,10 @@ const VTreeView = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.renderCollapsedNodes !== void 0 && this.renderCollapsedNodes !== false ? { "^render-collapsed-nodes": this.renderCollapsedNodes } : {},
+        ...handleVue3Props({
+          ...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);
         },
@@ -13040,13 +13219,15 @@ const VVideoPlayer = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
-        ...this.poster !== void 0 ? { "^poster": this.poster } : {},
-        ...this.src !== void 0 ? { "^src": this.src } : {},
-        ...this.autoplay !== void 0 && this.autoplay !== false ? { "^autoplay": this.autoplay } : {},
-        ...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 } : {},
+        ...handleVue3Props({
+          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
+          ...this.poster !== void 0 ? { "^poster": this.poster } : {},
+          ...this.src !== void 0 ? { "^src": this.src } : {},
+          ...this.autoplay !== void 0 && this.autoplay !== false ? { "^autoplay": this.autoplay } : {},
+          ...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);
         },
@@ -13096,6 +13277,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["5SecBackwardSolid"] = "5-sec-backward-solid";
   Icon2["5SecForwardLine"] = "5-sec-forward-line";
   Icon2["5SecForwardSolid"] = "5-sec-forward-solid";
+  Icon2["abcKeyboardLine"] = "abc-keyboard-line";
+  Icon2["abcKeyboardSolid"] = "abc-keyboard-solid";
   Icon2["accessibilityLine"] = "accessibility-line";
   Icon2["accessibilitySolid"] = "accessibility-solid";
   Icon2["activeCallLine"] = "active-call-line";
@@ -14324,17 +14507,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 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-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n  --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-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n}\n";
+const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:35 GMT\n */\n/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:36 GMT\n */\n/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:36 GMT\n */\n/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:36 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-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n  --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-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n}\n";
 
-const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 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-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 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-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
+const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:36 GMT\n */\n/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:35 GMT\n */\n/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:36 GMT\n */\n/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:36 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-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 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-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
 
 const fontsSpeziaVariableCss = "@font-face {\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n}\n";
 
-const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 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 Fri, 14 Feb 2025 16:50:35 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
 
-const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 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\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-thumb-color);\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
+const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Fri, 14 Feb 2025 16:50:35 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\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-thumb-color);\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Tue, 04 Feb 2025 16:43:13 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 Fri, 14 Feb 2025 16:50:35 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",