@adyen/bento-vue2 1.40.0 → 1.41.0

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

@@ -45,8 +45,18 @@ declare type __VLS_NonUndefinedable_16<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_17<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_18<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_19<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_20<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_21<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_22<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;
@@ -160,6 +170,28 @@ declare type __VLS_TypePropsToRuntimeProps_17<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_18<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_18<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_19<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_19<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_2<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -171,6 +203,39 @@ declare type __VLS_TypePropsToRuntimeProps_2<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_20<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_20<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_21<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_21<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_22<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_22<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_3<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -296,6 +361,46 @@ declare type __VLS_WithDefaults_14<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_15<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_16<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_17<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_18<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
+declare type __VLS_WithDefaults_19<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithDefaults_2<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -564,6 +669,24 @@ declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_40<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_41<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_42<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_5<T, S> = T & {
     new (): {
         $slots: S;
@@ -3283,43 +3406,29 @@ export declare enum BentoCountryVariant {
  * A Currency component is used to display a formatted currency value.
  *
  * @example
- * import { BentoCurrency } from '@adyen/adl-vue-components';
- * import { BentoCurrency, BentoCurrencyCode } from '@adyen/bento-vue2';
+ * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';
  *
  * export default {
  *     components: { BentoCurrency },
  *     template: `
- *          <bento-currency :currency="CurrencyCode.USD">
- *              76.33
- *          </bento-currency>
+ *          <bento-currency
+ *              :currency="BentoCurrencyISOCode.USD"
+ *              :value="76.33"
+ *          />
  *     `
  * }
  */
 export declare const BentoCurrency: DefineComponent<
-    {
-        currency: {
-            type: PropType<BentoCurrencyISOCode | `${BentoCurrencyISOCode}`>;
-            default: BentoCurrencyISOCode;
-            validator: (value: BentoCurrencyISOCode) => boolean;
-        };
-        /**
-         * Accepts currency value in major units instead of minor ones
-         */
-        majorUnits: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Disable the default typography for the component. Only use this when the component is inside another typography component.
-         */
-        disableTypography: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    },
-    {
-        formattedCurrency: ComputedRef<string>;
-    },
+    __VLS_WithDefaults_7<
+        __VLS_TypePropsToRuntimeProps_7<BentoCurrencyProps>,
+        {
+            currency: BentoCurrencyISOCode;
+            disableTypography: boolean;
+            majorUnits: boolean;
+            value: any;
+        }
+    >,
+    {},
     {},
     {},
     {},
@@ -3328,200 +3437,22 @@ export declare const BentoCurrency: DefineComponent<
     {},
     string,
     Readonly<
-        ExtractPropTypes<{
-            currency: {
-                type: PropType<BentoCurrencyISOCode | `${BentoCurrencyISOCode}`>;
-                default: BentoCurrencyISOCode;
-                validator: (value: BentoCurrencyISOCode) => boolean;
-            };
-            /**
-             * Accepts currency value in major units instead of minor ones
-             */
-            majorUnits: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Disable the default typography for the component. Only use this when the component is inside another typography component.
-             */
-            disableTypography: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>
+        ExtractPropTypes<
+            __VLS_WithDefaults_7<
+                __VLS_TypePropsToRuntimeProps_7<BentoCurrencyProps>,
+                {
+                    currency: BentoCurrencyISOCode;
+                    disableTypography: boolean;
+                    majorUnits: boolean;
+                    value: any;
+                }
+            >
+        >
     >,
     {
+        value: number;
         disableTypography: boolean;
-        currency:
-            | 'TOP'
-            | 'CVE'
-            | 'DJF'
-            | 'GNF'
-            | 'IDR'
-            | 'JPY'
-            | 'KMF'
-            | 'KRW'
-            | 'PYG'
-            | 'RWF'
-            | 'UGX'
-            | 'VND'
-            | 'VUV'
-            | 'XAF'
-            | 'XOF'
-            | 'XPF'
-            | 'MRO'
-            | 'BHD'
-            | 'IQD'
-            | 'JOD'
-            | 'KWD'
-            | 'LYD'
-            | 'OMR'
-            | 'TND'
-            | 'AFA'
-            | 'ALL'
-            | 'DZD'
-            | 'AOA'
-            | 'ARS'
-            | 'AMD'
-            | 'AWG'
-            | 'AUD'
-            | 'AZN'
-            | 'BSD'
-            | 'BDT'
-            | 'BBD'
-            | 'BYR'
-            | 'BEF'
-            | 'BZD'
-            | 'BMD'
-            | 'BTN'
-            | 'BTC'
-            | 'BOB'
-            | 'BAM'
-            | 'BWP'
-            | 'BRL'
-            | 'GBP'
-            | 'BND'
-            | 'BGN'
-            | 'BIF'
-            | 'KHR'
-            | 'CAD'
-            | 'KYD'
-            | 'CLP'
-            | 'CLF'
-            | 'CNY'
-            | 'COP'
-            | 'CDF'
-            | 'CRC'
-            | 'HRK'
-            | 'CUC'
-            | 'CZK'
-            | 'DKK'
-            | 'DOP'
-            | 'XCD'
-            | 'EGP'
-            | 'ERN'
-            | 'EEK'
-            | 'ETB'
-            | 'EUR'
-            | 'FKP'
-            | 'FJD'
-            | 'GMD'
-            | 'GEL'
-            | 'DEM'
-            | 'GHS'
-            | 'GIP'
-            | 'GRD'
-            | 'GTQ'
-            | 'GYD'
-            | 'HTG'
-            | 'HNL'
-            | 'HKD'
-            | 'HUF'
-            | 'ISK'
-            | 'INR'
-            | 'IRR'
-            | 'ILS'
-            | 'ITL'
-            | 'JMD'
-            | 'KZT'
-            | 'KES'
-            | 'KGS'
-            | 'LAK'
-            | 'LVL'
-            | 'LBP'
-            | 'LSL'
-            | 'LRD'
-            | 'LTC'
-            | 'LTL'
-            | 'MOP'
-            | 'MKD'
-            | 'MGA'
-            | 'MWK'
-            | 'MYR'
-            | 'MVR'
-            | 'MUR'
-            | 'MXN'
-            | 'MDL'
-            | 'MNT'
-            | 'MAD'
-            | 'MZM'
-            | 'MMK'
-            | 'NAD'
-            | 'NPR'
-            | 'ANG'
-            | 'TWD'
-            | 'NZD'
-            | 'NIO'
-            | 'NGN'
-            | 'KPW'
-            | 'NOK'
-            | 'PKR'
-            | 'PAB'
-            | 'PGK'
-            | 'PEN'
-            | 'PHP'
-            | 'PLN'
-            | 'QAR'
-            | 'RON'
-            | 'RUB'
-            | 'SVC'
-            | 'WST'
-            | 'STD'
-            | 'SAR'
-            | 'RSD'
-            | 'SCR'
-            | 'SLL'
-            | 'SGD'
-            | 'SKK'
-            | 'SBD'
-            | 'SOS'
-            | 'ZAR'
-            | 'SSP'
-            | 'XDR'
-            | 'LKR'
-            | 'SHP'
-            | 'SDG'
-            | 'SRD'
-            | 'SZL'
-            | 'SEK'
-            | 'CHF'
-            | 'SYP'
-            | 'TJS'
-            | 'TZS'
-            | 'THB'
-            | 'TTD'
-            | 'TRY'
-            | 'TMT'
-            | 'UAH'
-            | 'AED'
-            | 'UYU'
-            | 'USD'
-            | 'UZS'
-            | 'VEF'
-            | 'YER'
-            | 'ZMK'
-            | 'ZWL'
-            | BentoCurrencyISOCode;
+        currency: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
         majorUnits: boolean;
     }
 >;
@@ -3703,6 +3634,25 @@ export declare type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOpti
 
 export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem[];
 
+export declare interface BentoCurrencyProps {
+    /**
+     * Currency code based on the ISO 4217 standard
+     */
+    currency?: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;
+    /**
+     * Disable the default typography for the component. Only use this when the component is inside another typography component.
+     */
+    disableTypography?: boolean;
+    /**
+     * Accepts currency value in major units instead of minor ones
+     */
+    majorUnits?: boolean;
+    /**
+     * Currency value to be formatted
+     */
+    value?: number;
+}
+
 /**
  * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.
  *
@@ -3729,10 +3679,10 @@ export declare type BentoCurrencyListboxOptions = BentoCurrencyListboxOptionItem
  *     `
  * }
  */
-export declare const BentoDashboardSection: __VLS_WithTemplateSlots_38<
+export declare const BentoDashboardSection: __VLS_WithTemplateSlots_41<
     DefineComponent<
-        __VLS_WithDefaults_14<
-            __VLS_TypePropsToRuntimeProps_17<{
+        __VLS_WithDefaults_19<
+            __VLS_TypePropsToRuntimeProps_22<{
                 /**
                  * The header of the section
                  */
@@ -3756,8 +3706,8 @@ export declare const BentoDashboardSection: __VLS_WithTemplateSlots_38<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_14<
-                    __VLS_TypePropsToRuntimeProps_17<{
+                __VLS_WithDefaults_19<
+                    __VLS_TypePropsToRuntimeProps_22<{
                         /**
                          * The header of the section
                          */
@@ -3813,10 +3763,10 @@ export declare const BentoDashboardSection: __VLS_WithTemplateSlots_38<
  *     `
  * }
  */
-export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_37<
+export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_40<
     DefineComponent<
-        __VLS_WithDefaults_13<
-            __VLS_TypePropsToRuntimeProps_16<{
+        __VLS_WithDefaults_18<
+            __VLS_TypePropsToRuntimeProps_21<{
                 /**
                  * The header that goes to the top of the template
                  */
@@ -3852,8 +3802,8 @@ export declare const BentoDashboardTemplate: __VLS_WithTemplateSlots_37<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_13<
-                    __VLS_TypePropsToRuntimeProps_16<{
+                __VLS_WithDefaults_18<
+                    __VLS_TypePropsToRuntimeProps_21<{
                         /**
                          * The header that goes to the top of the template
                          */
@@ -4200,6 +4150,13 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_8<
                 type: BooleanConstructor;
                 default: boolean;
             };
+            /**
+             * Sticks the horizontal scrollbar to the bottom of the screen if the data-grid is larger than the screen height.
+             */
+            stickyHorizontalScrollbar: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             /**
              * Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.
              * Because styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).
@@ -4448,6 +4405,13 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_8<
                     type: BooleanConstructor;
                     default: boolean;
                 };
+                /**
+                 * Sticks the horizontal scrollbar to the bottom of the screen if the data-grid is larger than the screen height.
+                 */
+                stickyHorizontalScrollbar: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
                 /**
                  * Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.
                  * Because styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).
@@ -4535,6 +4499,7 @@ export declare const BentoDataGrid: __VLS_WithTemplateSlots_8<
             columnPanel: boolean;
             filterSearchTerm: string;
             noSpacingTop: boolean;
+            stickyHorizontalScrollbar: boolean;
             stickyPagination: boolean;
             stickyFilters: boolean;
             selection: BentoDatagridDataItemId[];
@@ -4718,7 +4683,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_39<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_42<
     DefineComponent<
         {
             /**
@@ -8751,45 +8716,34 @@ declare enum BentoHeaderVariant {
     COMPONENT = 'component',
 }
 
+/**
+ * Image component used for resizing images to certain aspect ratios and fit strategies.
+ *
+ * @example
+ * import { BentoImage } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoImage },
+ *     template: `
+ *       <bento-image
+ *           :src="imageSrc"
+ *           alt="alternative text"
+ *           aspect-ratio="landscape"
+ *           object-fit="cover"
+ *
+ *       />
+ *     `
+ * }
+ */
 export declare const BentoImage: DefineComponent<
-    {
-        /**
-         * Url to image, same as src attribute of `<img>` tag
-         */
-        src: {
-            type: StringConstructor;
-            required: true;
-        };
-        /**
-         * Accessible text describing the image, same as alt attribute of `<img>` tag
-         */
-        alt: {
-            type: StringConstructor;
-            required: true;
-        };
-        /**
-         * Aspect ratio of the image, maps to css aspect-ratio
-         */
-        aspectRatio: {
-            type: PropType<BentoImageAspectRatio | `${BentoImageAspectRatio}`>;
-            default: any;
-            validator: (value: BentoImageAspectRatio) => boolean;
-        };
-        /**
-         * Object fitting strategy, maps to css object-fit
-         */
-        objectFit: {
-            type: PropType<BentoImageObjectFit | `${BentoImageObjectFit}`>;
-            default: any;
-            validator: (value: BentoImageObjectFit) => boolean;
-        };
-    },
-    {
-        imageStyles: ComputedRef<{
-            aspectRatio: string;
-            objectFit: 'fill' | 'contain' | 'cover' | BentoImageObjectFit;
-        }>;
-    },
+    __VLS_WithDefaults_8<
+        __VLS_TypePropsToRuntimeProps_8<BentoImageProps>,
+        {
+            aspectRatio: any;
+            objectFit: any;
+        }
+    >,
+    {},
     {},
     {},
     {},
@@ -8798,55 +8752,19 @@ export declare const BentoImage: DefineComponent<
     {},
     string,
     Readonly<
-        ExtractPropTypes<{
-            /**
-             * Url to image, same as src attribute of `<img>` tag
-             */
-            src: {
-                type: StringConstructor;
-                required: true;
-            };
-            /**
-             * Accessible text describing the image, same as alt attribute of `<img>` tag
-             */
-            alt: {
-                type: StringConstructor;
-                required: true;
-            };
-            /**
-             * Aspect ratio of the image, maps to css aspect-ratio
-             */
-            aspectRatio: {
-                type: PropType<BentoImageAspectRatio | `${BentoImageAspectRatio}`>;
-                default: any;
-                validator: (value: BentoImageAspectRatio) => boolean;
-            };
-            /**
-             * Object fitting strategy, maps to css object-fit
-             */
-            objectFit: {
-                type: PropType<BentoImageObjectFit | `${BentoImageObjectFit}`>;
-                default: any;
-                validator: (value: BentoImageObjectFit) => boolean;
-            };
-        }>
+        ExtractPropTypes<
+            __VLS_WithDefaults_8<
+                __VLS_TypePropsToRuntimeProps_8<BentoImageProps>,
+                {
+                    aspectRatio: any;
+                    objectFit: any;
+                }
+            >
+        >
     >,
     {
-        aspectRatio:
-            | 'square'
-            | 'landscape'
-            | '4:3'
-            | '3:3'
-            | '16:9'
-            | '2:1'
-            | 'portrait'
-            | '3:4'
-            | '2:3'
-            | '9:16'
-            | '1:2'
-            | '1:1'
-            | BentoImageAspectRatio;
-        objectFit: 'fill' | 'contain' | 'cover' | BentoImageObjectFit;
+        aspectRatio: BentoImageAspectRatio | `${BentoImageAspectRatio}` | null;
+        objectFit: BentoImageObjectFit | `${BentoImageObjectFit}` | null;
     }
 >;
 
@@ -8871,6 +8789,20 @@ export declare enum BentoImageObjectFit {
     CONTAIN = 'contain',
 }
 
+export declare interface BentoImageProps {
+    /** Url to image, same as src attribute of `<img>` tag */
+    src: string;
+
+    /** Accessible text describing the image, same as alt attribute of `<img>` tag */
+    alt: string;
+
+    /** Aspect ratio of the image, maps to css aspect-ratio */
+    aspectRatio?: BentoImageAspectRatio | `${BentoImageAspectRatio}` | null;
+
+    /** Object fitting strategy, maps to css object-fit */
+    objectFit?: BentoImageObjectFit | `${BentoImageObjectFit}` | null;
+}
+
 /**
  * @example
  * import { BentoInfoIcon } from '@adyen/adl-vue-components';
@@ -9424,8 +9356,8 @@ export declare type BentoInpuWithDropdowntFilterValue = {
  */
 export declare const BentoInspector: __VLS_WithTemplateSlots_18<
     DefineComponent<
-        __VLS_WithDefaults_7<
-            __VLS_TypePropsToRuntimeProps_7<{
+        __VLS_WithDefaults_9<
+            __VLS_TypePropsToRuntimeProps_9<{
                 /**
                  * Shows the Expand icon in the inspector
                  */
@@ -9468,8 +9400,8 @@ export declare const BentoInspector: __VLS_WithTemplateSlots_18<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_7<
-                    __VLS_TypePropsToRuntimeProps_7<{
+                __VLS_WithDefaults_9<
+                    __VLS_TypePropsToRuntimeProps_9<{
                         /**
                          * Shows the Expand icon in the inspector
                          */
@@ -9541,6 +9473,64 @@ export declare enum BentoKeyboardNavigationKeyDownEvent {
     SPACE = 'keydown:space',
 }
 
+/**
+ * Layout is a basic scaffolding of a page that defines spacing, some functionality and responsive behaviour of its top level sections.
+ *
+ * @example
+ * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoLayout, BentoLayoutRow },
+ *     template: `
+ *          <bento-layout size="narrow">
+ *              <bento-layout-row>
+ *                  Row 1
+ *              </bento-layout-row>
+ *              <bento-layout-row>
+ *                  Row 2
+ *              </bento-layout-row>
+ *          </bento-layout>
+ *     `
+ * }
+ */
+export declare const BentoLayout: __VLS_WithTemplateSlots_19<
+    DefineComponent<
+        __VLS_WithDefaults_10<
+            __VLS_TypePropsToRuntimeProps_10<BentoLayoutProps>,
+            {
+                size: string;
+                variant: string;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_10<
+                    __VLS_TypePropsToRuntimeProps_10<BentoLayoutProps>,
+                    {
+                        size: string;
+                        variant: string;
+                    }
+                >
+            >
+        >,
+        {
+            variant: BentoLayoutVariant;
+            size: BentoLayoutSize;
+        }
+    >,
+    {
+        default: (_: {}) => any;
+    }
+>;
+
 declare type BentoLayoutGroupProportions =
     | '33-33-33'
     | '50-50'
@@ -9555,6 +9545,92 @@ declare type BentoLayoutGroupProportions =
 
 declare const BentoLayoutGroupProportions: string[];
 
+export declare interface BentoLayoutProps {
+    /** Defines if the layout is used in a page or only a section */
+    variant?: BentoLayoutVariant;
+    /** Defines the size of the page */
+    size?: BentoLayoutSize;
+}
+
+/**
+ * Page row is subcomponent of Layout meant to be used to generate the row layout.
+ *
+ * @example
+ * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoLayout, BentoLayoutRow },
+ *     template: `
+ *          <bento-layout>
+ *              <bento-layout-row columns-layout="3-9">
+ *                  <template #col-1>Narrow 3-9</template>
+ *                  <template #col-2>Wide 3-9</template>
+ *              </bento-layout-row>
+ *              <bento-layout-row>
+ *                  <template #col-1>6-6</template>
+ *                  <template #col-2>6-6</template>
+ *              </bento-layout-row>
+ *          </bento-layout>
+ *     `
+ * }
+ */
+export declare const BentoLayoutRow: __VLS_WithTemplateSlots_20<
+    DefineComponent<
+        __VLS_WithDefaults_11<
+            __VLS_TypePropsToRuntimeProps_11<BentoLayoutRowProps>,
+            {
+                columnsLayout: string;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_11<
+                    __VLS_TypePropsToRuntimeProps_11<BentoLayoutRowProps>,
+                    {
+                        columnsLayout: string;
+                    }
+                >
+            >
+        >,
+        {
+            columnsLayout: BentoLayoutRowColumnLayout;
+        }
+    >,
+    {
+        default: (_: {}) => any;
+        'col-1': (_: {}) => any;
+        'col-2': (_: {}) => any;
+    }
+>;
+
+export declare type BentoLayoutRowColumnLayout = (typeof BentoLayoutRowColumnLayoutOptions)[number];
+
+declare const BentoLayoutRowColumnLayoutOptions: readonly ['3-9', '9-3', '4-8', '8-4', '6-6'];
+
+export declare interface BentoLayoutRowProps {
+    /** Sets the layout of the columns when multiple columns are used */
+    columnsLayout?: BentoLayoutRowColumnLayout;
+}
+
+export declare type BentoLayoutSize = (typeof BentoLayoutSizeOptions)[number];
+
+declare const BentoLayoutSizeOptions: readonly ['full-width', 'narrow', 'half-width'];
+
+export declare type BentoLayoutVariant = (typeof BentoLayoutVariantOptions)[number];
+
+/**
+ * @private
+ */
+declare const BentoLayoutVariantOptions: readonly ['page', 'component'];
+
 export declare type BentoLazyLoadType = 'automatic' | 'button' | 'none';
 
 /**
@@ -9572,10 +9648,10 @@ export declare type BentoLazyLoadType = 'automatic' | 'button' | 'none';
  *     `
  * }
  */
-export declare const BentoLink: __VLS_WithTemplateSlots_19<
+export declare const BentoLink: __VLS_WithTemplateSlots_21<
     DefineComponent<
-        __VLS_WithDefaults_8<
-            __VLS_TypePropsToRuntimeProps_8<BentoLinkProps>,
+        __VLS_WithDefaults_12<
+            __VLS_TypePropsToRuntimeProps_12<BentoLinkProps>,
             {
                 target: any;
                 variant: BentoLinkVariant;
@@ -9593,8 +9669,8 @@ export declare const BentoLink: __VLS_WithTemplateSlots_19<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_8<
-                    __VLS_TypePropsToRuntimeProps_8<BentoLinkProps>,
+                __VLS_WithDefaults_12<
+                    __VLS_TypePropsToRuntimeProps_12<BentoLinkProps>,
                     {
                         target: any;
                         variant: BentoLinkVariant;
@@ -10140,7 +10216,7 @@ export declare interface BentoMenuItem {
  *     `
  * };
  */
-export declare const BentoModal: __VLS_WithTemplateSlots_21<
+export declare const BentoModal: __VLS_WithTemplateSlots_23<
     DefineComponent<
         {
             /**
@@ -10499,7 +10575,7 @@ export declare enum BentoModalEvent {
  *     `
  * }
  */
-export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_22<
+export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_24<
     DefineComponent<
         {
             /**
@@ -10656,7 +10732,7 @@ export declare const BentoModalFullscreen: __VLS_WithTemplateSlots_22<
  *     `
  * }
  */
-export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_23<
+export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_25<
     DefineComponent<
         {
             /**
@@ -10815,7 +10891,7 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_23<
  *     `
  * }
  */
-export declare const BentoModalPage: __VLS_WithTemplateSlots_20<
+export declare const BentoModalPage: __VLS_WithTemplateSlots_22<
     DefineComponent<
         {
             /**
@@ -12396,7 +12472,7 @@ export declare enum BentoPaymentMethodType {
  *     `
  * }
  */
-export declare const BentoPopover: __VLS_WithTemplateSlots_24<
+export declare const BentoPopover: __VLS_WithTemplateSlots_26<
     DefineComponent<
         {
             /**
@@ -12815,6 +12891,164 @@ export declare const BentoPopoverPositions: {
 
 export declare type BentoPopoverPositions = PopperContainerPosition;
 
+/**
+ * Promotional Banner highlights important information, announcements, or promotions.
+ *
+ * @example
+ * import { BentoPromoBanner } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoPromoBanner },
+ *     template: `
+ *         <bento-promo-banner
+ *              title="Title"
+ *              description="Brief description explaining and giving more information about the title"
+ *              :image="{ src: '16-1.png', aspectRatio: '16:9' }"
+ *              :actions="[{ title: 'Primary', event: () => {} }]"
+ *         >
+ *         </bento-promo-banner>
+ *     `
+ * };
+ */
+export declare const BentoPromoBanner: __VLS_WithTemplateSlots_27<
+    DefineComponent<
+        __VLS_WithDefaults_13<
+            __VLS_TypePropsToRuntimeProps_13<BentoPromoBannerProps>,
+            {
+                actions: any;
+                color: BentoPromoBannerColor;
+                isDismissible: boolean;
+                dismissButtonText: any;
+                layout: BentoPromoBannerLayout;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {
+            dismiss: () => void;
+        },
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_13<
+                    __VLS_TypePropsToRuntimeProps_13<BentoPromoBannerProps>,
+                    {
+                        actions: any;
+                        color: BentoPromoBannerColor;
+                        isDismissible: boolean;
+                        dismissButtonText: any;
+                        layout: BentoPromoBannerLayout;
+                    }
+                >
+            >
+        >,
+        {
+            actions: BentoPromoBannerAction[];
+            layout: `${BentoPromoBannerLayout}`;
+            color: `${BentoPromoBannerColor}`;
+            isDismissible: boolean;
+            dismissButtonText: string;
+        }
+    >,
+    {
+        description: (_: {}) => any;
+    }
+>;
+
+export declare type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject_2<IconType> & {
+    variant: BentoPromoBannerButtonVariant;
+};
+
+export declare type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;
+
+export declare enum BentoPromoBannerColor {
+    BLUE = 'blue',
+    GREY = 'grey',
+    GREEN = 'green',
+}
+
+export declare type BentoPromoBannerImage = {
+    src: BentoImageProps['src'];
+    alt?: BentoImageProps['alt'];
+    aspectRatio: BentoPromoBannerImageAspectRatio;
+};
+
+export declare type BentoPromoBannerImageAspectRatio = `${
+    | BentoImageAspectRatio.P16_9
+    | BentoImageAspectRatio.P2_1
+    | BentoImageAspectRatio.P1_1}`;
+
+export declare enum BentoPromoBannerLayout {
+    HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical',
+}
+
+export declare interface BentoPromoBannerProps {
+    /**
+     * List of actions that will be used to render the buttons.
+     *
+     * Each object in the list should have a `title`, an `event` and a `variant`.
+     *
+     * `title`: Button's text.
+     * `event`: Event triggered when clicking the Button.
+     * `variant`: Button's style.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   variant: 'primary'
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     *   variant: 'secondary'
+     * }]
+     * ```
+     */
+    actions?: BentoPromoBannerAction[];
+    /**
+     * Defines the color of banner's background
+     */
+    color?: `${BentoPromoBannerColor}`;
+    /**
+     * Defines whether the banner has a `Dismiss` button
+     */
+    isDismissible?: boolean;
+    /**
+     * Defines whether the banner has a `Dismiss` button
+     */
+    dismissButtonText?: string;
+    /**
+     * Defines the image used in the banner.
+     *
+     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.
+     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.
+     *
+     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:
+     *  - `./1-1.png` with an aspect ratio of `1:1`
+     *  - `./2-1.png` with an aspect ratio of `2:1`
+     *  - `./16-9.png` with an aspect ratio of `16:9`
+     */
+    image: BentoPromoBannerImage;
+    /**
+     * Defines style of the banner.
+     *
+     * The horizontal layout is responsive to the container size and
+     * changes depending on the image aspect ratio.
+     *
+     * The vertical layout remains the same regardless of container size.
+     */
+    layout?: `${BentoPromoBannerLayout}`;
+    /**
+     * Defines the title text to be shown on the banner
+     */
+    title: string;
+}
+
 /**
  * Radio buttons are used when two or more options are mutually exclusive,
  * the user can only select a single option from a list of pre-defined options.
@@ -12848,7 +13082,7 @@ export declare type BentoPopoverPositions = PopperContainerPosition;
  *     }
  * }
  */
-export declare const BentoRadioButton: __VLS_WithTemplateSlots_26<
+export declare const BentoRadioButton: __VLS_WithTemplateSlots_29<
     DefineComponent<
         {
             /**
@@ -13018,7 +13252,7 @@ export declare type BentoRadioButtonValue = string | number;
  *     `
  * };
  */
-export declare const BentoRadioGroup: __VLS_WithTemplateSlots_25<
+export declare const BentoRadioGroup: __VLS_WithTemplateSlots_28<
     DefineComponent<
         {
             /**
@@ -13493,7 +13727,7 @@ export declare interface BentoSearchBarItem {
  * }
  */
 export declare const BentoSecondaryNav: DefineComponent<
-    __VLS_TypePropsToRuntimeProps_10<{
+    __VLS_TypePropsToRuntimeProps_15<{
         /**
          * 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.
@@ -13517,7 +13751,7 @@ export declare const BentoSecondaryNav: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_TypePropsToRuntimeProps_10<{
+            __VLS_TypePropsToRuntimeProps_15<{
                 /**
                  * 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.
@@ -13567,8 +13801,8 @@ export declare interface BentoSecondaryNavState {
  * }
  */
 export declare const BentoSegmentedControl: DefineComponent<
-    __VLS_WithDefaults_10<
-        __VLS_TypePropsToRuntimeProps_11<{
+    __VLS_WithDefaults_15<
+        __VLS_TypePropsToRuntimeProps_16<{
             /**
              * Accessible name describing the segmented control.
              * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -13609,8 +13843,8 @@ export declare const BentoSegmentedControl: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_WithDefaults_10<
-                __VLS_TypePropsToRuntimeProps_11<{
+            __VLS_WithDefaults_15<
+                __VLS_TypePropsToRuntimeProps_16<{
                     /**
                      * Accessible name describing the segmented control.
                      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -13767,7 +14001,7 @@ export declare type BentoSelectFilterValue = BentoListboxSelectedValue;
  *     `
  * }
  */
-export declare const BentoSelectionCard: __VLS_WithTemplateSlots_27<
+export declare const BentoSelectionCard: __VLS_WithTemplateSlots_30<
     DefineComponent<
         {
             /**
@@ -13977,7 +14211,7 @@ export declare const BentoSelectionCard: __VLS_WithTemplateSlots_27<
  *     `,
  * }
  */
-export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_28<
+export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_31<
     DefineComponent<
         {
             /**
@@ -14037,6 +14271,13 @@ export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_28<
                 type: PropType<BentoSelectionCardItem[]>;
                 required: true;
             };
+            /**
+             * Sets the responsive number of items rendered in each row.
+             */
+            itemsPerRow: {
+                type: PropType<BentoSelectionCardGroupItemsPerRow>;
+                default: any;
+            };
             /**
              * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.
              * Defaults to no value selected.
@@ -14153,6 +14394,13 @@ export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_28<
                     type: PropType<BentoSelectionCardItem[]>;
                     required: true;
                 };
+                /**
+                 * Sets the responsive number of items rendered in each row.
+                 */
+                itemsPerRow: {
+                    type: PropType<BentoSelectionCardGroupItemsPerRow>;
+                    default: any;
+                };
                 /**
                  * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.
                  * Defaults to no value selected.
@@ -14212,15 +14460,18 @@ export declare const BentoSelectionCardGroup: __VLS_WithTemplateSlots_28<
             readonly: boolean;
             modelValue: BentoSelectionCardModelValue;
             formId: string;
+            itemsPerRow: GridLayoutColumnWidth;
         }
     >,
     {
-        icon: (_: BentoSelectionCardItem) => any;
-        content: (_: BentoSelectionCardItem) => any;
-        dynamicContent: (_: BentoSelectionCardItem) => any;
+        icon: (_: any) => any;
+        content: (_: any) => any;
+        dynamicContent: (_: any) => any;
     }
 >;
 
+export declare type BentoSelectionCardGroupItemsPerRow = GridLayoutColumnWidth;
+
 export declare type BentoSelectionCardGroupLayout = 'horizontal' | 'vertical';
 
 export declare type BentoSelectionCardGroupVariant = 'checkbox' | 'radio';
@@ -14293,7 +14544,7 @@ export declare type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOp
  *     `
  * }
  */
-export declare const BentoSidepanel: __VLS_WithTemplateSlots_30<
+export declare const BentoSidepanel: __VLS_WithTemplateSlots_33<
     DefineComponent<
         {
             /**
@@ -14438,7 +14689,7 @@ export declare enum BentoSidepanelEvent {
  *     `
  * }
  */
-export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_29<
+export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_32<
     DefineComponent<
         {
             /**
@@ -14598,9 +14849,9 @@ export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_29<
  *     `
  * }
  */
-export declare const BentoStatus: __VLS_WithTemplateSlots_31<
+export declare const BentoStatus: __VLS_WithTemplateSlots_34<
     DefineComponent<
-        __VLS_TypePropsToRuntimeProps_12<{
+        __VLS_TypePropsToRuntimeProps_17<{
             variant: BentoStatusVariant | `${BentoStatusVariant}`;
         }>,
         {},
@@ -14613,7 +14864,7 @@ export declare const BentoStatus: __VLS_WithTemplateSlots_31<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_TypePropsToRuntimeProps_12<{
+                __VLS_TypePropsToRuntimeProps_17<{
                     variant: BentoStatusVariant | `${BentoStatusVariant}`;
                 }>
             >
@@ -14659,7 +14910,7 @@ export declare enum BentoStatusVariant {
  *     `
  * }
  */
-export declare const BentoStep: __VLS_WithTemplateSlots_33<
+export declare const BentoStep: __VLS_WithTemplateSlots_36<
     DefineComponent<
         {
             /**
@@ -14733,7 +14984,7 @@ export declare const BentoStep: __VLS_WithTemplateSlots_33<
  *     `
  * }
  */
-export declare const BentoStepper: __VLS_WithTemplateSlots_32<
+export declare const BentoStepper: __VLS_WithTemplateSlots_35<
     DefineComponent<
         {
             /**
@@ -14851,18 +15102,16 @@ export declare enum BentoStepperVariantOption {
  *               <bento-payment-method label="Klarna" type="Klarna"  />
  *         </bento-structured-list-item>
  *         <bento-structured-list-item label="Amount">
- *               <bento-currency :currency="BentoCurrencyISOCode.USD">
- *                   123456
- *               </bento-currency>
+ *               <bento-currency :currency="BentoCurrencyISOCode.USD" :value="123456" />
  *         </bento-structured-list-item>
  *       </bento-structured-list>
  *     `
  * }
  */
-export declare const BentoStructuredList: __VLS_WithTemplateSlots_34<
+export declare const BentoStructuredList: __VLS_WithTemplateSlots_37<
     DefineComponent<
-        __VLS_WithDefaults_11<
-            __VLS_TypePropsToRuntimeProps_13<{
+        __VLS_WithDefaults_16<
+            __VLS_TypePropsToRuntimeProps_18<{
                 /**
                  * Width of the labels container, in pixels. Overrides layout prop.
                  */
@@ -14896,8 +15145,8 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_34<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_11<
-                    __VLS_TypePropsToRuntimeProps_13<{
+                __VLS_WithDefaults_16<
+                    __VLS_TypePropsToRuntimeProps_18<{
                         /**
                          * Width of the labels container, in pixels. Overrides layout prop.
                          */
@@ -14950,17 +15199,15 @@ export declare const BentoStructuredList: __VLS_WithTemplateSlots_34<
  *               </bento-status>
  *         </bento-structured-list-item>
  *         <bento-structured-list-item label="Amount" copy='123456'>
- *               <bento-currency :currency="BentoCurrencyISOCode.USD">
- *                   123456
- *               </bento-currency>
+ *               <bento-currency :currency="BentoCurrencyISOCode.USD" :value="123456" />
  *         </bento-structured-list-item>
  *       </bento-structured-list>
  *     `
  * }
  */
-export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_35<
+export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_38<
     DefineComponent<
-        __VLS_TypePropsToRuntimeProps_14<{
+        __VLS_TypePropsToRuntimeProps_19<{
             /**
              * Label to display for the value
              */
@@ -14996,7 +15243,7 @@ export declare const BentoStructuredListItem: __VLS_WithTemplateSlots_35<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_TypePropsToRuntimeProps_14<{
+                __VLS_TypePropsToRuntimeProps_19<{
                     /**
                      * Label to display for the value
                      */
@@ -16196,8 +16443,8 @@ declare enum BentoTabsEvent {
 }
 
 export declare const BentoTag: DefineComponent<
-    __VLS_WithDefaults_9<
-        __VLS_TypePropsToRuntimeProps_9<BentoTagProps>,
+    __VLS_WithDefaults_14<
+        __VLS_TypePropsToRuntimeProps_14<BentoTagProps>,
         {
             label: any;
             truncate: any;
@@ -16214,8 +16461,8 @@ export declare const BentoTag: DefineComponent<
     string,
     Readonly<
         ExtractPropTypes<
-            __VLS_WithDefaults_9<
-                __VLS_TypePropsToRuntimeProps_9<BentoTagProps>,
+            __VLS_WithDefaults_14<
+                __VLS_TypePropsToRuntimeProps_14<BentoTagProps>,
                 {
                     label: any;
                     truncate: any;
@@ -17464,10 +17711,10 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: __VLS_WithTemplateSlots_36<
+export declare const BentoTypography: __VLS_WithTemplateSlots_39<
     DefineComponent<
-        __VLS_WithDefaults_12<
-            __VLS_TypePropsToRuntimeProps_15<{
+        __VLS_WithDefaults_17<
+            __VLS_TypePropsToRuntimeProps_20<{
                 /**
                  * Sets the HTML DOM element.
                  * @values h1, h2, h3, h4, h5, h6, div, p, span
@@ -17528,8 +17775,8 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_36<
         string,
         Readonly<
             ExtractPropTypes<
-                __VLS_WithDefaults_12<
-                    __VLS_TypePropsToRuntimeProps_15<{
+                __VLS_WithDefaults_17<
+                    __VLS_TypePropsToRuntimeProps_20<{
                         /**
                          * Sets the HTML DOM element.
                          * @values h1, h2, h3, h4, h5, h6, div, p, span