@vonage/vivid-vue 5.8.0 → 5.10.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ref, version, onBeforeMount, defineComponent, h } from 'vue';
-import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
+import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerCountry, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerStatus, registerSwitch, registerTab, registerTabPanel, registerTable, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
 
 const CustomComponentPrefix = ref("vvd3");
 function setCustomComponentPrefix(prefix) {
@@ -165,7 +165,7 @@ const VAccordion = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -178,10 +178,15 @@ function handleNamedSlotV2(slot, children) {
   }
   for (const [index, child] of children.entries()) {
     if (isTextNode(child)) {
-      children[index] = h("span", { attrs: { slot } }, child.text);
+      children[index] = h(
+        "span",
+        { attrs: { slot, key: `${slot}-${index}` } },
+        child.text
+      );
     } else {
       if (!child.data) child.data = {};
       child.data.attrs = { ...child.data?.attrs, slot };
+      child.data.key = `${slot}-${index}`;
     }
   }
   return children;
@@ -190,28 +195,38 @@ const fragmentSymbol = Symbol.for("v-fgt");
 const textSymbol = Symbol.for("v-txt");
 const isVNodeV3 = (node) => typeof node === "object" && node !== null && !(node instanceof Array);
 function handleSlottedChildrenV3(slot, children) {
-  if (Array.isArray(children)) {
-    for (const [index, child] of children.entries()) {
-      if (!isVNodeV3(child)) {
-        continue;
-      }
-      if (child.type === fragmentSymbol) {
-        handleSlottedChildrenV3(slot, child.children);
-      } else if (child.type === textSymbol) {
-        children[index] = h("span", { slot }, child.children);
-      } else {
-        if (!child.props) child.props = {};
-        child.props = { ...child.props, slot };
+  let keyIndex = 0;
+  function handleChildren(slot2, children2) {
+    if (Array.isArray(children2)) {
+      for (const [index, child] of children2.entries()) {
+        if (!isVNodeV3(child)) {
+          continue;
+        }
+        if (child.type === fragmentSymbol) {
+          handleChildren(slot2, child.children);
+        } else if (child.type === textSymbol) {
+          children2[index] = h(
+            "span",
+            { slot: slot2, key: `${slot2}-${keyIndex++}` },
+            // @ts-ignore
+            child.children
+          );
+        } else {
+          if (!child.props) child.props = {};
+          child.props = { ...child.props, slot: slot2 };
+          child.key = `${slot2}-${keyIndex++}`;
+        }
       }
     }
+    return children2;
   }
-  return children;
+  return handleChildren(slot, children);
 }
 function handleNamedSlotV3(slot, children) {
   if (!children) {
     return null;
   }
-  return handleSlottedChildrenV3(slot, children());
+  return handleSlottedChildrenV3(slot, children);
 }
 
 const VAccordionItem = defineComponent({
@@ -404,13 +419,13 @@ const VAccordionItem = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot heading Used to add content to the heading.
-        handleNamedSlotV3("heading", this.$slots["heading"]),
+        handleNamedSlotV3("heading", this.$slots["heading"]?.()),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta Used to add additional content to the heading.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -543,7 +558,7 @@ const VActionGroup = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -759,13 +774,16 @@ const VAlert = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Add action items to the Alert using this slot.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot main The main content of the Alert.
-        handleNamedSlotV3("main", this.$slots["main"])
+        handleNamedSlotV3("main", this.$slots["main"]?.())
       ]
     );
   }
@@ -962,7 +980,7 @@ const VAudioPlayer = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -1180,11 +1198,11 @@ const VAvatar = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-        handleNamedSlotV3("graphic", this.$slots["graphic"]),
+        handleNamedSlotV3("graphic", this.$slots["graphic"]?.()),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -1349,9 +1367,9 @@ const VBadge = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -1498,11 +1516,14 @@ const VBanner = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Add action items to banner using this slot.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -1607,7 +1628,7 @@ const VBreadcrumb = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -1773,7 +1794,7 @@ const VBreadcrumbItem = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -2128,9 +2149,9 @@ const VButton = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -2314,21 +2335,21 @@ const VCalendar = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-0", this.$slots["day-0"]),
+        handleNamedSlotV3("day-0", this.$slots["day-0"]?.()),
         // @slot day-1 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-1", this.$slots["day-1"]),
+        handleNamedSlotV3("day-1", this.$slots["day-1"]?.()),
         // @slot day-2 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-2", this.$slots["day-2"]),
+        handleNamedSlotV3("day-2", this.$slots["day-2"]?.()),
         // @slot day-3 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-3", this.$slots["day-3"]),
+        handleNamedSlotV3("day-3", this.$slots["day-3"]?.()),
         // @slot day-4 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-4", this.$slots["day-4"]),
+        handleNamedSlotV3("day-4", this.$slots["day-4"]?.()),
         // @slot day-5 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-5", this.$slots["day-5"]),
+        handleNamedSlotV3("day-5", this.$slots["day-5"]?.()),
         // @slot day-6 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("day-6", this.$slots["day-6"])
+        handleNamedSlotV3("day-6", this.$slots["day-6"]?.())
       ]
     );
   }
@@ -2488,7 +2509,7 @@ const VCalendarEvent = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -2712,17 +2733,17 @@ const VCard = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot footer The footer slot is for content in the card footer.
-        handleNamedSlotV3("footer", this.$slots["footer"]),
+        handleNamedSlotV3("footer", this.$slots["footer"]?.()),
         // @slot graphic The graphic slot overrides the icon property.
