@adyen/bento-vue2 1.24.0 → 1.26.0

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

@@ -28,6 +28,10 @@ declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
 
+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_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -61,6 +65,28 @@ declare type __VLS_TypePropsToRuntimeProps_3<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_4<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_4<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_5<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_5<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] & {
@@ -77,6 +103,22 @@ declare type __VLS_WithDefaults_2<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_3<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_4<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;
@@ -221,6 +263,18 @@ declare type __VLS_WithTemplateSlots_30<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_31<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_32<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -589,98 +643,84 @@ export declare type BentoActionBarVariant = 'default' | 'confirmation';
  *     `
  * }
  */
-export declare const BentoAlert: DefineComponent<
-    {
-        /**
-         * Adds a close button on the right side of the alert
-         */
-        closeButton: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Type of a alert; set a distinctive icon and color. Defaults to highlight.
-         * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
-         */
-        type: {
-            type: PropType<'critical' | 'success' | 'warning' | 'highlight' | BentoAlertTypeOption>;
-            default: BentoAlertTypeOption;
-            validator: (value: BentoAlertTypeOption) => boolean;
-        };
-        /**
-         * Variant for the alert
-         * @values DEFAULT, TIP
-         */
-        variant: {
-            type: PropType<'default' | 'tip' | BentoAlertVariant>;
-            default: BentoAlertVariant;
-            validator: (value: BentoAlertVariant) => boolean;
-        };
-    },
-    {
-        alertConditionalClasses: ComputedRef<{
-            [x: string]: boolean | 'critical' | 'success' | 'warning' | 'highlight' | BentoAlertTypeOption;
-        }>;
-        computedRole: ComputedRef<'alert' | 'status'>;
-        descriptionTypography: ComputedRef<{
-            el: BentoTypographyElement;
-            variant: BentoTypographyVariant;
-            wide: boolean;
-        }>;
-        iconComponent: ComputedRef<any>;
-        iconSvgTitle: ComputedRef<string>;
-        isTipVariant: ComputedRef<boolean>;
-        onCloseButtonClick: () => void;
-        hasSlot: (name: string) => boolean;
-        t: (
-            key: 'close' | 'highlightIcon' | 'successIcon' | 'criticalIcon' | 'warningIcon',
-            values?: default_2.Values
-        ) => string;
-        BentoTypographyVariant: typeof BentoTypographyVariant;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    BentoAlertEvent[],
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            /**
-             * Adds a close button on the right side of the alert
-             */
-            closeButton: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Type of a alert; set a distinctive icon and color. Defaults to highlight.
-             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
-             */
-            type: {
-                type: PropType<'critical' | 'success' | 'warning' | 'highlight' | BentoAlertTypeOption>;
-                default: BentoAlertTypeOption;
-                validator: (value: BentoAlertTypeOption) => boolean;
-            };
-            /**
-             * Variant for the alert
-             * @values DEFAULT, TIP
-             */
-            variant: {
-                type: PropType<'default' | 'tip' | BentoAlertVariant>;
-                default: BentoAlertVariant;
-                validator: (value: BentoAlertVariant) => boolean;
-            };
-        }>
+export declare const BentoAlert: __VLS_WithTemplateSlots_3<
+    DefineComponent<
+        __VLS_WithDefaults<
+            __VLS_TypePropsToRuntimeProps<{
+                /**
+                 * Adds a close button on the right side of the alert
+                 */
+                closeButton?: boolean;
+                /**
+                 * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+                 * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
+                 */
+                type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;
+                /**
+                 * Variant for the alert
+                 * @values DEFAULT, TIP
+                 */
+                variant?: BentoAlertVariant | `${BentoAlertVariant}`;
+            }>,
+            {
+                closeButton: boolean;
+                type: BentoAlertTypeOption;
+                variant: BentoAlertVariant;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {
+            'close-alert': () => void;
+        },
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults<
+                    __VLS_TypePropsToRuntimeProps<{
+                        /**
+                         * Adds a close button on the right side of the alert
+                         */
+                        closeButton?: boolean;
+                        /**
+                         * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+                         * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
+                         */
+                        type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;
+                        /**
+                         * Variant for the alert
+                         * @values DEFAULT, TIP
+                         */
+                        variant?: BentoAlertVariant | `${BentoAlertVariant}`;
+                    }>,
+                    {
+                        closeButton: boolean;
+                        type: BentoAlertTypeOption;
+                        variant: BentoAlertVariant;
+                    }
+                >
+            >
+        >,
+        {
+            type: BentoAlertTypeOption | `${BentoAlertTypeOption}`;
+            variant: BentoAlertVariant | `${BentoAlertVariant}`;
+            closeButton: boolean;
+        }
     >,
     {
-        type: 'critical' | 'success' | 'warning' | 'highlight' | BentoAlertTypeOption;
-        variant: 'default' | 'tip' | BentoAlertVariant;
-        closeButton: boolean;
+        default: (_: {}) => any;
+        description: (_: {}) => any;
+        actions: (_: {}) => any;
     }
 >;
 
+/**
+ * @deprecated from version 2.0.0. Use "@close-alert" instead.
+ */
 export declare enum BentoAlertEvent {
     CLOSE_ALERT = 'close-alert',
 }
@@ -748,7 +788,7 @@ export declare type BentoBooleanFilterValue = string | null;
  *     `,
  * }
  */
