@vonage/vivid-vue 3.50.0 → 3.50.1

package/index.js

@@ -1,5 +1,5 @@
 import { ref, version, onBeforeMount, defineComponent, h } from 'vue';
-import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerCombobox, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDialog, registerDivider, registerEmptyState, registerFab, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerSelectableBox, registerSelect, registerSideDrawer, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabs, registerTabPanel, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerTag, registerTagGroup } from '@vonage/vivid';
+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, registerSelect, registerSelectableBox, registerSideDrawer, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView } from '@vonage/vivid';
 
 const CustomComponentPrefix = ref("vvd3");
 function setCustomComponentPrefix(prefix) {
@@ -590,7 +590,9 @@ const VAlert = defineComponent({
           // @slot main The main content of the alert.
           handleNamedSlot("main", this.$slots["main"]),
           // @slot action-items Add action items to alert using this slot.
-          handleNamedSlot("action-items", this.$slots["action-items"])
+          handleNamedSlot("action-items", this.$slots["action-items"]),
+          // @slot icon Add an icon to the component.
+          handleNamedSlot("icon", this.$slots["icon"])
         ]
       );
     }
@@ -625,7 +627,143 @@ const VAlert = defineComponent({
         // @slot main The main content of the alert.
         handleNamedSlot("main", this.$slots["main"]),
         // @slot action-items Add action items to alert using this slot.
-        handleNamedSlot("action-items", this.$slots["action-items"])
+        handleNamedSlot("action-items", this.$slots["action-items"]),
+        // @slot icon Add an icon to the component.
+        handleNamedSlot("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+
+const VAudioPlayer = defineComponent({
+  name: "VAudioPlayer",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    playButtonAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    pauseButtonAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    sliderAriaLabel: { type: String, default: void 0 },
+    /**
+     * The connotation the audio-player should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Indicates the audio-player's src.
+     */
+    src: { type: String, default: void 0 },
+    /**
+     * Indicates whether audio player is disabled.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    notime: { type: Boolean, 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"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "audio-player",
+      registerAudioPlayer
+    );
+    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.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.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 } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            focus: (event) => this.$emit("focus", event),
+            blur: (event) => this.$emit("blur", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            input: (event) => this.$emit("input", event)
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.playButtonAriaLabel !== void 0 ? { "play-button-aria-label": this.playButtonAriaLabel } : {},
+        ...this.pauseButtonAriaLabel !== void 0 ? { "pause-button-aria-label": this.pauseButtonAriaLabel } : {},
+        ...this.sliderAriaLabel !== void 0 ? { "slider-aria-label": this.sliderAriaLabel } : {},
+        ...this.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 } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
@@ -2634,9 +2772,21 @@ const VDataGrid = defineComponent({
   }
 });
 
-const VDataGridRow = defineComponent({
-  name: "VDataGridRow",
+const VDatePicker = defineComponent({
+  name: "VDatePicker",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
   props: {
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -2645,23 +2795,37 @@ const VDataGridRow = defineComponent({
       default: void 0
     },
     /**
-     * String that gets applied to the the css gridTemplateColumns attribute for the row
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
-    gridTemplateColumns: {
-      type: String,
-      default: void 0
-    },
+    disabled: { type: Boolean, default: void 0 },
     /**
-     * The type of row
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
-    rowType: {
-      type: String,
-      default: void 0
-    },
+    name: { type: String, default: void 0 },
     /**
-     * Indicates the selected status.
+     * Require the field to be completed prior to form submission.
      */
-    ariaSelected: { type: String, default: void 0 }
+    required: { type: Boolean, default: void 0 },
+    /**
+     * The latest accepted date of the date-picker.
+     */
+    max: { type: String, default: void 0 },
+    /**
+     * The earliest accepted date of the date-picker.
+     */
+    min: { type: String, default: void 0 },
+    /**
+     * The initial value of the date-picker.
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * The current value of the date-picker.
+     */
+    currentValue: { type: String, default: void 0 },
+    /**
+     * Whether the date-picker is readonly.
+     */
+    readonly: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -2695,29 +2859,19 @@ const VDataGridRow = defineComponent({
      */
     "input",
     /**
-     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+     * Event emitted when the clear value changes
      * @type {unknown}
      */
-    "row-focused",
+    "clear-click",
     /**
-     * Event that fires when a cell is clicked
-     * @type {unknown}
+     * Fires when the value of an element has been changed.
+     * @type {string}
      */
-    "cell-click"
+    "update:modelValue"
   ],
-  methods: {
-    handleFocusout(e) {
-      return this.element?.handleFocusout(e);
-    },
-    handleCellFocus(e) {
-      return this.element?.handleCellFocus(e);
-    },
-    handleKeydown(e) {
-      return this.element?.handleKeydown(e);
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("data-grid-row", registerDataGrid);
+    const componentName = registerComponent("date-picker", registerDatePicker);
     const element = ref(null);
     return { componentName, element };
   },
@@ -2728,10 +2882,17 @@ const VDataGridRow = defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
-            ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
-            ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...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.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
           },
           class: "vvd-component",
           on: {
@@ -2740,9 +2901,14 @@ const VDataGridRow = defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            "row-focused": (event) => this.$emit("row-focused", event),
-            "cell-click": (event) => this.$emit("cell-click", event)
+            input: (event) => {
+              this.$emit(
+                "update:modelValue",
+                event.target.value
+              );
+              this.$emit("input", event);
+            },
+            "clear-click": (event) => this.$emit("clear-click", event)
           }
         },
         [this.$slots.default]
@@ -2753,18 +2919,30 @@ const VDataGridRow = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
-        ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
-        ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...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.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onRowFocused: (event) => this.$emit("row-focused", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
+        onInput: (event) => {
+          this.$emit(
+            "update:modelValue",
+            event.target.value
+          );
+          this.$emit("input", event);
+        },
+        onClearClick: (event) => this.$emit("clear-click", event)
       },
       [
         // @ts-ignore
@@ -2774,355 +2952,11 @@ const VDataGridRow = defineComponent({
   }
 });
 
-const VDataGridCell = defineComponent({
-  name: "VDataGridCell",
+const VDateRangePicker = defineComponent({
+  name: "VDateRangePicker",
   props: {
     /**
-     * Extends the data grid cell definition to hold more options.
-     */
-    columnDefinition: {
-      type: null,
-      default: void 0
-    },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The type of cell
-     */
-    cellType: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The column index of the cell.
-     * This will be applied to the css grid-column-index value
-     * applied to the cell
-     */
-    gridColumn: { type: String, default: void 0 },
-    /**
-     * Indicates the selected status.
-     */
-    ariaSelected: { type: String, default: void 0 },
-    /**
-     * Indicates the sort status.
-     */
-    ariaSort: { 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",
-    /**
-     * Fires a custom 'cell-focused' event when focus is on the cell or its contents
-     * @type {unknown}
-     */
-    "cell-focused",
-    /**
-     * Event that fires when a sortable column header is clicked
-     * @type {unknown}
-     */
-    "sort",
-    /**
-     * Event that fires when a cell is clicked
-     * @type {unknown}
-     */
-    "cell-click"
-  ],
-  methods: {
-    handleKeydown(e) {
-      return this.element?.handleKeydown(e);
-    },
-    ariaSelectedChanged(_, selectedState) {
-      return this.element?.ariaSelectedChanged(_, selectedState);
-    },
-    handleFocusin(e) {
-      return this.element?.handleFocusin(e);
-    },
-    handleFocusout(e) {
-      return this.element?.handleFocusout(e);
-    }
-  },
-  setup(props, ctx) {
-    const componentName = registerComponent("data-grid-cell", registerDataGrid);
-    const element = ref(null);
-    return { componentName, element };
-  },
-  render() {
-    if (isVue2) {
-      return h(
-        this.componentName,
-        {
-          ref: "element",
-          attrs: {
-            ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
-            ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
-            ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
-            ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {}
-          },
-          class: "vvd-component",
-          on: {
-            click: (event) => this.$emit("click", event),
-            focus: (event) => this.$emit("focus", event),
-            blur: (event) => this.$emit("blur", event),
-            keydown: (event) => this.$emit("keydown", event),
-            keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            "cell-focused": (event) => this.$emit("cell-focused", event),
-            sort: (event) => this.$emit("sort", event),
-            "cell-click": (event) => this.$emit("cell-click", event)
-          }
-        },
-        [this.$slots.default]
-      );
-    }
-    return h(
-      this.componentName,
-      {
-        ref: "element",
-        class: "vvd-component",
-        ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
-        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
-        ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
-        ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
-        ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {},
-        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),
-        onCellFocused: (event) => this.$emit("cell-focused", event),
-        onSort: (event) => this.$emit("sort", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
-      },
-      [
-        // @ts-ignore
-        this.$slots.default && this.$slots.default()
-      ]
-    );
-  }
-});
-
-const VDatePicker = defineComponent({
-  name: "VDatePicker",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
-  props: {
-    /**
-     * The label for the form element.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * The error text for the form element.
-     */
-    errorText: { type: String, default: void 0 },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Sets the element's disabled state. A disabled element will not be included during form submission.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     */
-    name: { type: String, default: void 0 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { type: Boolean, default: void 0 },
-    /**
-     * The latest accepted date of the date-picker.
-     */
-    max: { type: String, default: void 0 },
-    /**
-     * The earliest accepted date of the date-picker.
-     */
-    min: { type: String, default: void 0 },
-    /**
-     * The initial value of the date-picker.
-     */
-    modelValue: { type: String, default: void 0 },
-    /**
-     * The current value of the date-picker.
-     */
-    currentValue: { type: String, default: void 0 },
-    /**
-     * Whether the date-picker is readonly.
-     */
-    readonly: { type: Boolean, 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",
-    /**
-     * Event emitted when the clear value changes
-     * @type {unknown}
-     */
-    "clear-click",
-    /**
-     * Fires when the value of an element has been changed.
-     * @type {string}
-     */
-    "update:modelValue"
-  ],
-  methods: {},
-  setup(props, ctx) {
-    const componentName = registerComponent("date-picker", registerDatePicker);
-    const element = ref(null);
-    return { componentName, element };
-  },
-  render() {
-    if (isVue2) {
-      return h(
-        this.componentName,
-        {
-          ref: "element",
-          attrs: {
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
-            ...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.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
-          },
-          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(
-                "update:modelValue",
-                event.target.value
-              );
-              this.$emit("input", event);
-            },
-            "clear-click": (event) => this.$emit("clear-click", event)
-          }
-        },
-        [this.$slots.default]
-      );
-    }
-    return h(
-      this.componentName,
-      {
-        ref: "element",
-        class: "vvd-component",
-        ...this.label !== void 0 ? { label: this.label } : {},
-        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
-        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-        ...this.name !== void 0 ? { name: this.name } : {},
-        ...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.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
-        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => {
-          this.$emit(
-            "update:modelValue",
-            event.target.value
-          );
-          this.$emit("input", event);
-        },
-        onClearClick: (event) => this.$emit("clear-click", event)
-      },
-      [
-        // @ts-ignore
-        this.$slots.default && this.$slots.default()
-      ]
-    );
-  }
-});
-
-const VDateRangePicker = defineComponent({
-  name: "VDateRangePicker",
-  props: {
-    /**
-     * The label for the form element.
+     * The label for the form element.
      */
     label: { type: String, default: void 0 },
     /**
@@ -3791,47 +3625,244 @@ const VFab = defineComponent({
     /**
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
      */
-    formenctype: { type: String, default: void 0 },
+    formenctype: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formmethod: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formnovalidate: { type: Boolean, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formtarget: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The button type.
+     */
+    type: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The connotation the fab should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The size the FAB should have.
+     */
+    size: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Indicates the fab's label.
+     */
+    label: { 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"
+  ],
+  methods: {
+    /**
+     * {@inheritDoc (FormAssociated:interface).validate}
+     */
+    validate() {
+      return this.element?.validate();
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("fab", registerFab);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.value !== void 0 ? { value: this.value } : {},
+            ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
+            ...this.form !== void 0 ? { form: this.form } : {},
+            ...this.formaction !== void 0 ? { formaction: this.formaction } : {},
+            ...this.formenctype !== void 0 ? { formenctype: this.formenctype } : {},
+            ...this.formmethod !== void 0 ? { formmethod: this.formmethod } : {},
+            ...this.formnovalidate !== void 0 ? { formnovalidate: this.formnovalidate } : {},
+            ...this.formtarget !== void 0 ? { formtarget: this.formtarget } : {},
+            ...this.type !== void 0 ? { type: this.type } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.size !== void 0 ? { size: this.size } : {},
+            ...this.label !== void 0 ? { label: this.label } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            focus: (event) => this.$emit("focus", event),
+            blur: (event) => this.$emit("blur", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            input: (event) => this.$emit("input", event)
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon Slot to add an icon to fab.
+          handleNamedSlot("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
+        ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.value !== void 0 ? { value: this.value } : {},
+        ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
+        ...this.form !== void 0 ? { form: this.form } : {},
+        ...this.formaction !== void 0 ? { formaction: this.formaction } : {},
+        ...this.formenctype !== void 0 ? { formenctype: this.formenctype } : {},
+        ...this.formmethod !== void 0 ? { formmethod: this.formmethod } : {},
+        ...this.formnovalidate !== void 0 ? { formnovalidate: this.formnovalidate } : {},
+        ...this.formtarget !== void 0 ? { formtarget: this.formtarget } : {},
+        ...this.type !== void 0 ? { type: this.type } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.size !== void 0 ? { size: this.size } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot icon Slot to add an icon to fab.
+        handleNamedSlot("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+
+const VFilePicker = defineComponent({
+  name: "VFilePicker",
+  props: {
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
+    /**
+     * The helper text for the form element.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    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 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
-    formmethod: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * Require the field to be completed prior to form submission.
      */
-    formnovalidate: { type: Boolean, default: void 0 },
+    required: { type: Boolean, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * The max files that can be selected.
      */
-    formtarget: {
-      type: String,
-      default: void 0
-    },
+    maxFiles: { type: Number, default: void 0 },
     /**
-     * The button type.
+     * The max file size that can be selected.
      */
-    type: {
-      type: String,
-      default: void 0
-    },
+    maxFileSize: { type: Number, default: void 0 },
     /**
-     * The connotation the fab should have.
+     * List of accepted files types
      */
-    connotation: {
-      type: String,
-      default: void 0
-    },
+    accept: { type: String, default: void 0 },
     /**
-     * The size the FAB should have.
+     * The size the file-uploader should have.
      */
     size: {
       type: String,
       default: void 0
-    },
-    /**
-     * Indicates the fab's label.
-     */
-    label: { type: String, default: void 0 }
+    }
   },
   emits: [
     /**
@@ -3863,18 +3894,35 @@ const VFab = defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
-  ],
-  methods: {
+    "input",
     /**
-     * {@inheritDoc (FormAssociated:interface).validate}
+     * Emitted when a file is added or removed.
+     * @type {unknown}
      */
+    "change"
+  ],
+  methods: {
+    maxFilesChanged(_oldValue, newValue) {
+      return this.element?.maxFilesChanged(_oldValue, newValue);
+    },
+    maxFileSizeChanged(_oldValue, newValue) {
+      return this.element?.maxFileSizeChanged(_oldValue, newValue);
+    },
+    acceptChanged(_oldValue, newValue) {
+      return this.element?.acceptChanged(_oldValue, newValue);
+    },
+    nameChanged(previous, next) {
+      return this.element?.nameChanged(previous, next);
+    },
     validate() {
       return this.element?.validate();
+    },
+    formResetCallback() {
+      return this.element?.formResetCallback();
     }
   },
   setup(props, ctx) {
-    const componentName = registerComponent("fab", registerFab);
+    const componentName = registerComponent("file-picker", registerFilePicker);
     const element = ref(null);
     return { componentName, element };
   },
@@ -3885,25 +3933,19 @@ const VFab = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
-            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
             ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-            ...this.form !== void 0 ? { form: this.form } : {},
-            ...this.formaction !== void 0 ? { formaction: this.formaction } : {},
-            ...this.formenctype !== void 0 ? { formenctype: this.formenctype } : {},
-            ...this.formmethod !== void 0 ? { formmethod: this.formmethod } : {},
-            ...this.formnovalidate !== void 0 ? { formnovalidate: this.formnovalidate } : {},
-            ...this.formtarget !== void 0 ? { formtarget: this.formtarget } : {},
-            ...this.type !== void 0 ? { type: this.type } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.size !== void 0 ? { size: this.size } : {},
-            ...this.label !== void 0 ? { label: this.label } : {}
+            ...this.maxFiles !== void 0 ? { "max-files": this.maxFiles } : {},
+            ...this.maxFileSize !== void 0 ? { "max-file-size": this.maxFileSize } : {},
+            ...this.accept !== void 0 ? { accept: this.accept } : {},
+            ...this.size !== void 0 ? { size: this.size } : {}
           },
           class: "vvd-component",
           on: {
@@ -3912,14 +3954,11 @@ const VFab = defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => this.$emit("input", event),
+            change: (event) => this.$emit("change", event)
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon Slot to add an icon to fab.
-          handleNamedSlot("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return h(
@@ -3927,37 +3966,30 @@ const VFab = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { icon: this.icon } : {},
-        ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
-        ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-        ...this.form !== void 0 ? { form: this.form } : {},
-        ...this.formaction !== void 0 ? { formaction: this.formaction } : {},
-        ...this.formenctype !== void 0 ? { formenctype: this.formenctype } : {},
-        ...this.formmethod !== void 0 ? { formmethod: this.formmethod } : {},
-        ...this.formnovalidate !== void 0 ? { formnovalidate: this.formnovalidate } : {},
-        ...this.formtarget !== void 0 ? { formtarget: this.formtarget } : {},
-        ...this.type !== void 0 ? { type: this.type } : {},
-        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.maxFiles !== void 0 ? { "max-files": this.maxFiles } : {},
+        ...this.maxFileSize !== void 0 ? { "max-file-size": this.maxFileSize } : {},
+        ...this.accept !== void 0 ? { accept: this.accept } : {},
         ...this.size !== void 0 ? { size: this.size } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onInput: (event) => this.$emit("input", event),
+        onChange: (event) => this.$emit("change", event)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon Slot to add an icon to fab.
-        handleNamedSlot("icon", this.$slots["icon"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
@@ -4339,7 +4371,7 @@ const VMenu = defineComponent({
      * ID or direct reference to the component's anchor element.
      */
     anchor: {
-      type: [Object, String],
+      type: [String, HTMLElement],
       default: void 0
     },
     /**
@@ -5717,7 +5749,7 @@ const VPagination = defineComponent({
     "input",
     /**
      * Fires when the page changes.
-     * @type {Event}
+     * @type {unknown}
      */
     "pagination-change"
   ],
@@ -6326,168 +6358,11 @@ const VRadioGroup = defineComponent({
      * Fires a custom 'change' event when the value changes
      * @type {string}
      */
-    "update:modelValue"
-  ],
-  methods: {},
-  setup(props, ctx) {
-    const componentName = registerComponent("radio-group", registerRadioGroup);
-    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.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.orientation !== void 0 ? { orientation: this.orientation } : {},
-            ...this.label !== void 0 ? { label: this.label } : {}
-          },
-          class: "vvd-component",
-          on: {
-            click: (event) => this.$emit("click", event),
-            focus: (event) => this.$emit("focus", event),
-            blur: (event) => this.$emit("blur", event),
-            keydown: (event) => this.$emit("keydown", event),
-            keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            change: (event) => {
-              this.$emit(
-                "update:modelValue",
-                event.target.value
-              );
-              this.$emit("change", event);
-            }
-          }
-        },
-        [this.$slots.default]
-      );
-    }
-    return h(
-      this.componentName,
-      {
-        ref: "element",
-        class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...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.orientation !== void 0 ? { orientation: this.orientation } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => {
-          this.$emit(
-            "update:modelValue",
-            event.target.value
-          );
-          this.$emit("change", event);
-        }
-      },
-      [
-        // @ts-ignore
-        this.$slots.default && this.$slots.default()
-      ]
-    );
-  }
-});
-
-const VSelectableBox = defineComponent({
-  name: "VSelectableBox",
-  props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
-    ariaLabel: { type: String, default: void 0 },
-    /**
-     * Controls the checked state of the box
-     */
-    checked: { type: Boolean, default: void 0 },
-    /**
-     * DEPRECATED: Replaced by the clickable-box prop
-     */
-    clickable: { type: Boolean, default: void 0 },
-    /**
-     * Makes the entire selectable box clickable
-     */
-    clickableBox: { type: Boolean, default: void 0 },
-    /**
-     * The connotation the selectable box should have.
-     */
-    connotation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The type of control the box should have: checkbox or radio.
-     */
-    controlType: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Removes the padding around the box's slot content
-     */
-    tight: { type: Boolean, 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 checked state changes
-     * @type {unknown}
-     */
-    "change"
+    "update:modelValue"
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent(
-      "selectable-box",
-      registerSelectableBox
-    );
+    const componentName = registerComponent("radio-group", registerRadioGroup);
     const element = ref(null);
     return { componentName, element };
   },
@@ -6499,13 +6374,12 @@ const VSelectableBox = defineComponent({
           ref: "element",
           attrs: {
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
-            ...this.checked !== void 0 ? { checked: this.checked } : {},
-            ...this.clickable !== void 0 ? { clickable: this.clickable } : {},
-            ...this.clickableBox !== void 0 ? { "clickable-box": this.clickableBox } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
-            ...this.tight !== void 0 ? { tight: this.tight } : {}
+            ...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.orientation !== void 0 ? { orientation: this.orientation } : {},
+            ...this.label !== void 0 ? { label: this.label } : {}
           },
           class: "vvd-component",
           on: {
@@ -6515,7 +6389,13 @@ const VSelectableBox = defineComponent({
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
             input: (event) => this.$emit("input", event),
-            change: (event) => this.$emit("change", event)
+            change: (event) => {
+              this.$emit(
+                "update:modelValue",
+                event.target.value
+              );
+              this.$emit("change", event);
+            }
           }
         },
         [this.$slots.default]
@@ -6527,20 +6407,25 @@ const VSelectableBox = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
-        ...this.checked !== void 0 ? { checked: this.checked } : {},
-        ...this.clickable !== void 0 ? { clickable: this.clickable } : {},
-        ...this.clickableBox !== void 0 ? { "clickable-box": this.clickableBox } : {},
-        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-        ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
-        ...this.tight !== void 0 ? { tight: this.tight } : {},
+        ...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.orientation !== void 0 ? { orientation: this.orientation } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
         onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onChange: (event) => {
+          this.$emit(
+            "update:modelValue",
+            event.target.value
+          );
+          this.$emit("change", event);
+        }
       },
       [
         // @ts-ignore
@@ -6828,6 +6713,153 @@ const VSelect = defineComponent({
   }
 });
 
+const VSelectableBox = defineComponent({
+  name: "VSelectableBox",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    ariaLabel: { type: String, default: void 0 },
+    /**
+     * Controls the checked state of the box
+     */
+    checked: { type: Boolean, default: void 0 },
+    /**
+     * DEPRECATED: Replaced by the clickable-box prop
+     */
+    clickable: { type: Boolean, default: void 0 },
+    /**
+     * Makes the entire selectable box clickable
+     */
+    clickableBox: { type: Boolean, default: void 0 },
+    /**
+     * The connotation the selectable box should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The type of control the box should have: checkbox or radio.
+     */
+    controlType: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Removes the padding around the box's slot content
+     */
+    tight: { type: Boolean, 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 checked state changes
+     * @type {unknown}
+     */
+    "change"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "selectable-box",
+      registerSelectableBox
+    );
+    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.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
+            ...this.checked !== void 0 ? { checked: this.checked } : {},
+            ...this.clickable !== void 0 ? { clickable: this.clickable } : {},
+            ...this.clickableBox !== void 0 ? { "clickable-box": this.clickableBox } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
+            ...this.tight !== void 0 ? { tight: this.tight } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            focus: (event) => this.$emit("focus", event),
+            blur: (event) => this.$emit("blur", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            input: (event) => this.$emit("input", event),
+            change: (event) => this.$emit("change", event)
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
+        ...this.checked !== void 0 ? { checked: this.checked } : {},
+        ...this.clickable !== void 0 ? { clickable: this.clickable } : {},
+        ...this.clickableBox !== void 0 ? { "clickable-box": this.clickableBox } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
+        ...this.tight !== void 0 ? { tight: this.tight } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event),
+        onChange: (event) => this.$emit("change", event)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+
 const VSideDrawer = defineComponent({
   name: "VSideDrawer",
   props: {
@@ -7402,6 +7434,47 @@ const VSwitch = defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    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 name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * 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.
+     */
+    modelValue: { type: Boolean, default: void 0 },
+    /**
+     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
+     */
+    readonly: { type: Boolean, default: void 0 },
     /**
      * Indicates the switch's label.
      */
@@ -7412,11 +7485,7 @@ const VSwitch = defineComponent({
     connotation: {
       type: String,
       default: void 0
-    },
-    /**
-     * The current checked state of the switch.
-     */
-    modelValue: { type: Boolean, default: void 0 }
+    }
   },
   emits: [
     /**
@@ -7450,12 +7519,12 @@ const VSwitch = defineComponent({
      */
     "input",
     /**
-     * Emitted when the checked state of the switch changes.
-     * @type {Event}
+     * Emits a custom change event when the checked state changes
+     * @type {unknown}
      */
     "change",
     /**
-     * Emitted when the checked state of the switch changes.
+     * Emits a custom change event when the checked state changes
      * @type {boolean}
      */
     "update:modelValue"
@@ -7474,9 +7543,16 @@ const VSwitch = defineComponent({
           ref: "element",
           attrs: {
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.value !== void 0 ? { value: this.value } : {},
+            ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.checked !== void 0 ? { checked: this.checked } : {},
+            ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {}
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
           },
           class: "vvd-component",
           on: {
@@ -7504,9 +7580,16 @@ const VSwitch = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.value !== void 0 ? { value: this.value } : {},
+        ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.checked !== void 0 ? { checked: this.checked } : {},
+        ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
+        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-        ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -7676,6 +7759,98 @@ const VTab = defineComponent({
   }
 });
 
+const VTabPanel = defineComponent({
+  name: "VTabPanel",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      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"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("tab-panel", registerTabPanel);
+    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 } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            focus: (event) => this.$emit("focus", event),
+            blur: (event) => this.$emit("blur", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            input: (event) => this.$emit("input", event)
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+
 const VTabs = defineComponent({
   name: "VTabs",
   props: {
@@ -7784,7 +7959,166 @@ const VTabs = defineComponent({
     }
   },
   setup(props, ctx) {
-    const componentName = registerComponent("tabs", registerTabs);
+    const componentName = registerComponent("tabs", registerTabs);
+    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.orientation !== void 0 ? { orientation: this.orientation } : {},
+            ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
+            ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
+            ...this.scrollablePanel !== void 0 ? { "scrollable-panel": this.scrollablePanel } : {}
+          },
+          class: "vvd-component",
+          on: {
+            click: (event) => this.$emit("click", event),
+            focus: (event) => this.$emit("focus", event),
+            blur: (event) => this.$emit("blur", event),
+            keydown: (event) => this.$emit("keydown", event),
+            keyup: (event) => this.$emit("keyup", event),
+            input: (event) => this.$emit("input", event),
+            change: (event) => this.$emit("change", event)
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
+        ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
+        ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
+        ...this.scrollablePanel !== void 0 ? { "scrollable-panel": this.scrollablePanel } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event),
+        onChange: (event) => this.$emit("change", event)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VTag = defineComponent({
+  name: "VTag",
+  props: {
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The connotation the tag should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The shape the tag should have.
+     */
+    shape: { type: String, default: void 0 },
+    /**
+     * The appearance the tag should have.
+     */
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Indicates the tag's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * indicates whether the tag is removable
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is disabled
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is selectable
+     */
+    selectable: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is selected
+     */
+    selected: { type: Boolean, 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"
+  ],
+  methods: {
+    remove() {
+      return this.element?.remove();
+    },
+    handleKeydown(e) {
+      return this.element?.handleKeydown(e);
+    },
+    handleClick() {
+      return this.element?.handleClick();
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("tag", registerTag);
     const element = ref(null);
     return { componentName, element };
   },
@@ -7795,13 +8129,16 @@ const VTabs = defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
-            ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
-            ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
-            ...this.scrollablePanel !== void 0 ? { "scrollable-panel": this.scrollablePanel } : {}
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.removable !== void 0 ? { removable: this.removable } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
+            ...this.selected !== void 0 ? { selected: this.selected } : {}
           },
           class: "vvd-component",
           on: {
@@ -7810,11 +8147,14 @@ const VTabs = defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            change: (event) => this.$emit("change", event)
+            input: (event) => this.$emit("input", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot icon Add an icon to the component.
+          handleNamedSlot("icon", this.$slots["icon"])
+        ]
       );
     }
     return h(
@@ -7822,31 +8162,35 @@ const VTabs = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
-        ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
-        ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-        ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
-        ...this.scrollablePanel !== void 0 ? { "scrollable-panel": this.scrollablePanel } : {},
+        ...this.shape !== void 0 ? { shape: this.shape } : {},
+        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.removable !== void 0 ? { removable: this.removable } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
+        ...this.selected !== void 0 ? { selected: this.selected } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onChange: (event) => this.$emit("change", event)
+        onInput: (event) => this.$emit("input", event)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot icon Add an icon to the component.
+        handleNamedSlot("icon", this.$slots["icon"])
       ]
     );
   }
 });
 
-const VTabPanel = defineComponent({
-  name: "VTabPanel",
+const VTagGroup = defineComponent({
+  name: "VTagGroup",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -7854,7 +8198,8 @@ const VTabPanel = defineComponent({
     ariaCurrent: {
       type: String,
       default: void 0
-    }
+    },
+    ariaLabel: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -7890,7 +8235,7 @@ const VTabPanel = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab-panel", registerTabPanel);
+    const componentName = registerComponent("tag-group", registerTagGroup);
     const element = ref(null);
     return { componentName, element };
   },
@@ -7901,7 +8246,8 @@ const VTabPanel = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
+            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {}
           },
           class: "vvd-component",
           on: {
@@ -7922,6 +8268,7 @@ const VTabPanel = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -9230,14 +9577,9 @@ const VTreeView = defineComponent({
   }
 });
 
-const VTag = defineComponent({
-  name: "VTag",
+const VDataGridRow = defineComponent({
+  name: "VDataGridRow",
   props: {
-    /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
-     */
-    icon: { type: String, default: void 0 },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -9246,43 +9588,23 @@ const VTag = defineComponent({
       default: void 0
     },
     /**
-     * The connotation the tag should have.
+     * String that gets applied to the the css gridTemplateColumns attribute for the row
      */
-    connotation: {
+    gridTemplateColumns: {
       type: String,
       default: void 0
     },
     /**
-     * The shape the tag should have.
-     */
-    shape: { type: String, default: void 0 },
-    /**
-     * The appearance the tag should have.
+     * The type of row
      */
-    appearance: {
+    rowType: {
       type: String,
       default: void 0
     },
     /**
-     * Indicates the tag's label.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * indicates whether the tag is removable
-     */
-    removable: { type: Boolean, default: void 0 },
-    /**
-     * indicates whether the tag is disabled
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * indicates whether the tag is selectable
-     */
-    selectable: { type: Boolean, default: void 0 },
-    /**
-     * indicates whether the tag is selected
+     * Indicates the selected status.
      */
-    selected: { type: Boolean, default: void 0 }
+    ariaSelected: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -9314,21 +9636,31 @@ const VTag = defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+     * @type {unknown}
+     */
+    "row-focused",
+    /**
+     * Event that fires when a cell is clicked
+     * @type {unknown}
+     */
+    "cell-click"
   ],
   methods: {
-    remove() {
-      return this.element?.remove();
+    handleFocusout(e) {
+      return this.element?.handleFocusout(e);
+    },
+    handleCellFocus(e) {
+      return this.element?.handleCellFocus(e);
     },
     handleKeydown(e) {
       return this.element?.handleKeydown(e);
-    },
-    handleClick() {
-      return this.element?.handleClick();
     }
   },
   setup(props, ctx) {
-    const componentName = registerComponent("tag", registerTag);
+    const componentName = registerComponent("data-grid-row", registerDataGrid);
     const element = ref(null);
     return { componentName, element };
   },
@@ -9339,16 +9671,10 @@ const VTag = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.removable !== void 0 ? { removable: this.removable } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
-            ...this.selected !== void 0 ? { selected: this.selected } : {}
+            ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
+            ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
+            ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
           },
           class: "vvd-component",
           on: {
@@ -9357,14 +9683,12 @@ const VTag = defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => this.$emit("input", event),
+            "row-focused": (event) => this.$emit("row-focused", event),
+            "cell-click": (event) => this.$emit("cell-click", event)
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return h(
@@ -9372,36 +9696,37 @@ const VTag = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-        ...this.shape !== void 0 ? { shape: this.shape } : {},
-        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
-        ...this.removable !== void 0 ? { removable: this.removable } : {},
-        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-        ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
-        ...this.selected !== void 0 ? { selected: this.selected } : {},
+        ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
+        ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
+        ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onInput: (event) => this.$emit("input", event),
+        onRowFocused: (event) => this.$emit("row-focused", event),
+        onCellClick: (event) => this.$emit("cell-click", event)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
 
-const VTagGroup = defineComponent({
-  name: "VTagGroup",
+const VDataGridCell = defineComponent({
+  name: "VDataGridCell",
   props: {
+    /**
+     * Extends the data grid cell definition to hold more options.
+     */
+    columnDefinition: {
+      type: null,
+      default: void 0
+    },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -9409,7 +9734,27 @@ const VTagGroup = defineComponent({
       type: String,
       default: void 0
     },
-    ariaLabel: { type: String, default: void 0 }
+    /**
+     * The type of cell
+     */
+    cellType: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The column index of the cell.
+     * This will be applied to the css grid-column-index value
+     * applied to the cell
+     */
+    gridColumn: { type: String, default: void 0 },
+    /**
+     * Indicates the selected status.
+     */
+    ariaSelected: { type: String, default: void 0 },
+    /**
+     * Indicates the sort status.
+     */
+    ariaSort: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -9441,11 +9786,39 @@ const VTagGroup = defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fires a custom 'cell-focused' event when focus is on the cell or its contents
+     * @type {unknown}
+     */
+    "cell-focused",
+    /**
+     * Event that fires when a sortable column header is clicked
+     * @type {unknown}
+     */
+    "sort",
+    /**
+     * Event that fires when a cell is clicked
+     * @type {unknown}
+     */
+    "cell-click"
   ],
-  methods: {},
+  methods: {
+    handleKeydown(e) {
+      return this.element?.handleKeydown(e);
+    },
+    ariaSelectedChanged(_, selectedState) {
+      return this.element?.ariaSelectedChanged(_, selectedState);
+    },
+    handleFocusin(e) {
+      return this.element?.handleFocusin(e);
+    },
+    handleFocusout(e) {
+      return this.element?.handleFocusout(e);
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("tag-group", registerTagGroup);
+    const componentName = registerComponent("data-grid-cell", registerDataGrid);
     const element = ref(null);
     return { componentName, element };
   },
@@ -9456,8 +9829,12 @@ const VTagGroup = defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {}
+            ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
+            ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
+            ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
+            ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {}
           },
           class: "vvd-component",
           on: {
@@ -9466,7 +9843,10 @@ const VTagGroup = defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => this.$emit("input", event),
+            "cell-focused": (event) => this.$emit("cell-focused", event),
+            sort: (event) => this.$emit("sort", event),
+            "cell-click": (event) => this.$emit("cell-click", event)
           }
         },
         [this.$slots.default]
@@ -9477,14 +9857,21 @@ const VTagGroup = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
+        ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
+        ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
+        ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
+        ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
+        ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {},
         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)
+        onInput: (event) => this.$emit("input", event),
+        onCellFocused: (event) => this.$emit("cell-focused", event),
+        onSort: (event) => this.$emit("sort", event),
+        onCellClick: (event) => this.$emit("cell-click", event)
       },
       [
         // @ts-ignore
@@ -9566,6 +9953,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["arrowWidthSmallSolid"] = "arrow-width-small-solid";
   Icon2["assignUserLine"] = "assign-user-line";
   Icon2["assignUserSolid"] = "assign-user-solid";
+  Icon2["asterisk2Line"] = "asterisk-2-line";
+  Icon2["asterisk2Solid"] = "asterisk-2-solid";
   Icon2["asteriskLine"] = "asterisk-line";
   Icon2["asteriskSolid"] = "asterisk-solid";
   Icon2["atomsLine"] = "atoms-line";
@@ -9824,6 +10213,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["editSolid"] = "edit-solid";
   Icon2["editUserLine"] = "edit-user-line";
   Icon2["editUserSolid"] = "edit-user-solid";
+  Icon2["eightLine"] = "eight-line";
+  Icon2["eightSolid"] = "eight-solid";
   Icon2["emojiLine"] = "emoji-line";
   Icon2["emojiSolid"] = "emoji-solid";
   Icon2["endCallLine"] = "end-call-line";
@@ -9924,6 +10315,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["filesSolid"] = "files-solid";
   Icon2["filterLine"] = "filter-line";
   Icon2["filterSolid"] = "filter-solid";
+  Icon2["fiveLine"] = "five-line";
+  Icon2["fiveSolid"] = "five-solid";
   Icon2["flagAfghanistan"] = "flag-afghanistan";
   Icon2["flagAlandIslands"] = "flag-aland-islands";
   Icon2["flagAlbania"] = "flag-albania";
@@ -10048,6 +10441,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["forwardCallSolid"] = "forward-call-solid";
   Icon2["forwardLine"] = "forward-line";
   Icon2["forwardSolid"] = "forward-solid";
+  Icon2["fourLine"] = "four-line";
+  Icon2["fourSolid"] = "four-solid";
   Icon2["fullScreenLine"] = "full-screen-line";
   Icon2["fullScreenSolid"] = "full-screen-solid";
   Icon2["fullscreenOffLine"] = "fullscreen-off-line";
@@ -10100,6 +10495,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["happySolid"] = "happy-solid";
   Icon2["hashLine"] = "hash-line";
   Icon2["hashSolid"] = "hash-solid";
+  Icon2["hashtagLine"] = "hashtag-line";
+  Icon2["hashtagSolid"] = "hashtag-solid";
   Icon2["headset2Line"] = "headset-2-line";
   Icon2["headset2Solid"] = "headset-2-solid";
   Icon2["headsetLine"] = "headset-line";
@@ -10272,6 +10669,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["nexmoMono"] = "nexmo-mono";
   Icon2["nextLine"] = "next-line";
   Icon2["nextSolid"] = "next-solid";
+  Icon2["nineLine"] = "nine-line";
+  Icon2["nineSolid"] = "nine-solid";
   Icon2["nodeColor"] = "node-color";
   Icon2["nodeMono"] = "node-mono";
   Icon2["noteLine"] = "note-line";
@@ -10290,6 +10689,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["officePhone2Solid"] = "office-phone-2-solid";
   Icon2["officePhoneLine"] = "office-phone-line";
   Icon2["officePhoneSolid"] = "office-phone-solid";
+  Icon2["oneLine"] = "one-line";
+  Icon2["oneSolid"] = "one-solid";
   Icon2["openFolderLine"] = "open-folder-line";
   Icon2["openFolderSolid"] = "open-folder-solid";
   Icon2["openLine"] = "open-line";
@@ -10445,6 +10846,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["searchSolid"] = "search-solid";
   Icon2["sendToBackLine"] = "send-to-back-line";
   Icon2["sendToBackSolid"] = "send-to-back-solid";
+  Icon2["sevenLine"] = "seven-line";
+  Icon2["sevenSolid"] = "seven-solid";
   Icon2["share2Line"] = "share-2-line";
   Icon2["share2Solid"] = "share-2-solid";
   Icon2["shareLine"] = "share-line";
@@ -10457,6 +10860,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["shuffleSolid"] = "shuffle-solid";
   Icon2["sidebarLine"] = "sidebar-line";
   Icon2["sidebarSolid"] = "sidebar-solid";
+  Icon2["sixLine"] = "six-line";
+  Icon2["sixSolid"] = "six-solid";
   Icon2["slackColor"] = "slack-color";
   Icon2["slackMono"] = "slack-mono";
   Icon2["smileLine"] = "smile-line";
@@ -10527,6 +10932,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["textcolorSolid"] = "textcolor-solid";
   Icon2["textureLine"] = "texture-line";
   Icon2["textureSolid"] = "texture-solid";
+  Icon2["threeLine"] = "three-line";
+  Icon2["threeSolid"] = "three-solid";
   Icon2["thumbsDownLine"] = "thumbs-down-line";
   Icon2["thumbsDownSolid"] = "thumbs-down-solid";
   Icon2["thumbsUpLine"] = "thumbs-up-line";
@@ -10549,6 +10956,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["twitchMono"] = "twitch-mono";
   Icon2["twitterColor"] = "twitter-color";
   Icon2["twitterMono"] = "twitter-mono";
+  Icon2["twoLine"] = "two-line";
+  Icon2["twoSolid"] = "two-solid";
   Icon2["umbrellaLine"] = "umbrella-line";
   Icon2["umbrellaSolid"] = "umbrella-solid";
   Icon2["underlineLine"] = "underline-line";
@@ -10674,17 +11083,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 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 Wed, 21 Feb 2024 09:46:09 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 21 Feb 2024 09:46:09 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 21 Feb 2024 09:46:09 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 21 Feb 2024 09:46:09 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 Thu, 08 Feb 2024 11:44:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 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 Wed, 21 Feb 2024 09:46:09 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 21 Feb 2024 09:46:09 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 21 Feb 2024 09:46:09 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 21 Feb 2024 09:46:09 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 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 SpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 SpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;\n}\n";
 
-const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Thu, 08 Feb 2024 11:44:11 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(--vvd-color-neutral-50);\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 Wed, 21 Feb 2024 09:46:09 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(--vvd-color-neutral-50);\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 Thu, 08 Feb 2024 11:44:11 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 Wed, 21 Feb 2024 09:46:09 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 Thu, 08 Feb 2024 11:44:11 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 Wed, 21 Feb 2024 09:46:09 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",
@@ -10782,4 +11191,4 @@ const vivid3 = {
   }
 };
 
-export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDialog, VDivider, VEmptyState, VFab, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, 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, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, optionalStyles, setCustomComponentPrefix, vivid3 };