@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/@types/index.d.ts

@@ -1,3 +1,5 @@
+import { ComponentCustomProperties } from 'vue';
+import { ComponentOptionsBase } from 'vue/types/v3-component-options';
 import { ComponentOptionsMixin } from 'vue/types/v3-component-options';
 import { ComponentOptionsMixin as ComponentOptionsMixin_2 } from 'vue/types/v3-component-options.js';
 import type { ComponentPublicInstance } from 'vue';
@@ -9,6 +11,7 @@ import { DefineComponent } from 'vue';
 import { DirectiveBinding } from 'vue';
 import type { DirectiveHook } from 'vue';
 import { EditorView } from '@codemirror/view';
+import { ExtractComputedReturns } from 'vue/types/v3-component-options';
 import { ExtractPropTypes } from 'vue';
 import { Placement } from '@floating-ui/vue';
 import type { PluginObject } from 'vue';
@@ -16,14 +19,24 @@ import { PropType } from 'vue';
 import { Ref } from 'vue';
 import { RouterLinkProps } from 'vue-router/types/router';
 import { ShallowRef } from 'vue';
+import { ShallowUnwrapRef } from 'vue';
 import type { typeToFlattenedError } from 'zod';
 import { UnwrapRef } from 'vue';
 import { VNode } from 'vue';
+import { Vue3Instance } from 'vue/types/v3-component-public-instance';
 import * as z from 'zod';
 import type { ZodSchema } from 'zod';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_10<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_11<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_12<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_13<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
@@ -32,6 +45,14 @@ declare type __VLS_NonUndefinedable_4<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_5<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_6<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_7<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_8<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_9<T> = T extends undefined ? never : T;
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -43,6 +64,50 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_10<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_10<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_11<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_11<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_12<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_12<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_13<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_13<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_2<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -87,6 +152,50 @@ declare type __VLS_TypePropsToRuntimeProps_5<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_6<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_6<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_7<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_7<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_8<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_8<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_9<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_9<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -95,6 +204,14 @@ declare type __VLS_WithDefaults<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_10<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithDefaults_2<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -119,6 +236,46 @@ declare type __VLS_WithDefaults_4<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_5<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_6<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_7<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_8<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_9<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -275,6 +432,36 @@ declare type __VLS_WithTemplateSlots_32<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_33<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_34<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_35<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_36<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_37<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -942,10 +1129,11 @@ export declare interface BentoButtonActionObject extends BentoButtonProps {
     iconLeft?: VueNodeElement;
     iconRight?: VueNodeElement;
     state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;
+    iconOnly?: boolean;
 }
 
 /**
- * ButtonActions component component manages a set of actions a user can choose from by displaying a group of buttons.
+ * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.
  *
  * @example
  * import { BentoButtonActions } from '@adyen/bento-vue2';
@@ -1202,10 +1390,10 @@ export declare enum BentoButtonVariant {
  *     `
  * };
  */
-export declare const BentoCard: __VLS_WithTemplateSlots_10<
+export declare const BentoCard: __VLS_WithTemplateSlots_11<
     DefineComponent<
