@vonage/vivid-vue 3.52.0 → 3.54.0

package/index.js

@@ -1,5 +1,5 @@
 import { ref, version, onBeforeMount, defineComponent, h } from 'vue';
-import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerCombobox, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerSelect, registerSelectableBox, registerSideDrawer, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView } from '@vonage/vivid';
+import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerCombobox, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerSelect, registerSelectableBox, registerSideDrawer, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
 
 const CustomComponentPrefix = ref("vvd3");
 function setCustomComponentPrefix(prefix) {
@@ -654,6 +654,14 @@ const VAudioPlayer = defineComponent({
       default: void 0
     },
     sliderAriaLabel: { type: String, default: void 0 },
+    skipForwardAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    skipBackwardAriaLabel: {
+      type: String,
+      default: void 0
+    },
     /**
      * The connotation the audio-player should have.
      */
@@ -669,7 +677,14 @@ const VAudioPlayer = defineComponent({
      * Indicates whether audio player is disabled.
      */
     disabled: { type: Boolean, default: void 0 },
-    notime: { type: Boolean, default: void 0 }
+    notime: { type: Boolean, default: void 0 },
+    /**
+     * Allows the audio to skip back or forward
+     */
+    skipBy: {
+      type: String,
+      default: void 0
+    }
   },
   emits: [
     /**
@@ -723,10 +738,13 @@ const VAudioPlayer = defineComponent({
             ...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 ? { disabled: this.disabled } : {},
-            ...this.notime !== void 0 ? { notime: this.notime } : {}
+            ...this.notime !== void 0 ? { notime: this.notime } : {},
+            ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {}
           },
           class: "vvd-component",
           on: {
@@ -750,10 +768,13 @@ const VAudioPlayer = defineComponent({
         ...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 ? { disabled: this.disabled } : {},
         ...this.notime !== void 0 ? { notime: this.notime } : {},
+        ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -2281,6 +2302,14 @@ const VCheckbox = defineComponent({
      * Provides the default checkedness of the input element
      */
     checked: { type: Boolean, default: void 0 },
+    /**
+     * The current checkedness of the element. This property serves as a mechanism
+     * to set the `checked` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's checkedness
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentChecked: { type: Boolean, default: void 0 },
     /**
      * The current checkedness of the element. This property serves as a mechanism
      * to set the `checked` property through both property assignment and the
@@ -2369,7 +2398,7 @@ const VCheckbox = defineComponent({
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.checked !== void 0 ? { checked: this.checked } : {},
-            ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
+            ...this.modelValue ?? this.currentChecked !== void 0 ? { "current-checked": this.modelValue ?? this.currentChecked } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
             ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
             ...this.tabindex !== void 0 ? { tabindex: this.tabindex } : {},
@@ -2392,7 +2421,11 @@ const VCheckbox = defineComponent({
             input: (event) => this.$emit("input", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the checkbox. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -2411,7 +2444,7 @@ const VCheckbox = defineComponent({
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.checked !== void 0 ? { checked: this.checked } : {},
-        ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
+        ...this.modelValue ?? this.currentChecked !== void 0 ? { "current-checked": this.modelValue ?? this.currentChecked } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
         ...this.tabindex !== void 0 ? { tabindex: this.tabindex } : {},
@@ -2432,7 +2465,9 @@ const VCheckbox = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the checkbox. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -2466,6 +2501,14 @@ const VCombobox = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -2608,7 +2651,7 @@ const VCombobox = defineComponent({
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.autocomplete !== void 0 ? { autocomplete: this.autocomplete } : {},
@@ -2647,7 +2690,7 @@ const VCombobox = defineComponent({
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.autocomplete !== void 0 ? { autocomplete: this.autocomplete } : {},
@@ -3169,6 +3212,10 @@ const VDatePicker = defineComponent({
      * The earliest accepted date of the date-picker.
      */
     min: { type: String, default: void 0 },
+    /**
+     * The initial value of the date-picker.
+     */
+    value: { type: String, default: void 0 },
     /**
      * The initial value of the date-picker.
      */
@@ -3245,7 +3292,7 @@ const VDatePicker = defineComponent({
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
             ...this.min !== void 0 ? { min: this.min } : {},
-            ...this.modelValue !== void 0 ? { value: this.modelValue } : {},
+            ...this.modelValue ?? this.value !== void 0 ? { value: this.modelValue ?? this.value } : {},
             ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
           },
@@ -3266,7 +3313,11 @@ const VDatePicker = defineComponent({
             "clear-click": (event) => this.$emit("clear-click", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -3282,7 +3333,7 @@ const VDatePicker = defineComponent({
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
-        ...this.modelValue !== void 0 ? { value: this.modelValue } : {},
+        ...this.modelValue ?? this.value !== void 0 ? { value: this.modelValue ?? this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         onClick: (event) => this.$emit("click", event),
@@ -3301,7 +3352,9 @@ const VDatePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -3341,6 +3394,14 @@ const VDateRangePicker = defineComponent({
      * The latest accepted date of the date-picker.
      */
     max: { type: String, default: void 0 },
+    /**
+     * The current start value of the element. This property serves as a mechanism
+     * to set the `start` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentStart: { type: String, default: void 0 },
     /**
      * The current start value of the element. This property serves as a mechanism
      * to set the `start` property through both property assignment and the
@@ -3349,6 +3410,14 @@ const VDateRangePicker = defineComponent({
      * and don't support IDL attribute binding.
      */
     start: { type: String, default: void 0 },
+    /**
+     * The current end value of the element. This property serves as a mechanism
+     * to set the `end` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentEnd: { type: String, default: void 0 },
     /**
      * The current end value of the element. This property serves as a mechanism
      * to set the `end` property through both property assignment and the
@@ -3454,8 +3523,8 @@ const VDateRangePicker = defineComponent({
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
-            ...this.start !== void 0 ? { "current-start": this.start } : {},
-            ...this.end !== void 0 ? { "current-end": this.end } : {},
+            ...this.start ?? this.currentStart !== void 0 ? { "current-start": this.start ?? this.currentStart } : {},
+            ...this.end ?? this.currentEnd !== void 0 ? { "current-end": this.end ?? this.currentEnd } : {},
             ...this.min !== void 0 ? { min: this.min } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
             ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
@@ -3480,7 +3549,11 @@ const VDateRangePicker = defineComponent({
             "clear-click": (event) => this.$emit("clear-click", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -3495,8 +3568,8 @@ const VDateRangePicker = defineComponent({
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
-        ...this.start !== void 0 ? { "current-start": this.start } : {},
-        ...this.end !== void 0 ? { "current-end": this.end } : {},
+        ...this.start ?? this.currentStart !== void 0 ? { "current-start": this.start ?? this.currentStart } : {},
+        ...this.end ?? this.currentEnd !== void 0 ? { "current-end": this.end ?? this.currentEnd } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
@@ -3517,6 +3590,208 @@ const VDateRangePicker = defineComponent({
         },
         onClearClick: (event) => this.$emit("clear-click", event)
       },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
+      ]
+    );
+  }
+});
+
+const VDialPad = defineComponent({
+  name: "VDialPad",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Indicates the helper-text's text.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * Indicates the placeholder's text.
+     */
+    placeholder: { type: String, default: void 0 },
+    /**
+     * Indicates the value's text.
+     */
+    value: { type: String, default: void 0 },
+    /**
+     * Indicates the value's text.
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * Indicates the dial pad's pattern.
+     */
+    pattern: { type: String, default: void 0 },
+    /**
+     * Indicates the disabled state of the dial-pad.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the pending state of the dial-pad.
+     */
+    pending: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the active state of the dial-pad.
+     */
+    callActive: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the no-call state of the dial-pad.
+     */
+    noCall: { type: Boolean, default: void 0 },
+    endCallButtonLabel: {
+      type: String,
+      default: void 0
+    },
+    callButtonLabel: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Emitted when the text field value changes
+     * @type {unknown}
+     */
+    "change",
+    /**
+     * Emitted when the text field value changes
+     * @type {unknown}
+     */
+    "input",
+    /**
+     * Emitted when the text field loses focus
+     * @type {unknown}
+     */
+    "blur",
+    /**
+     * Emitted when the text field receives focus
+     * @type {unknown}
+     */
+    "focus",
+    /**
+     * Emitted when a digit button is clicked
+     * @type {unknown}
+     */
+    "keypad-click",
+    /**
+     * Emitted when the call button is clicked
+     * @type {unknown}
+     */
+    "dial",
+    /**
+     * Emitted when the end call button is clicked
+     * @type {unknown}
+     */
+    "end-call",
+    /**
+     * Emitted when the text field value changes
+     * @type {string}
+     */
+    "update:modelValue"
+  ],
+  methods: {
+    valueChanged(_oldValue, newValue) {
+      return this.element?.valueChanged(_oldValue, newValue);
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("dial-pad", registerDialPad);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...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 ? { disabled: this.disabled } : {},
+            ...this.pending !== void 0 ? { pending: this.pending } : {},
+            ...this.callActive !== void 0 ? { "call-active": this.callActive } : {},
+            ...this.noCall !== void 0 ? { "no-call": this.noCall } : {},
+            ...this.endCallButtonLabel !== void 0 ? { "end-call-button-label": this.endCallButtonLabel } : {},
+            ...this.callButtonLabel !== void 0 ? { "call-button-label": this.callButtonLabel } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            change: (event) => this.$emit("change", event),
+            input: (event) => {
+              this.$emit("update:modelValue", event.target.value);
+              this.$emit("input", event);
+            },
+            blur: (event) => this.$emit("blur", event),
+            focus: (event) => this.$emit("focus", event),
+            "keypad-click": (event) => this.$emit("keypad-click", event),
+            dial: (event) => this.$emit("dial", event),
+            "end-call": (event) => this.$emit("end-call", event)
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        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 ? { disabled: this.disabled } : {},
+        ...this.pending !== void 0 ? { pending: this.pending } : {},
+        ...this.callActive !== void 0 ? { "call-active": this.callActive } : {},
+        ...this.noCall !== void 0 ? { "no-call": this.noCall } : {},
+        ...this.endCallButtonLabel !== void 0 ? { "end-call-button-label": this.endCallButtonLabel } : {},
+        ...this.callButtonLabel !== void 0 ? { "call-button-label": this.callButtonLabel } : {},
+        onClick: (event) => this.$emit("click", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onChange: (event) => this.$emit("change", event),
+        onInput: (event) => {
+          this.$emit("update:modelValue", event.target.value);
+          this.$emit("input", event);
+        },
+        onBlur: (event) => this.$emit("blur", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onKeypadClick: (event) => this.$emit("keypad-click", event),
+        onDial: (event) => this.$emit("dial", event),
+        onEndCall: (event) => this.$emit("end-call", event)
+      },
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default()
@@ -4313,7 +4588,11 @@ const VFilePicker = defineComponent({
             change: (event) => this.$emit("change", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -4344,7 +4623,9 @@ const VFilePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -4744,6 +5025,13 @@ const VMenu = defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Controls how the menu opens and closes itself.
+     */
+    trigger: {
+      type: String,
+      default: void 0
+    },
     /**
      * indicates whether the menu will automatically close when
      * the user clicks outside the menu
@@ -4831,6 +5119,7 @@ const VMenu = defineComponent({
             ...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 ? { "auto-dismiss": this.autoDismiss } : {},
             ...this.open !== void 0 ? { open: this.open } : {}
           },
@@ -4869,6 +5158,7 @@ const VMenu = defineComponent({
         ...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 ? { "auto-dismiss": this.autoDismiss } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         onClick: (event) => this.$emit("click", event),
@@ -4928,6 +5218,10 @@ const VMenuItem = defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * The checked value of the element.
+     */
+    checked: { type: Boolean, default: void 0 },
     /**
      * The checked value of the element.
      */
@@ -5024,7 +5318,7 @@ const VMenuItem = defineComponent({
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
             ...this.role !== void 0 ? { role: this.role } : {},
-            ...this.modelValue !== void 0 ? { checked: this.modelValue } : {},
+            ...this.modelValue ?? this.checked !== void 0 ? { 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 } : {},
@@ -5070,7 +5364,7 @@ const VMenuItem = defineComponent({
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
         ...this.role !== void 0 ? { role: this.role } : {},
-        ...this.modelValue !== void 0 ? { checked: this.modelValue } : {},
+        ...this.modelValue ?? this.checked !== void 0 ? { 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 } : {},
@@ -5206,6 +5500,20 @@ const VNavDisclosure = defineComponent({
      */
     icon: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
+    /**
+     * The appearance nav-disclosure should have.
+     */
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The connotation nav-disclosure should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
     /**
      * Indicates whether the nav-disclosure is open
      */
@@ -5267,6 +5575,8 @@ const VNavDisclosure = defineComponent({
           attrs: {
             ...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 ? { open: this.open } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
           },
@@ -5297,6 +5607,8 @@ const VNavDisclosure = defineComponent({
         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 ? { open: this.open } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (event) => this.$emit("click", event),
@@ -5372,7 +5684,21 @@ const VNavItem = defineComponent({
     /**
      * Indicates the text anchor's text.
      */
-    text: { type: String, default: void 0 }
+    text: { type: String, default: void 0 },
+    /**
+     * The connotation Text-Anchor should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The appearance Text-Anchor should have.
+     */
+    appearance: {
+      type: String,
+      default: void 0
+    }
   },
   emits: [
     /**
@@ -5433,7 +5759,9 @@ const VNavItem = defineComponent({
             ...this.rel !== void 0 ? { rel: this.rel } : {},
             ...this.target !== void 0 ? { target: this.target } : {},
             ...this.type !== void 0 ? { type: this.type } : {},
-            ...this.text !== void 0 ? { text: this.text } : {}
+            ...this.text !== void 0 ? { text: this.text } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.appearance !== void 0 ? { appearance: this.appearance } : {}
           },
           class: "vvd-component",
           on: {
@@ -5470,6 +5798,8 @@ const VNavItem = defineComponent({
         ...this.target !== void 0 ? { target: this.target } : {},
         ...this.type !== void 0 ? { type: this.type } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -5654,6 +5984,14 @@ const VNumberField = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -5818,7 +6156,7 @@ const VNumberField = defineComponent({
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -5855,7 +6193,11 @@ const VNumberField = defineComponent({
             change: (event) => this.$emit("change", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -5872,7 +6214,7 @@ const VNumberField = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -5907,7 +6249,9 @@ const VNumberField = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -6670,6 +7014,10 @@ const VRadioGroup = defineComponent({
      * for all child radio elements.
      */
     name: { type: String, default: void 0 },
+    /**
+     * The value of the checked radio
+     */
+    value: { type: String, default: void 0 },
     /**
      * The value of the checked radio
      */
@@ -6745,7 +7093,7 @@ const VRadioGroup = defineComponent({
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
-            ...this.modelValue !== void 0 ? { value: this.modelValue } : {},
+            ...this.modelValue ?? this.value !== void 0 ? { value: this.modelValue ?? this.value } : {},
             ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
             ...this.label !== void 0 ? { label: this.label } : {}
           },
@@ -6778,7 +7126,7 @@ const VRadioGroup = defineComponent({
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
-        ...this.modelValue !== void 0 ? { value: this.modelValue } : {},
+        ...this.modelValue ?? this.value !== void 0 ? { value: this.modelValue ?? this.value } : {},
         ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         onClick: (event) => this.$emit("click", event),
@@ -6842,6 +7190,14 @@ const VRangeSlider = defineComponent({
      * Require the field to be completed prior to form submission.
      */
     required: { type: Boolean, default: void 0 },
+    /**
+     * The current start value of the element. This property serves as a mechanism
+     * to set the `start` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentStart: { type: String, default: void 0 },
     /**
      * The current start value of the element. This property serves as a mechanism
      * to set the `start` property through both property assignment and the
@@ -6850,6 +7206,14 @@ const VRangeSlider = defineComponent({
      * and don't support IDL attribute binding.
      */
     start: { type: String, default: void 0 },
+    /**
+     * The current end value of the element. This property serves as a mechanism
+     * to set the `end` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentEnd: { type: String, default: void 0 },
     /**
      * The current end value of the element. This property serves as a mechanism
      * to set the `end` property through both property assignment and the
@@ -6976,8 +7340,8 @@ const VRangeSlider = defineComponent({
             ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.start !== void 0 ? { "current-start": this.start } : {},
-            ...this.end !== void 0 ? { "current-end": this.end } : {},
+            ...this.start ?? this.currentStart !== void 0 ? { "current-start": this.start ?? this.currentStart } : {},
+            ...this.end ?? this.currentEnd !== void 0 ? { "current-end": this.end ?? this.currentEnd } : {},
             ...this.min !== void 0 ? { min: this.min } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
             ...this.step !== void 0 ? { step: this.step } : {},
@@ -7020,8 +7384,8 @@ const VRangeSlider = defineComponent({
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
-        ...this.start !== void 0 ? { "current-start": this.start } : {},
-        ...this.end !== void 0 ? { "current-end": this.end } : {},
+        ...this.start ?? this.currentStart !== void 0 ? { "current-start": this.start ?? this.currentStart } : {},
+        ...this.end ?? this.currentEnd !== void 0 ? { "current-end": this.end ?? this.currentEnd } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
         ...this.step !== void 0 ? { step: this.step } : {},
@@ -7101,6 +7465,14 @@ const VSelect = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -7244,7 +7616,7 @@ const VSelect = defineComponent({
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.open !== void 0 ? { open: this.open } : {},
@@ -7277,7 +7649,9 @@ const VSelect = defineComponent({
           // @slot icon Slot to add an icon to the select control.
           handleNamedSlot("icon", this.$slots["icon"]),
           // @slot meta Slot to add meta content to the select control.
-          handleNamedSlot("meta", this.$slots["meta"])
+          handleNamedSlot("meta", this.$slots["meta"]),
+          // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -7295,7 +7669,7 @@ const VSelect = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
@@ -7325,7 +7699,9 @@ const VSelect = defineComponent({
         // @slot icon Slot to add an icon to the select control.
         handleNamedSlot("icon", this.$slots["icon"]),
         // @slot meta Slot to add meta content to the select control.
-        handleNamedSlot("meta", this.$slots["meta"])
+        handleNamedSlot("meta", this.$slots["meta"]),
+        // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -7637,6 +8013,14 @@ const VSlider = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -7771,7 +8155,7 @@ const VSlider = defineComponent({
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -7813,7 +8197,7 @@ const VSlider = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -8081,6 +8465,14 @@ const VSwitch = defineComponent({
      * Provides the default checkedness of the input element
      */
     checked: { type: Boolean, default: void 0 },
+    /**
+     * The current checkedness of the element. This property serves as a mechanism
+     * to set the `checked` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's checkedness
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentChecked: { type: Boolean, default: void 0 },
     /**
      * The current checkedness of the element. This property serves as a mechanism
      * to set the `checked` property through both property assignment and the
@@ -8167,7 +8559,7 @@ const VSwitch = defineComponent({
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.checked !== void 0 ? { checked: this.checked } : {},
-            ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
+            ...this.modelValue ?? this.currentChecked !== void 0 ? { "current-checked": this.modelValue ?? this.currentChecked } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
@@ -8204,7 +8596,7 @@ const VSwitch = defineComponent({
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.checked !== void 0 ? { checked: this.checked } : {},
-        ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
+        ...this.modelValue ?? this.currentChecked !== void 0 ? { "current-checked": this.modelValue ?? this.currentChecked } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
@@ -8945,6 +9337,14 @@ const VTextArea = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -9093,7 +9493,7 @@ const VTextArea = defineComponent({
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.readOnly !== void 0 ? { readOnly: this.readOnly } : {},
             ...this.resize !== void 0 ? { resize: this.resize } : {},
@@ -9126,7 +9526,11 @@ const VTextArea = defineComponent({
             change: (event) => this.$emit("change", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -9142,7 +9546,7 @@ const VTextArea = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.readOnly !== void 0 ? { readOnly: this.readOnly } : {},
         ...this.resize !== void 0 ? { resize: this.resize } : {},
@@ -9173,7 +9577,9 @@ const VTextArea = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -9227,6 +9633,14 @@ const VTextField = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -9373,7 +9787,7 @@ const VTextField = defineComponent({
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -9415,7 +9829,9 @@ const VTextField = defineComponent({
             this.$slots["leading-action-items"]
           ),
           // @slot action-items Used to add action items to the end of the text-field.
-          handleNamedSlot("action-items", this.$slots["action-items"])
+          handleNamedSlot("action-items", this.$slots["action-items"]),
+          // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -9433,7 +9849,7 @@ const VTextField = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -9472,7 +9888,9 @@ const VTextField = defineComponent({
           this.$slots["leading-action-items"]
         ),
         // @slot action-items Used to add action items to the end of the text-field.
-        handleNamedSlot("action-items", this.$slots["action-items"])
+        handleNamedSlot("action-items", this.$slots["action-items"]),
+        // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -9513,6 +9931,14 @@ const VTimePicker = defineComponent({
      * only when the `value` property has not been explicitly set.
      */
     value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { type: String, default: void 0 },
     /**
      * The current value of the element. This property serves as a mechanism
      * to set the `value` property through both property assignment and the
@@ -9615,7 +10041,7 @@ const VTimePicker = defineComponent({
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -9642,7 +10068,11 @@ const VTimePicker = defineComponent({
             change: (event) => this.$emit("change", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
+          handleNamedSlot("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return h(
@@ -9656,7 +10086,7 @@ const VTimePicker = defineComponent({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.modelValue ?? this.currentValue !== void 0 ? { "current-value": this.modelValue ?? this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
@@ -9681,7 +10111,9 @@ const VTimePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
+        handleNamedSlot("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -10205,10 +10637,174 @@ const VTreeView = defineComponent({
   }
 });
 
+const VVideoPlayer = defineComponent({
+  name: "VVideoPlayer",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Reference to an image which is displayed before the video is played
+     */
+    poster: { type: String, default: void 0 },
+    /**
+     * URL of a video file
+     */
+    src: { type: String, default: void 0 },
+    /**
+     * Allows the video will play automatically (muted)
+     */
+    autoplay: { type: Boolean, default: void 0 },
+    /**
+     * Allows the video to loop back to the beginning when finished
+     */
+    loop: { type: Boolean, default: void 0 },
+    /**
+     * Sets the available playback rates. When an empty string, no choices will be available
+     */
+    playbackRates: { type: String, default: void 0 },
+    /**
+     * Allows the video to loop back to the beginning when finished
+     */
+    skipBy: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fired when the video is played
+     * @type {unknown}
+     */
+    "play",
+    /**
+     * Fired when the video is paused
+     * @type {unknown}
+     */
+    "pause",
+    /**
+     * Fired when the video is ended
+     * @type {unknown}
+     */
+    "ended"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "video-player",
+      registerVideoPlayer
+    );
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...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 ? { autoplay: this.autoplay } : {},
+            ...this.loop !== void 0 ? { loop: this.loop } : {},
+            ...this.playbackRates !== void 0 ? { "playback-rates": this.playbackRates } : {},
+            ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            focus: (event) => this.$emit("focus", event),
+            blur: (event) => this.$emit("blur", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            input: (event) => this.$emit("input", event),
+            play: (event) => this.$emit("play", event),
+            pause: (event) => this.$emit("pause", event),
+            ended: (event) => this.$emit("ended", event)
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        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 ? { autoplay: this.autoplay } : {},
+        ...this.loop !== void 0 ? { loop: this.loop } : {},
+        ...this.playbackRates !== void 0 ? { "playback-rates": this.playbackRates } : {},
+        ...this.skipBy !== void 0 ? { "skip-by": this.skipBy } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event),
+        onPlay: (event) => this.$emit("play", event),
+        onPause: (event) => this.$emit("pause", event),
+        onEnded: (event) => this.$emit("ended", event)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+
 var Icon = /* @__PURE__ */ ((Icon2) => {
+  Icon2["10SecBackwardLine"] = "10-sec-backward-line";
   Icon2["10SecBackwardSolid"] = "10-sec-backward-solid";
   Icon2["10SecForwardLine"] = "10-sec-forward-line";
   Icon2["10SecForwardSolid"] = "10-sec-forward-solid";
+  Icon2["30SecBackwardLine"] = "30-sec-backward-line";
+  Icon2["30SecBackwardSolid"] = "30-sec-backward-solid";
+  Icon2["30SecForwardLine"] = "30-sec-forward-line";
+  Icon2["30SecForwardSolid"] = "30-sec-forward-solid";
+  Icon2["5SecBackwardLine"] = "5-sec-backward-line";
+  Icon2["5SecBackwardSolid"] = "5-sec-backward-solid";
+  Icon2["5SecForwardLine"] = "5-sec-forward-line";
+  Icon2["5SecForwardSolid"] = "5-sec-forward-solid";
   Icon2["accessibilityLine"] = "accessibility-line";
   Icon2["accessibilitySolid"] = "accessibility-solid";
   Icon2["activeCallLine"] = "active-call-line";
@@ -10219,6 +10815,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["addGroupSolid"] = "add-group-solid";
   Icon2["addLine"] = "add-line";
   Icon2["addSolid"] = "add-solid";
+  Icon2["addTimeLine"] = "add-time-line";
+  Icon2["addTimeSolid"] = "add-time-solid";
   Icon2["addUserLine"] = "add-user-line";
   Icon2["addUserSolid"] = "add-user-solid";
   Icon2["addressBookLine"] = "address-book-line";
@@ -10473,6 +11071,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["conditionSolid"] = "condition-solid";
   Icon2["connectLine"] = "connect-line";
   Icon2["connectSolid"] = "connect-solid";
+  Icon2["connectwiseColor"] = "connectwise-color";
+  Icon2["connectwiseMono"] = "connectwise-mono";
   Icon2["cooktailLine"] = "cooktail-line";
   Icon2["cooktailSolid"] = "cooktail-solid";
   Icon2["copy2Line"] = "copy-2-line";
@@ -11407,17 +12007,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n}\n";
+const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n}\n";
 
-const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n}\n";
+const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n}\n";
 
 const fontsSpeziaVariableCss = "@font-face {\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n}\n";
 
-const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 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 Tue, 30 Apr 2024 09:40:27 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
 
-const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n";
+const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Tue, 30 Apr 2024 09:40:27 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 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 Tue, 30 Apr 2024 09:40:27 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",
@@ -11515,4 +12115,4 @@ const vivid3 = {
   }
 };
 
-export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, optionalStyles, setCustomComponentPrefix, vivid3 };
+export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3 };