-export declare const BentoButton: __VLS_WithTemplateSlots_3<
+export declare const BentoButton: __VLS_WithTemplateSlots_4<
     DefineComponent<
         {
             /**
@@ -1162,371 +1202,180 @@ export declare enum BentoButtonVariant {
  *     `
  * };
  */
-export declare const BentoCard: DefineComponent<
-    {
-        /**
-         * Defines the color of card background
-         */
-        background: {
-            type: PropType<'primary' | 'secondary' | BentoCardBackground>;
-            default: BentoCardBackground;
-            validator: (value: BentoCardBackground) => boolean;
-        };
-        /**
-         * Defines the title size of the card header
-         */
-        titleSize: {
-            type: PropType<'default' | 'small' | BentoCardTitleSize>;
-            default: BentoCardTitleSize;
-            validator: (value: BentoCardTitleSize) => boolean;
-        };
-        /**
-         * The whole content of the card will be expandable in accordion manner
-         */
-        expandable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Sets the expandable card in a closed state
-         */
-        closed: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Disables the expandable card
-         */
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * List of actions that will be used to render the buttons.
-         * First element in the list will be rendered as "primary".
-         * All elements after the first will be rendered as "secondary".
-         *
-         * Each object in the list should have a `title`, an `event` and
-         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-         *
-         * `title`: Button's text.
-         *
-         * `event`: Event triggered when clicking the Button.
-         *
-         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
-         *
-         * ```
-         * [{
-         *   title: 'Primary',
-         *   event: () => { ... },
-         *   icon: FourPeopleIcon
-         * }, {
-         *   title: 'Secondary',
-         *   event: () => { ... }
-         * }]
-         * ```
-         */
-        actions: {
-            type: PropType<BentoButtonActionsList>;
-            default: any;
-        };
-        /**
-         * Defines the layout in which the button actions is presented.
-         * It can be one of:
-         *
-         * @values BUTTONS_START
-         * @values BUTTONS_END
-         * @values FILL_CONTAINER
-         * @values SPACE_BETWEEN
-         * @values VERTICAL_STACK
-         */
-        actionsLayout: {
-            type: PropType<
-                | 'space-between'
-                | BentoButtonActionsLayout
-                | 'buttons-end'
-                | 'fill-container'
-                | 'vertical-stack'
-                | 'buttons-start'
-            >;
-            default: BentoButtonActionsLayoutBasic;
-            validator: (value: BentoButtonActionsLayout) => boolean;
-        };
-    },
-    {
-        cardId: string;
-        cardConditionalClasses: ComputedRef<{
-            [x: string]: boolean | 'primary' | 'secondary' | BentoCardBackground;
-            'b-card--expandable': boolean;
-            'b-card--disabled': boolean;
-        }>;
-        cardBodyConditionalClasses: ComputedRef<{
-            'b-card__body--expandable': boolean;
-            'b-card__body--without-header': boolean;
-        }>;
-        cardHeaderConditionalClasses: ComputedRef<{
-            'b-card__header--expandable': boolean;
-            'b-card__header--without-body': boolean;
-        }>;
-        cardContentConditionalClasses: ComputedRef<{
-            'b-card__content--without-header': boolean;
-            'b-card__content--expandable': boolean;
-        }>;
-        cardActionsConditionalClasses: ComputedRef<{
-            'b-card__actions--without-content': boolean;
-            'b-card__actions--without-content-and-with-header': boolean;
-        }>;
-        cardTitleWrapperConditionalClasses: ComputedRef<{
-            'b-card__title-wrapper--truncated': boolean;
-        }>;
-        cardToggleConditionalClasses: ComputedRef<{
-            'b-card__toggle--small-text': boolean;
-        }>;
-        showCardBody: ComputedRef<boolean>;
-        showContent: Ref<boolean>;
-        tabIndex: ComputedRef<-1 | 0>;
-        showHeader: ComputedRef<boolean>;
-        showTitleWrapper: ComputedRef<boolean>;
-        typography: ComputedRef<
-            Readonly<
-                Partial<{
-                    el: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement;
-                    wide: boolean;
-                    stronger: boolean;
-                    strongest: boolean;
-                    large: boolean;
-                    medium: boolean;
-                    variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-                }> &
-                    Omit<
-                        Readonly<
-                            ExtractPropTypes<{
-                                el: {
-                                    type: PropType<
-                                        | 'div'
-                                        | 'h1'
-                                        | 'h2'
-                                        | 'h3'
-                                        | 'h4'
-                                        | 'h5'
-                                        | 'h6'
-                                        | 'p'
-                                        | 'span'
-                                        | BentoTypographyElement
-                                    >;
-                                } & {
-                                    default: BentoTypographyElement;
-                                };
-                                wide: {
-                                    type: PropType<boolean>;
-                                } & {
-                                    default: boolean;
-                                };
-                                stronger: {
-                                    type: PropType<boolean>;
-                                } & {
-                                    default: boolean;
-                                };
-                                strongest: {
-                                    type: PropType<boolean>;
-                                } & {
-                                    default: boolean;
-                                };
-                                large: {
-                                    type: PropType<boolean>;
-                                } & {
-                                    default: boolean;
-                                };
-                                medium: {
-                                    type: PropType<boolean>;
-                                } & {
-                                    default: boolean;
-                                };
-                                variant: {
-                                    type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                } & {
-                                    default: BentoTypographyVariant;
-                                };
-                            }>
-                        >,
-                        DefaultKeys<{
-                            el: {
-                                type: PropType<
-                                    | 'div'
-                                    | 'h1'
-                                    | 'h2'
-                                    | 'h3'
-                                    | 'h4'
-                                    | 'h5'
-                                    | 'h6'
-                                    | 'p'
-                                    | 'span'
-                                    | BentoTypographyElement
-                                >;
-                            } & {
-                                default: BentoTypographyElement;
-                            };
-                            wide: {
-                                type: PropType<boolean>;
-                            } & {
-                                default: boolean;
-                            };
-                            stronger: {
-                                type: PropType<boolean>;
-                            } & {
-                                default: boolean;
-                            };
-                            strongest: {
-                                type: PropType<boolean>;
-                            } & {
-                                default: boolean;
-                            };
-                            large: {
-                                type: PropType<boolean>;
-                            } & {
-                                default: boolean;
-                            };
-                            medium: {
-                                type: PropType<boolean>;
-                            } & {
-                                default: boolean;
-                            };
-                            variant: {
-                                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                            } & {
-                                default: BentoTypographyVariant;
-                            };
-                        }>
-                    >
+export declare const BentoCard: __VLS_WithTemplateSlots_10<
+    DefineComponent<
+        __VLS_WithDefaults_2<
+            __VLS_TypePropsToRuntimeProps_2<{
+                /**
+                 * List of actions that will be used to render the buttons.
+                 * First element in the list will be rendered as "primary".
+                 * All elements after the first will be rendered as "secondary".
+                 *
+                 * Each object in the list should have a `title`, an `event` and
+                 * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+                 *
+                 * `title`: Button's text.
+                 *
+                 * `event`: Event triggered when clicking the Button.
+                 *
+                 * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+                 *
+                 * ```
+                 * [{
+                 *   title: 'Primary',
+                 *   event: () => { ... },
+                 *   icon: FourPeopleIcon
+                 * }, {
+                 *   title: 'Secondary',
+                 *   event: () => { ... }
+                 * }]
+                 * ```
+                 */
+                actions?: BentoButtonActionsList;
+                /**
+                 * Defines the layout in which the button actions is presented.
+                 * It can be one of:
+                 *
+                 * @values BUTTONS_START
+                 * @values BUTTONS_END
+                 * @values FILL_CONTAINER
+                 * @values SPACE_BETWEEN
+                 * @values VERTICAL_STACK
+                 */
+                actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;
+                /**
+                 * Defines the color of card background
+                 */
+                background?: BentoCardBackground | `${BentoCardBackground}`;
+                /**
+                 * Sets the expandable card in a closed state
+                 */
+                closed?: boolean;
+                /**
+                 * Disables the expandable card
+                 */
+                disabled?: boolean;
+                /**
+                 * The whole content of the card will be expandable in accordion manner
+                 */
+                expandable?: boolean;
+                /**
+                 * Defines the title size of the card header
+                 */
+                titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;
+            }>,
+            {
+                actions: any;
+                actionsLayout: BentoButtonActionsLayoutBasic;
+                background: BentoCardBackground;
+                closed: boolean;
+                disabled: boolean;
+                expandable: boolean;
+                titleSize: BentoCardTitleSize;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {
+            click: () => void;
+        } & {
+            expanded: (isExpanded: boolean) => void;
+        },
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_2<
+                    __VLS_TypePropsToRuntimeProps_2<{
+                        /**
+                         * List of actions that will be used to render the buttons.
+                         * First element in the list will be rendered as "primary".
+                         * All elements after the first will be rendered as "secondary".
+                         *
+                         * Each object in the list should have a `title`, an `event` and
+                         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+                         *
+                         * `title`: Button's text.
+                         *
+                         * `event`: Event triggered when clicking the Button.
+                         *
+                         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+                         *
+                         * ```
+                         * [{
+                         *   title: 'Primary',
+                         *   event: () => { ... },
+                         *   icon: FourPeopleIcon
+                         * }, {
+                         *   title: 'Secondary',
+                         *   event: () => { ... }
+                         * }]
+                         * ```
+                         */
+                        actions?: BentoButtonActionsList;
+                        /**
+                         * Defines the layout in which the button actions is presented.
+                         * It can be one of:
+                         *
+                         * @values BUTTONS_START
+                         * @values BUTTONS_END
+                         * @values FILL_CONTAINER
+                         * @values SPACE_BETWEEN
+                         * @values VERTICAL_STACK
+                         */
+                        actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;
+                        /**
+                         * Defines the color of card background
+                         */
+                        background?: BentoCardBackground | `${BentoCardBackground}`;
+                        /**
+                         * Sets the expandable card in a closed state
+                         */
+                        closed?: boolean;
+                        /**
+                         * Disables the expandable card
+                         */
+                        disabled?: boolean;
+                        /**
+                         * The whole content of the card will be expandable in accordion manner
+                         */
+                        expandable?: boolean;
+                        /**
+                         * Defines the title size of the card header
+                         */
+                        titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;
+                    }>,
+                    {
+                        actions: any;
+                        actionsLayout: BentoButtonActionsLayoutBasic;
+                        background: BentoCardBackground;
+                        closed: boolean;
+                        disabled: boolean;
+                        expandable: boolean;
+                        titleSize: BentoCardTitleSize;
+                    }
+                >
             >
-        >;
-        contentDiv: Ref<HTMLDivElement>;
-        contentMaxHeight: ComputedRef<
-            | {
-                  'max-height': string;
-              }
-            | {
-                  'max-height'?: undefined;
-              }
-        >;
-        hasSlot: (name: string) => boolean;
-        onClick: () => void;
-        t: (key: 'showCardContent' | 'hideCardContent', values?: default_2.Values) => string;
-        toggleExpansion: () => void;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    ('click' | 'expanded')[],
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            /**
-             * Defines the color of card background
-             */
-            background: {
-                type: PropType<'primary' | 'secondary' | BentoCardBackground>;
-                default: BentoCardBackground;
-                validator: (value: BentoCardBackground) => boolean;
-            };
-            /**
-             * Defines the title size of the card header
-             */
-            titleSize: {
-                type: PropType<'default' | 'small' | BentoCardTitleSize>;
-                default: BentoCardTitleSize;
-                validator: (value: BentoCardTitleSize) => boolean;
-            };
-            /**
-             * The whole content of the card will be expandable in accordion manner
-             */
-            expandable: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Sets the expandable card in a closed state
-             */
-            closed: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Disables the expandable card
-             */
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * List of actions that will be used to render the buttons.
-             * First element in the list will be rendered as "primary".
-             * All elements after the first will be rendered as "secondary".
-             *
-             * Each object in the list should have a `title`, an `event` and
-             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-             *
-             * `title`: Button's text.
-             *
-             * `event`: Event triggered when clicking the Button.
-             *
-             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
-             *
-             * ```
-             * [{
-             *   title: 'Primary',
-             *   event: () => { ... },
-             *   icon: FourPeopleIcon
-             * }, {
-             *   title: 'Secondary',
-             *   event: () => { ... }
-             * }]
-             * ```
-             */
-            actions: {
-                type: PropType<BentoButtonActionsList>;
-                default: any;
-            };
-            /**
-             * Defines the layout in which the button actions is presented.
-             * It can be one of:
-             *
-             * @values BUTTONS_START
-             * @values BUTTONS_END
-             * @values FILL_CONTAINER
-             * @values SPACE_BETWEEN
-             * @values VERTICAL_STACK
-             */
-            actionsLayout: {
-                type: PropType<
-                    | 'space-between'
-                    | BentoButtonActionsLayout
-                    | 'buttons-end'
-                    | 'fill-container'
-                    | 'vertical-stack'
-                    | 'buttons-start'
-                >;
-                default: BentoButtonActionsLayoutBasic;
-                validator: (value: BentoButtonActionsLayout) => boolean;
-            };
-        }>
+        >,
+        {
+            titleSize: BentoCardTitleSize | `${BentoCardTitleSize}`;
+            disabled: boolean;
+            background: BentoCardBackground | `${BentoCardBackground}`;
+            actions: BentoButtonActionsList;
+            actionsLayout: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;
+            closed: boolean;
+            expandable: boolean;
+        }
     >,
     {
-        titleSize: 'default' | 'small' | BentoCardTitleSize;
-        disabled: boolean;
-        background: 'primary' | 'secondary' | BentoCardBackground;
-        actions: BentoButtonActionsList;
-        actionsLayout:
-            | 'space-between'
-            | BentoButtonActionsLayout
-            | 'buttons-end'
-            | 'fill-container'
-            | 'vertical-stack'
-            | 'buttons-start';
-        closed: boolean;
-        expandable: boolean;
+        image: (_: {}) => any;
+        default: (_: {}) => any;
+        header: (_: {}) => any;
+        description: (_: {}) => any;
+        content: (_: {}) => any;
     }
 >;
 
@@ -1880,9 +1729,9 @@ export declare const BentoCheckbox: DefineComponent<
         disabled: boolean;
         tag: any;
         optional: boolean;
-        readonly: boolean;
         errorMessage: string;
         ariaLabel: string;
+        readonly: boolean;
         hasError: boolean;
         indeterminate: boolean;
         modelValue: BentoCheckboxType | BentoCheckboxGroupItems;
@@ -2189,11 +2038,11 @@ export declare const BentoCheckboxGroup: DefineComponent<
         variant: 'horizontal' | 'vertical' | BentoCheckboxGroupVariant;
         required: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         tooltipText: string;
+        optional: boolean;
         hideLabel: boolean;
         errorMessage: string;
+        readonly: boolean;
         hasError: boolean;
         modelValue: (string | number)[];
         formId: string;
@@ -2521,13 +2370,23 @@ declare type BentoColumnCellAction = OmitStrict<
     'variant' | 'event' | 'title' | 'icon' | 'state'
 > & {
     title?: string;
-    event?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+    event?: BentoColumnCellActionEvent;
     isShort?: true;
     variant?: BentoColumnCellActionVariant;
-    menuData?: BentoMenuItem[];
+    menuData?: BentoColumnCellActionMenuItem[];
     getCopyData?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => string;
 };
 
+declare type BentoColumnCellActionEvent = (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+
+declare type BentoColumnCellActionMenuItem = {
+    /**
+     * @deprecated This property will be removed in version 2.0, please use `event` instead.
+     */
+    handler?: BentoMenuItem['handler'];
+    event?: BentoColumnCellActionEvent;
+} & OmitStrict<BentoMenuItem, 'handler'>;
+
 declare type BentoColumnCellActions = BentoColumnCellAction[];
 
 declare type BentoColumnCellActionVariant = 'copy' | 'edit' | 'open' | 'more';
@@ -4450,7 +4309,7 @@ export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem
  *     `
  * }
  */
-export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
+export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
     DefineComponent<
         {
             /**
@@ -4549,8 +4408,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         description: {
                                             type: StringConstructor;
                                             default: any;
-                                        };
+                                        }
+                                        /**
+                                         * If resize is enabled
+                                         */;
                                         headingEl: {
+                                            /**
+                                             * A customisable method to determine if a row is not selectable.
+                                             * The default is that every row is selectable.
+                                             */
                                             type: PropType<
                                                 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
                                             >;
@@ -4598,8 +4464,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                     description: {
                                         type: StringConstructor;
                                         default: any;
-                                    };
+                                    }
+                                    /**
+                                     * If resize is enabled
+                                     */;
                                     headingEl: {
+                                        /**
+                                         * A customisable method to determine if a row is not selectable.
+                                         * The default is that every row is selectable.
+                                         */
                                         type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'>;
                                         default: any;
                                         validator: (value: BentoTypographyElement) => boolean;
@@ -4742,29 +4615,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         };
                                         hasNext: {
                                             type: BooleanConstructor;
-                                            /**
-                                             * 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 },
-                                             *                ]"
-                                             *          />
-                                             *     `
-                                             * }
-                                             */
                                             default: any;
                                         };
                                         hidePageSize: {
@@ -4798,29 +4648,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                     };
                                     hasNext: {
                                         type: BooleanConstructor;
-                                        /**
-                                         * 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 },
-                                         *                ]"
-                                         *          />
-                                         *     `
-                                         * }
-                                         */
                                         default: any;
                                     };
                                     hidePageSize: {
@@ -5026,8 +4853,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                             description: {
                                                 type: StringConstructor;
                                                 default: any;
-                                            };
+                                            }
+                                            /**
+                                             * If resize is enabled
+                                             */;
                                             headingEl: {
+                                                /**
+                                                 * A customisable method to determine if a row is not selectable.
+                                                 * The default is that every row is selectable.
+                                                 */
                                                 type: PropType<
                                                     'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
                                                 >;
@@ -5075,8 +4909,15 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         description: {
                                             type: StringConstructor;
                                             default: any;
-                                        };
+                                        }
+                                        /**
+                                         * If resize is enabled
+                                         */;
                                         headingEl: {
+                                            /**
+                                             * A customisable method to determine if a row is not selectable.
+                                             * The default is that every row is selectable.
+                                             */
                                             type: PropType<
                                                 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
                                             >;
@@ -5221,29 +5062,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                             };
                                             hasNext: {
                                                 type: BooleanConstructor;
-                                                /**
-                                                 * 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 },
-                                                 *                ]"
-                                                 *          />
-                                                 *     `
-                                                 * }
-                                                 */
                                                 default: any;
                                             };
                                             hidePageSize: {
@@ -5277,29 +5095,6 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
                                         };
                                         hasNext: {
                                             type: BooleanConstructor;
-                                            /**
-                                             * 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 },
-                                             *                ]"
-                                             *          />
-                                             *     `
-                                             * }
-                                             */
                                             default: any;
                                         };
                                         hidePageSize: {
@@ -5403,8 +5198,8 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
             condensed: boolean;
             outline: boolean;
             loading: boolean;
-            emptyState: any;
             lazyLoadType: BentoLazyLoadType;
+            emptyState: any;
             fitContent: boolean;
             hasResizableColumns: boolean;
             selectableAcrossPages: boolean;
@@ -5527,7 +5322,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_30<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_32<
     DefineComponent<
         {
             /**
@@ -6292,14 +6087,14 @@ export declare const BentoDatePicker: DefineComponent<
         label: string;
         required: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         isDateDisabled: CalendarMonthIsDateDisabled;
         firstDayOfWeek: CalendarMonthFirstDayOfWeek;
         min: Date;
         max: Date;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
+        readonly: boolean;
     }
 >;
 
@@ -6676,8 +6471,6 @@ export declare const BentoDateRangePicker: DefineComponent<
         label: string;
         required: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         isDateDisabled: CalendarMonthIsDateDisabled;
         firstDayOfWeek: CalendarMonthFirstDayOfWeek;
         min: Date;
@@ -6685,7 +6478,9 @@ export declare const BentoDateRangePicker: DefineComponent<
         maxRange: number;
         numberOfMonths: number;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
+        readonly: boolean;
         allowTimeInput: boolean;
         granularities: BentoDateRangePickerGranularityConfig<CalendarGranularityType>[];
         quickSelectRanges: DateRangePickerCalendarRangeSelectorItems;
@@ -6766,7 +6561,7 @@ export declare const BentoDivider: DefineComponent<
  *     }
  * }
  */
-export declare const BentoDropdown: __VLS_WithTemplateSlots_8<
+export declare const BentoDropdown: __VLS_WithTemplateSlots_9<
     DefineComponent<
         {
             /**
@@ -7197,20 +6992,20 @@ export declare const BentoDropdown: __VLS_WithTemplateSlots_8<
             required: boolean;
             condensed: boolean;
             disabled: boolean;
-            optional: boolean;
-            readonly: boolean;
             size: 'DropdownInputDefault' | 'DropdownInputSmall' | BentoDropdownSize;
             multiple: boolean;
             loading: boolean;
             tooltipText: string;
+            optional: boolean;
             errorMessage: string;
             items: BentoListboxOptions;
             isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
             staticCategories: boolean;
             ariaLabel: string;
-            emptyState: BentoListboxEmptyStateProps;
+            readonly: boolean;
             hasMoreItems: boolean;
             lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
+            emptyState: BentoListboxEmptyStateProps;
             virtualScroll: BentoListboxVirtulisationOptions;
             dynamicFiltering: boolean;
             showSlotContentInMultiple: boolean;
@@ -7503,20 +7298,20 @@ export declare const BentoDropdownAvatar: DefineComponent<
         required: boolean;
         condensed: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         size: 'DropdownInputDefault' | 'DropdownInputSmall' | BentoDropdownSize;
         multiple: boolean;
         loading: boolean;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
         items: BentoAvatarListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
         ariaLabel: string;
-        emptyState: BentoListboxEmptyStateProps;
+        readonly: boolean;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
+        emptyState: BentoListboxEmptyStateProps;
         virtualScroll: BentoListboxVirtulisationOptions;
         dynamicFiltering: boolean;
         showSlotContentInMultiple: boolean;
@@ -7821,20 +7616,20 @@ export declare const BentoDropdownCountry: DefineComponent<
         required: boolean;
         condensed: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         size: 'DropdownInputDefault' | 'DropdownInputSmall' | BentoDropdownSize;
         multiple: boolean;
         loading: boolean;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
         items: BentoCountryListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
         ariaLabel: string;
-        emptyState: BentoListboxEmptyStateProps;
+        readonly: boolean;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
+        emptyState: BentoListboxEmptyStateProps;
         virtualScroll: BentoListboxVirtulisationOptions;
         dynamicFiltering: boolean;
         showSlotContentInMultiple: boolean;
@@ -8120,20 +7915,20 @@ export declare const BentoDropdownCurrency: DefineComponent<
         required: boolean;
         condensed: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         size: 'DropdownInputDefault' | 'DropdownInputSmall' | BentoDropdownSize;
         multiple: boolean;
         loading: boolean;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
         items: BentoCurrencyListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
         ariaLabel: string;
-        emptyState: BentoListboxEmptyStateProps;
+        readonly: boolean;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
+        emptyState: BentoListboxEmptyStateProps;
         virtualScroll: BentoListboxVirtulisationOptions;
         dynamicFiltering: boolean;
         showSlotContentInMultiple: boolean;
@@ -8419,20 +8214,20 @@ export declare const BentoDropdownPaymentMethod: DefineComponent<
         required: boolean;
         condensed: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         size: 'DropdownInputDefault' | 'DropdownInputSmall' | BentoDropdownSize;
         multiple: boolean;
         loading: boolean;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
         items: BentoPaymentMethodListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
         ariaLabel: string;
-        emptyState: BentoListboxEmptyStateProps;
+        readonly: boolean;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
+        emptyState: BentoListboxEmptyStateProps;
         virtualScroll: BentoListboxVirtulisationOptions;
         dynamicFiltering: boolean;
         showSlotContentInMultiple: boolean;
@@ -8726,20 +8521,20 @@ export declare const BentoDropdownTag: DefineComponent<
         required: boolean;
         condensed: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         size: 'DropdownInputDefault' | 'DropdownInputSmall' | BentoDropdownSize;
         multiple: boolean;
         loading: boolean;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
         items: BentoTagListboxOptions;
         isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
         staticCategories: boolean;
         ariaLabel: string;
-        emptyState: BentoListboxEmptyStateProps;
+        readonly: boolean;
         hasMoreItems: boolean;
         lazyLoadType: 'button' | 'none' | 'automatic' | BentoListboxLazyLoadType;
+        emptyState: BentoListboxEmptyStateProps;
         virtualScroll: BentoListboxVirtulisationOptions;
         dynamicFiltering: boolean;
         showSlotContentInMultiple: boolean;
@@ -8771,7 +8566,7 @@ export declare const BentoDropdownTag: DefineComponent<
  *     `
  * }
  */
-export declare const BentoEmptyState: __VLS_WithTemplateSlots_7<
+export declare const BentoEmptyState: __VLS_WithTemplateSlots_8<
     DefineComponent<
         {
             /**
@@ -9289,7 +9084,7 @@ export declare type BentoFilterValues = Array<BentoFilterValue>;
  *     `
  * }
  */
-export declare const BentoFormLayout: __VLS_WithTemplateSlots_9<
+export declare const BentoFormLayout: __VLS_WithTemplateSlots_11<
     DefineComponent<
         {
             /**
@@ -9370,7 +9165,7 @@ export declare const BentoFormLayout: __VLS_WithTemplateSlots_9<
  *          </bento-form-layout-field-tip>
  *     `
  */
-export declare const BentoFormLayoutFieldTip: __VLS_WithTemplateSlots_10<
+export declare const BentoFormLayoutFieldTip: __VLS_WithTemplateSlots_12<
     DefineComponent<
         {
             /**
@@ -9436,7 +9231,7 @@ declare type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;
  *     `
  * }
  */
-export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_12<
+export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_14<
     DefineComponent<
         {
             /**
@@ -9539,7 +9334,7 @@ export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_12<
  *     `
  * }
  */
-export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_11<
+export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_13<
     DefineComponent<
         {
             /**
@@ -10069,7 +9864,7 @@ export declare type BentoInputDropdownProps = {
  *          >
  * }
  */
-export declare const BentoInputField: __VLS_WithTemplateSlots_13<
+export declare const BentoInputField: __VLS_WithTemplateSlots_15<
     DefineComponent<
         {
             /**
@@ -10192,11 +9987,13 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
             };
             /**
              * A string specifying the type of control to render.
+             * All `input` types are available but only `search`, `text` and `number` are fully supported.
+             *
+             * If `type` is `search`, use `bento-search-bar` instead.
              */
             type: {
-                type: PropType<'number' | 'search' | 'text' | BentoInputFieldType>;
+                type: PropType<string>;
                 default: BentoInputFieldType;
-                validator: (value: BentoInputFieldType) => boolean;
             };
             /**
              * Text displayed as the value of the input-field
@@ -10362,11 +10159,13 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
                 };
                 /**
                  * A string specifying the type of control to render.
+                 * All `input` types are available but only `search`, `text` and `number` are fully supported.
+                 *
+                 * If `type` is `search`, use `bento-search-bar` instead.
                  */
                 type: {
-                    type: PropType<'number' | 'search' | 'text' | BentoInputFieldType>;
+                    type: PropType<string>;
                     default: BentoInputFieldType;
-                    validator: (value: BentoInputFieldType) => boolean;
                 };
                 /**
                  * Text displayed as the value of the input-field
@@ -10388,16 +10187,16 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
         {
             error: boolean;
             value: BentoInputFieldValue;
-            type: 'number' | 'search' | 'text' | BentoInputFieldType;
+            type: string;
             variant: 'default' | 'payment-method' | 'static-value' | 'dropdown' | BentoInputFieldVariant;
             required: boolean;
             condensed: boolean;
             disabled: boolean;
-            optional: boolean;
-            readonly: boolean;
             tooltipText: string;
+            optional: boolean;
             errorMessage: string;
             ariaLabel: string;
+            readonly: boolean;
             placeholder: string;
             dropdown: BentoInputDropdownProps;
             ariaHidden: boolean;
@@ -10537,10 +10336,10 @@ export declare type BentoLazyLoadType = 'automatic' | 'button' | 'none';
  *     `
  * }
  */
-export declare const BentoLink: __VLS_WithTemplateSlots_14<
+export declare const BentoLink: __VLS_WithTemplateSlots_16<
     DefineComponent<
-        __VLS_WithDefaults<
-            __VLS_TypePropsToRuntimeProps<LinkProps>,
+        __VLS_WithDefaults_3<
+            __VLS_TypePropsToRuntimeProps_3<LinkProps>,
             {
                 target: any;
                 variant: BentoLinkVariant;
@@ -10558,8 +10357,8 @@ export declare const BentoLink: __VLS_WithTemplateSlots_14<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults<
-                    __VLS_TypePropsToRuntimeProps<LinkProps>,
+                __VLS_WithDefaults_3<
+                    __VLS_TypePropsToRuntimeProps_3<LinkProps>,
                     {
                         target: any;
                         variant: BentoLinkVariant;
@@ -10670,7 +10469,7 @@ export { BentoListboxVirtulisationOptions };
  *     `
  * }
  */
-export declare const BentoLoadingButton: __VLS_WithTemplateSlots_4<
+export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
     DefineComponent<
         {
             /**
@@ -10983,6 +10782,7 @@ export declare const BentoMenu: DefineComponent<
         onKeyDown: () => void;
         onKeyUp: () => void;
         closeMenu: () => void;
+        menuItemClick: () => void;
         toggleShowMenu: (e: MouseEvent) => void;
     },
     {},
@@ -10990,7 +10790,7 @@ export declare const BentoMenu: DefineComponent<
     {},
     ComponentOptionsMixin,
     ComponentOptionsMixin,
-    (BentoMenuEvent.CLOSE | BentoMenuEvent.OPEN)[],
+    (BentoMenuEvent.CLOSE | BentoMenuEvent.OPEN | 'menu-item-click')[],
     string,
     Readonly<
         ExtractPropTypes<{
@@ -11128,7 +10928,7 @@ export declare interface BentoMenuItem {
  *     `
  * };
  */
-export declare const BentoModal: __VLS_WithTemplateSlots_16<
+export declare const BentoModal: __VLS_WithTemplateSlots_18<
     DefineComponent<
         {
             /**
@@ -11487,7 +11287,7 @@ export declare enum BentoModalEvent {
  *     `
  * }
  */
-export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_17<
+export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_19<
     DefineComponent<
         {
             /**
@@ -11644,7 +11444,7 @@ export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_17<
  *     `
  * }
  */
-export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_18<
+export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_20<
     DefineComponent<
         {
             /**
@@ -11803,7 +11603,7 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_18<
  *     `
  * }
  */
-export declare const BentoModalPage: __VLS_WithTemplateSlots_15<
+export declare const BentoModalPage: __VLS_WithTemplateSlots_17<
     DefineComponent<
         {
             /**
@@ -13402,7 +13202,7 @@ export declare enum BentoPaymentMethodType {
  *     `
  * }
  */
-export declare const BentoPopover: __VLS_WithTemplateSlots_19<
+export declare const BentoPopover: __VLS_WithTemplateSlots_21<
     DefineComponent<
         {
             /**
@@ -13902,7 +13702,7 @@ export declare type BentoPopoverPositions = PopperContainerPosition;
  *     }
  * }
  */
-export declare const BentoRadioButton: __VLS_WithTemplateSlots_21<
+export declare const BentoRadioButton: __VLS_WithTemplateSlots_23<
     DefineComponent<
         {
             /**
@@ -14153,7 +13953,7 @@ export declare type BentoRadioButtonValue = string | number;
  *     `
  * };
  */
-export declare const BentoRadioGroup: __VLS_WithTemplateSlots_20<
+export declare const BentoRadioGroup: __VLS_WithTemplateSlots_22<
     DefineComponent<
         {
             /**
@@ -14382,11 +14182,11 @@ export declare const BentoRadioGroup: __VLS_WithTemplateSlots_20<
             variant: 'horizontal' | 'vertical' | BentoRadioGroupVariant;
             required: boolean;
             disabled: boolean;
-            optional: boolean;
-            readonly: boolean;
             tooltipText: string;
+            optional: boolean;
             hideLabel: boolean;
             errorMessage: string;
+            readonly: boolean;
             hasError: boolean;
             modelValue: BentoRadioButtonValue;
             formId: string;
@@ -14604,7 +14404,7 @@ export declare interface BentoSearchBarItem {
  * }
  */
 export declare const BentoSecondaryNav: DefineComponent<
-    __VLS_TypePropsToRuntimeProps_2<{
+    __VLS_TypePropsToRuntimeProps_4<{
         /**
          * 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.
@@ -14627,7 +14427,7 @@ export declare const BentoSecondaryNav: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_TypePropsToRuntimeProps_2<{
+            __VLS_TypePropsToRuntimeProps_4<{
                 /**
                  * 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.
@@ -14912,7 +14712,7 @@ export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
  *     `
  * }
  */
-export declare const BentoSelectionCard: __VLS_WithTemplateSlots_22<
+export declare const BentoSelectionCard: __VLS_WithTemplateSlots_24<
     DefineComponent<
         {
             /**
@@ -15107,7 +14907,7 @@ export declare const BentoSelectionCard: __VLS_WithTemplateSlots_22<
  *     `,
  * }
  */
-export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_23<
+export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_25<
     DefineComponent<
         {
             /**
@@ -15334,12 +15134,12 @@ export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_23<
             variant: BentoSelectionCardGroupVariant;
             required: boolean;
             disabled: boolean;
-            optional: boolean;
-            readonly: boolean;
             layout: BentoSelectionCardGroupLayout;
             tooltipText: string;
+            optional: boolean;
             hideLabel: boolean;
             errorMessage: string;
+            readonly: boolean;
             modelValue: BentoSelectionCardModelValue;
             formId: string;
         }
@@ -15422,7 +15222,7 @@ export declare type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOp
  *     `
  * }
  */
-export declare const BentoSidepanel: __VLS_WithTemplateSlots_25<
+export declare const BentoSidepanel: __VLS_WithTemplateSlots_27<
     DefineComponent<
         {
             /**
@@ -15540,7 +15340,7 @@ export declare enum BentoSidepanelEvent {
  *     `
  * }
  */
-export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_24<
+export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_26<
     DefineComponent<
         {
             /**
@@ -15766,7 +15566,7 @@ export declare enum BentoStatusVariant {
  *     `
  * }
  */
-export declare const BentoStep: __VLS_WithTemplateSlots_27<
+export declare const BentoStep: __VLS_WithTemplateSlots_29<
     DefineComponent<
         {
             /**
@@ -15840,7 +15640,7 @@ export declare const BentoStep: __VLS_WithTemplateSlots_27<
  *     `
  * }
  */
-export declare const BentoStepper: __VLS_WithTemplateSlots_26<
+export declare const BentoStepper: __VLS_WithTemplateSlots_28<
     DefineComponent<
         {
             /**
@@ -15966,7 +15766,7 @@ export declare enum BentoStepperVariantOption {
  *     `
  * }
  */
-export declare const BentoStructuredList: __VLS_WithTemplateSlots_28<
+export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
     DefineComponent<
         {
             /**
@@ -17580,12 +17380,12 @@ export declare const BentoTextarea: DefineComponent<
         label: string;
         required: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         height: string;
         tooltipText: string;
+        optional: boolean;
         errorMessage: string;
         ariaLabel: string;
+        readonly: boolean;
         placeholder: string;
         clearable: boolean;
         characterLimit: number;
@@ -18284,8 +18084,8 @@ export declare const BentoToggle: DefineComponent<
     {
         value: boolean;
         disabled: boolean;
-        readonly: boolean;
         ariaLabel: string;
+        readonly: boolean;
         labelPosition: 'after' | 'before' | BentoToggleLabelPosition;
     }
 >;
@@ -18306,7 +18106,7 @@ export declare const BentoToggle: DefineComponent<
  *     `
  * }
  */
-export declare const BentoToggleButton: __VLS_WithTemplateSlots_5<
+export declare const BentoToggleButton: __VLS_WithTemplateSlots_6<
     DefineComponent<
         {
             /**
@@ -18530,6 +18330,15 @@ export declare const BentoTutorial: DefineComponent<
             required: true;
             validator: (value: BentoTutorialStep[]) => boolean;
         };
+        /**
+         * Options to control the scroll into view behavior.
+         * Takes the same options as the `scrollIntoView` function
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+         */
+        scrollOptions: {
+            type: PropType<BentoTutorialScrollOptions>;
+            default: any;
+        };
     },
     {},
     {},
@@ -18550,11 +18359,24 @@ export declare const BentoTutorial: DefineComponent<
                 required: true;
                 validator: (value: BentoTutorialStep[]) => boolean;
             };
+            /**
+             * Options to control the scroll into view behavior.
+             * Takes the same options as the `scrollIntoView` function
+             * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}
+             */
+            scrollOptions: {
+                type: PropType<BentoTutorialScrollOptions>;
+                default: any;
+            };
         }>
     >,
-    {}
+    {
+        scrollOptions: any;
+    }
 >;
 
+export declare type BentoTutorialScrollOptions = boolean | ScrollIntoViewOptions;
+
 export declare interface BentoTutorialStep {
     target: VueNodeElement | Ref<VueNodeElement>;
     image?: Omit<InstanceType<typeof BentoImage>['$props'], 'aspectRatio'>;
@@ -18582,10 +18404,10 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: __VLS_WithTemplateSlots_29<
+export declare const BentoTypography: __VLS_WithTemplateSlots_31<
     DefineComponent<
-        __VLS_WithDefaults_2<
-            __VLS_TypePropsToRuntimeProps_3<{
+        __VLS_WithDefaults_4<
+            __VLS_TypePropsToRuntimeProps_5<{
                 /**
                  * Sets the HTML DOM element.
                  * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -18636,14 +18458,14 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_29<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_2<
-                    __VLS_TypePropsToRuntimeProps_3<{
+                __VLS_WithDefaults_4<
+                    __VLS_TypePropsToRuntimeProps_5<{
                         /**
                          * Sets the HTML DOM element.
                          * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -19011,6 +18833,26 @@ export declare type MaybeRef<T> = T | Ref<T>;
 
 export declare type OmitStrict<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
+declare type OnClickOutsideHandler = (evt: PointerEvent | FocusEvent) => void;
+
+declare interface OnClickOutsideOptions {
+    /**
+     * List of elements that should not trigger the event.
+     */
+    ignore?: (MaybeElementRef | string)[];
+    /**
+     * Use capturing phase for internal event listener.
+     * @default true
+     */
+    capture?: boolean;
+    /**
+     * Run handler function if focus moves to an iframe.
+     * @default false
+     */
+    detectIframe?: boolean;
+    window?: Window;
+}
+
 declare const plugin: PluginObject<BentoVuePlugin>;
 export default plugin;
 
@@ -19082,6 +18924,19 @@ export declare type UseBentoToastController = ToastStack;
 
 export declare function useBentoToastController(): UseBentoToastController;
 
+/**
+ * Composable to listen for clicks outside of an element ref.
+ *
+ * @param {MaybeElementRef} target - HTML Element or "ref" to an Element on which the click outside listener will be attached to
+ * @param {OnClickOutsideHandler} handler - Function that will be called when the listener gets triggered
+ * @param {OnClickOutsideOptions} options - Options to be passed to the listener
+ */
+export declare const useClickOutside: <T extends OnClickOutsideOptions>(
+    target: MaybeElementRef,
+    handler: OnClickOutsideHandler,
+    options?: T
+) => void;
+
 /**
  * Maps an ISO code to the country's translated capital city.
  *