-        handleNamedSlotV3("graphic", this.$slots["graphic"]),
+        handleNamedSlotV3("graphic", this.$slots["graphic"]?.()),
         // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-        handleNamedSlotV3("main", this.$slots["main"]),
+        handleNamedSlotV3("main", this.$slots["main"]?.()),
         // @slot media The media slot is mainly for images or video content above the card header.
-        handleNamedSlotV3("media", this.$slots["media"]),
+        handleNamedSlotV3("media", this.$slots["media"]?.()),
         // @slot meta The meta slot is for action content in the card header.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -2968,9 +2989,12 @@ const VCheckbox = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot helper-text Describes how to use the checkbox. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -3174,6 +3198,8 @@ const VColorPicker = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot popup-text Overrides the default "Color Picker" title of the Popup window.
@@ -3230,13 +3256,24 @@ const VColorPicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot popup-text Overrides the default "Color Picker" title of the Popup window.
-        handleNamedSlotV3("popup-text", this.$slots["popup-text"]),
+        handleNamedSlotV3("popup-text", this.$slots["popup-text"]?.()),
         // @slot swatches-text  Overrides the default "Saved colors:" text above color swatches.
-        handleNamedSlotV3("swatches-text", this.$slots["swatches-text"])
+        handleNamedSlotV3(
+          "swatches-text",
+          this.$slots["swatches-text"]?.()
+        )
       ]
     );
   }
@@ -3483,6 +3520,8 @@ const VCombobox = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the combobox control.
@@ -3542,13 +3581,21 @@ const VCombobox = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the combobox control.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta Slot to add meta content to the combobox control.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -3673,9 +3720,136 @@ const VContextualHelp = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon Custom icon slot (optional).
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VCountry = defineComponent({
+  name: "VCountry",
+  props: {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. "GB", "UK", "US"). When set, the component shows the matching flag icon and the code (e.g. "UK") automatically.
+     */
+    code: { type: String, default: void 0 },
+    /**
+     * Optional label to override the displayed text. When set, this is shown instead of the country code (e.g. for obscure countries where "Saint Helena" is clearer than "SH").
+     */
+    label: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("country", registerCountry);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.code !== void 0 ? { code: this.code } : {},
+            ...this.label !== void 0 ? { label: this.label } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.code !== void 0 ? { "^code": this.code } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -3847,7 +4021,7 @@ const VDataGrid = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4039,7 +4213,7 @@ const VDataGridCell = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4205,7 +4379,7 @@ const VDataGridRow = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4378,6 +4552,8 @@ const VDatePicker = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4426,9 +4602,17 @@ const VDatePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -4648,6 +4832,8 @@ const VDateRangePicker = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4707,9 +4893,17 @@ const VDateRangePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -4920,6 +5114,8 @@ const VDateTimePicker = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4975,9 +5171,17 @@ const VDateTimePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -5230,7 +5434,7 @@ const VDialPad = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -5473,17 +5677,20 @@ const VDialog = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot body Use the body slot in order to add custom HTML to the dialog.
-        handleNamedSlotV3("body", this.$slots["body"]),
+        handleNamedSlotV3("body", this.$slots["body"]?.()),
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        handleNamedSlotV3("footer", this.$slots["footer"]),
+        handleNamedSlotV3("footer", this.$slots["footer"]?.()),
         // @slot graphic Use the graphic slot in order to replace the icon.
-        handleNamedSlotV3("graphic", this.$slots["graphic"]),
+        handleNamedSlotV3("graphic", this.$slots["graphic"]?.()),
         // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-        handleNamedSlotV3("main", this.$slots["main"])
+        handleNamedSlotV3("main", this.$slots["main"]?.())
       ]
     );
   }
@@ -5610,7 +5817,7 @@ const VDivider = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -5753,11 +5960,14 @@ const VEmptyState = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Slot to add action items to the empty state
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot graphic The graphic slot allows overriding the icon with a custom illustration
-        handleNamedSlotV3("graphic", this.$slots["graphic"])
+        handleNamedSlotV3("graphic", this.$slots["graphic"]?.())
       ]
     );
   }
@@ -6019,9 +6229,9 @@ const VFab = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -6220,6 +6430,8 @@ const VFilePicker = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -6272,9 +6484,17 @@ const VFilePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -6401,11 +6621,17 @@ const VHeader = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot app-content Content vertically aligned with header.
-        handleNamedSlotV3("app-content", this.$slots["app-content"])
+        handleNamedSlotV3(
+          "app-content",
+          this.$slots["app-content"]?.()
+        )
       ]
     );
   }
@@ -6546,7 +6772,7 @@ const VIcon = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -6700,7 +6926,7 @@ const VLayout = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -6912,13 +7138,16 @@ const VMenu = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Used to add action items to the bottom of the menu.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot anchor Used to set the anchor element for the menu.
-        handleNamedSlotV3("anchor", this.$slots["anchor"]),
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.()),
         // @slot header Used to add additional content to the top of the menu.
-        handleNamedSlotV3("header", this.$slots["header"])
+        handleNamedSlotV3("header", this.$slots["header"]?.())
       ]
     );
   }
@@ -7142,13 +7371,16 @@ const VMenuItem = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        handleNamedSlotV3("meta", this.$slots["meta"]),
+        handleNamedSlotV3("meta", this.$slots["meta"]?.()),
         // @slot submenu Assign a Menu to the `submenu` slot to add a submenu.