-        __VLS_WithDefaults_2<
-            __VLS_TypePropsToRuntimeProps_2<{
+        __VLS_WithDefaults_4<
+            __VLS_TypePropsToRuntimeProps_4<{
                 /**
                  * List of actions that will be used to render the buttons.
                  * First element in the list will be rendered as "primary".
@@ -1288,8 +1476,8 @@ export declare const BentoCard: __VLS_WithTemplateSlots_10<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_2<
-                    __VLS_TypePropsToRuntimeProps_2<{
+                __VLS_WithDefaults_4<
+                    __VLS_TypePropsToRuntimeProps_4<{
                         /**
                          * List of actions that will be used to render the buttons.
                          * First element in the list will be rendered as "primary".
@@ -2150,7 +2338,7 @@ export declare const BentoCodeSnippet: DefineComponent<
          * Language name for syntax highlighting rules
          */
         lang: {
-            type: PropType<'json' | 'xml' | 'java' | 'javascript' | BentoCodeSnippetSupportedLanguage>;
+            type: PropType<'json' | 'xml' | 'java' | 'javascript' | 'python' | BentoCodeSnippetSupportedLanguage>;
             default: BentoCodeSnippetSupportedLanguage;
             validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
         };
@@ -2249,7 +2437,7 @@ export declare const BentoCodeSnippet: DefineComponent<
              * Language name for syntax highlighting rules
              */
             lang: {
-                type: PropType<'json' | 'xml' | 'java' | 'javascript' | BentoCodeSnippetSupportedLanguage>;
+                type: PropType<'json' | 'xml' | 'java' | 'javascript' | 'python' | BentoCodeSnippetSupportedLanguage>;
                 default: BentoCodeSnippetSupportedLanguage;
                 validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
             };
@@ -2312,7 +2500,7 @@ export declare const BentoCodeSnippet: DefineComponent<
         content: string;
         loading: boolean;
         expandable: boolean;
-        lang: 'json' | 'xml' | 'java' | 'javascript' | BentoCodeSnippetSupportedLanguage;
+        lang: 'json' | 'xml' | 'java' | 'javascript' | 'python' | BentoCodeSnippetSupportedLanguage;
         langLabel: string;
         editable: boolean;
         actionable: boolean;
@@ -2333,6 +2521,7 @@ export declare enum BentoCodeSnippetSupportedLanguage {
     XML = 'xml',
     JAVA = 'java',
     JAVASCRIPT = 'javascript',
+    PYTHON = 'python',
 }
 
 /**
@@ -4287,88 +4476,383 @@ export declare type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOpti
 export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem[];
 
 /**
- * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
+ * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.
  *
  * @example
- * import { BentoDataGrid } from '@adyen/bento-vue2';
+ * import { BentoDashboardSection } from '@adyen/bento-vue2';
  *
  * export default {
- *     components: { BentoDataGrid },
+ *     components: { BentoDashboardSection },
  *     template: `
- *          <bento-data-grid
- *               :data="[
- *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
- *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
- *               ]"
- *               :columns="[
- *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
- *                  { field: 'company', label: 'Reference' },
- *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
- *                ]"
- *          />
+ *          <bento-dashboard-section :header="{ title: 'Section' }" half-width>
+ *              <template #controls>
+ *                  // Add your controls here
+ *              </template>
+ *              // You can render content with two cols
+ *              <template #content-col-1>
+ *                  // Add your content here
+ *              </template>
+ *              <template #content-col-2>
+ *                  // Add your content here
+ *              </template>
+ *              // Or you can render full width content by using default slot
+ *              // Add your content here
+ *          </bento-dashboard-section>
  *     `
  * }
  */
-export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
+export declare const BentoDashboardSection: __VLS_WithTemplateSlots_36<
     DefineComponent<
+        __VLS_WithDefaults_10<
+            __VLS_TypePropsToRuntimeProps_13<{
+                /**
+                 * The header of the section
+                 */
+                header: BentoDashboardTemplateHeader;
+                /**
+                 * Renders the section to take only half of the page
+                 */
+                halfWidth?: boolean;
+            }>,
+            {
+                halfWidth: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_10<
+                    __VLS_TypePropsToRuntimeProps_13<{
+                        /**
+                         * The header of the section
+                         */
+                        header: BentoDashboardTemplateHeader;
+                        /**
+                         * Renders the section to take only half of the page
+                         */
+                        halfWidth?: boolean;
+                    }>,
+                    {
+                        halfWidth: boolean;
+                    }
+                >
+            >
+        >,
         {
-            /**
-             * When true, will emit a 'rowClick' event when a row is clicked. Will add cursor: pointer to rows.
-             */
-            allowRowClicks: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * When true, column headers will become draggable, allowing users to rearrange columns.
-             */
-            allowColumnDragAndDrop: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * List of actions that will be rendered in the action bar when user selects items.
-             *
-             * Each object in the list should have a `title`, an `event` and,
-             * optionally, an `icon`.
-             *
-             * The component will display 4 actions and the hide the rest inside a menu.
-             *
-             * @see BentoButton for a list of all the other props supported by each button action.
-             */
-            bulkActions: {
-                type: PropType<BentoButtonActionsList>;
-                default: any;
-            };
-            /**
-             * Sets the row cells to the condensed padding state.
-             */
-            condensed: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Column definitions using 'key' to relate to data object.
-             */
-            columns: {
-                type: PropType<BentoColumn[]>;
-                required: true;
-            };
-            /**
-             * Enables / hides the display options panel and the column contextual menu functionality.
-             */
-            columnPanel: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * An array of data objects to display.
-             */
-            data: {
-                type: PropType<BentoDatagridData>;
-                required: true;
-            };
-            /**
+            halfWidth: boolean;
+        }
+    >,
+    {
+        infoIconTooltipContent: (_: {}) => any;
+        controls: (_: {}) => any;
+        default: (_: {}) => any;
+        'content-col-1': (_: {}) => any;
+        'content-col-2': (_: {}) => any;
+    }
+>;
+
+/**
+ * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.
+ *
+ * @example
+ * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardTemplate, BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-template :header="{ title: 'Dashboard'}" :tabs="tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]" sticky-tabs sticky-filters>
+ *              <template #tab-1>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      <template #controls>
+ *                          // Add your controls here
+ *                      </template>
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *              <template #tab-2>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *          </bento-dashboard-template>
+ *     `
+ * }
+ */
+export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_35<
+    DefineComponent<
+        __VLS_WithDefaults_9<
+            __VLS_TypePropsToRuntimeProps_12<{
+                /**
+                 * The header that goes to the top of the template
+                 */
+                header: BentoDashboardTemplateHeader;
+                /**
+                 * All the tab properties that can be set on the inner tab components.
+                 *  - tabs.activeTabIndex: the currently active tab index.
+                 *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+                 */
+                tabs?: BentoDashboardTemplateTabs;
+                /**
+                 * Renders the tabs with a sticky positioning
+                 */
+                stickyTabs?: boolean;
+                /**
+                 * Renders the tabs with a sticky positioning
+                 */
+                stickyFilters?: boolean;
+            }>,
+            {
+                tabs: any;
+                stickyTabs: boolean;
+                stickyFilters: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_9<
+                    __VLS_TypePropsToRuntimeProps_12<{
+                        /**
+                         * The header that goes to the top of the template
+                         */
+                        header: BentoDashboardTemplateHeader;
+                        /**
+                         * All the tab properties that can be set on the inner tab components.
+                         *  - tabs.activeTabIndex: the currently active tab index.
+                         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+                         */
+                        tabs?: BentoDashboardTemplateTabs;
+                        /**
+                         * Renders the tabs with a sticky positioning
+                         */
+                        stickyTabs?: boolean;
+                        /**
+                         * Renders the tabs with a sticky positioning
+                         */
+                        stickyFilters?: boolean;
+                    }>,
+                    {
+                        tabs: any;
+                        stickyTabs: boolean;
+                        stickyFilters: boolean;
+                    }
+                >
+            >
+        >,
+        {
+            tabs: BentoDashboardTemplateTabs;
+            stickyFilters: boolean;
+            stickyTabs: boolean;
+        }
+    >,
+    Record<string, (_: {}) => any> & {
+        infoIconTooltipContent: (_: {}) => any;
+        filters: (_: {}) => any;
+        default: (_: {}) => any;
+    }
+>;
+
+export declare type BentoDashboardTemplateHeader = InstanceType<typeof BentoHeader>['$props'];
+
+export declare type BentoDashboardTemplateTab = InstanceType<typeof BentoTab>['$props'];
+
+export declare type BentoDashboardTemplateTabs = {
+    activeTabIndex?: number;
+    tabs: BentoDashboardTemplateTab[];
+};
+
+/**
+ * The dashed underline serves as a visual cue to indicate that additional information is available for
+ * a specific word or phrase without adding an icon.
+ *
+ * @example
+ * import { BentoDashedUnderline } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashedUnderline },
+ *     template: `
+ *          <bento-dashed-underline>
+ *              annotated text
+ *          </bento-dashed-underline>
+ *     `
+ * }
+ */
+export declare const BentoDashedUnderline: __VLS_WithTemplateSlots_7<
+    DefineComponent<
+        __VLS_WithDefaults_2<
+            __VLS_TypePropsToRuntimeProps_2<{
+                /**
+                 * Text showed in the popover on hover
+                 */
+                popoverText?: string;
+                /**
+                 * Position the popover should take if space is available
+                 */
+                popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;
+                /**
+                 * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.
+                 */
+                tooltipText?: string;
+                /**
+                 * Position the tooltip should take if space is available.
+                 */
+                tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;
+            }>,
+            {
+                popoverText: any;
+                popoverPosition: string;
+                tooltipText: any;
+                tooltipPosition: string;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_2<
+                    __VLS_TypePropsToRuntimeProps_2<{
+                        /**
+                         * Text showed in the popover on hover
+                         */
+                        popoverText?: string;
+                        /**
+                         * Position the popover should take if space is available
+                         */
+                        popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;
+                        /**
+                         * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.
+                         */
+                        tooltipText?: string;
+                        /**
+                         * Position the tooltip should take if space is available.
+                         */
+                        tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;
+                    }>,
+                    {
+                        popoverText: any;
+                        popoverPosition: string;
+                        tooltipText: any;
+                        tooltipPosition: string;
+                    }
+                >
+            >
+        >,
+        {
+            tooltipPosition: BentoTooltipPosition | `${BentoTooltipPosition}`;
+            tooltipText: string;
+            popoverText: string;
+            popoverPosition: BentoPopoverPositions | `${BentoPopoverPositions}`;
+        }
+    >,
+    {
+        default: (_: {}) => any;
+        'popover-content': (_: {}) => any;
+    }
+>;
+
+/**
+ * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
+ *
+ * @example
+ * import { BentoDataGrid } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDataGrid },
+ *     template: `
+ *          <bento-data-grid
+ *               :data="[
+ *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
+ *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
+ *               ]"
+ *               :columns="[
+ *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
+ *                  { field: 'company', label: 'Reference' },
+ *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
+ *                ]"
+ *          />
+ *     `
+ * }
+ */
+export declare const BentoDataGrid: __VLS_WithTemplateSlots_8<
+    DefineComponent<
+        {
+            /**
+             * When true, will emit a 'rowClick' event when a row is clicked. Will add cursor: pointer to rows.
+             */
+            allowRowClicks: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            /**
+             * When true, column headers will become draggable, allowing users to rearrange columns.
+             */
+            allowColumnDragAndDrop: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            /**
+             * List of actions that will be rendered in the action bar when user selects items.
+             *
+             * Each object in the list should have a `title`, an `event` and,
+             * optionally, an `icon`.
+             *
+             * The component will display 4 actions and the hide the rest inside a menu.
+             *
+             * @see BentoButton for a list of all the other props supported by each button action.
+             */
+            bulkActions: {
+                type: PropType<BentoButtonActionsList>;
+                default: any;
+            };
+            /**
+             * Sets the row cells to the condensed padding state.
+             */
+            condensed: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            /**
+             * Column definitions using 'key' to relate to data object.
+             */
+            columns: {
+                type: PropType<BentoColumn[]>;
+                required: true;
+            };
+            /**
+             * Enables / hides the display options panel and the column contextual menu functionality.
+             */
+            columnPanel: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            /**
+             * An array of data objects to display.
+             */
+            data: {
+                type: PropType<BentoDatagridData>;
+                required: true;
+            };
+            /**
              * Empty state props that will be passed down to inner empty-state component
              */
             emptyState: {
@@ -4722,6 +5206,13 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                 type: PropType<BentoDatagridDataItemId[]>;
                 default: () => any[];
             };
+            /**
+             * Renders the data grid with no top spacing, to render inside containers that already have spacing
+             */
+            noSpacingTop: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             /**
              * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
              * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -5169,6 +5660,13 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
                     type: PropType<BentoDatagridDataItemId[]>;
                     default: () => any[];
                 };
+                /**
+                 * Renders the data grid with no top spacing, to render inside containers that already have spacing
+                 */
+                noSpacingTop: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
                 /**
                  * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
                  * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -5219,6 +5717,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
             selectable: boolean;
             selection: BentoDatagridDataItemId[];
             highlightedRows: BentoDatagridDataItemId[];
+            noSpacingTop: boolean;
             tabTitle: string;
         }
     >,
@@ -5291,12 +5790,87 @@ export declare enum BentoDatagridSortDirection {
     DESCENDING = 'desc',
 }
 
+/**
+ * The bento-data-grid-static-icon is an icon component with an associated toltip to be used within cellls of the bento-data-grid
+ *
+ * @example
+ * import { BentoDataGridStaticIcon } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDataGridStaticIcon },
+ *     template: `
+ *          <bento-data-grid-static-icon variant="warning" text="Your tooltip text" />
+ *     `
+ * }
+ */
+export declare const BentoDataGridStaticIcon: DefineComponent<
+    __VLS_WithDefaults_3<
+        __VLS_TypePropsToRuntimeProps_3<{
+            /**
+             * Renderes the icon with color.
+             */
+            colored?: boolean;
+            /**
+             * The text displaying in the tooltip.
+             */
+            tooltipText: string;
+            /**
+             * The variant of the icon.
+             */
+            variant?: BentoDataGridStaticIconVariant;
+        }>,
+        {
+            variant: string;
+            colored: boolean;
+        }
+    >,
+    {},
+    {},
+    {},
+    {},
+    ComponentOptionsMixin,
+    ComponentOptionsMixin,
+    {},
+    string,
+    Readonly<
+        ExtractPropTypes<
+            __VLS_WithDefaults_3<
+                __VLS_TypePropsToRuntimeProps_3<{
+                    /**
+                     * Renderes the icon with color.
+                     */
+                    colored?: boolean;
+                    /**
+                     * The text displaying in the tooltip.
+                     */
+                    tooltipText: string;
+                    /**
+                     * The variant of the icon.
+                     */
+                    variant?: BentoDataGridStaticIconVariant;
+                }>,
+                {
+                    variant: string;
+                    colored: boolean;
+                }
+            >
+        >
+    >,
+    {
+        variant: BentoDataGridStaticIconVariant;
+        colored: boolean;
+    }
+>;
+
+declare type BentoDataGridStaticIconVariant = 'checkmark' | 'warning' | 'error' | 'no-value' | 'cross';
+
 export declare enum BentoDatagridStyleState {
     OUTLINE = 'outline',
     SCROLL = 'scroll',
     STICKY_FILTERS = 'sticky-filters',
     OVERFLOW_SHADOW_LEFT = 'overflow-shadow-left',
     OVERFLOW_SHADOW_RIGHT = 'overflow-shadow-right',
+    NO_SPACING_TOP = 'no-spacing-top',
 }
 
 /**
@@ -5322,7 +5896,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_32<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_37<
     DefineComponent<
         {
             /**
@@ -6561,7 +7135,7 @@ export declare const BentoDivider: DefineComponent<
  *     }
  * }
  */
-export declare const BentoDropdown: __VLS_WithTemplateSlots_9<
+export declare const BentoDropdown: __VLS_WithTemplateSlots_10<
     DefineComponent<
         {
             /**
@@ -8566,7 +9140,7 @@ export declare const BentoDropdownTag: DefineComponent<
  *     `
  * }
  */
-export declare const BentoEmptyState: __VLS_WithTemplateSlots_8<
+export declare const BentoEmptyState: __VLS_WithTemplateSlots_9<
     DefineComponent<
         {
             /**
@@ -9084,7 +9658,7 @@ export declare type BentoFilterValues = Array<BentoFilterValue>;
  *     `
  * }
  */
-export declare const BentoFormLayout: __VLS_WithTemplateSlots_11<
+export declare const BentoFormLayout: __VLS_WithTemplateSlots_12<
     DefineComponent<
         {
             /**
@@ -9165,7 +9739,7 @@ export declare const BentoFormLayout: __VLS_WithTemplateSlots_11<
  *          </bento-form-layout-field-tip>
  *     `
  */
-export declare const BentoFormLayoutFieldTip: __VLS_WithTemplateSlots_12<
+export declare const BentoFormLayoutFieldTip: __VLS_WithTemplateSlots_13<
     DefineComponent<
         {
             /**
@@ -9231,7 +9805,7 @@ declare type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;
  *     `
  * }
  */
-export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_14<
+export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_15<
     DefineComponent<
         {
             /**
@@ -9334,7 +9908,7 @@ export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_14<
  *     `
  * }
  */
-export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_13<
+export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_14<
     DefineComponent<
         {
             /**
@@ -9864,7 +10438,7 @@ export declare type BentoInputDropdownProps = {
  *          >
  * }
  */
-export declare const BentoInputField: __VLS_WithTemplateSlots_15<
+export declare const BentoInputField: __VLS_WithTemplateSlots_16<
     DefineComponent<
         {
             /**
@@ -10336,10 +10910,10 @@ export declare type BentoLazyLoadType = 'automatic' | 'button' | 'none';
  *     `
  * }
  */
-export declare const BentoLink: __VLS_WithTemplateSlots_16<
+export declare const BentoLink: __VLS_WithTemplateSlots_17<
     DefineComponent<
-        __VLS_WithDefaults_3<
-            __VLS_TypePropsToRuntimeProps_3<LinkProps>,
+        __VLS_WithDefaults_5<
+            __VLS_TypePropsToRuntimeProps_5<LinkProps>,
             {
                 target: any;
                 variant: BentoLinkVariant;
@@ -10357,8 +10931,8 @@ export declare const BentoLink: __VLS_WithTemplateSlots_16<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_3<
-                    __VLS_TypePropsToRuntimeProps_3<LinkProps>,
+                __VLS_WithDefaults_5<
+                    __VLS_TypePropsToRuntimeProps_5<LinkProps>,
                     {
                         target: any;
                         variant: BentoLinkVariant;
@@ -10928,7 +11502,7 @@ export declare interface BentoMenuItem {
  *     `
  * };
  */
-export declare const BentoModal: __VLS_WithTemplateSlots_18<
+export declare const BentoModal: __VLS_WithTemplateSlots_19<
     DefineComponent<
         {
             /**
@@ -11287,7 +11861,7 @@ export declare enum BentoModalEvent {
  *     `
  * }
  */
-export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_19<
+export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_20<
     DefineComponent<
         {
             /**
@@ -11444,7 +12018,7 @@ export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_19<
  *     `
  * }
  */
-export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_20<
+export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_21<
     DefineComponent<
         {
             /**
@@ -11603,7 +12177,7 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_20<
  *     `
  * }
  */
-export declare const BentoModalPage: __VLS_WithTemplateSlots_17<
+export declare const BentoModalPage: __VLS_WithTemplateSlots_18<
     DefineComponent<
         {
             /**
@@ -13202,7 +13776,7 @@ export declare enum BentoPaymentMethodType {
  *     `
  * }
  */
-export declare const BentoPopover: __VLS_WithTemplateSlots_21<
+export declare const BentoPopover: __VLS_WithTemplateSlots_22<
     DefineComponent<
         {
             /**
@@ -13702,7 +14276,7 @@ export declare type BentoPopoverPositions = PopperContainerPosition;
  *     }
  * }
  */
-export declare const BentoRadioButton: __VLS_WithTemplateSlots_23<
+export declare const BentoRadioButton: __VLS_WithTemplateSlots_24<
     DefineComponent<
         {
             /**
@@ -13953,7 +14527,7 @@ export declare type BentoRadioButtonValue = string | number;
  *     `
  * };
  */
-export declare const BentoRadioGroup: __VLS_WithTemplateSlots_22<
+export declare const BentoRadioGroup: __VLS_WithTemplateSlots_23<
     DefineComponent<
         {
             /**
@@ -14404,7 +14978,7 @@ export declare interface BentoSearchBarItem {
  * }
  */
 export declare const BentoSecondaryNav: DefineComponent<
-    __VLS_TypePropsToRuntimeProps_4<{
+    __VLS_TypePropsToRuntimeProps_6<{
         /**
          * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },
          * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.
@@ -14427,7 +15001,7 @@ export declare const BentoSecondaryNav: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_TypePropsToRuntimeProps_4<{
+            __VLS_TypePropsToRuntimeProps_6<{
                 /**
                  * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },
                  * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.
@@ -14473,121 +15047,82 @@ export declare interface BentoSecondaryNavState {
  *              @update:model-value="yourUpdateHandler"
  *          />
  *     `
- * }
- */
-export declare const BentoSegmentedControl: DefineComponent<
-    {
-        /**
-         * Items that will populate the segmented control.
-         */
-        items: {
-            type: PropType<BentoSegmentedControlItem[]>;
-            required: true;
-            validator: (arr: Array<BentoSegmentedControlItem[]>) => boolean;
-        };
-        /**
-         * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
-         */
-        modelValue: {
-            type: (StringConstructor | NumberConstructor)[];
-            required: true;
-        };
-        /**
-         * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-         */
-        /**
-         * Accessible name describing the segmented control.
-         */
-        ariaLabel: {
-            type: StringConstructor;
-            default: any;
-        };
-        /**
-         * If set to true, renders the component full width.
-         */
-        fullWidth: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
-         */
-        wrap: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    },
-    {
-        computedAriaLabel: ComputedRef<string>;
-        inputValue: Ref<string | number>;
-        segmentedControlRef: Ref<any>;
-        segmentedControlButtonRef: Ref<any>;
-        computedItems: ComputedRef<
-            {
-                tooltipText: string;
-                label: string;
-                value: string | number;
-                disabled?: boolean;
-            }[]
-        >;
-        truncate: ComputedRef<boolean>;
-        conditionalClasses: ComputedRef<{
-            'b-segmented-control--hug': boolean;
-            'b-segmented-control--full-width': boolean;
-            'b-segmented-control--truncate': boolean;
-            'b-segmented-control--wrap': boolean;
-        }>;
-        onInput: (value: any) => void;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    BentoSegmentedControlEvent[],
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            /**
-             * Items that will populate the segmented control.
-             */
-            items: {
-                type: PropType<BentoSegmentedControlItem[]>;
-                required: true;
-                validator: (arr: Array<BentoSegmentedControlItem[]>) => boolean;
-            };
+ * }
+ */
+export declare const BentoSegmentedControl: DefineComponent<
+    __VLS_WithDefaults_6<
+        __VLS_TypePropsToRuntimeProps_7<{
             /**
-             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
+             * Accessible name describing the segmented control.
+             * @deprecated from version 2.0.0. Use the aria-label attribute instead.
              */
-            modelValue: {
-                type: (StringConstructor | NumberConstructor)[];
-                required: true;
-            };
+            ariaLabel?: string;
             /**
-             * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+             * If set to true, renders the component full width.
              */
+            fullWidth?: boolean;
             /**
-             * Accessible name describing the segmented control.
+             * Items that will populate the segmented control.
              */
-            ariaLabel: {
-                type: StringConstructor;
-                default: any;
-            };
+            items: BentoSegmentedControlItem[];
             /**
-             * If set to true, renders the component full width.
+             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
              */
-            fullWidth: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
+            modelValue: string | number;
             /**
              * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
              */
-            wrap: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>
+            wrap?: boolean;
+        }>,
+        {
+            ariaLabel: any;
+            fullWidth: boolean;
+            wrap: boolean;
+        }
+    >,
+    {},
+    {},
+    {},
+    {},
+    ComponentOptionsMixin,
+    ComponentOptionsMixin,
+    {
+        'update:model-value': (value: string | number) => void;
+    },
+    string,
+    Readonly<
+        ExtractPropTypes<
+            __VLS_WithDefaults_6<
+                __VLS_TypePropsToRuntimeProps_7<{
+                    /**
+                     * Accessible name describing the segmented control.
+                     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+                     */
+                    ariaLabel?: string;
+                    /**
+                     * If set to true, renders the component full width.
+                     */
+                    fullWidth?: boolean;
+                    /**
+                     * Items that will populate the segmented control.
+                     */
+                    items: BentoSegmentedControlItem[];
+                    /**
+                     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
+                     */
+                    modelValue: string | number;
+                    /**
+                     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
+                     */
+                    wrap?: boolean;
+                }>,
+                {
+                    ariaLabel: any;
+                    fullWidth: boolean;
+                    wrap: boolean;
+                }
+            >
+        >
     >,
     {
         wrap: boolean;
@@ -14596,6 +15131,9 @@ export declare const BentoSegmentedControl: DefineComponent<
     }
 >;
 
+/**
+ * @deprecated from version 2.0.0. Use "@update:model-value" or "v-model" instead
+ */
 export declare enum BentoSegmentedControlEvent {
     UPDATE = 'update:model-value',
 }
@@ -14712,7 +15250,7 @@ export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
  *     `
  * }
  */
-export declare const BentoSelectionCard: __VLS_WithTemplateSlots_24<
+export declare const BentoSelectionCard: __VLS_WithTemplateSlots_25<
     DefineComponent<
         {
             /**
@@ -14907,7 +15445,7 @@ export declare const BentoSelectionCard: __VLS_WithTemplateSlots_24<
  *     `,
  * }
  */
-export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_25<
+export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_26<
     DefineComponent<
         {
             /**
@@ -15222,7 +15760,7 @@ export declare type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOp
  *     `
  * }
  */
-export declare const BentoSidepanel: __VLS_WithTemplateSlots_27<
+export declare const BentoSidepanel: __VLS_WithTemplateSlots_28<
     DefineComponent<
         {
             /**
@@ -15340,7 +15878,7 @@ export declare enum BentoSidepanelEvent {
  *     `
  * }
  */
-export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_26<
+export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_27<
     DefineComponent<
         {
             /**
@@ -15500,36 +16038,31 @@ export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_26<
  *     `
  * }
  */
-export declare const BentoStatus: DefineComponent<
-    {
-        variant: {
-            type: PropType<'blue' | 'green' | 'red' | 'yellow' | 'grey' | 'orange' | BentoStatusVariant>;
-            required: true;
-            validator: (type: BentoStatusVariant) => boolean;
-        };
-    },
-    {
-        conditionalClass: ComputedRef<{
-            [x: string]: boolean;
-        }>;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    {},
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            variant: {
-                type: PropType<'blue' | 'green' | 'red' | 'yellow' | 'grey' | 'orange' | BentoStatusVariant>;
-                required: true;
-                validator: (type: BentoStatusVariant) => boolean;
-            };
-        }>
+export declare const BentoStatus: __VLS_WithTemplateSlots_29<
+    DefineComponent<
+        __VLS_TypePropsToRuntimeProps_8<{
+            variant: BentoStatusVariant | `${BentoStatusVariant}`;
+        }>,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_TypePropsToRuntimeProps_8<{
+                    variant: BentoStatusVariant | `${BentoStatusVariant}`;
+                }>
+            >
+        >,
+        {}
     >,
-    {}
+    {
+        default: (_: {}) => any;
+    }
 >;
 
 /**
@@ -15566,7 +16099,7 @@ export declare enum BentoStatusVariant {
  *     `
  * }
  */
-export declare const BentoStep: __VLS_WithTemplateSlots_29<
+export declare const BentoStep: __VLS_WithTemplateSlots_31<
     DefineComponent<
         {
             /**
@@ -15640,7 +16173,7 @@ export declare const BentoStep: __VLS_WithTemplateSlots_29<
  *     `
  * }
  */
-export declare const BentoStepper: __VLS_WithTemplateSlots_28<
+export declare const BentoStepper: __VLS_WithTemplateSlots_30<
     DefineComponent<
         {
             /**
@@ -15766,51 +16299,14 @@ export declare enum BentoStepperVariantOption {
  *     `
  * }
  */
-export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
+export declare const BentoStructuredList: __VLS_WithTemplateSlots_32<
     DefineComponent<
-        {
-            /**
-             * Width of the labels container, in pixels. Overrides layout prop.
-             */
-            labelsWidth: {
-                type: NumberConstructor;
-                default: any;
-            };
-            /**
-             * The layout of the label value pair in percentage.
-             * If labelsWidth is set, layout will be overriden by the static pixel value.
-             *
-             * If the value entered is not listed in the example
-             * list below '33-66' will be applied
-             * @example
-             * '25-75'
-             * '33-66'
-             * '42-58'
-             * '50-50'
-             */
-            layout: {
-                type: PropType<BentoStructuredListLayoutOptions>;
-                default: string;
-                validator: (value: BentoStructuredListLayoutOptions) => boolean;
-            };
-        },
-        {},
-        {},
-        {},
-        {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
-        {},
-        string,
-        Readonly<
-            ExtractPropTypes<{
+        __VLS_WithDefaults_7<
+            __VLS_TypePropsToRuntimeProps_9<{
                 /**
                  * Width of the labels container, in pixels. Overrides layout prop.
                  */
-                labelsWidth: {
-                    type: NumberConstructor;
-                    default: any;
-                };
+                labelsWidth?: number;
                 /**
                  * The layout of the label value pair in percentage.
                  * If labelsWidth is set, layout will be overriden by the static pixel value.
@@ -15823,12 +16319,49 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
                  * '42-58'
                  * '50-50'
                  */
-                layout: {
-                    type: PropType<BentoStructuredListLayoutOptions>;
-                    default: string;
-                    validator: (value: BentoStructuredListLayoutOptions) => boolean;
-                };
-            }>
+                layout?: BentoStructuredListLayoutOptions;
+            }>,
+            {
+                labelsWidth: any;
+                layout: string;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_7<
+                    __VLS_TypePropsToRuntimeProps_9<{
+                        /**
+                         * Width of the labels container, in pixels. Overrides layout prop.
+                         */
+                        labelsWidth?: number;
+                        /**
+                         * The layout of the label value pair in percentage.
+                         * If labelsWidth is set, layout will be overriden by the static pixel value.
+                         *
+                         * If the value entered is not listed in the example
+                         * list below '33-66' will be applied
+                         * @example
+                         * '25-75'
+                         * '33-66'
+                         * '42-58'
+                         * '50-50'
+                         */
+                        layout?: BentoStructuredListLayoutOptions;
+                    }>,
+                    {
+                        labelsWidth: any;
+                        layout: string;
+                    }
+                >
+            >
         >,
         {
             layout: BentoStructuredListLayoutOptions;
@@ -15865,102 +16398,76 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
  *     `
  * }
  */
-export declare const BentoStructuredListItem: DefineComponent<
-    {
-        /**
-         * Label to display for the value
-         */
-        label: {
-            type: StringConstructor;
-            required: true;
-        };
-        /**
-         * Text to display in info icon tooltip in the label to display for the value
-         */
-        labelInfo: {
-            type: StringConstructor;
-            default: any;
-        };
-        /**
-         * Text to copy when the user clicks `Copy` icon
-         */
-        copy: {
-            type: StringConstructor;
-            default: any;
-        };
-        /**
-         * Function to trigger when user clicks `Search` icon
-         */
-        search: {
-            type: PropType<(event: Event) => void>;
-            default: any;
-        };
-        /**
-         * Text to display when the user hovers over `Search` icon
-         */
-        searchTooltip: {
-            type: StringConstructor;
-            default: any;
-        };
-    },
-    {
-        conditionalClasses: ComputedRef<{
-            'b-structured-list-item--condensed': boolean;
-        }>;
-        labelTypographyVariant: ComputedRef<'caption' | 'body'>;
-        labelsWidth: Ref<string>;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    {},
-    string,
-    Readonly<
-        ExtractPropTypes<{
+export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_33<
+    DefineComponent<
+        __VLS_TypePropsToRuntimeProps_10<{
             /**
              * Label to display for the value
              */
-            label: {
-                type: StringConstructor;
-                required: true;
-            };
+            label: string;
             /**
              * Text to display in info icon tooltip in the label to display for the value
              */
-            labelInfo: {
-                type: StringConstructor;
-                default: any;
-            };
+            labelInfo?: string;
             /**
              * Text to copy when the user clicks `Copy` icon
              */
-            copy: {
-                type: StringConstructor;
-                default: any;
-            };
+            copy?: string;
             /**
              * Function to trigger when user clicks `Search` icon
              */
-            search: {
-                type: PropType<(event: Event) => void>;
-                default: any;
-            };
+            search?: (event: Event) => void;
             /**
              * Text to display when the user hovers over `Search` icon
              */
-            searchTooltip: {
-                type: StringConstructor;
-                default: any;
-            };
-        }>
+            searchTooltip?: string;
+            /**
+             * Truncates the value of the item
+             */
+            truncate?: boolean;
+        }>,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_TypePropsToRuntimeProps_10<{
+                    /**
+                     * Label to display for the value
+                     */
+                    label: string;
+                    /**
+                     * Text to display in info icon tooltip in the label to display for the value
+                     */
+                    labelInfo?: string;
+                    /**
+                     * Text to copy when the user clicks `Copy` icon
+                     */
+                    copy?: string;
+                    /**
+                     * Function to trigger when user clicks `Search` icon
+                     */
+                    search?: (event: Event) => void;
+                    /**
+                     * Text to display when the user hovers over `Search` icon
+                     */
+                    searchTooltip?: string;
+                    /**
+                     * Truncates the value of the item
+                     */
+                    truncate?: boolean;
+                }>
+            >
+        >,
+        {}
     >,
     {
-        search: (event: Event) => void;
-        copy: string;
-        labelInfo: string;
-        searchTooltip: string;
+        default: (_: {}) => any;
     }
 >;
 
@@ -17011,6 +17518,75 @@ export declare const BentoTabs: DefineComponent<
     {
         tabs: Ref<BentoTab_2[]>;
         tablist: any;
+        tablistwrapper: Ref<
+            Vue3Instance<
+                {},
+                Readonly<
+                    ExtractPropTypes<{
+                        condensed: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        extraPaddingTop: {
+                            type: NumberConstructor;
+                            default: number;
+                        };
+                    }>
+                >,
+                Readonly<
+                    ExtractPropTypes<{
+                        condensed: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        extraPaddingTop: {
+                            type: NumberConstructor;
+                            default: number;
+                        };
+                    }>
+                >,
+                {},
+                {
+                    condensed: boolean;
+                    extraPaddingTop: number;
+                },
+                true,
+                ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>
+            > &
+                Readonly<
+                    Readonly<
+                        ExtractPropTypes<{
+                            condensed: {
+                                type: BooleanConstructor;
+                                default: boolean;
+                            };
+                            extraPaddingTop: {
+                                type: NumberConstructor;
+                                default: number;
+                            };
+                        }>
+                    >
+                > &
+                ShallowUnwrapRef<{}> &
+                ExtractComputedReturns<{}> &
+                ComponentCustomProperties &
+                Readonly<
+                    ExtractPropTypes<{
+                        condensed: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        extraPaddingTop: {
+                            type: NumberConstructor;
+                            default: number;
+                        };
+                    }>
+                > & {
+                    $slots: {
+                        default: (_: {}) => any;
+                    };
+                }
+        >;
         activeTabId: Ref<string>;
         onKeydownTabsNavigation: (e: KeyboardEvent) => void;
         handleTabChange: (tabId: string) => void;
@@ -18321,6 +18897,13 @@ export declare enum BentoTooltipState {
  */
 export declare const BentoTutorial: DefineComponent<
     {
+        /**
+         * The current step index. If provided, will start the tutorial in that step.
+         */
+        index: {
+            type: NumberConstructor;
+            default: any;
+        };
         /**
          * The steps configuration for the tutorial.
          *
@@ -18346,10 +18929,19 @@ export declare const BentoTutorial: DefineComponent<
     {},
     ComponentOptionsMixin,
     ComponentOptionsMixin,
-    {},
+    {
+        'update:index': (value: number) => void;
+    },
     string,
     Readonly<
         ExtractPropTypes<{
+            /**
+             * The current step index. If provided, will start the tutorial in that step.
+             */
+            index: {
+                type: NumberConstructor;
+                default: any;
+            };
             /**
              * The steps configuration for the tutorial.
              *
@@ -18371,6 +18963,7 @@ export declare const BentoTutorial: DefineComponent<
         }>
     >,
     {
+        index: number;
         scrollOptions: any;
     }
 >;
@@ -18404,10 +18997,10 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: __VLS_WithTemplateSlots_31<
+export declare const BentoTypography: __VLS_WithTemplateSlots_34<
     DefineComponent<
-        __VLS_WithDefaults_4<
-            __VLS_TypePropsToRuntimeProps_5<{
+        __VLS_WithDefaults_8<
+            __VLS_TypePropsToRuntimeProps_11<{
                 /**
                  * Sets the HTML DOM element.
                  * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -18464,8 +19057,8 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_31<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_4<
-                    __VLS_TypePropsToRuntimeProps_5<{
+                __VLS_WithDefaults_8<
+                    __VLS_TypePropsToRuntimeProps_11<{
                         /**
                          * Sets the HTML DOM element.
                          * @values h1, h2, h3, h4, h5, h6, div, p, span