@vonage/vivid-vue 5.9.0 → 5.11.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, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerDataTable, 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"]?.()
+        )
       ]
     );
   }
@@ -3232,18 +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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -3551,18 +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"]
+          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"]?.())
       ]
     );
   }
@@ -3687,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"]?.())
       ]
     );
   }
@@ -3698,10 +3858,22 @@ const VContextualHelp = defineComponent({
 const VDataGrid = defineComponent({
   name: "VDataGrid",
   props: {
+    /**
+     * Configure the grid header columns.
+     */
+    columnDefinitions: { type: Array, default: void 0 },
     /**
      * Number of columns to be fixed when scrolling horizontally
      */
     fixedColumns: { type: Number, default: void 0 },
+    /**
+     * Index of column to be focused on when the Data Grid receives focus.
+     */
+    focusColumnIndex: { type: Number, default: void 0 },
+    /**
+     * Index of row to be focused on when the Data Grid receives focus.
+     */
+    focusRowIndex: { type: Number, default: void 0 },
     /**
      * Whether the grid should automatically generate a header row and its type
      */
@@ -3721,6 +3893,10 @@ const VDataGrid = defineComponent({
      * Default is false.
      */
     noTabbing: { type: Boolean, default: void 0 },
+    /**
+     * Element tag for header rows.
+     */
+    rowElementTag: { type: String, default: void 0 },
     /**
      * Array of objects representing the rows of the grid.
      */
@@ -3795,6 +3971,10 @@ const VDataGrid = defineComponent({
           },
           class: "vvd-component",
           domProps: {
+            ...this.columnDefinitions !== void 0 ? { columnDefinitions: this.columnDefinitions } : {},
+            ...this.focusColumnIndex !== void 0 ? { focusColumnIndex: this.focusColumnIndex } : {},
+            ...this.focusRowIndex !== void 0 ? { focusRowIndex: this.focusRowIndex } : {},
+            ...this.rowElementTag !== void 0 ? { rowElementTag: this.rowElementTag } : {},
             ...this.rowsData !== void 0 ? { rowsData: this.rowsData } : {}
           },
           on: {
@@ -3830,10 +4010,14 @@ const VDataGrid = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
+          ...this.columnDefinitions !== void 0 ? { ".columnDefinitions": this.columnDefinitions } : {},
           ...this.fixedColumns !== void 0 ? { "^fixed-columns": this.fixedColumns } : {},
+          ...this.focusColumnIndex !== void 0 ? { ".focusColumnIndex": this.focusColumnIndex } : {},
+          ...this.focusRowIndex !== void 0 ? { ".focusRowIndex": this.focusRowIndex } : {},
           ...this.generateHeader !== void 0 ? { "^generate-header": this.generateHeader } : {},
           ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
           ...this.noTabbing !== void 0 && this.noTabbing !== false ? { "^no-tabbing": this.noTabbing } : {},
+          ...this.rowElementTag !== void 0 ? { ".rowElementTag": this.rowElementTag } : {},
           ...this.rowsData !== void 0 ? { ".rowsData": this.rowsData } : {},
           ...this.selectionMode !== void 0 ? { "^selection-mode": this.selectionMode } : {}
         }),
@@ -3861,7 +4045,7 @@ const VDataGrid = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4053,7 +4237,7 @@ const VDataGridCell = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4219,7 +4403,7 @@ const VDataGridRow = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4442,14 +4626,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -4730,14 +4917,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -5005,14 +5195,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -5265,7 +5458,7 @@ const VDialPad = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -5508,17 +5701,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"]?.())
       ]
     );
   }
@@ -5645,7 +5841,7 @@ const VDivider = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -5788,11 +5984,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"]?.())
       ]
     );
   }
@@ -6054,9 +6253,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"]?.())
       ]
     );
   }
@@ -6309,14 +6508,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -6443,11 +6645,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"]?.()
+        )
       ]
     );
   }
@@ -6588,7 +6796,7 @@ const VIcon = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -6742,7 +6950,7 @@ const VLayout = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -6954,13 +7162,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"]?.())
       ]
     );
   }
@@ -7184,13 +7395,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"]?.()
+        )
       ]
     );
   }
@@ -7295,7 +7509,7 @@ const VNav = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -7464,11 +7678,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"]?.())
       ]
     );
   }
@@ -7671,11 +7885,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"]?.())
       ]
     );
   }
@@ -7807,9 +8021,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"]?.())
       ]
     );
   }
@@ -8168,14 +8382,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -8314,6 +8531,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"])
         ]
@@ -8359,11 +8578,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"]?.()
+        )
       ]
     );
   }
@@ -8532,7 +8756,7 @@ const VPagination = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -8760,11 +8984,11 @@ const VPopover = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot anchor Slot for the trigger element.
-        handleNamedSlotV3("anchor", this.$slots["anchor"]),
+        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"])
+        handleNamedSlotV3("footer", this.$slots["footer"]?.())
       ]
     );
   }
@@ -8921,7 +9145,7 @@ const VProgress = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -9069,7 +9293,7 @@ const VProgressRing = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -9274,7 +9498,7 @@ const VRadio = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -9473,9 +9697,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"]?.()
+        )
       ]
     );
   }