-        handleNamedSlotV3("submenu", this.$slots["submenu"]),
+        handleNamedSlotV3("submenu", this.$slots["submenu"]?.()),
         // @slot trailing-meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        handleNamedSlotV3("trailing-meta", this.$slots["trailing-meta"])
+        handleNamedSlotV3(
+          "trailing-meta",
+          this.$slots["trailing-meta"]?.()
+        )
       ]
     );
   }
@@ -7253,7 +7485,7 @@ const VNav = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -7422,11 +7654,11 @@ const VNavDisclosure = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta A slot to add additional content to the nav disclosure.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -7629,11 +7861,11 @@ const VNavItem = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta A slot to add additional content to the nav item.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -7765,9 +7997,9 @@ const VNote = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -8059,6 +8291,8 @@ const VNumberField = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -8124,9 +8358,17 @@ const VNumberField = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -8265,6 +8507,8 @@ const VOption = defineComponent({
           this.$slots.default,
           // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"]),
+          // @slot tag-icon Icon to be displayed in the tag when selected inside of Searchable Select.
+          handleNamedSlotV2("tag-icon", this.$slots["tag-icon"]),
           // @slot trailing-meta For additional elements at the end of the Option.
           handleNamedSlotV2("trailing-meta", this.$slots["trailing-meta"])
         ]
@@ -8310,11 +8554,16 @@ const VOption = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
+        // @slot tag-icon Icon to be displayed in the tag when selected inside of Searchable Select.
+        handleNamedSlotV3("tag-icon", this.$slots["tag-icon"]?.()),
         // @slot trailing-meta For additional elements at the end of the Option.
-        handleNamedSlotV3("trailing-meta", this.$slots["trailing-meta"])
+        handleNamedSlotV3(
+          "trailing-meta",
+          this.$slots["trailing-meta"]?.()
+        )
       ]
     );
   }
