@adyen/bento-vue2 1.23.0 → 1.25.0

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

@@ -2,6 +2,7 @@ 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';
 import { ComputedRef } from 'vue';
+import { DeepReadonly } from 'vue';
 import { default as default_2 } from 'vue-i18n';
 import { DefaultKeys } from 'vue/types/v3-component-props';
 import { DefineComponent } from 'vue';
@@ -25,6 +26,12 @@ declare type __VLS_NonUndefinedable<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;
+
+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>
         ? {
@@ -47,6 +54,39 @@ declare type __VLS_TypePropsToRuntimeProps_2<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_3<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_3<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+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] & {
@@ -55,6 +95,30 @@ declare type __VLS_WithDefaults<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_2<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : 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;
@@ -193,6 +257,24 @@ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_30<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+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;
@@ -561,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',
 }
@@ -720,7 +788,7 @@ export declare type BentoBooleanFilterValue = string | null;
  *     `,
  * }
  */
-export declare const BentoButton: __VLS_WithTemplateSlots_3<
+export declare const BentoButton: __VLS_WithTemplateSlots_4<
     DefineComponent<
         {
             /**
@@ -1134,361 +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;
-                    variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-                    medium: boolean;
-                    large: boolean;
-                }> &
-                    Omit<
-                        Readonly<
-                            ExtractPropTypes<{
-                                el: {
-                                    type: PropType<
-                                        | 'div'
-                                        | 'h1'
-                                        | 'h2'
-                                        | 'h3'
-                                        | 'h4'
-                                        | 'h5'
-                                        | 'h6'
-                                        | 'p'
-                                        | 'span'
-                                        | BentoTypographyElement
-                                    >;
-                                    default: BentoTypographyElement;
-                                    validator: (value: BentoTypographyElement) => boolean;
-                                };
-                                stronger: {
-                                    type: BooleanConstructor;
-                                    default: boolean;
-                                };
-                                strongest: {
-                                    type: BooleanConstructor;
-                                    default: boolean;
-                                };
-                                variant: {
-                                    type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                    default: BentoTypographyVariant;
-                                    validator: (value: BentoTypographyVariant) => boolean;
-                                };
-                                medium: {
-                                    type: BooleanConstructor;
-                                    default: boolean;
-                                };
-                                large: {
-                                    type: BooleanConstructor;
-                                    default: boolean;
-                                };
-                                wide: {
-                                    type: BooleanConstructor;
-                                    default: boolean;
-                                };
-                            }>
-                        >,
-                        DefaultKeys<{
-                            el: {
-                                type: PropType<
-                                    | 'div'
-                                    | 'h1'
-                                    | 'h2'
-                                    | 'h3'
-                                    | 'h4'
-                                    | 'h5'
-                                    | 'h6'
-                                    | 'p'
-                                    | 'span'
-                                    | BentoTypographyElement
-                                >;
-                                default: BentoTypographyElement;
-                                validator: (value: BentoTypographyElement) => boolean;
-                            };
-                            stronger: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            strongest: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            variant: {
-                                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                default: BentoTypographyVariant;
-                                validator: (value: BentoTypographyVariant) => boolean;
-                            };
-                            medium: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            large: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            wide: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                        }>
-                    >
+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;
     }
 >;
 
@@ -1842,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;
@@ -2151,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;
@@ -4412,7 +4299,7 @@ export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem
  *     `
  * }
  */