@@ -9813,12 +10040,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: {
@@ -9866,7 +10098,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) {
@@ -9897,6 +10132,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();
             }
           }
         },
@@ -9912,6 +10158,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)) ?? []
           )
         ]
       );
@@ -9941,21 +10190,40 @@ 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)) ?? []
+          )
         )
       ]
     );
@@ -10009,7 +10277,10 @@ const VRichTextView = defineComponent({
       registerRichTextView
     );
     const element = ref(null);
-    return { componentName, element };
+    const slottableRequests = ref(
+      /* @__PURE__ */ new Map()
+    );
+    return { componentName, element, slottableRequests };
   },
   render() {
     if (isVue2) {
@@ -10038,10 +10309,27 @@ const VRichTextView = 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();
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          ,
+          ...Array.from(this.slottableRequests.entries()).flatMap(
+            ([slotName, { name, data }]) => handleNamedSlotV2(slotName, this.$scopedSlots[name]?.(data)) ?? []
+          )
+        ]
       );
     }
     return h(
@@ -10069,11 +10357,28 @@ const VRichTextView = 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?.(),
+        ,
+        ...Array.from(this.slottableRequests.entries()).flatMap(
+          ([slotName, { name, data }]) => (
+            // @ts-ignore
+            handleNamedSlotV3(slotName, this.$slots[name]?.(data)) ?? []
+          )
+        )
       ]
     );
   }
@@ -10405,27 +10710,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"]
+          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"]?.())
       ]
     );
   }
@@ -10719,18 +11027,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"]
+          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"]?.())
       ]
     );
   }
@@ -10768,6 +11079,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
      */
@@ -10831,6 +11146,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",
@@ -10872,6 +11188,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) => {
@@ -10898,7 +11215,7 @@ const VSelectableBox = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -11068,9 +11385,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"]?.()
+        )
       ]
     );
   }
@@ -11304,9 +11624,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"]?.())
       ]
     );
   }
@@ -11585,7 +11905,7 @@ const VSlider = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -11807,9 +12127,146 @@ const VSplitButton = 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"]?.())
+      ]
+    );
+  }
+});
+
+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"]?.())
       ]
     );
   }
@@ -12023,7 +12480,7 @@ const VSwitch = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12195,9 +12652,9 @@ const VTab = 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"]?.())
       ]
     );
   }
@@ -12302,7 +12759,7 @@ const VTabPanel = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12344,7 +12801,7 @@ const VTable = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("table", registerDataTable);
+    const componentName = registerComponent("table", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -12407,7 +12864,7 @@ const VTable = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12449,7 +12906,7 @@ const VTableBody = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("table-body", registerDataTable);
+    const componentName = registerComponent("table-body", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -12512,7 +12969,7 @@ const VTableBody = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12554,7 +13011,7 @@ const VTableCell = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("table-cell", registerDataTable);
+    const componentName = registerComponent("table-cell", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -12617,7 +13074,7 @@ const VTableCell = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12659,7 +13116,7 @@ const VTableHead = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("table-head", registerDataTable);
+    const componentName = registerComponent("table-head", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -12722,7 +13179,7 @@ const VTableHead = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12764,10 +13221,7 @@ const VTableHeaderCell = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent(
-      "table-header-cell",
-      registerDataTable
-    );
+    const componentName = registerComponent("table-header-cell", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -12830,7 +13284,7 @@ const VTableHeaderCell = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12872,7 +13326,7 @@ const VTableRow = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("table-row", registerDataTable);
+    const componentName = registerComponent("table-row", registerTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -12935,7 +13389,7 @@ const VTableRow = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -13118,9 +13572,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"]?.()
+        )
       ]
     );
   }
@@ -13326,9 +13783,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"]?.())
       ]
     );
   }
@@ -13433,7 +13890,7 @@ const VTagGroup = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -13741,14 +14198,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -14085,20 +14545,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"]
+          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"]?.()
         )
       ]
     );
@@ -14340,14 +14806,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"]
+          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"]?.()
+        )
       ]
     );
   }
@@ -14504,11 +14973,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"]?.())
       ]
     );
   }
@@ -14648,9 +15120,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"]?.())
       ]
     );
   }
@@ -14828,11 +15300,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"]?.())
       ]
     );
   }
@@ -14955,7 +15427,7 @@ const VTreeView = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -15139,7 +15611,7 @@ const VVideoPlayer = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -16396,17 +16868,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 Wed, 11 Feb 2026 17:24:59 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:59 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:59 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:59 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 Wed, 11 Feb 2026 17:24:59 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:59 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:59 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:59 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 Wed, 11 Feb 2026 17:24:58 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 Wed, 11 Feb 2026 17:24:58 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 11 Feb 2026 17:24:58 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 Wed, 11 Feb 2026 17:24:58 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",
@@ -16505,4 +16977,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, VPopover, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VRichTextView, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSimpleColorPicker, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTable, VTableBody, VTableCell, VTableHead, VTableHeaderCell, VTableRow, 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 };