@vonage/vivid-vue 3.51.0 → 3.52.0

package/index.cjs

@@ -1555,6 +1555,10 @@ const VButton = vue.defineComponent({
      * Displays the button in pending state.
      */
     pending: { type: Boolean, default: void 0 },
+    /**
+     * Displays the button in active state.
+     */
+    active: { type: Boolean, default: void 0 },
     /**
      * Indicates the button's label.
      */
@@ -1666,6 +1670,7 @@ const VButton = vue.defineComponent({
             ...this.size !== void 0 ? { size: this.size } : {},
             ...this.stacked !== void 0 ? { stacked: this.stacked } : {},
             ...this.pending !== void 0 ? { pending: this.pending } : {},
+            ...this.active !== void 0 ? { active: this.active } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.href !== void 0 ? { href: this.href } : {},
             ...this.download !== void 0 ? { download: this.download } : {},
@@ -1720,6 +1725,7 @@ const VButton = vue.defineComponent({
         ...this.size !== void 0 ? { size: this.size } : {},
         ...this.stacked !== void 0 ? { stacked: this.stacked } : {},
         ...this.pending !== void 0 ? { pending: this.pending } : {},
+        ...this.active !== void 0 ? { active: this.active } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.href !== void 0 ? { href: this.href } : {},
         ...this.download !== void 0 ? { download: this.download } : {},
@@ -2821,21 +2827,16 @@ const VDataGrid = vue.defineComponent({
   }
 });
 
-const VDatePicker = vue.defineComponent({
-  name: "VDatePicker",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
+const VDataGridCell = vue.defineComponent({
+  name: "VDataGridCell",
   props: {
     /**
-     * The label for the form element.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * The error text for the form element.
+     * Extends the data grid cell definition to hold more options.
      */
-    errorText: { type: String, default: void 0 },
+    columnDefinition: {
+      type: null,
+      default: void 0
+    },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -2844,37 +2845,26 @@ const VDatePicker = vue.defineComponent({
       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.
+     * The type of cell
      */
-    min: { type: String, default: void 0 },
+    cellType: {
+      type: String,
+      default: void 0
+    },
     /**
-     * The initial value of the date-picker.
+     * The column index of the cell.
+     * This will be applied to the css grid-column-index value
+     * applied to the cell
      */
-    modelValue: { type: String, default: void 0 },
+    gridColumn: { type: String, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * Indicates the selected status.
      */
-    currentValue: { type: String, default: void 0 },
+    ariaSelected: { type: String, default: void 0 },
     /**
-     * Whether the date-picker is readonly.
+     * Indicates the sort status.
      */
-    readonly: { type: Boolean, default: void 0 }
+    ariaSort: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -2908,19 +2898,37 @@ const VDatePicker = vue.defineComponent({
      */
     "input",
     /**
-     * Event emitted when the clear value changes
+     * Fires a custom 'cell-focused' event when focus is on the cell or its contents
      * @type {unknown}
      */
-    "clear-click",
+    "cell-focused",
     /**
-     * Fires when the value of an element has been changed.
-     * @type {string}
+     * Event that fires when a sortable column header is clicked
+     * @type {unknown}
      */
-    "update:modelValue"
+    "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("date-picker", vivid.registerDatePicker);
+    const componentName = registerComponent("data-grid-cell", vivid.registerDataGrid);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -2931,17 +2939,12 @@ const VDatePicker = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
             ...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 } : {}
+            ...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: {
@@ -2950,14 +2953,10 @@ const VDatePicker = vue.defineComponent({
             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)
+            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]
@@ -2968,30 +2967,21 @@ const VDatePicker = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { label: this.label } : {},
-        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+        ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
         ...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 } : {},
+        ...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(
-            "update:modelValue",
-            event.target.value
-          );
-          this.$emit("input", event);
-        },
-        onClearClick: (event) => this.$emit("clear-click", 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
@@ -3001,17 +2991,9 @@ const VDatePicker = vue.defineComponent({
   }
 });
 
-const VDateRangePicker = vue.defineComponent({
-  name: "VDateRangePicker",
+const VDataGridRow = vue.defineComponent({
+  name: "VDataGridRow",
   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.
      */
@@ -3020,53 +3002,23 @@ const VDateRangePicker = vue.defineComponent({
       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 current start value of the element. This property serves as a mechanism
-     * to set the `start` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
-     */
-    start: { type: String, default: void 0 },
-    /**
-     * The current end value of the element. This property serves as a mechanism
-     * to set the `end` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
-     */
-    end: { 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.
+     * String that gets applied to the the css gridTemplateColumns attribute for the row
      */
-    value: { type: String, default: void 0 },
+    gridTemplateColumns: {
+      type: String,
+      default: void 0
+    },
     /**
-     * The current value of the date-picker.
+     * The type of row
      */
-    currentValue: { type: String, default: void 0 },
+    rowType: {
+      type: String,
+      default: void 0
+    },
     /**
-     * Whether the date-picker is readonly.
+     * Indicates the selected status.
      */
-    readonly: { type: Boolean, default: void 0 }
+    ariaSelected: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -3100,37 +3052,29 @@ const VDateRangePicker = vue.defineComponent({
      */
     "input",
     /**
-     * Event emitted when the start value changes
-     * @type {unknown}
-     */
-    "input:start",
-    /**
-     * Event emitted when the end value changes
+     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
      * @type {unknown}
      */
-    "input:end",
+    "row-focused",
     /**
-     * Event emitted when the clear value changes
+     * Event that fires when a cell is clicked
      * @type {unknown}
      */
-    "clear-click",
-    /**
-     * Event emitted when the start value changes
-     * @type {string}
-     */
-    "update:start",
-    /**
-     * Event emitted when the end value changes
-     * @type {string}
-     */
-    "update:end"
+    "cell-click"
   ],
-  methods: {},
+  methods: {
+    handleFocusout(e) {
+      return this.element?.handleFocusout(e);
+    },
+    handleCellFocus(e) {
+      return this.element?.handleCellFocus(e);
+    },
+    handleKeydown(e) {
+      return this.element?.handleKeydown(e);
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent(
-      "date-range-picker",
-      vivid.registerDateRangePicker
-    );
+    const componentName = registerComponent("data-grid-row", vivid.registerDataGrid);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -3141,19 +3085,10 @@ const VDateRangePicker = vue.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.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.start !== void 0 ? { "current-start": this.start } : {},
-            ...this.end !== void 0 ? { "current-end": this.end } : {},
-            ...this.min !== void 0 ? { min: this.min } : {},
-            ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
+            ...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: {
@@ -3163,15 +3098,8 @@ const VDateRangePicker = vue.defineComponent({
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
             input: (event) => this.$emit("input", event),
-            "input:start": (event) => {
-              this.$emit("update:start", event.target.start);
-              this.$emit("input:start", event);
-            },
-            "input:end": (event) => {
-              this.$emit("update:end", event.target.end);
-              this.$emit("input:end", event);
-            },
-            "clear-click": (event) => this.$emit("clear-click", event)
+            "row-focused": (event) => this.$emit("row-focused", event),
+            "cell-click": (event) => this.$emit("cell-click", event)
           }
         },
         [this.$slots.default]
@@ -3182,34 +3110,18 @@ const VDateRangePicker = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.label !== void 0 ? { label: this.label } : {},
-        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 ? { 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.start !== void 0 ? { "current-start": this.start } : {},
-        ...this.end !== void 0 ? { "current-end": this.end } : {},
-        ...this.min !== void 0 ? { min: this.min } : {},
-        ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
-        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+        ...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:start": (event) => {
-          this.$emit("update:start", event.target.start);
-          this.$emit("input:start", event);
-        },
-        "onInput:end": (event) => {
-          this.$emit("update:end", event.target.end);
-          this.$emit("input:end", event);
-        },
-        onClearClick: (event) => this.$emit("clear-click", event)
+        onRowFocused: (event) => this.$emit("row-focused", event),
+        onCellClick: (event) => this.$emit("cell-click", event)
       },
       [
         // @ts-ignore
@@ -3219,9 +3131,21 @@ const VDateRangePicker = vue.defineComponent({
   }
 });
 
-const VDialog = vue.defineComponent({
-  name: "VDialog",
+const VDatePicker = vue.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.
      */
@@ -3230,27 +3154,37 @@ const VDialog = vue.defineComponent({
       default: void 0
     },
     /**
-     * Indicates dialog's state
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
-    open: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
     /**
-     * undefined
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
-    icon: { type: String, default: void 0 },
-    iconPlacement: {
-      type: String,
-      default: void 0
-    },
-    subtitle: { type: String, default: void 0 },
-    headline: { type: String, default: void 0 },
-    fullWidthBody: { type: Boolean, default: void 0 },
-    ariaLabel: { type: String, default: void 0 },
-    dismissButtonAriaLabel: {
-      type: String,
-      default: void 0
-    },
-    noLightDismiss: { type: Boolean, default: void 0 }
+    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: [
     /**
@@ -3284,24 +3218,19 @@ const VDialog = vue.defineComponent({
      */
     "input",
     /**
-     * Fired when the dialog is closed.
+     * Event emitted when the clear value changes
      * @type {unknown}
      */
-    "close"
+    "clear-click",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {string}
+     */
+    "update:modelValue"
   ],
-  methods: {
-    close() {
-      return this.element?.close();
-    },
-    show() {
-      return this.element?.show();
-    },
-    showModal() {
-      return this.element?.showModal();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("dialog", vivid.registerDialog);
+    const componentName = registerComponent("date-picker", vivid.registerDatePicker);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -3312,16 +3241,17 @@ const VDialog = vue.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.open !== void 0 ? { open: this.open } : {},
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
-            ...this.iconPlacement !== void 0 ? { "icon-placement": this.iconPlacement } : {},
-            ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
-            ...this.headline !== void 0 ? { headline: this.headline } : {},
-            ...this.fullWidthBody !== void 0 ? { "full-width-body": this.fullWidthBody } : {},
-            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
-            ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
-            ...this.noLightDismiss !== void 0 ? { "no-light-dismiss": this.noLightDismiss } : {}
+            ...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: {
@@ -3330,23 +3260,17 @@ const VDialog = vue.defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            close: (event) => this.$emit("close", 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,
-          // @slot graphic Use the graphic slot in order to replace the icon.
-          handleNamedSlot("graphic", this.$slots["graphic"]),
-          // @slot body Use the body slot in order to add custom HTML to the dialog.
-          handleNamedSlot("body", this.$slots["body"]),
-          // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-          handleNamedSlot("footer", this.$slots["footer"]),
-          // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-          handleNamedSlot("main", this.$slots["main"]),
-          // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
-          handleNamedSlot("action-items", this.$slots["action-items"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -3354,45 +3278,50 @@ const VDialog = vue.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.open !== void 0 ? { open: this.open } : {},
-        ...this.icon !== void 0 ? { icon: this.icon } : {},
-        ...this.iconPlacement !== void 0 ? { "icon-placement": this.iconPlacement } : {},
-        ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
-        ...this.headline !== void 0 ? { headline: this.headline } : {},
-        ...this.fullWidthBody !== void 0 ? { "full-width-body": this.fullWidthBody } : {},
-        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
-        ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
-        ...this.noLightDismiss !== void 0 ? { "no-light-dismiss": this.noLightDismiss } : {},
+        ...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),
-        onClose: (event) => this.$emit("close", 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(),
-        // @slot graphic Use the graphic slot in order to replace the icon.
-        handleNamedSlot("graphic", this.$slots["graphic"]),
-        // @slot body Use the body slot in order to add custom HTML to the dialog.
-        handleNamedSlot("body", this.$slots["body"]),
-        // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        handleNamedSlot("footer", this.$slots["footer"]),
-        // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-        handleNamedSlot("main", this.$slots["main"]),
-        // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
-        handleNamedSlot("action-items", this.$slots["action-items"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
 
-const VDivider = vue.defineComponent({
-  name: "VDivider",
+const VDateRangePicker = vue.defineComponent({
+  name: "VDateRangePicker",
   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.
      */
@@ -3401,35 +3330,69 @@ const VDivider = vue.defineComponent({
       default: void 0
     },
     /**
-     * The role of the element.
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
-    role: {
-      type: String,
-      default: void 0
-    },
+    disabled: { type: Boolean, default: void 0 },
     /**
-     * The orientation of the divider.
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
-    orientation: {
-      type: String,
-      default: void 0
-    }
-  },
-  emits: [
+    name: { type: String, default: void 0 },
     /**
-     * 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}
+     * Require the field to be completed prior to form submission.
      */
-    "click",
+    required: { type: Boolean, default: void 0 },
     /**
-     * Fires when the element receives focus.
-     * @type {FocusEvent}
+     * The latest accepted date of the date-picker.
      */
-    "focus",
+    max: { type: String, default: void 0 },
     /**
-     * Fires when the element loses focus.
-     * @type {FocusEvent}
-     */
+     * The current start value of the element. This property serves as a mechanism
+     * to set the `start` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    start: { type: String, default: void 0 },
+    /**
+     * The current end value of the element. This property serves as a mechanism
+     * to set the `end` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    end: { 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.
+     */
+    value: { 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.
@@ -3445,11 +3408,39 @@ const VDivider = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Event emitted when the start value changes
+     * @type {unknown}
+     */
+    "input:start",
+    /**
+     * Event emitted when the end value changes
+     * @type {unknown}
+     */
+    "input:end",
+    /**
+     * Event emitted when the clear value changes
+     * @type {unknown}
+     */
+    "clear-click",
+    /**
+     * Event emitted when the start value changes
+     * @type {string}
+     */
+    "update:start",
+    /**
+     * Event emitted when the end value changes
+     * @type {string}
+     */
+    "update:end"
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("divider", vivid.registerDivider);
+    const componentName = registerComponent(
+      "date-range-picker",
+      vivid.registerDateRangePicker
+    );
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -3460,9 +3451,19 @@ const VDivider = vue.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.role !== void 0 ? { role: this.role } : {},
-            ...this.orientation !== void 0 ? { orientation: this.orientation } : {}
+            ...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.start !== void 0 ? { "current-start": this.start } : {},
+            ...this.end !== void 0 ? { "current-end": this.end } : {},
+            ...this.min !== void 0 ? { min: this.min } : {},
+            ...this.value !== void 0 ? { value: this.value } : {},
+            ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
           },
           class: "vvd-component",
           on: {
@@ -3471,7 +3472,16 @@ const VDivider = vue.defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => this.$emit("input", event),
+            "input:start": (event) => {
+              this.$emit("update:start", event.target.start);
+              this.$emit("input:start", event);
+            },
+            "input:end": (event) => {
+              this.$emit("update:end", event.target.end);
+              this.$emit("input:end", event);
+            },
+            "clear-click": (event) => this.$emit("clear-click", event)
           }
         },
         [this.$slots.default]
@@ -3482,15 +3492,34 @@ const VDivider = vue.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.role !== void 0 ? { role: this.role } : {},
-        ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
+        ...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.start !== void 0 ? { "current-start": this.start } : {},
+        ...this.end !== void 0 ? { "current-end": this.end } : {},
+        ...this.min !== void 0 ? { min: this.min } : {},
+        ...this.value !== void 0 ? { value: this.value } : {},
+        ...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)
+        onInput: (event) => this.$emit("input", event),
+        "onInput:start": (event) => {
+          this.$emit("update:start", event.target.start);
+          this.$emit("input:start", event);
+        },
+        "onInput:end": (event) => {
+          this.$emit("update:end", event.target.end);
+          this.$emit("input:end", event);
+        },
+        onClearClick: (event) => this.$emit("clear-click", event)
       },
       [
         // @ts-ignore
@@ -3500,8 +3529,8 @@ const VDivider = vue.defineComponent({
   }
 });
 
-const VEmptyState = vue.defineComponent({
-  name: "VEmptyState",
+const VDialog = vue.defineComponent({
+  name: "VDialog",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -3511,14 +3540,27 @@ const VEmptyState = vue.defineComponent({
       default: void 0
     },
     /**
-     * An optional headline for the empty state.
+     * Indicates dialog's state
      */
-    headline: { type: String, default: void 0 },
+    open: { type: Boolean, default: void 0 },
     /**
-     * Icon for the empty state.
+     * undefined
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
      */
-    icon: { type: String, default: void 0 }
+    icon: { type: String, default: void 0 },
+    iconPlacement: {
+      type: String,
+      default: void 0
+    },
+    subtitle: { type: String, default: void 0 },
+    headline: { type: String, default: void 0 },
+    fullWidthBody: { type: Boolean, default: void 0 },
+    ariaLabel: { type: String, default: void 0 },
+    dismissButtonAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    noLightDismiss: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -3550,11 +3592,26 @@ const VEmptyState = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fired when the dialog is closed.
+     * @type {unknown}
+     */
+    "close"
   ],
-  methods: {},
+  methods: {
+    close() {
+      return this.element?.close();
+    },
+    show() {
+      return this.element?.show();
+    },
+    showModal() {
+      return this.element?.showModal();
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("empty-state", vivid.registerEmptyState);
+    const componentName = registerComponent("dialog", vivid.registerDialog);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -3566,8 +3623,15 @@ const VEmptyState = vue.defineComponent({
           ref: "element",
           attrs: {
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+            ...this.open !== void 0 ? { open: this.open } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.iconPlacement !== void 0 ? { "icon-placement": this.iconPlacement } : {},
+            ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
-            ...this.icon !== void 0 ? { icon: this.icon } : {}
+            ...this.fullWidthBody !== void 0 ? { "full-width-body": this.fullWidthBody } : {},
+            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
+            ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+            ...this.noLightDismiss !== void 0 ? { "no-light-dismiss": this.noLightDismiss } : {}
           },
           class: "vvd-component",
           on: {
@@ -3576,14 +3640,21 @@ const VEmptyState = vue.defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => this.$emit("input", event),
+            close: (event) => this.$emit("close", event)
           }
         },
         [
           this.$slots.default,
-          // @slot graphic The graphic slot allows overriding the icon with a custom illustration
+          // @slot graphic Use the graphic slot in order to replace the icon.
           handleNamedSlot("graphic", this.$slots["graphic"]),
-          // @slot action-items Slot to add action items to the empty state
+          // @slot body Use the body slot in order to add custom HTML to the dialog.
+          handleNamedSlot("body", this.$slots["body"]),
+          // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
+          handleNamedSlot("footer", this.$slots["footer"]),
+          // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
+          handleNamedSlot("main", this.$slots["main"]),
+          // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
           handleNamedSlot("action-items", this.$slots["action-items"])
         ]
       );
@@ -3594,39 +3665,44 @@ const VEmptyState = vue.defineComponent({
         ref: "element",
         class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.open !== void 0 ? { open: this.open } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
+        ...this.iconPlacement !== void 0 ? { "icon-placement": this.iconPlacement } : {},
+        ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
+        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.fullWidthBody !== void 0 ? { "full-width-body": this.fullWidthBody } : {},
+        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
+        ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+        ...this.noLightDismiss !== void 0 ? { "no-light-dismiss": this.noLightDismiss } : {},
         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),
+        onClose: (event) => this.$emit("close", event)
       },
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot graphic The graphic slot allows overriding the icon with a custom illustration
+        // @slot graphic Use the graphic slot in order to replace the icon.
         handleNamedSlot("graphic", this.$slots["graphic"]),
-        // @slot action-items Slot to add action items to the empty state
+        // @slot body Use the body slot in order to add custom HTML to the dialog.
+        handleNamedSlot("body", this.$slots["body"]),
+        // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
+        handleNamedSlot("footer", this.$slots["footer"]),
+        // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
+        handleNamedSlot("main", this.$slots["main"]),
+        // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
         handleNamedSlot("action-items", this.$slots["action-items"])
       ]
     );
   }
 });
 
-const VFab = vue.defineComponent({
-  name: "VFab",
+const VDivider = vue.defineComponent({
+  name: "VDivider",
   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 icon affix alignment.
-     */
-    iconTrailing: { type: Boolean, default: void 0 },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -3635,20 +3711,254 @@ const VFab = vue.defineComponent({
       default: void 0
     },
     /**
-     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     * The role of the element.
      */
-    disabled: { type: Boolean, default: void 0 },
+    role: {
+      type: String,
+      default: void 0
+    },
     /**
-     * The initial value of the form. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
+     * The orientation of the divider.
      */
-    value: { type: String, default: void 0 },
+    orientation: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
     /**
-     * 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.
+     * 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("divider", vivid.registerDivider);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+            ...this.role !== void 0 ? { role: this.role } : {},
+            ...this.orientation !== void 0 ? { orientation: this.orientation } : {}
+          },
+          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 vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.role !== void 0 ? { role: this.role } : {},
+        ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
+        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 VEmptyState = vue.defineComponent({
+  name: "VEmptyState",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * An optional headline for the empty state.
+     */
+    headline: { type: String, default: void 0 },
+    /**
+     * Icon for the empty state.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { 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("empty-state", vivid.registerEmptyState);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+            ...this.headline !== void 0 ? { headline: this.headline } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {}
+          },
+          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 graphic The graphic slot allows overriding the icon with a custom illustration
+          handleNamedSlot("graphic", this.$slots["graphic"]),
+          // @slot action-items Slot to add action items to the empty state
+          handleNamedSlot("action-items", this.$slots["action-items"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
+        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 graphic The graphic slot allows overriding the icon with a custom illustration
+        handleNamedSlot("graphic", this.$slots["graphic"]),
+        // @slot action-items Slot to add action items to the empty state
+        handleNamedSlot("action-items", this.$slots["action-items"])
+      ]
+    );
+  }
+});
+
+const VFab = vue.defineComponent({
+  name: "VFab",
+  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 icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    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 },
     /**
@@ -4634,6 +4944,13 @@ const VMenuItem = vue.defineComponent({
      * Indicates the menu item's secondary text.
      */
     textSecondary: { type: String, default: void 0 },
+    /**
+     * The connotation the fab should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
     /**
      * Controls the placement of the menu item's checkmark or radio icon.
      */
@@ -4714,6 +5031,7 @@ const VMenuItem = vue.defineComponent({
             ...this.modelValue !== void 0 ? { checked: this.modelValue } : {},
             ...this.text !== void 0 ? { text: this.text } : {},
             ...this.textSecondary !== void 0 ? { "text-secondary": this.textSecondary } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.checkTrailing !== void 0 ? { "check-trailing": this.checkTrailing } : {},
             ...this.checkAppearance !== void 0 ? { "check-appearance": this.checkAppearance } : {}
           },
@@ -4759,6 +5077,7 @@ const VMenuItem = vue.defineComponent({
         ...this.modelValue !== void 0 ? { checked: this.modelValue } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
         ...this.textSecondary !== void 0 ? { "text-secondary": this.textSecondary } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
         ...this.checkTrailing !== void 0 ? { "check-trailing": this.checkTrailing } : {},
         ...this.checkAppearance !== void 0 ? { "check-appearance": this.checkAppearance } : {},
         onClick: (event) => this.$emit("click", event),
@@ -6488,21 +6807,271 @@ const VRadioGroup = vue.defineComponent({
   }
 });
 
-const VSelect = vue.defineComponent({
-  name: "VSelect",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
+const VRangeSlider = vue.defineComponent({
+  name: "VRangeSlider",
   props: {
     /**
-     * The success text for the form element.
+     * The label for the form element.
      */
-    successText: { type: String, default: void 0 },
+    label: { type: String, default: void 0 },
     /**
-     * The error text for the form element.
+     * Indicates the element that represents the current item within a container or set of related elements.
      */
-    errorText: { type: String, default: void 0 },
+    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 },
+    /**
+     * 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 current start value of the element. This property serves as a mechanism
+     * to set the `start` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    start: { type: String, default: void 0 },
+    /**
+     * The current end value of the element. This property serves as a mechanism
+     * to set the `end` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    end: { type: String, default: void 0 },
+    /**
+     * The minimum value of the range.
+     */
+    min: { type: Number, default: void 0 },
+    /**
+     * The maximum value of the range.
+     */
+    max: { type: Number, default: void 0 },
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     */
+    step: { type: Number, default: void 0 },
+    /**
+     * The orientation of the slider.
+     */
+    orientation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Aria label for the start thumb
+     */
+    ariaStartLabel: { type: String, default: void 0 },
+    /**
+     * Aria label for the end thumb
+     */
+    ariaEndLabel: { type: String, default: void 0 },
+    /**
+     * Display markers on/off
+     */
+    markers: { type: Boolean, default: void 0 },
+    /**
+     * The connotation of the component
+     */
+    connotation: {
+      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",
+    /**
+     * Event emitted when the start value changes
+     * @type {unknown}
+     */
+    "input:start",
+    /**
+     * Event emitted when the end value changes
+     * @type {unknown}
+     */
+    "input:end",
+    /**
+     * Event emitted when the start value changes
+     * @type {string}
+     */
+    "update:start",
+    /**
+     * Event emitted when the end value changes
+     * @type {string}
+     */
+    "update:end"
+  ],
+  methods: {
+    formResetCallback() {
+      return this.element?.formResetCallback();
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "range-slider",
+      vivid.registerRangeSlider
+    );
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...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.start !== void 0 ? { "current-start": this.start } : {},
+            ...this.end !== void 0 ? { "current-end": this.end } : {},
+            ...this.min !== void 0 ? { min: this.min } : {},
+            ...this.max !== void 0 ? { max: this.max } : {},
+            ...this.step !== void 0 ? { step: this.step } : {},
+            ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
+            ...this.ariaStartLabel !== void 0 ? { "aria-start-label": this.ariaStartLabel } : {},
+            ...this.ariaEndLabel !== void 0 ? { "aria-end-label": this.ariaEndLabel } : {},
+            ...this.markers !== void 0 ? { markers: this.markers } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
+          },
+          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),
+            "input:start": (event) => {
+              this.$emit("update:start", event.target.start);
+              this.$emit("input:start", event);
+            },
+            "input:end": (event) => {
+              this.$emit("update:end", event.target.end);
+              this.$emit("input:end", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...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.start !== void 0 ? { "current-start": this.start } : {},
+        ...this.end !== void 0 ? { "current-end": this.end } : {},
+        ...this.min !== void 0 ? { min: this.min } : {},
+        ...this.max !== void 0 ? { max: this.max } : {},
+        ...this.step !== void 0 ? { step: this.step } : {},
+        ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
+        ...this.ariaStartLabel !== void 0 ? { "aria-start-label": this.ariaStartLabel } : {},
+        ...this.ariaEndLabel !== void 0 ? { "aria-end-label": this.ariaEndLabel } : {},
+        ...this.markers !== void 0 ? { markers: this.markers } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        onClick: (event) => this.$emit("click", event),
+        onFocus: (event) => this.$emit("focus", event),
+        onBlur: (event) => this.$emit("blur", event),
+        onKeydown: (event) => this.$emit("keydown", event),
+        onKeyup: (event) => this.$emit("keyup", event),
+        onInput: (event) => this.$emit("input", event),
+        "onInput:start": (event) => {
+          this.$emit("update:start", event.target.start);
+          this.$emit("input:start", event);
+        },
+        "onInput:end": (event) => {
+          this.$emit("update:end", event.target.end);
+          this.$emit("input:end", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VSelect = vue.defineComponent({
+  name: "VSelect",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    /**
+     * The success text for the form element.
+     */
+    successText: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
     /**
      * The helper text for the form element.
      */
@@ -8215,518 +8784,44 @@ const VTag = vue.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 } : {},
-        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 Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
-      ]
-    );
-  }
-});
-
-const VTagGroup = vue.defineComponent({
-  name: "VTagGroup",
-  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 }
-  },
-  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("tag-group", vivid.registerTagGroup);
-    const element = vue.ref(null);
-    return { componentName, element };
-  },
-  render() {
-    if (isVue2) {
-      return vue.h(
-        this.componentName,
-        {
-          ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {}
-          },
-          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 vue.h(
-      this.componentName,
-      {
-        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),
-        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 VTextArea = vue.defineComponent({
-  name: "VTextArea",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
-  props: {
-    /**
-     * The success text for the form element.
-     */
-    successText: { type: String, default: void 0 },
-    /**
-     * The helper text for the form element.
-     */
-    helperText: { type: String, default: void 0 },
-    /**
-     * Whether to show the character count.
-     */
-    charCount: { type: Boolean, default: void 0 },
-    /**
-     * The error text for the form element.
-     */
-    errorText: { type: String, default: void 0 },
-    /**
-     * The label for the form element.
-     */
-    label: { 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.
-     */
-    modelValue: { type: String, default: void 0 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { 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 },
-    /**
-     * The resize mode of the element.
-     */
-    resize: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Indicates that this element should get focus after the page finishes loading.
-     */
-    autofocus: { type: Boolean, default: void 0 },
-    /**
-     * The https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id | id of the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form | form the element is associated to
-     */
-    form: { type: String, default: void 0 },
-    /**
-     * Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
-     */
-    list: { type: String, default: void 0 },
-    /**
-     * The maximum number of characters a user can enter.
-     */
-    maxlength: { type: Number, default: void 0 },
-    /**
-     * The minimum number of characters a user can enter.
-     */
-    minlength: { type: Number, default: void 0 },
-    /**
-     * The name of the element.
-     */
-    name: { type: String, default: void 0 },
-    /**
-     * Sets the placeholder value of the element, generally used to provide a hint to the user.
-     */
-    placeholder: { type: String, default: void 0 },
-    /**
-     * Sizes the element horizontally by a number of character columns.
-     */
-    cols: { type: Number, default: void 0 },
-    /**
-     * Sizes the element vertically by a number of character rows.
-     */
-    rows: { type: Number, default: void 0 },
-    /**
-     * Sets if the element is eligible for spell checking
-     * but the UA.
-     */
-    spellcheck: { type: Boolean, default: void 0 },
-    /**
-     * The wrap attribute
-     */
-    wrap: {
-      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",
-    /**
-     * Emits a custom 'change' event when the textarea emits a change event
-     * @type {unknown}
-     */
-    "change",
-    /**
-     * Fires when the value of an element has been changed.
-     * @type {string}
-     */
-    "update:modelValue"
-  ],
-  methods: {
-    /**
-     * Selects all the text in the text area
-     */
-    select() {
-      return this.element?.select();
-    },
-    /**
-     * {@inheritDoc (FormAssociated:interface).validate}
-     */
-    validate() {
-      return this.element?.validate();
-    }
-  },
-  setup(props, ctx) {
-    const componentName = registerComponent("text-area", vivid.registerTextArea);
-    const element = vue.ref(null);
-    return { componentName, element };
-  },
-  render() {
-    if (isVue2) {
-      return vue.h(
-        this.componentName,
-        {
-          ref: "element",
-          attrs: {
-            ...this.successText !== void 0 ? { "success-text": this.successText } : {},
-            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
-            ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
-            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
-            ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.readOnly !== void 0 ? { readOnly: this.readOnly } : {},
-            ...this.resize !== void 0 ? { resize: this.resize } : {},
-            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-            ...this.form !== void 0 ? { form: this.form } : {},
-            ...this.list !== void 0 ? { list: this.list } : {},
-            ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
-            ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
-            ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
-            ...this.cols !== void 0 ? { cols: this.cols } : {},
-            ...this.rows !== void 0 ? { rows: this.rows } : {},
-            ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
-            ...this.wrap !== void 0 ? { wrap: this.wrap } : {}
-          },
-          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);
-            },
-            change: (event) => this.$emit("change", event)
-          }
-        },
-        [this.$slots.default]
-      );
-    }
-    return vue.h(
-      this.componentName,
-      {
-        ref: "element",
-        class: "vvd-component",
-        ...this.successText !== void 0 ? { "success-text": this.successText } : {},
-        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
-        ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
-        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
-        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-        ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
-        ...this.required !== void 0 ? { required: this.required } : {},
-        ...this.readOnly !== void 0 ? { readOnly: this.readOnly } : {},
-        ...this.resize !== void 0 ? { resize: this.resize } : {},
-        ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-        ...this.form !== void 0 ? { form: this.form } : {},
-        ...this.list !== void 0 ? { list: this.list } : {},
-        ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
-        ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
-        ...this.name !== void 0 ? { name: this.name } : {},
-        ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
-        ...this.cols !== void 0 ? { cols: this.cols } : {},
-        ...this.rows !== void 0 ? { rows: this.rows } : {},
-        ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
-        ...this.wrap !== void 0 ? { wrap: this.wrap } : {},
-        onClick: (event) => this.$emit("click", event),
-        onFocus: (event) => this.$emit("focus", event),
-        onBlur: (event) => this.$emit("blur", event),
-        onKeydown: (event) => this.$emit("keydown", event),
-        onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => {
-          this.$emit(
-            "update:modelValue",
-            event.target.value
-          );
-          this.$emit("input", event);
-        },
-        onChange: (event) => this.$emit("change", event)
-      },
-      [
-        // @ts-ignore
-        this.$slots.default && this.$slots.default()
-      ]
-    );
-  }
-});
-
-const VTextField = vue.defineComponent({
-  name: "VTextField",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
-  props: {
-    /**
-     * The success text for the form element.
-     */
-    successText: { type: String, default: void 0 },
-    /**
-     * The helper text for the form element.
-     */
-    helperText: { type: String, default: void 0 },
-    /**
-     * Whether to show the character count.
-     */
-    charCount: { type: Boolean, default: void 0 },
-    /**
-     * 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 },
-    /**
-     * 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
-    },
-    /**
-     * 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.
-     */
-    modelValue: { type: String, default: void 0 },
-    /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     */
-    name: { type: String, default: void 0 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { type: Boolean, default: void 0 },
-    /**
-     * 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 that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information.
-     */
-    autofocus: { type: Boolean, default: void 0 },
-    /**
-     * Sets the placeholder value of the element, generally used to provide a hint to the user.
-     */
-    placeholder: { type: String, default: void 0 },
-    /**
-     * Allows setting a type or mode of text.
-     */
-    type: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
-     */
-    list: { type: String, default: void 0 },
-    /**
-     * The maximum number of characters a user can enter.
-     */
-    maxlength: { type: Number, default: void 0 },
-    /**
-     * The minimum number of characters a user can enter.
-     */
-    minlength: { type: Number, default: void 0 },
-    /**
-     * A regular expression that the value must match to pass validation.
-     */
-    pattern: { type: String, default: void 0 },
-    /**
-     * Sets the width of the element to a specified number of characters.
-     */
-    size: { type: Number, default: void 0 },
+        ...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 } : {},
+        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 Add an icon to the component.
+        handleNamedSlot("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+
+const VTagGroup = vue.defineComponent({
+  name: "VTagGroup",
+  props: {
     /**
-     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * Indicates the element that represents the current item within a container or set of related elements.
      */
-    spellcheck: { type: Boolean, default: void 0 },
-    appearance: {
+    ariaCurrent: {
       type: String,
       default: void 0
     },
-    shape: { type: String, default: void 0 },
-    autoComplete: { type: String, default: void 0 }
+    ariaLabel: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -8758,37 +8853,11 @@ const VTextField = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input",
-    /**
-     * Fires a custom 'change' event when the value has changed
-     * @type {unknown}
-     */
-    "change",
-    /**
-     * Fires when the value of an element has been changed.
-     * @type {string}
-     */
-    "update:modelValue"
+    "input"
   ],
-  methods: {
-    /**
-     * Selects all the text in the text field
-     */
-    select() {
-      return this.element?.select();
-    },
-    /**
-     * {@inheritDoc (FormAssociated:interface).validate}
-     */
-    validate() {
-      return this.element?.validate();
-    },
-    focus() {
-      return this.element?.focus();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("text-field", vivid.registerTextField);
+    const componentName = registerComponent("tag-group", vivid.registerTagGroup);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -8799,31 +8868,8 @@ const VTextField = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.successText !== void 0 ? { "success-text": this.successText } : {},
-            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
-            ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.value !== void 0 ? { value: this.value } : {},
-            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
-            ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-            ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
-            ...this.type !== void 0 ? { type: this.type } : {},
-            ...this.list !== void 0 ? { list: this.list } : {},
-            ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
-            ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
-            ...this.pattern !== void 0 ? { pattern: this.pattern } : {},
-            ...this.size !== void 0 ? { size: this.size } : {},
-            ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
-            ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
+            ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {}
           },
           class: "vvd-component",
           on: {
@@ -8832,26 +8878,10 @@ const VTextField = vue.defineComponent({
             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);
-            },
-            change: (event) => this.$emit("change", event)
+            input: (event) => this.$emit("input", event)
           }
         },
-        [
-          this.$slots.default,
-          // @slot leading-action-items Used to add action items to the start of the text-field.
-          handleNamedSlot(
-            "leading-action-items",
-            this.$slots["leading-action-items"]
-          ),
-          // @slot action-items Used to add action items to the end of the text-field.
-          handleNamedSlot("action-items", this.$slots["action-items"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -8859,79 +8889,50 @@ const VTextField = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.successText !== void 0 ? { "success-text": this.successText } : {},
-        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
-        ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
-        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
-        ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-        ...this.value !== void 0 ? { value: this.value } : {},
-        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
-        ...this.name !== void 0 ? { name: this.name } : {},
-        ...this.required !== void 0 ? { required: this.required } : {},
-        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-        ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-        ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
-        ...this.type !== void 0 ? { type: this.type } : {},
-        ...this.list !== void 0 ? { list: this.list } : {},
-        ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
-        ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
-        ...this.pattern !== void 0 ? { pattern: this.pattern } : {},
-        ...this.size !== void 0 ? { size: this.size } : {},
-        ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
-        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-        ...this.shape !== void 0 ? { shape: this.shape } : {},
-        ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {},
+        ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => {
-          this.$emit(
-            "update:modelValue",
-            event.target.value
-          );
-          this.$emit("input", event);
-        },
-        onChange: (event) => this.$emit("change", event)
+        onInput: (event) => this.$emit("input", event)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot leading-action-items Used to add action items to the start of the text-field.
-        handleNamedSlot(
-          "leading-action-items",
-          this.$slots["leading-action-items"]
-        ),
-        // @slot action-items Used to add action items to the end of the text-field.
-        handleNamedSlot("action-items", this.$slots["action-items"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
 
-const VTimePicker = vue.defineComponent({
-  name: "VTimePicker",
+const VTextArea = vue.defineComponent({
+  name: "VTextArea",
   model: isVue2 ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
   props: {
+    /**
+     * The success text for the form element.
+     */
+    successText: { type: String, default: void 0 },
     /**
      * The helper text for the form element.
      */
     helperText: { type: String, default: void 0 },
     /**
-     * The label for the form element.
+     * Whether to show the character count.
      */
-    label: { type: String, default: void 0 },
+    charCount: { type: Boolean, default: void 0 },
     /**
      * The error text for the form element.
      */
     errorText: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -8956,38 +8957,69 @@ const VTimePicker = vue.defineComponent({
      * and don't support IDL attribute binding.
      */
     modelValue: { type: String, default: void 0 },
-    /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     */
-    name: { type: String, default: void 0 },
     /**
      * Require the field to be completed prior to form submission.
      */
     required: { type: Boolean, default: void 0 },
     /**
-     * Whether the time-picker is readonly.
+     * 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 },
+    readOnly: { type: Boolean, default: void 0 },
     /**
-     * Distance between presented minute options.
+     * The resize mode of the element.
      */
-    minutesStep: { type: Number, default: void 0 },
+    resize: {
+      type: String,
+      default: void 0
+    },
     /**
-     * Distance between presented seconds options. If null, seconds are not presented.
+     * Indicates that this element should get focus after the page finishes loading.
      */
-    secondsStep: { type: Number, default: void 0 },
+    autofocus: { type: Boolean, default: void 0 },
     /**
-     * Forces the time-picker to use a 12h or 24h clock.
+     * The https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id | id of the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form | form the element is associated to
      */
-    clock: { type: String, default: void 0 },
+    form: { type: String, default: void 0 },
     /**
-     * The earliest accepted time of the time-picker.
+     * Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
      */
-    min: { type: String, default: void 0 },
+    list: { type: String, default: void 0 },
     /**
-     * The latest accepted time of the time-picker.
+     * The maximum number of characters a user can enter.
      */
-    max: { type: String, default: void 0 }
+    maxlength: { type: Number, default: void 0 },
+    /**
+     * The minimum number of characters a user can enter.
+     */
+    minlength: { type: Number, default: void 0 },
+    /**
+     * The name of the element.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     */
+    placeholder: { type: String, default: void 0 },
+    /**
+     * Sizes the element horizontally by a number of character columns.
+     */
+    cols: { type: Number, default: void 0 },
+    /**
+     * Sizes the element vertically by a number of character rows.
+     */
+    rows: { type: Number, default: void 0 },
+    /**
+     * Sets if the element is eligible for spell checking
+     * but the UA.
+     */
+    spellcheck: { type: Boolean, default: void 0 },
+    /**
+     * The wrap attribute
+     */
+    wrap: {
+      type: String,
+      default: void 0
+    }
   },
   emits: [
     /**
@@ -9021,7 +9053,7 @@ const VTimePicker = vue.defineComponent({
      */
     "input",
     /**
-     * Emitted when the time is changed by the user.
+     * Emits a custom 'change' event when the textarea emits a change event
      * @type {unknown}
      */
     "change",
@@ -9031,9 +9063,22 @@ const VTimePicker = vue.defineComponent({
      */
     "update:modelValue"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Selects all the text in the text area
+     */
+    select() {
+      return this.element?.select();
+    },
+    /**
+     * {@inheritDoc (FormAssociated:interface).validate}
+     */
+    validate() {
+      return this.element?.validate();
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("time-picker", vivid.registerTimePicker);
+    const componentName = registerComponent("text-area", vivid.registerTextArea);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9044,21 +9089,29 @@ const VTimePicker = vue.defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.successText !== void 0 ? { "success-text": this.successText } : {},
             ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.value !== void 0 ? { value: this.value } : {},
             ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
             ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-            ...this.minutesStep !== void 0 ? { "minutes-step": this.minutesStep } : {},
-            ...this.secondsStep !== void 0 ? { "seconds-step": this.secondsStep } : {},
-            ...this.clock !== void 0 ? { clock: this.clock } : {},
-            ...this.min !== void 0 ? { min: this.min } : {},
-            ...this.max !== void 0 ? { max: this.max } : {}
+            ...this.readOnly !== void 0 ? { readOnly: this.readOnly } : {},
+            ...this.resize !== void 0 ? { resize: this.resize } : {},
+            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
+            ...this.form !== void 0 ? { form: this.form } : {},
+            ...this.list !== void 0 ? { list: this.list } : {},
+            ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
+            ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
+            ...this.cols !== void 0 ? { cols: this.cols } : {},
+            ...this.rows !== void 0 ? { rows: this.rows } : {},
+            ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
+            ...this.wrap !== void 0 ? { wrap: this.wrap } : {}
           },
           class: "vvd-component",
           on: {
@@ -9085,21 +9138,29 @@ const VTimePicker = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
+        ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
         ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
-        ...this.name !== void 0 ? { name: this.name } : {},
         ...this.required !== void 0 ? { required: this.required } : {},
-        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-        ...this.minutesStep !== void 0 ? { "minutes-step": this.minutesStep } : {},
-        ...this.secondsStep !== void 0 ? { "seconds-step": this.secondsStep } : {},
-        ...this.clock !== void 0 ? { clock: this.clock } : {},
-        ...this.min !== void 0 ? { min: this.min } : {},
-        ...this.max !== void 0 ? { max: this.max } : {},
+        ...this.readOnly !== void 0 ? { readOnly: this.readOnly } : {},
+        ...this.resize !== void 0 ? { resize: this.resize } : {},
+        ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
+        ...this.form !== void 0 ? { form: this.form } : {},
+        ...this.list !== void 0 ? { list: this.list } : {},
+        ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
+        ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
+        ...this.cols !== void 0 ? { cols: this.cols } : {},
+        ...this.rows !== void 0 ? { rows: this.rows } : {},
+        ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
+        ...this.wrap !== void 0 ? { wrap: this.wrap } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -9122,16 +9183,38 @@ const VTimePicker = vue.defineComponent({
   }
 });
 
-const VToggletip = vue.defineComponent({
-  name: "VToggletip",
+const VTextField = vue.defineComponent({
+  name: "VTextField",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
   props: {
     /**
-     * ID or direct reference to the component's anchor element.
+     * The success text for the form element.
      */
-    anchor: {
-      type: [String, HTMLElement],
-      default: void 0
-    },
+    successText: { type: String, default: void 0 },
+    /**
+     * The helper text for the form element.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * Whether to show the character count.
+     */
+    charCount: { type: Boolean, default: void 0 },
+    /**
+     * 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 },
+    /**
+     * 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.
      */
@@ -9140,24 +9223,79 @@ const VToggletip = vue.defineComponent({
       default: void 0
     },
     /**
-     * the optional title of the toggletip
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
-    headline: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
     /**
-     * toggle color scheme
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
      */
-    alternate: { type: Boolean, default: void 0 },
+    value: { type: String, default: void 0 },
     /**
-     * placement of the toggletip
+     * 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.
      */
-    placement: {
+    modelValue: { type: String, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * 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 that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information.
+     */
+    autofocus: { type: Boolean, default: void 0 },
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     */
+    placeholder: { type: String, default: void 0 },
+    /**
+     * Allows setting a type or mode of text.
+     */
+    type: {
       type: String,
       default: void 0
     },
     /**
-     * indicates whether the toggletip is open
+     * Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
      */
-    open: { type: Boolean, default: void 0 }
+    list: { type: String, default: void 0 },
+    /**
+     * The maximum number of characters a user can enter.
+     */
+    maxlength: { type: Number, default: void 0 },
+    /**
+     * The minimum number of characters a user can enter.
+     */
+    minlength: { type: Number, default: void 0 },
+    /**
+     * A regular expression that the value must match to pass validation.
+     */
+    pattern: { type: String, default: void 0 },
+    /**
+     * Sets the width of the element to a specified number of characters.
+     */
+    size: { type: Number, default: void 0 },
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     */
+    spellcheck: { type: Boolean, default: void 0 },
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    shape: { type: String, default: void 0 },
+    autoComplete: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -9189,15 +9327,37 @@ const VToggletip = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fires a custom 'change' event when the value has changed
+     * @type {unknown}
+     */
+    "change",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {string}
+     */
+    "update:modelValue"
   ],
   methods: {
-    openChanged(oldValue, newValue) {
-      return this.element?.openChanged(oldValue, newValue);
+    /**
+     * Selects all the text in the text field
+     */
+    select() {
+      return this.element?.select();
+    },
+    /**
+     * {@inheritDoc (FormAssociated:interface).validate}
+     */
+    validate() {
+      return this.element?.validate();
+    },
+    focus() {
+      return this.element?.focus();
     }
   },
   setup(props, ctx) {
-    const componentName = registerComponent("toggletip", vivid.registerToggletip);
+    const componentName = registerComponent("text-field", vivid.registerTextField);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9208,30 +9368,57 @@ const VToggletip = vue.defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+            ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.headline !== void 0 ? { headline: this.headline } : {},
-            ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-            ...this.placement !== void 0 ? { placement: this.placement } : {},
-            ...this.open !== void 0 ? { open: this.open } : {}
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.value !== void 0 ? { value: this.value } : {},
+            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
+            ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
+            ...this.type !== void 0 ? { type: this.type } : {},
+            ...this.list !== void 0 ? { list: this.list } : {},
+            ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
+            ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
+            ...this.pattern !== void 0 ? { pattern: this.pattern } : {},
+            ...this.size !== void 0 ? { size: this.size } : {},
+            ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
+            ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
           },
           class: "vvd-component",
-          domProps: {
-            ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
-          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => {
+              this.$emit(
+                "update:modelValue",
+                event.target.value
+              );
+              this.$emit("input", event);
+            },
+            change: (event) => this.$emit("change", event)
           }
         },
         [
           this.$slots.default,
-          // @slot anchor Used to set the anchor element for the toggletip.
-          handleNamedSlot("anchor", this.$slots["anchor"]),
-          // @slot action-items The content to display in the toggletip action items.
+          // @slot leading-action-items Used to add action items to the start of the text-field.
+          handleNamedSlot(
+            "leading-action-items",
+            this.$slots["leading-action-items"]
+          ),
+          // @slot action-items Used to add action items to the end of the text-field.
           handleNamedSlot("action-items", this.$slots["action-items"])
         ]
       );
@@ -9241,41 +9428,79 @@ const VToggletip = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
+        ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+        ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.headline !== void 0 ? { headline: this.headline } : {},
-        ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-        ...this.placement !== void 0 ? { placement: this.placement } : {},
-        ...this.open !== void 0 ? { open: this.open } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.value !== void 0 ? { value: this.value } : {},
+        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+        ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
+        ...this.placeholder !== void 0 ? { placeholder: this.placeholder } : {},
+        ...this.type !== void 0 ? { type: this.type } : {},
+        ...this.list !== void 0 ? { list: this.list } : {},
+        ...this.maxlength !== void 0 ? { maxlength: this.maxlength } : {},
+        ...this.minlength !== void 0 ? { minlength: this.minlength } : {},
+        ...this.pattern !== void 0 ? { pattern: this.pattern } : {},
+        ...this.size !== void 0 ? { size: this.size } : {},
+        ...this.spellcheck !== void 0 ? { spellcheck: this.spellcheck } : {},
+        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+        ...this.shape !== void 0 ? { shape: this.shape } : {},
+        ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event)
+        onInput: (event) => {
+          this.$emit(
+            "update:modelValue",
+            event.target.value
+          );
+          this.$emit("input", event);
+        },
+        onChange: (event) => this.$emit("change", event)
       },
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot anchor Used to set the anchor element for the toggletip.
-        handleNamedSlot("anchor", this.$slots["anchor"]),
-        // @slot action-items The content to display in the toggletip action items.
+        // @slot leading-action-items Used to add action items to the start of the text-field.
+        handleNamedSlot(
+          "leading-action-items",
+          this.$slots["leading-action-items"]
+        ),
+        // @slot action-items Used to add action items to the end of the text-field.
         handleNamedSlot("action-items", this.$slots["action-items"])
       ]
     );
   }
 });
 
-const VTooltip = vue.defineComponent({
-  name: "VTooltip",
+const VTimePicker = vue.defineComponent({
+  name: "VTimePicker",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
   props: {
     /**
-     * ID or direct reference to the component's anchor element.
+     * The helper text for the form element.
      */
-    anchor: {
-      type: [String, HTMLElement],
-      default: void 0
-    },
+    helperText: { type: String, default: void 0 },
+    /**
+     * 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.
      */
@@ -9284,15 +9509,54 @@ const VTooltip = vue.defineComponent({
       default: void 0
     },
     /**
-     * the text of the tooltip
-     * accepts string
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
-    text: { type: String, default: void 0 },
-    placement: {
-      type: String,
-      default: void 0
-    },
-    open: { type: Boolean, default: void 0 }
+    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.
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * Whether the time-picker is readonly.
+     */
+    readonly: { type: Boolean, default: void 0 },
+    /**
+     * Distance between presented minute options.
+     */
+    minutesStep: { type: Number, default: void 0 },
+    /**
+     * Distance between presented seconds options. If null, seconds are not presented.
+     */
+    secondsStep: { type: Number, default: void 0 },
+    /**
+     * Forces the time-picker to use a 12h or 24h clock.
+     */
+    clock: { type: String, default: void 0 },
+    /**
+     * The earliest accepted time of the time-picker.
+     */
+    min: { type: String, default: void 0 },
+    /**
+     * The latest accepted time of the time-picker.
+     */
+    max: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -9324,11 +9588,21 @@ const VTooltip = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Emitted when the time is changed by the user.
+     * @type {unknown}
+     */
+    "change",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {string}
+     */
+    "update:modelValue"
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tooltip", vivid.registerTooltip);
+    const componentName = registerComponent("time-picker", vivid.registerTimePicker);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9339,29 +9613,40 @@ const VTooltip = vue.defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.text !== void 0 ? { text: this.text } : {},
-            ...this.placement !== void 0 ? { placement: this.placement } : {},
-            ...this.open !== void 0 ? { open: this.open } : {}
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.value !== void 0 ? { value: this.value } : {},
+            ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+            ...this.minutesStep !== void 0 ? { "minutes-step": this.minutesStep } : {},
+            ...this.secondsStep !== void 0 ? { "seconds-step": this.secondsStep } : {},
+            ...this.clock !== void 0 ? { clock: this.clock } : {},
+            ...this.min !== void 0 ? { min: this.min } : {},
+            ...this.max !== void 0 ? { max: this.max } : {}
           },
           class: "vvd-component",
-          domProps: {
-            ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
-          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event)
+            input: (event) => {
+              this.$emit(
+                "update:modelValue",
+                event.target.value
+              );
+              this.$emit("input", event);
+            },
+            change: (event) => this.$emit("change", event)
           }
         },
-        [
-          this.$slots.default,
-          // @slot anchor Used to set the anchor element for the tooltip.
-          handleNamedSlot("anchor", this.$slots["anchor"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -9369,36 +9654,53 @@ const VTooltip = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
+        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.text !== void 0 ? { text: this.text } : {},
-        ...this.placement !== void 0 ? { placement: this.placement } : {},
-        ...this.open !== void 0 ? { open: this.open } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.value !== void 0 ? { value: this.value } : {},
+        ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...this.required !== void 0 ? { required: this.required } : {},
+        ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+        ...this.minutesStep !== void 0 ? { "minutes-step": this.minutesStep } : {},
+        ...this.secondsStep !== void 0 ? { "seconds-step": this.secondsStep } : {},
+        ...this.clock !== void 0 ? { clock: this.clock } : {},
+        ...this.min !== void 0 ? { min: this.min } : {},
+        ...this.max !== void 0 ? { max: this.max } : {},
         onClick: (event) => this.$emit("click", event),
         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(
+            "update:modelValue",
+            event.target.value
+          );
+          this.$emit("input", event);
+        },
+        onChange: (event) => this.$emit("change", event)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot anchor Used to set the anchor element for the tooltip.
-        handleNamedSlot("anchor", this.$slots["anchor"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
 
-const VTreeItem = vue.defineComponent({
-  name: "VTreeItem",
+const VToggletip = vue.defineComponent({
+  name: "VToggletip",
   props: {
     /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     * ID or direct reference to the component's anchor element.
      */
-    icon: { type: String, default: void 0 },
+    anchor: {
+      type: [String, HTMLElement],
+      default: void 0
+    },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -9407,21 +9709,24 @@ const VTreeItem = vue.defineComponent({
       default: void 0
     },
     /**
-     * When true, the control will be appear expanded by user interaction.
+     * the optional title of the toggletip
      */
-    expanded: { type: Boolean, default: void 0 },
+    headline: { type: String, default: void 0 },
     /**
-     * When true, the control will appear selected by user interaction.
+     * toggle color scheme
      */
-    selected: { type: Boolean, default: void 0 },
+    alternate: { 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/disabled | disabled HTML attribute for more information.
+     * placement of the toggletip
      */
-    disabled: { type: Boolean, default: void 0 },
+    placement: {
+      type: String,
+      default: void 0
+    },
     /**
-     * Indicates the text's text.
+     * indicates whether the toggletip is open
      */
-    text: { type: String, default: void 0 }
+    open: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -9453,21 +9758,15 @@ const VTreeItem = vue.defineComponent({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input",
-    /**
-     * Fires a custom 'expanded-change' event when the expanded state changes
-     * @type {unknown}
-     */
-    "expanded-change",
-    /**
-     * Fires a custom 'selected-change' event when the selected state changes
-     * @type {unknown}
-     */
-    "selected-change"
+    "input"
   ],
-  methods: {},
+  methods: {
+    openChanged(oldValue, newValue) {
+      return this.element?.openChanged(oldValue, newValue);
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("tree-item", vivid.registerTreeItem);
+    const componentName = registerComponent("toggletip", vivid.registerToggletip);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9478,31 +9777,31 @@ const VTreeItem = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
-            ...this.selected !== void 0 ? { selected: this.selected } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.text !== void 0 ? { text: this.text } : {}
+            ...this.headline !== void 0 ? { headline: this.headline } : {},
+            ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+            ...this.placement !== void 0 ? { placement: this.placement } : {},
+            ...this.open !== void 0 ? { open: this.open } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            "expanded-change": (event) => this.$emit("expanded-change", event),
-            "selected-change": (event) => this.$emit("selected-change", event)
+            input: (event) => this.$emit("input", event)
           }
         },
-        [
-          this.$slots.default,
-          // @slot item To specify a child tree item.
-          handleNamedSlot("item", this.$slots["item"]),
-          // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+        [
+          this.$slots.default,
+          // @slot anchor Used to set the anchor element for the toggletip.
+          handleNamedSlot("anchor", this.$slots["anchor"]),
+          // @slot action-items The content to display in the toggletip action items.
+          handleNamedSlot("action-items", this.$slots["action-items"])
         ]
       );
     }
@@ -9511,36 +9810,41 @@ const VTreeItem = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.icon !== void 0 ? { icon: this.icon } : {},
+        ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
-        ...this.selected !== void 0 ? { selected: this.selected } : {},
-        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-        ...this.text !== void 0 ? { text: this.text } : {},
+        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+        ...this.placement !== void 0 ? { placement: this.placement } : {},
+        ...this.open !== void 0 ? { open: this.open } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onExpandedChange: (event) => this.$emit("expanded-change", event),
-        onSelectedChange: (event) => this.$emit("selected-change", event)
+        onInput: (event) => this.$emit("input", event)
       },
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot item To specify a child tree item.
-        handleNamedSlot("item", this.$slots["item"]),
-        // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        // @slot anchor Used to set the anchor element for the toggletip.
+        handleNamedSlot("anchor", this.$slots["anchor"]),
+        // @slot action-items The content to display in the toggletip action items.
+        handleNamedSlot("action-items", this.$slots["action-items"])
       ]
     );
   }
 });
 
-const VTreeView = vue.defineComponent({
-  name: "VTreeView",
+const VTooltip = vue.defineComponent({
+  name: "VTooltip",
   props: {
+    /**
+     * ID or direct reference to the component's anchor element.
+     */
+    anchor: {
+      type: [String, HTMLElement],
+      default: void 0
+    },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -9549,13 +9853,15 @@ const VTreeView = vue.defineComponent({
       default: void 0
     },
     /**
-     * /**
-     *   When true, the control will be appear expanded by user interaction.
+     * the text of the tooltip
+     * accepts string
      */
-    renderCollapsedNodes: {
-      type: Boolean,
+    text: { type: String, default: void 0 },
+    placement: {
+      type: String,
       default: void 0
-    }
+    },
+    open: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -9591,7 +9897,7 @@ const VTreeView = vue.defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tree-view", vivid.registerTreeView);
+    const componentName = registerComponent("tooltip", vivid.registerTooltip);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9603,9 +9909,14 @@ const VTreeView = vue.defineComponent({
           ref: "element",
           attrs: {
             ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-            ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {}
+            ...this.text !== void 0 ? { text: this.text } : {},
+            ...this.placement !== void 0 ? { placement: this.placement } : {},
+            ...this.open !== void 0 ? { open: this.open } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
+          },
           on: {
             click: (event) => this.$emit("click", event),
             focus: (event) => this.$emit("focus", event),
@@ -9615,7 +9926,11 @@ const VTreeView = vue.defineComponent({
             input: (event) => this.$emit("input", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot anchor Used to set the anchor element for the tooltip.
+          handleNamedSlot("anchor", this.$slots["anchor"])
+        ]
       );
     }
     return vue.h(
@@ -9623,8 +9938,11 @@ const VTreeView = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
+        ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {},
+        ...this.text !== void 0 ? { text: this.text } : {},
+        ...this.placement !== void 0 ? { placement: this.placement } : {},
+        ...this.open !== void 0 ? { open: this.open } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
@@ -9634,15 +9952,22 @@ const VTreeView = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot anchor Used to set the anchor element for the tooltip.
+        handleNamedSlot("anchor", this.$slots["anchor"])
       ]
     );
   }
 });
 
-const VDataGridRow = vue.defineComponent({
-  name: "VDataGridRow",
+const VTreeItem = vue.defineComponent({
+  name: "VTreeItem",
   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.
      */
@@ -9651,23 +9976,21 @@ const VDataGridRow = vue.defineComponent({
       default: void 0
     },
     /**
-     * String that gets applied to the the css gridTemplateColumns attribute for the row
+     * When true, the control will be appear expanded by user interaction.
      */
-    gridTemplateColumns: {
-      type: String,
-      default: void 0
-    },
+    expanded: { type: Boolean, default: void 0 },
     /**
-     * The type of row
+     * When true, the control will appear selected by user interaction.
      */
-    rowType: {
-      type: String,
-      default: void 0
-    },
+    selected: { type: Boolean, default: void 0 },
     /**
-     * Indicates the selected status.
+     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.
      */
-    ariaSelected: { type: String, default: void 0 }
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the text's text.
+     */
+    text: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -9701,29 +10024,19 @@ const VDataGridRow = vue.defineComponent({
      */
     "input",
     /**
-     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+     * Fires a custom 'expanded-change' event when the expanded state changes
      * @type {unknown}
      */
-    "row-focused",
+    "expanded-change",
     /**
-     * Event that fires when a cell is clicked
+     * Fires a custom 'selected-change' event when the selected state changes
      * @type {unknown}
      */
-    "cell-click"
+    "selected-change"
   ],
-  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", vivid.registerDataGrid);
+    const componentName = registerComponent("tree-item", vivid.registerTreeItem);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9734,10 +10047,12 @@ const VDataGridRow = vue.defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...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.expanded !== void 0 ? { expanded: this.expanded } : {},
+            ...this.selected !== void 0 ? { selected: this.selected } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.text !== void 0 ? { text: this.text } : {}
           },
           class: "vvd-component",
           on: {
@@ -9747,11 +10062,17 @@ const VDataGridRow = vue.defineComponent({
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
             input: (event) => this.$emit("input", event),
-            "row-focused": (event) => this.$emit("row-focused", event),
-            "cell-click": (event) => this.$emit("cell-click", event)
+            "expanded-change": (event) => this.$emit("expanded-change", event),
+            "selected-change": (event) => this.$emit("selected-change", event)
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot item To specify a child tree item.
+          handleNamedSlot("item", this.$slots["item"]),
+          // @slot icon Add an icon to the component.
+          handleNamedSlot("icon", this.$slots["icon"])
+        ]
       );
     }
     return vue.h(
@@ -9759,37 +10080,36 @@ const VDataGridRow = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...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.expanded !== void 0 ? { expanded: this.expanded } : {},
+        ...this.selected !== void 0 ? { selected: this.selected } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.text !== void 0 ? { text: this.text } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
         onInput: (event) => this.$emit("input", event),
-        onRowFocused: (event) => this.$emit("row-focused", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
+        onExpandedChange: (event) => this.$emit("expanded-change", event),
+        onSelectedChange: (event) => this.$emit("selected-change", event)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot item To specify a child tree item.
+        handleNamedSlot("item", this.$slots["item"]),
+        // @slot icon Add an icon to the component.
+        handleNamedSlot("icon", this.$slots["icon"])
       ]
     );
   }
 });
 
-const VDataGridCell = vue.defineComponent({
-  name: "VDataGridCell",
+const VTreeView = vue.defineComponent({
+  name: "VTreeView",
   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.
      */
@@ -9798,26 +10118,13 @@ const VDataGridCell = vue.defineComponent({
       default: void 0
     },
     /**
-     * The type of cell
+     * /**
+     *   When true, the control will be appear expanded by user interaction.
      */
-    cellType: {
-      type: String,
+    renderCollapsedNodes: {
+      type: Boolean,
       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: [
     /**
@@ -9849,39 +10156,11 @@ const VDataGridCell = vue.defineComponent({
      * 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"
+    "input"
   ],
-  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);
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("data-grid-cell", vivid.registerDataGrid);
+    const componentName = registerComponent("tree-view", vivid.registerTreeView);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -9892,12 +10171,8 @@ const VDataGridCell = vue.defineComponent({
         {
           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 } : {}
+            ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {}
           },
           class: "vvd-component",
           on: {
@@ -9906,10 +10181,7 @@ const VDataGridCell = vue.defineComponent({
             blur: (event) => this.$emit("blur", event),
             keydown: (event) => this.$emit("keydown", event),
             keyup: (event) => this.$emit("keyup", event),
-            input: (event) => this.$emit("input", event),
-            "cell-focused": (event) => this.$emit("cell-focused", event),
-            sort: (event) => this.$emit("sort", event),
-            "cell-click": (event) => this.$emit("cell-click", event)
+            input: (event) => this.$emit("input", event)
           }
         },
         [this.$slots.default]
@@ -9920,21 +10192,14 @@ const VDataGridCell = vue.defineComponent({
       {
         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 } : {},
+        ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {},
         onClick: (event) => this.$emit("click", event),
         onFocus: (event) => this.$emit("focus", event),
         onBlur: (event) => this.$emit("blur", event),
         onKeydown: (event) => this.$emit("keydown", event),
         onKeyup: (event) => this.$emit("keyup", event),
-        onInput: (event) => this.$emit("input", event),
-        onCellFocused: (event) => this.$emit("cell-focused", event),
-        onSort: (event) => this.$emit("sort", event),
-        onCellClick: (event) => this.$emit("cell-click", event)
+        onInput: (event) => this.$emit("input", event)
       },
       [
         // @ts-ignore
@@ -11146,17 +11411,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 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, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n}\n";
 
-const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 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, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 20 Mar 2024 10:23:28 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n}\n";
 
-const 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 fontsSpeziaVariableCss = "@font-face {\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n}\n";
 
-const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 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, 20 Mar 2024 10:23:28 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
 
-const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 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, 20 Mar 2024 10:23:28 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Mon, 26 Feb 2024 10:33:29 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, 20 Mar 2024 10:23:28 GMT\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n";
 
 const theme = {
   name: "core/theme",
@@ -11297,6 +11562,7 @@ exports.VProgress = VProgress;
 exports.VProgressRing = VProgressRing;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
+exports.VRangeSlider = VRangeSlider;
 exports.VSelect = VSelect;
 exports.VSelectableBox = VSelectableBox;
 exports.VSideDrawer = VSideDrawer;