-export declare const BentoDataGrid: __VLS_WithTemplateSlots_6<
+export declare const BentoDataGrid: __VLS_WithTemplateSlots_7<
     DefineComponent<
         {
             /**
@@ -5365,8 +5252,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;
@@ -5489,7 +5376,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_29<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_32<
     DefineComponent<
         {
             /**
@@ -6254,14 +6141,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;
     }
 >;
 
@@ -6638,8 +6525,6 @@ export declare const BentoDateRangePicker: DefineComponent<
         label: string;
         required: boolean;
         disabled: boolean;
-        optional: boolean;
-        readonly: boolean;
         isDateDisabled: CalendarMonthIsDateDisabled;
         firstDayOfWeek: CalendarMonthFirstDayOfWeek;
         min: Date;
@@ -6647,7 +6532,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;
@@ -6728,7 +6615,7 @@ export declare const BentoDivider: DefineComponent<
  *     }
  * }
  */
-export declare const BentoDropdown: __VLS_WithTemplateSlots_8<
+export declare const BentoDropdown: __VLS_WithTemplateSlots_9<
     DefineComponent<
         {
             /**
@@ -7159,20 +7046,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;
@@ -7465,20 +7352,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;
@@ -7783,20 +7670,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;
@@ -8082,20 +7969,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;
@@ -8381,20 +8268,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;
@@ -8688,20 +8575,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;
@@ -8733,7 +8620,7 @@ export declare const BentoDropdownTag: DefineComponent<
  *     `
  * }
  */
-export declare const BentoEmptyState: __VLS_WithTemplateSlots_7<
+export declare const BentoEmptyState: __VLS_WithTemplateSlots_8<
     DefineComponent<
         {
             /**
@@ -9251,7 +9138,7 @@ export declare type BentoFilterValues = Array<BentoFilterValue>;
  *     `
  * }
  */
-export declare const BentoFormLayout: __VLS_WithTemplateSlots_9<
+export declare const BentoFormLayout: __VLS_WithTemplateSlots_11<
     DefineComponent<
         {
             /**
@@ -9332,7 +9219,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<
         {
             /**
@@ -9398,7 +9285,7 @@ declare type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;
  *     `
  * }
  */
-export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_12<
+export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_14<
     DefineComponent<
         {
             /**
@@ -9501,7 +9388,7 @@ export declare const BentoFormLayoutGroup: __VLS_WithTemplateSlots_12<
  *     `
  * }
  */
-export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_11<
+export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_13<
     DefineComponent<
         {
             /**
@@ -10031,7 +9918,7 @@ export declare type BentoInputDropdownProps = {
  *          >
  * }
  */
-export declare const BentoInputField: __VLS_WithTemplateSlots_13<
+export declare const BentoInputField: __VLS_WithTemplateSlots_15<
     DefineComponent<
         {
             /**
@@ -10067,7 +9954,11 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
             };
             /**
              * Dropdown props for the small selectable dropdown menu.
-             * @see BentoDropdown
+             * Properties supported:
+             *
+             *  - `value`: Selected value of the dropdown
+             *  - `items`: List of available items
+             *
              */
             dropdown: {
                 type: PropType<BentoInputDropdownProps>;
@@ -10150,11 +10041,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
@@ -10233,7 +10126,11 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
                 };
                 /**
                  * Dropdown props for the small selectable dropdown menu.
-                 * @see BentoDropdown
+                 * Properties supported:
+                 *
+                 *  - `value`: Selected value of the dropdown
+                 *  - `items`: List of available items
+                 *
                  */
                 dropdown: {
                     type: PropType<BentoInputDropdownProps>;
@@ -10316,11 +10213,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
@@ -10342,16 +10241,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;
@@ -10491,10 +10390,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;
@@ -10512,8 +10411,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;
@@ -10624,7 +10523,7 @@ export { BentoListboxVirtulisationOptions };
  *     `
  * }
  */
-export declare const BentoLoadingButton: __VLS_WithTemplateSlots_4<
+export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
     DefineComponent<
         {
             /**
@@ -10937,6 +10836,7 @@ export declare const BentoMenu: DefineComponent<
         onKeyDown: () => void;
         onKeyUp: () => void;
         closeMenu: () => void;
+        menuItemClick: () => void;
         toggleShowMenu: (e: MouseEvent) => void;
     },
     {},
@@ -10944,7 +10844,7 @@ export declare const BentoMenu: DefineComponent<
     {},
     ComponentOptionsMixin,
     ComponentOptionsMixin,
-    (BentoMenuEvent.CLOSE | BentoMenuEvent.OPEN)[],
+    (BentoMenuEvent.CLOSE | BentoMenuEvent.OPEN | 'menu-item-click')[],
     string,
     Readonly<
         ExtractPropTypes<{
@@ -11082,7 +10982,7 @@ export declare interface BentoMenuItem {
  *     `
  * };
  */
-export declare const BentoModal: __VLS_WithTemplateSlots_16<
+export declare const BentoModal: __VLS_WithTemplateSlots_18<
     DefineComponent<
         {
             /**
@@ -11198,7 +11098,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
              * Sets the width of the modal
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoModalSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoModalSize>;
                 default: BentoModalSize;
                 validator: (value: BentoModalSize) => boolean;
             };
@@ -11347,7 +11247,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
                  * Sets the width of the modal
                  */
                 size: {
-                    type: PropType<'small' | 'medium' | 'large' | BentoModalSize>;
+                    type: PropType<'small' | 'large' | 'medium' | BentoModalSize>;
                     default: BentoModalSize;
                     validator: (value: BentoModalSize) => boolean;
                 };
@@ -11374,7 +11274,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
             variant: 'default' | 'dialog' | 'BentoModalDefault' | 'BentoModalDialog' | BentoModalVariant;
             isOpen: boolean;
             content: string;
-            size: 'small' | 'medium' | 'large' | BentoModalSize;
+            size: 'small' | 'large' | 'medium' | BentoModalSize;
             activePage: string;
             actions: BentoButtonActionsList;
             actionsLabel: string;
@@ -11441,7 +11341,7 @@ export declare enum BentoModalEvent {
  *     `
  * }
  */
-export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_17<
+export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_19<
     DefineComponent<
         {
             /**
@@ -11598,7 +11498,7 @@ export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_17<
  *     `
  * }
  */
-export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_18<
+export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_20<
     DefineComponent<
         {
             /**
@@ -11757,7 +11657,7 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_18<
  *     `
  * }
  */
-export declare const BentoModalPage: __VLS_WithTemplateSlots_15<
+export declare const BentoModalPage: __VLS_WithTemplateSlots_17<
     DefineComponent<
         {
             /**
@@ -13356,7 +13256,7 @@ export declare enum BentoPaymentMethodType {
  *     `
  * }
  */
-export declare const BentoPopover: __VLS_WithTemplateSlots_19<
+export declare const BentoPopover: __VLS_WithTemplateSlots_21<
     DefineComponent<
         {
             /**
@@ -13856,7 +13756,7 @@ export declare type BentoPopoverPositions = PopperContainerPosition;
  *     }
  * }
  */
-export declare const BentoRadioButton: __VLS_WithTemplateSlots_21<
+export declare const BentoRadioButton: __VLS_WithTemplateSlots_23<
     DefineComponent<
         {
             /**
@@ -14107,7 +14007,7 @@ export declare type BentoRadioButtonValue = string | number;
  *     `
  * };
  */
-export declare const BentoRadioGroup: __VLS_WithTemplateSlots_20<
+export declare const BentoRadioGroup: __VLS_WithTemplateSlots_22<
     DefineComponent<
         {
             /**
@@ -14336,11 +14236,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;
@@ -14558,7 +14458,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.
@@ -14581,7 +14481,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.
@@ -14866,7 +14766,7 @@ export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
  *     `
  * }
  */
-export declare const BentoSelectionCard: __VLS_WithTemplateSlots_22<
+export declare const BentoSelectionCard: __VLS_WithTemplateSlots_24<
     DefineComponent<
         {
             /**
@@ -15061,7 +14961,7 @@ export declare const BentoSelectionCard: __VLS_WithTemplateSlots_22<
  *     `,
  * }
  */
-export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_23<
+export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_25<
     DefineComponent<
         {
             /**
@@ -15288,12 +15188,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;
         }
@@ -15376,7 +15276,7 @@ export declare type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOp
  *     `
  * }
  */
-export declare const BentoSidepanel: __VLS_WithTemplateSlots_25<
+export declare const BentoSidepanel: __VLS_WithTemplateSlots_27<
     DefineComponent<
         {
             /**
@@ -15494,7 +15394,7 @@ export declare enum BentoSidepanelEvent {
  *     `
  * }
  */
-export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_24<
+export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_26<
     DefineComponent<
         {
             /**
@@ -15720,7 +15620,7 @@ export declare enum BentoStatusVariant {
  *     `
  * }
  */
-export declare const BentoStep: __VLS_WithTemplateSlots_27<
+export declare const BentoStep: __VLS_WithTemplateSlots_29<
     DefineComponent<
         {
             /**
@@ -15794,7 +15694,7 @@ export declare const BentoStep: __VLS_WithTemplateSlots_27<
  *     `
  * }
  */
-export declare const BentoStepper: __VLS_WithTemplateSlots_26<
+export declare const BentoStepper: __VLS_WithTemplateSlots_28<
     DefineComponent<
         {
             /**
@@ -15920,7 +15820,7 @@ export declare enum BentoStepperVariantOption {
  *     `
  * }
  */
-export declare const BentoStructuredList: __VLS_WithTemplateSlots_28<
+export declare const BentoStructuredList: __VLS_WithTemplateSlots_30<
     DefineComponent<
         {
             /**
@@ -16293,7 +16193,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16391,7 +16291,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16399,7 +16299,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -16602,7 +16502,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16693,7 +16593,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16701,7 +16601,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -16810,7 +16710,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16901,7 +16801,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16909,7 +16809,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -17534,12 +17434,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;
@@ -18077,39 +17977,9 @@ export declare interface BentoTimelineTimestamp {
     value?: string;
 }
 
-/**
- * @example
- * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';
- *
- * export default {
- *     components: { BentoToast },
- *     template: `
- *          // in your project root
- *          <bento-toast />
- *      setup() {
- *          bentoToastController = useBentoToastController();
- *          onTrigger = () => {
- *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });
- *      }
- *     `
- * }
- */
 export declare const BentoToast: DefineComponent<
     {},
-    {
-        computedPositioning: ComputedRef<
-            {
-                top: string;
-                width: string;
-            }[]
-        >;
-        computedHeight: ComputedRef<{
-            bottom: string;
-            height: string;
-        }>;
-        toastsToShow: ComputedRef<BentoToastItem[]>;
-        toast: any;
-    },
+    {},
     {},
     {},
     {},
@@ -18121,17 +17991,23 @@ export declare const BentoToast: DefineComponent<
     {}
 >;
 
-declare interface BentoToastItem {
-    action?: BentoToastItemAction;
-    text: string;
-    dismiss?: () => void;
+export declare interface BentoToastItem extends BentoToastItemParams {
+    id: string;
+    dismiss: () => void;
 }
 
-declare interface BentoToastItemAction {
+export declare interface BentoToastItemAction {
     handler: () => void;
     text: string;
 }
 
+export declare interface BentoToastItemParams {
+    action?: BentoToastItemAction;
+    text: string;
+}
+
+export declare type BentoToastItemsList = Array<BentoToastItem>;
+
 /**
  * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle
  *
@@ -18262,8 +18138,8 @@ export declare const BentoToggle: DefineComponent<
     {
         value: boolean;
         disabled: boolean;
-        readonly: boolean;
         ariaLabel: string;
+        readonly: boolean;
         labelPosition: 'after' | 'before' | BentoToggleLabelPosition;
     }
 >;
@@ -18284,7 +18160,7 @@ export declare const BentoToggle: DefineComponent<
  *     `
  * }
  */
-export declare const BentoToggleButton: __VLS_WithTemplateSlots_5<
+export declare const BentoToggleButton: __VLS_WithTemplateSlots_6<
     DefineComponent<
         {
             /**
@@ -18560,149 +18436,128 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: DefineComponent<
-    {
-        /**
-         * Sets the HTML DOM element.
-         * @values h1, h2, h3, h4, h5, h6, div, p, span
-         */
-        el: {
-            type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement>;
-            default: BentoTypographyElement;
-            validator: (value: BentoTypographyElement) => boolean;
-        };
-        /**
-         * Adds the stronger class modifier.
-         * Applicable to Caption, Body and Subtitle variants.
-         */
-        stronger: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the strongest class modifier.
-         * Applicable to Caption, Body and Subtitle variants.
-         */
-        strongest: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Sets the type of typography variant.
-         * @values caption, body, title.
-         */
-        variant: {
-            type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-            default: BentoTypographyVariant;
-            validator: (value: BentoTypographyVariant) => boolean;
-        };
-        /**
-         * Adds the medium class modifier.
-         * Applicable to the Title variant.
-         */
-        medium: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the large class modifier.
-         * Applicable to the Title variant.
-         */
-        large: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the medium class modifier.
-         * Applicable to tje Body variant.
-         */
-        wide: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    },
-    {
-        conditionalClasses: ComputedRef<{
-            [x: string]: boolean;
-        }>;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    {},
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            /**
-             * Sets the HTML DOM element.
-             * @values h1, h2, h3, h4, h5, h6, div, p, span
-             */
-            el: {
-                type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement>;
-                default: BentoTypographyElement;
-                validator: (value: BentoTypographyElement) => boolean;
-            };
-            /**
-             * Adds the stronger class modifier.
-             * Applicable to Caption, Body and Subtitle variants.
-             */
-            stronger: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the strongest class modifier.
-             * Applicable to Caption, Body and Subtitle variants.
-             */
-            strongest: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Sets the type of typography variant.
-             * @values caption, body, title.
-             */
-            variant: {
-                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                default: BentoTypographyVariant;
-                validator: (value: BentoTypographyVariant) => boolean;
-            };
-            /**
-             * Adds the medium class modifier.
-             * Applicable to the Title variant.
-             */
-            medium: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the large class modifier.
-             * Applicable to the Title variant.
-             */
-            large: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the medium class modifier.
-             * Applicable to tje Body variant.
-             */
-            wide: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>
+export declare const BentoTypography: __VLS_WithTemplateSlots_31<
+    DefineComponent<
+        __VLS_WithDefaults_4<
+            __VLS_TypePropsToRuntimeProps_5<{
+                /**
+                 * Sets the HTML DOM element.
+                 * @values h1, h2, h3, h4, h5, h6, div, p, span
+                 */
+                el?: BentoTypographyElement | `${BentoTypographyElement}`;
+                /**
+                 * Adds the large class modifier.
+                 * Applicable to the Title variant.
+                 */
+                large?: boolean;
+                /**
+                 * Adds the medium class modifier.
+                 * Applicable to the Title variant.
+                 */
+                medium?: boolean;
+                /**
+                 * Adds the stronger class modifier.
+                 * Applicable to Caption, Body and Subtitle variants.
+                 */
+                stronger?: boolean;
+                /**
+                 * Adds the strongest class modifier.
+                 * Applicable to Caption, Body and Subtitle variants.
+                 */
+                strongest?: boolean;
+                /**
+                 * Sets the type of typography variant.
+                 * @values caption, body, title.
+                 */
+                variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
+                /**
+                 * Adds the medium class modifier.
+                 * Applicable to tje Body variant.
+                 */
+                wide?: boolean;
+            }>,
+            {
+                el: BentoTypographyElement;
+                large: boolean;
+                medium: boolean;
+                stronger: boolean;
+                strongest: boolean;
+                variant: BentoTypographyVariant;
+                wide: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_4<
+                    __VLS_TypePropsToRuntimeProps_5<{
+                        /**
+                         * Sets the HTML DOM element.
+                         * @values h1, h2, h3, h4, h5, h6, div, p, span
+                         */
+                        el?: BentoTypographyElement | `${BentoTypographyElement}`;
+                        /**
+                         * Adds the large class modifier.
+                         * Applicable to the Title variant.
+                         */
+                        large?: boolean;
+                        /**
+                         * Adds the medium class modifier.
+                         * Applicable to the Title variant.
+                         */
+                        medium?: boolean;
+                        /**
+                         * Adds the stronger class modifier.
+                         * Applicable to Caption, Body and Subtitle variants.
+                         */
+                        stronger?: boolean;
+                        /**
+                         * Adds the strongest class modifier.
+                         * Applicable to Caption, Body and Subtitle variants.
+                         */
+                        strongest?: boolean;
+                        /**
+                         * Sets the type of typography variant.
+                         * @values caption, body, title.
+                         */
+                        variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
+                        /**
+                         * Adds the medium class modifier.
+                         * Applicable to tje Body variant.
+                         */
+                        wide?: boolean;
+                    }>,
+                    {
+                        el: BentoTypographyElement;
+                        large: boolean;
+                        medium: boolean;
+                        stronger: boolean;
+                        strongest: boolean;
+                        variant: BentoTypographyVariant;
+                        wide: boolean;
+                    }
+                >
+            >
+        >,
+        {
+            el: BentoTypographyElement | `${BentoTypographyElement}`;
+            wide: boolean;
+            stronger: boolean;
+            strongest: boolean;
+            large: boolean;
+            medium: boolean;
+            variant: BentoTypographyVariant | `${BentoTypographyVariant}`;
+        }
     >,
     {
-        el: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement;
-        wide: boolean;
-        stronger: boolean;
-        strongest: boolean;
-        variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-        medium: boolean;
-        large: boolean;
+        default: (_: {}) => any;
     }
 >;
 
@@ -19010,6 +18865,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;
 
@@ -19057,16 +18932,13 @@ declare enum PopperContainerPositionExtended {
     LEFT_END = 'left-end',
 }
 
-declare class ToastController {
-    get state(): {
-        queue: Array<BentoToastItem>;
-    };
-    private _state;
-    constructor();
-    private dismissToast;
-    addToast(params: BentoToastItem): {
-        dismiss: () => void;
-    };
+declare interface Toast {
+    dismiss: () => void;
+}
+
+export declare interface ToastStack {
+    stack: DeepReadonly<Ref<BentoToastItemsList>>;
+    addToast: (params: BentoToastItemParams) => Toast;
 }
 
 /**
@@ -19080,7 +18952,22 @@ declare class ToastController {
  */
 export declare function toTypedSchema<T extends ZodSchema>(formSchema: T): T;
 
-export declare function useBentoToastController(): ToastController;
+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.