@@ -8483,49 +8732,59 @@ const VPagination = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VProgress = defineComponent({
-  name: "VProgress",
+const VPopover = defineComponent({
+  name: "VPopover",
   props: {
     /**
-     * Indicates the progress' connotation.
+     * Sets the color-scheme to alternate (dark/light)
      */
-    connotation: {
+    alternate: { type: Boolean, default: void 0 },
+    /**
+     * Whether to render the arrow tip.
+     */
+    arrow: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default Dismiss button's aria-label.
+     */
+    dismissButtonAriaLabel: {
       type: String,
       default: void 0
     },
     /**
-     * The maximum value
+     * Sets the layout of the popover.
      */
-    max: { type: Number, default: void 0 },
+    layout: {
+      type: String,
+      default: void 0
+    },
     /**
-     * The minimum value
+     * If true, the popover uses manual dismissal (no light-dismiss).
+     * Adds a close button to the UI.
      */
-    min: { type: Number, default: void 0 },
+    manual: { type: Boolean, default: void 0 },
     /**
-     * Indicates the progress is paused
+     * Sets the offset between popover and the anchor element.
      */
-    paused: { type: Boolean, default: void 0 },
+    offset: { type: Number, default: void 0 },
     /**
-     * Indicates the progress' reverse status.
+     * Indicates if the popover is currently open.
+     * Can be set declaratively to open/close the popover.
+     * Automatically updates when the user dismisses the popover.
      */
-    reverse: { type: Boolean, default: void 0 },
+    open: { type: Boolean, default: void 0 },
     /**
-     * Indicates the progress' shape.
+     * The placement of the popover relative to the anchor.
      */
-    shape: {
+    placement: {
       type: String,
       default: void 0
-    },
-    /**
-     * The value of the progress
-     */
-    value: { type: Number, default: void 0 }
+    }
   },
   emits: [
     /**
@@ -8538,6 +8797,11 @@ const VProgress = defineComponent({
      * @type {MouseEvent}
      */
     "click",
+    /**
+     * Fired when the popover closes.
+     * @type {CustomEvent}
+     */
+    "close",
     /**
      * Fires when the element receives focus.
      * @type {FocusEvent}
@@ -8557,11 +8821,47 @@ const VProgress = defineComponent({
      * Fires when a key is released.
      * @type {KeyboardEvent}
      */
-    "keyup"
+    "keyup",
+    /**
+     * Fired when the popover opens.
+     * @type {CustomEvent}
+     */
+    "open"
   ],
-  methods: {},
+  methods: {
+    _slottedAnchorChanged() {
+      return this.element?._slottedAnchorChanged();
+    },
+    anchorChanged() {
+      return this.element?.anchorChanged();
+    },
+    arrowChanged() {
+      return this.element?.arrowChanged();
+    },
+    hide() {
+      return this.element?.hide();
+    },
+    openChanged(_oldValue, newValue) {
+      return this.element?.openChanged(_oldValue, newValue);
+    },
+    placementChanged() {
+      return this.element?.placementChanged();
+    },
+    show() {
+      return this.element?.show();
+    },
+    toggle() {
+      return this.element?.toggle();
+    },
+    /**
+     * Updates the position of the popover
+     */
+    updatePosition() {
+      return this.element?.updatePosition();
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("progress", registerProgress);
+    const componentName = registerComponent("popover", registerPopover);
     const element = ref(null);
     return { componentName, element };
   },
@@ -8572,13 +8872,14 @@ const VProgress = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.max !== void 0 ? { max: this.max } : {},
-            ...this.min !== void 0 ? { min: this.min } : {},
-            ...this.paused !== void 0 ? { paused: this.paused } : {},
-            ...this.reverse !== void 0 ? { reverse: this.reverse } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.value !== void 0 ? { value: this.value } : {}
+            ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+            ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
+            ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+            ...this.layout !== void 0 ? { layout: this.layout } : {},
+            ...this.manual !== void 0 ? { manual: this.manual } : {},
+            ...this.offset !== void 0 ? { offset: this.offset } : {},
+            ...this.open !== void 0 ? { open: this.open } : {},
+            ...this.placement !== void 0 ? { placement: this.placement } : {}
           },
           class: "vvd-component",
           on: {
@@ -8588,6 +8889,9 @@ const VProgress = defineComponent({
             click: (event) => {
               this.$emit("click", event);
             },
+            close: (event) => {
+              this.$emit("close", event);
+            },
             focus: (event) => {
               this.$emit("focus", event);
             },
@@ -8599,10 +8903,19 @@ const VProgress = defineComponent({
             },
             keyup: (event) => {
               this.$emit("keyup", event);
+            },
+            open: (event) => {
+              this.$emit("open", event);
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot anchor Slot for the trigger element.
+          handleNamedSlotV2("anchor", this.$slots["anchor"]),
+          // @slot footer Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.
+          handleNamedSlotV2("footer", this.$slots["footer"])
+        ]
       );
     }
     return h(
@@ -8611,15 +8924,183 @@ const VProgress = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.max !== void 0 ? { "^max": this.max } : {},
-          ...this.min !== void 0 ? { "^min": this.min } : {},
-          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
-          ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.value !== void 0 ? { "^value": this.value } : {}
-        }),
-        onBlur: (event) => {
+          ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
+          ...this.arrow !== void 0 && this.arrow !== false ? { "^arrow": this.arrow } : {},
+          ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+          ...this.layout !== void 0 ? { "^layout": this.layout } : {},
+          ...this.manual !== void 0 && this.manual !== false ? { "^manual": this.manual } : {},
+          ...this.offset !== void 0 ? { "^offset": this.offset } : {},
+          ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+          ...this.placement !== void 0 ? { "^placement": this.placement } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onClose: (event) => {
+          this.$emit("close", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onOpen: (event) => {
+          this.$emit("open", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot anchor Slot for the trigger element.
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.()),
+        // @slot footer Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.
+        handleNamedSlotV3("footer", this.$slots["footer"]?.())
+      ]
+    );
+  }
+});
+
+const VProgress = defineComponent({
+  name: "VProgress",
+  props: {
+    /**
+     * Indicates the progress' connotation.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The maximum value
+     */
+    max: { type: Number, default: void 0 },
+    /**
+     * The minimum value
+     */
+    min: { type: Number, default: void 0 },
+    /**
+     * Indicates the progress is paused
+     */
+    paused: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the progress' reverse status.
+     */
+    reverse: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the progress' shape.
+     */
+    shape: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The value of the progress
+     */
+    value: { type: Number, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("progress", registerProgress);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.max !== void 0 ? { max: this.max } : {},
+            ...this.min !== void 0 ? { min: this.min } : {},
+            ...this.paused !== void 0 ? { paused: this.paused } : {},
+            ...this.reverse !== void 0 ? { reverse: this.reverse } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.value !== void 0 ? { value: this.value } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
+          ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.value !== void 0 ? { "^value": this.value } : {}
+        }),
+        onBlur: (event) => {
           this.$emit("blur", event);
         },
         onClick: (event) => {
@@ -8640,7 +9121,7 @@ const VProgress = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -8788,7 +9269,7 @@ const VProgressRing = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -8993,7 +9474,7 @@ const VRadio = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -9192,9 +9673,12 @@ const VRadioGroup = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -9532,12 +10016,17 @@ const VRangeSlider = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
 });
 
+const removeSymbol = Symbol.for("slottable-request-remove");
+function isRemoveRequest(data) {
+  return data === removeSymbol;
+}
+
 const VRichTextEditor = defineComponent({
   name: "VRichTextEditor",
   props: {
@@ -9585,7 +10074,10 @@ const VRichTextEditor = defineComponent({
       registerRichTextEditor
     );
     const element = ref(null);
-    return { componentName, element };
+    const slottableRequests = ref(
+      /* @__PURE__ */ new Map()
+    );
+    return { componentName, element, slottableRequests };
   },
   render() {
     if (isVue2) {
@@ -9616,6 +10108,17 @@ const VRichTextEditor = defineComponent({
             },
             keyup: (event) => {
               this.$emit("keyup", event);
+            },
+            "slottable-request": (event) => {
+              if (isRemoveRequest(event.data)) {
+                this.slottableRequests.delete(event.slotName);
+              } else {
+                this.slottableRequests.set(event.slotName, {
+                  name: event.name,
+                  data: event.data
+                });
+              }
+              this.$forceUpdate();
             }
           }
         },
@@ -9631,6 +10134,9 @@ const VRichTextEditor = defineComponent({
           handleNamedSlotV2(
             "text-color-picker",
             this.$slots["text-color-picker"]
+          ),
+          ...Array.from(this.slottableRequests.entries()).flatMap(
+            ([slotName, { name, data }]) => handleNamedSlotV2(slotName, this.$scopedSlots[name]?.(data)) ?? []
           )
         ]
       );
@@ -9660,97 +10166,270 @@ const VRichTextEditor = defineComponent({
         },
         onKeyup: (event) => {
           this.$emit("keyup", event);
+        },
+        "onSlottable-request": (event) => {
+          if (isRemoveRequest(event.data)) {
+            this.slottableRequests.delete(event.slotName);
+          } else {
+            this.slottableRequests.set(event.slotName, {
+              name: event.name,
+              data: event.data
+            });
+          }
         }
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot editor-end Displayed at the end of the scrollable editor area.
-        handleNamedSlotV3("editor-end", this.$slots["editor-end"]),
+        handleNamedSlotV3("editor-end", this.$slots["editor-end"]?.()),
         // @slot editor-start Displayed at the start of the scrollable editor area.
-        handleNamedSlotV3("editor-start", this.$slots["editor-start"]),
+        handleNamedSlotV3(
+          "editor-start",
+          this.$slots["editor-start"]?.()
+        ),
         // @slot status Displayed between the editor viewport and the toolbar.
-        handleNamedSlotV3("status", this.$slots["status"]),
+        handleNamedSlotV3("status", this.$slots["status"]?.()),
         // @slot text-color-picker Color picker for the RteTextColorFeature.
         handleNamedSlotV3(
           "text-color-picker",
-          this.$slots["text-color-picker"]
+          this.$slots["text-color-picker"]?.()
+        ),
+        ...Array.from(this.slottableRequests.entries()).flatMap(
+          ([slotName, { name, data }]) => (
+            // @ts-ignore
+            handleNamedSlotV3(slotName, this.$slots[name]?.(data)) ?? []
+          )
         )
       ]
     );
   }
 });
 
-const VSearchableSelect = defineComponent({
-  name: "VSearchableSelect",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
+const VRichTextView = defineComponent({
+  name: "VRichTextView",
   props: {
-    appearance: {
-      type: String,
-      default: void 0
-    },
     /**
-     * Adds a clear button to the input field that clears the selected values.
-     */
-    clearable: { type: Boolean, default: void 0 },
-    /**
-     * Overrides the default "Deselect All" text
-     */
-    deselectAllText: { 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 },
-    /**
-     * Adds a "Select All" option at the top of the options list.
-     */
-    enableSelectAll: { type: Boolean, default: void 0 },
-    /**
-     * Provides a custom error message. Any current error state will be overridden.
-     */
-    errorText: { type: String, default: void 0 },
-    externalTags: { type: Boolean, default: void 0 },
-    fixedDropdown: { type: Boolean, default: void 0 },
-    /**
-     * Provides additional information to help the user enter the correct information.
-     * To add HTML to the helper text, use the helper-text slot instead.
+     * The view to display, created from the RteConfig.
      */
-    helperText: { type: String, default: void 0 },
+    view: { type: null, default: void 0 }
+  },
+  emits: [
     /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
      */
-    icon: { type: String, default: void 0 },
+    "blur",
     /**
-     * Indicates the icon affix alignment.
+     * 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}
      */
-    iconTrailing: { type: Boolean, default: void 0 },
+    "click",
     /**
-     * The default value of the element. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
      */
-    initialValue: { type: String, default: void 0 },
+    "focus",
     /**
-     * The label for the form element.
+     * Fires when the value of an element has been changed.
+     * @type {Event}
      */
-    label: { type: String, default: void 0 },
+    "input",
     /**
-     * Whether the component is in a loading state.
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
      */
-    loading: { type: Boolean, default: void 0 },
-    maxLines: { type: Number, default: void 0 },
-    maxSelected: { type: Number, default: void 0 },
-    multiple: { type: Boolean, default: void 0 },
+    "keydown",
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
      */
-    name: { type: String, default: void 0 },
-    open: { type: Boolean, default: void 0 },
-    /**
-     * Function to filter the options to display.
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "rich-text-view",
+      registerRichTextView
+    );
+    const element = ref(null);
+    const slottableRequests = ref(
+      /* @__PURE__ */ new Map()
+    );
+    return { componentName, element, slottableRequests };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          domProps: { ...this.view !== void 0 ? { view: this.view } : {} },
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            },
+            "slottable-request": (event) => {
+              if (isRemoveRequest(event.data)) {
+                this.slottableRequests.delete(event.slotName);
+              } else {
+                this.slottableRequests.set(event.slotName, {
+                  name: event.name,
+                  data: event.data
+                });
+              }
+              this.$forceUpdate();
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          ,
+          ...Array.from(this.slottableRequests.entries()).flatMap(
+            ([slotName, { name, data }]) => handleNamedSlotV2(slotName, this.$scopedSlots[name]?.(data)) ?? []
+          )
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.view !== void 0 ? { ".view": this.view } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        "onSlottable-request": (event) => {
+          if (isRemoveRequest(event.data)) {
+            this.slottableRequests.delete(event.slotName);
+          } else {
+            this.slottableRequests.set(event.slotName, {
+              name: event.name,
+              data: event.data
+            });
+          }
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        ,
+        ...Array.from(this.slottableRequests.entries()).flatMap(
+          ([slotName, { name, data }]) => (
+            // @ts-ignore
+            handleNamedSlotV3(slotName, this.$slots[name]?.(data)) ?? []
+          )
+        )
+      ]
+    );
+  }
+});
+
+const VSearchableSelect = defineComponent({
+  name: "VSearchableSelect",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Adds a clear button to the input field that clears the selected values.
+     */
+    clearable: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default "Deselect All" text
+     */
+    deselectAllText: { 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 },
+    /**
+     * Adds a "Select All" option at the top of the options list.
+     */
+    enableSelectAll: { type: Boolean, default: void 0 },
+    /**
+     * Provides a custom error message. Any current error state will be overridden.
+     */
+    errorText: { type: String, default: void 0 },
+    externalTags: { type: Boolean, default: void 0 },
+    fixedDropdown: { type: Boolean, default: void 0 },
+    /**
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Whether the component is in a loading state.
+     */
+    loading: { type: Boolean, default: void 0 },
+    maxLines: { type: Number, default: void 0 },
+    maxSelected: { type: Number, default: void 0 },
+    multiple: { 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 },
+    open: { type: Boolean, default: void 0 },
+    /**
+     * Function to filter the options to display.
      */
     optionFilter: {
       type: null,
@@ -9927,6 +10606,8 @@ const VSearchableSelect = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the control.
@@ -10005,22 +10686,30 @@ const VSearchableSelect = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the control.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot loading-options Message that appears there are no options to display and the component is in a loading state.
         handleNamedSlotV3(
           "loading-options",
-          this.$slots["loading-options"]
+          this.$slots["loading-options"]?.()
         ),
         // @slot meta Slot to add meta content to the control.
-        handleNamedSlotV3("meta", this.$slots["meta"]),
+        handleNamedSlotV3("meta", this.$slots["meta"]?.()),
         // @slot no-matches Message that appears when no options match the search query.
-        handleNamedSlotV3("no-matches", this.$slots["no-matches"]),
+        handleNamedSlotV3("no-matches", this.$slots["no-matches"]?.()),
         // @slot no-options Message that appears when no options are available.
-        handleNamedSlotV3("no-options", this.$slots["no-options"])
+        handleNamedSlotV3("no-options", this.$slots["no-options"]?.())
       ]
     );
   }
@@ -10253,6 +10942,8 @@ const VSelect = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the select control.
@@ -10312,13 +11003,21 @@ const VSelect = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the select control.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta Slot to add meta content to the select control.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -10356,6 +11055,10 @@ const VSelectableBox = defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Disables the control (checkbox or radio) and indicates that the action is not available.
+     */
+    disabled: { type: Boolean, default: void 0 },
     /**
      * Removes the padding around the box's slot content
      */
@@ -10419,6 +11122,7 @@ const VSelectableBox = defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.controlPlacement !== void 0 ? { "control-placement": this.controlPlacement } : {},
             ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.tight !== void 0 ? { tight: this.tight } : {}
           },
           class: "vvd-component",
@@ -10460,6 +11164,7 @@ const VSelectableBox = defineComponent({
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.controlPlacement !== void 0 ? { "^control-placement": this.controlPlacement } : {},
           ...this.controlType !== void 0 ? { "^control-type": this.controlType } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.tight !== void 0 && this.tight !== false ? { "^tight": this.tight } : {}
         }),
         onBlur: (event) => {
@@ -10486,7 +11191,7 @@ const VSelectableBox = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -10656,9 +11361,12 @@ const VSideDrawer = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-        handleNamedSlotV3("app-content", this.$slots["app-content"])
+        handleNamedSlotV3(
+          "app-content",
+          this.$slots["app-content"]?.()
+        )
       ]
     );
   }
@@ -10892,9 +11600,9 @@ const VSimpleColorPicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot anchor Slot for attaching the toggle button
-        handleNamedSlotV3("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.())
       ]
     );
   }
@@ -11173,7 +11881,7 @@ const VSlider = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -11319,9 +12027,979 @@ const VSplitButton = defineComponent({
           },
           class: "vvd-component",
           on: {
-            "action-click": (event) => {
-              this.$emit("action-click", event);
-            },
+            "action-click": (event) => {
+              this.$emit("action-click", event);
+            },
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            "indicator-click": (event) => {
+              this.$emit("indicator-click", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {}
+        }),
+        onActionClick: (event) => {
+          this.$emit("action-click", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onIndicatorClick: (event) => {
+          this.$emit("indicator-click", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VStatus = defineComponent({
+  name: "VStatus",
+  props: {
+    /**
+     * The connotation the status should have. Determines icon and color.
+     */
+    connotation: {
+      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 },
+    /**
+     * The status title (e.g. "Positive", "Info", "Warning", "Alert").
+     */
+    status: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("status", registerStatus);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.status !== void 0 ? { status: this.status } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon Optional custom icon. When not set, icon is derived from connotation.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.status !== void 0 ? { "^status": this.status } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon Optional custom icon. When not set, icon is derived from connotation.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VSwitch = defineComponent({
+  name: "VSwitch",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    /**
+     * The current checkedness of the element.
+     */
+    checked: { type: Boolean, default: void 0 },
+    /**
+     * The current checkedness of the element.
+     */
+    modelValue: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the switch's connotation.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The default checkedness of the element. This value sets the `checked` property
+     * only when the `checked` property has not been explicitly set.
+     */
+    defaultChecked: { type: Boolean, 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 default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
+    /**
+     * Indicates the switch's label.
+     */
+    label: { 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 },
+    /**
+     * 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 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * The current value of the element.
+     */
+    value: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Emits a custom change event when the checked state changes
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the modelValue value changes
+     * @type {boolean}
+     */
+    "update:modelValue"
+  ],
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("switch", registerSwitch);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...(this.modelValue ?? this.checked) !== void 0 ? { "current-checked": this.modelValue ?? this.checked } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.value !== void 0 ? { "current-value": this.value } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            change: (event) => {
+              this.$emit("update:modelValue", event.currentTarget.checked);
+              this.$emit("change", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.value !== void 0 ? { "^current-value": this.value } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onChange: (event) => {
+          this.$emit("update:modelValue", event.currentTarget.checked);
+          this.$emit("change", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTab = defineComponent({
+  name: "VTab",
+  props: {
+    /**
+     * The connotation the tab should have.
+     */
+    connotation: {
+      type: String,
+      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.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the tab's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Adds a close button
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * The shape the tab should have.
+     */
+    shape: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: { type: Number, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {
+    _handleCloseClick(e) {
+      return this.element?._handleCloseClick(e);
+    },
+    _onKeyDown(e) {
+      return this.element?._onKeyDown(e);
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("tab", registerTab);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.removable !== void 0 ? { removable: this.removable } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VTabPanel = defineComponent({
+  name: "VTabPanel",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("tab-panel", registerTabPanel);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTable = defineComponent({
+  name: "VTable",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table", registerTable);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTableBody = defineComponent({
+  name: "VTableBody",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table-body", registerTable);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTableCell = defineComponent({
+  name: "VTableCell",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * 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 value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table-cell", registerTable);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
@@ -11331,9 +13009,6 @@ const VSplitButton = defineComponent({
             focus: (event) => {
               this.$emit("focus", event);
             },
-            "indicator-click": (event) => {
-              this.$emit("indicator-click", event);
-            },
             input: (event) => {
               this.$emit("input", event);
             },
@@ -11345,11 +13020,7 @@ const VSplitButton = defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon The preferred way to add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return h(
@@ -11357,20 +13028,7 @@ const VSplitButton = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-          ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.size !== void 0 ? { "^size": this.size } : {},
-          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {}
-        }),
-        onActionClick: (event) => {
-          this.$emit("action-click", event);
-        },
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11380,9 +13038,6 @@ const VSplitButton = defineComponent({
         onFocus: (event) => {
           this.$emit("focus", event);
         },
-        onIndicatorClick: (event) => {
-          this.$emit("indicator-click", event);
-        },
         onInput: (event) => {
           this.$emit("input", event);
         },
@@ -11395,82 +13050,20 @@ const VSplitButton = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VSwitch = defineComponent({
-  name: "VSwitch",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
-  props: {
-    /**
-     * The current checkedness of the element.
-     */
-    checked: { type: Boolean, default: void 0 },
-    /**
-     * The current checkedness of the element.
-     */
-    modelValue: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the switch's connotation.
-     */
-    connotation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The default checkedness of the element. This value sets the `checked` property
-     * only when the `checked` property has not been explicitly set.
-     */
-    defaultChecked: { type: Boolean, 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 default value of the element. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
-     */
-    initialValue: { type: String, default: void 0 },
-    /**
-     * Indicates the switch's label.
-     */
-    label: { 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 },
-    /**
-     * 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 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { type: Boolean, default: void 0 },
-    /**
-     * The current value of the element.
-     */
-    value: { type: String, default: void 0 }
-  },
+const VTableHead = defineComponent({
+  name: "VTableHead",
   emits: [
     /**
      * Fires when the element loses focus.
      * @type {FocusEvent}
      */
     "blur",
-    /**
-     * Emits a custom change event when the checked state changes
-     * @type {CustomEvent<undefined>}
-     */
-    "change",
     /**
      * 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}
@@ -11495,30 +13088,11 @@ const VSwitch = defineComponent({
      * Fires when a key is released.
      * @type {KeyboardEvent}
      */
-    "keyup",
-    /**
-     * Fires when the modelValue value changes
-     * @type {boolean}
-     */
-    "update:modelValue"
+    "keyup"
   ],
-  methods: {
-    /**
-     * Return the current validity of the element.
-     */
-    checkValidity() {
-      return this.element?.checkValidity();
-    },
-    /**
-     * Return the current validity of the element.
-     * If false, fires an invalid event at the element.
-     */
-    reportValidity() {
-      return this.element?.reportValidity();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("switch", registerSwitch);
+    const componentName = registerComponent("table-head", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -11528,27 +13102,12 @@ const VSwitch = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...(this.modelValue ?? this.checked) !== void 0 ? { "current-checked": this.modelValue ?? this.checked } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-            ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.value !== void 0 ? { "current-value": this.value } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
-            change: (event) => {
-              this.$emit("update:modelValue", event.currentTarget.checked);
-              this.$emit("change", event);
-            },
             click: (event) => {
               this.$emit("click", event);
             },
@@ -11574,25 +13133,10 @@ const VSwitch = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.name !== void 0 ? { "^name": this.name } : {},
-          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-          ...this.value !== void 0 ? { "^current-value": this.value } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
-        onChange: (event) => {
-          this.$emit("update:modelValue", event.currentTarget.checked);
-          this.$emit("change", event);
-        },
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -11611,52 +13155,14 @@ const VSwitch = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VTab = defineComponent({
-  name: "VTab",
-  props: {
-    /**
-     * The connotation the tab should have.
-     */
-    connotation: {
-      type: String,
-      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.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
-     */
-    icon: { type: String, default: void 0 },
-    /**
-     * Indicates the icon affix alignment.
-     */
-    iconTrailing: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the tab's label.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * Adds a close button
-     */
-    removable: { type: Boolean, default: void 0 },
-    /**
-     * The shape the tab should have.
-     */
-    shape: {
-      type: String,
-      default: void 0
-    },
-    tabIndex: { type: Number, default: void 0 }
-  },
+const VTableHeaderCell = defineComponent({
+  name: "VTableHeaderCell",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11689,16 +13195,9 @@ const VTab = defineComponent({
      */
     "keyup"
   ],
-  methods: {
-    _handleCloseClick(e) {
-      return this.element?._handleCloseClick(e);
-    },
-    _onKeyDown(e) {
-      return this.element?._onKeyDown(e);
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab", registerTab);
+    const componentName = registerComponent("table-header-cell", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -11708,16 +13207,7 @@ const VTab = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
-            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.removable !== void 0 ? { removable: this.removable } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11740,11 +13230,7 @@ const VTab = defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon The preferred way to add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return h(
@@ -11752,16 +13238,7 @@ const VTab = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-          ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11783,16 +13260,14 @@ const VTab = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VTabPanel = defineComponent({
-  name: "VTabPanel",
+const VTableRow = defineComponent({
+  name: "VTableRow",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11827,7 +13302,7 @@ const VTabPanel = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab-panel", registerTabPanel);
+    const componentName = registerComponent("table-row", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -11890,7 +13365,7 @@ const VTabPanel = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12073,9 +13548,12 @@ const VTabs = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Slot for action items such as buttons or controls.
-        handleNamedSlotV3("action-items", this.$slots["action-items"])
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        )
       ]
     );
   }
@@ -12281,9 +13759,9 @@ const VTag = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -12388,7 +13866,7 @@ const VTagGroup = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12635,6 +14113,8 @@ const VTextArea = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -12694,9 +14174,17 @@ const VTextArea = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -12963,6 +14451,8 @@ const VTextField = defineComponent({
           this.$slots.default,
           // @slot action-items Used to add action items to the end of the text-field.
           handleNamedSlotV2("action-items", this.$slots["action-items"]),
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot leading-action-items Used to add action items to the start of the text-field.
@@ -13031,15 +14521,26 @@ const VTextField = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Used to add action items to the end of the text-field.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot leading-action-items Used to add action items to the start of the text-field.
         handleNamedSlotV3(
           "leading-action-items",
-          this.$slots["leading-action-items"]
+          this.$slots["leading-action-items"]?.()
         )
       ]
     );
@@ -13228,6 +14729,8 @@ const VTimePicker = defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -13279,9 +14782,17 @@ const VTimePicker = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -13438,11 +14949,14 @@ const VToggletip = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items The content to display in the toggletip action items.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot anchor Used to set the anchor element for the toggletip.
-        handleNamedSlotV3("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.())
       ]
     );
   }
@@ -13582,9 +15096,9 @@ const VTooltip = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot anchor Used to set the anchor element for the tooltip.
-        handleNamedSlotV3("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.())
       ]
     );
   }
@@ -13762,11 +15276,11 @@ const VTreeItem = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot item To specify a child tree item.
-        handleNamedSlotV3("item", this.$slots["item"])
+        handleNamedSlotV3("item", this.$slots["item"]?.())
       ]
     );
   }
@@ -13889,7 +15403,7 @@ const VTreeView = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -14073,7 +15587,7 @@ const VVideoPlayer = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -14370,6 +15884,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["copy2Solid"] = "copy-2-solid";
   Icon2["copyLine"] = "copy-line";
   Icon2["copySolid"] = "copy-solid";
+  Icon2["coverageLine"] = "coverage-line";
+  Icon2["coverageSolid"] = "coverage-solid";
   Icon2["creditCardLine"] = "credit-card-line";
   Icon2["creditCardSolid"] = "credit-card-solid";
   Icon2["cropLine"] = "crop-line";
@@ -14384,6 +15900,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["cursorSolid"] = "cursor-solid";
   Icon2["darkModeLine"] = "dark-mode-line";
   Icon2["darkModeSolid"] = "dark-mode-solid";
+  Icon2["dataRoamingLine"] = "data-roaming-line";
+  Icon2["dataRoamingSolid"] = "data-roaming-solid";
   Icon2["deleteLine"] = "delete-line";
   Icon2["deleteSolid"] = "delete-solid";
   Icon2["densityHighLine"] = "density-high-line";
@@ -15326,17 +16844,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n}\n";
+const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n}\n";
 
-const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
+const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
 
 const fontsSpeziaVariableCss = "@font-face {\n  font-display: block;\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-display: block;\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\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, 08 Dec 2025 18:08:08 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
+const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
 
-const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n.vvd-root {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
+const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n.vvd-root {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 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  -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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on 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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\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  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n";
+const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on 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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\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  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\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",
@@ -15435,4 +16953,4 @@ const vividVue = {
 };
 const vivid3 = vividVue;
 
-export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VColorPicker, VCombobox, VContextualHelp, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDateTimePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSimpleColorPicker, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };
+export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VColorPicker, VCombobox, VContextualHelp, VCountry, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDateTimePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VPopover, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VRichTextView, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSimpleColorPicker, VSlider, VSplitButton, VStatus, VSwitch, VTab, VTabPanel, VTable, VTableBody, VTableCell, VTableHead, VTableHeaderCell, VTableRow, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };