@adyen/bento-vue2 1.40.0 → 1.41.0

package/dist/styles/bento-dark.css

@@ -786,6 +786,15 @@
   --b-radio-button-space-around-increase: var(--b-spacer-020);
   --b-radio-button-border-radius: var(--b-border-radius-l);
   --b-radio-button-offset-top: var(--b-spacer-010);
+  --b-promo-banner-content-actions-gap: var(--b-spacer-040);
+  --b-promo-banner-content-header-gap: var(--b-spacer-060);
+  --b-promo-banner-content-padding: var(--b-spacer-100);
+  --b-promo-banner-content-gap: var(--b-spacer-100);
+  --b-promo-banner-background-color-grey: var(--b-color-background-secondary);
+  --b-promo-banner-background-color-green: var(--b-color-background-success-weak);
+  --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
+  --b-promo-banner-color: var(--b-color-label-primary);
+  --b-promo-banner-border-radius: var(--b-border-radius-xl);
   --b-popper-z-index: 5;
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
@@ -979,6 +988,11 @@
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
   --b-link-color: var(--b-color-link-primary);
   --b-link-border-radius: var(--b-border-radius-xs);
+  --b-layout-row-column-wrapper-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-layout-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-080);
+  --b-layout-padding: var(--b-spacer-070);
   --b-inspector-animation-leave-active-easing: var(--b-animation-easing-exit);
   --b-inspector-animation-enter-active-easing: var(--b-animation-easing-enter);
   --b-inspector-animation-duration: var(--b-animation-duration-slow);
@@ -1281,6 +1295,8 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
+  --b-data-grid-horizontal-scrollbar-z-index: 2;
+  --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
   --b-data-grid-re-order-column-target-separator-z-index: 1;
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);

package/dist/styles/bento-light.css

@@ -785,6 +785,15 @@
   --b-radio-button-space-around-increase: var(--b-spacer-020);
   --b-radio-button-border-radius: var(--b-border-radius-l);
   --b-radio-button-offset-top: var(--b-spacer-010);
+  --b-promo-banner-content-actions-gap: var(--b-spacer-040);
+  --b-promo-banner-content-header-gap: var(--b-spacer-060);
+  --b-promo-banner-content-padding: var(--b-spacer-100);
+  --b-promo-banner-content-gap: var(--b-spacer-100);
+  --b-promo-banner-background-color-grey: var(--b-color-background-secondary);
+  --b-promo-banner-background-color-green: var(--b-color-background-success-weak);
+  --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
+  --b-promo-banner-color: var(--b-color-label-primary);
+  --b-promo-banner-border-radius: var(--b-border-radius-xl);
   --b-popper-z-index: 5;
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
@@ -978,6 +987,11 @@
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
   --b-link-color: var(--b-color-link-primary);
   --b-link-border-radius: var(--b-border-radius-xs);
+  --b-layout-row-column-wrapper-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-layout-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-080);
+  --b-layout-padding: var(--b-spacer-070);
   --b-inspector-animation-leave-active-easing: var(--b-animation-easing-exit);
   --b-inspector-animation-enter-active-easing: var(--b-animation-easing-enter);
   --b-inspector-animation-duration: var(--b-animation-duration-slow);
@@ -1280,6 +1294,8 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
+  --b-data-grid-horizontal-scrollbar-z-index: 2;
+  --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
   --b-data-grid-re-order-column-target-separator-z-index: 1;
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);

package/dist/styles/bento.css

@@ -785,6 +785,15 @@
   --b-radio-button-space-around-increase: var(--b-spacer-020);
   --b-radio-button-border-radius: var(--b-border-radius-l);
   --b-radio-button-offset-top: var(--b-spacer-010);
+  --b-promo-banner-content-actions-gap: var(--b-spacer-040);
+  --b-promo-banner-content-header-gap: var(--b-spacer-060);
+  --b-promo-banner-content-padding: var(--b-spacer-100);
+  --b-promo-banner-content-gap: var(--b-spacer-100);
+  --b-promo-banner-background-color-grey: var(--b-color-background-secondary);
+  --b-promo-banner-background-color-green: var(--b-color-background-success-weak);
+  --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
+  --b-promo-banner-color: var(--b-color-label-primary);
+  --b-promo-banner-border-radius: var(--b-border-radius-xl);
   --b-popper-z-index: 5;
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
@@ -978,6 +987,11 @@
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
   --b-link-color: var(--b-color-link-primary);
   --b-link-border-radius: var(--b-border-radius-xs);
+  --b-layout-row-column-wrapper-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-layout-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-080);
+  --b-layout-padding: var(--b-spacer-070);
   --b-inspector-animation-leave-active-easing: var(--b-animation-easing-exit);
   --b-inspector-animation-enter-active-easing: var(--b-animation-easing-enter);
   --b-inspector-animation-duration: var(--b-animation-duration-slow);
@@ -1280,6 +1294,8 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
+  --b-data-grid-horizontal-scrollbar-z-index: 2;
+  --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
   --b-data-grid-re-order-column-target-separator-z-index: 1;
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);

package/dist/styles/legacy.css

@@ -763,6 +763,15 @@
   --b-radio-button-space-around-increase: var(--b-spacer-020);
   --b-radio-button-border-radius: var(--b-border-radius-l);
   --b-radio-button-offset-top: var(--b-spacer-020);
+  --b-promo-banner-content-actions-gap: var(--b-spacer-040);
+  --b-promo-banner-content-header-gap: var(--b-spacer-060);
+  --b-promo-banner-content-padding: var(--b-spacer-100);
+  --b-promo-banner-content-gap: var(--b-spacer-100);
+  --b-promo-banner-background-color-grey: var(--b-color-background-secondary);
+  --b-promo-banner-background-color-green: var(--b-color-background-success-weak);
+  --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
+  --b-promo-banner-color: var(--b-color-label-primary);
+  --b-promo-banner-border-radius: var(--b-border-radius-xl);
   --b-popper-z-index: 5;
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
@@ -928,6 +937,11 @@
   --b-link-data-grid-color: var(--b-color-link-primary);
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
   --b-link-border-radius: var(--b-border-radius-xs);
+  --b-layout-row-column-wrapper-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-layout-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-080);
+  --b-layout-padding: var(--b-spacer-070);
   --b-inspector-animation-leave-active-easing: var(--b-animation-easing-exit);
   --b-inspector-animation-enter-active-easing: var(--b-animation-easing-enter);
   --b-inspector-animation-duration: var(--b-animation-duration-slow);
@@ -1237,6 +1251,7 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
+  --b-data-grid-horizontal-scrollbar-z-index: 2;
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
   --b-data-grid-re-order-column-target-separator-z-index: 1;
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);
@@ -1871,6 +1886,7 @@
   --b-dropdown-options-container-border-color: var(--b-color-neutral-20);
   --b-dropdown-description-color: var(--b-color-neutral-70);
   --b-divider-background-color: var(--b-color-neutral-20);
+  --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-filters-background-color: var(--b-color-background-primary);
   --b-data-grid-pagination-background-color: var(--b-color-background-primary);
   --b-data-grid-lazy-load-background-color: var(--b-color-background-primary);

package/dist/styles/styleguide.css

@@ -840,6 +840,15 @@
   --b-radio-button-space-around-increase: var(--b-spacer-020);
   --b-radio-button-border-radius: var(--b-border-radius-l);
   --b-radio-button-offset-top: var(--b-spacer-010);
+  --b-promo-banner-content-actions-gap: var(--b-spacer-040);
+  --b-promo-banner-content-header-gap: var(--b-spacer-060);
+  --b-promo-banner-content-padding: var(--b-spacer-100);
+  --b-promo-banner-content-gap: var(--b-spacer-100);
+  --b-promo-banner-background-color-grey: var(--b-color-background-secondary);
+  --b-promo-banner-background-color-green: var(--b-color-background-success-weak);
+  --b-promo-banner-background-color-blue: var(--b-color-background-highlight-weak);
+  --b-promo-banner-color: var(--b-color-label-primary);
+  --b-promo-banner-border-radius: var(--b-border-radius-xl);
   --b-popper-z-index: 5;
   --b-popover-animation-duration: var(--b-animation-duration-moderate);
   --b-popover-footer-padding: var(--b-spacer-000) var(--b-spacer-070) var(--b-spacer-060) var(--b-spacer-070);
@@ -1033,6 +1042,11 @@
   --b-link-external-link-padding: 0 0 0 var(--b-spacer-020);
   --b-link-color: var(--b-color-link-primary);
   --b-link-border-radius: var(--b-border-radius-xs);
+  --b-layout-row-column-wrapper-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-layout-l-and-up-column-gap: var(--b-spacer-090);
+  --b-layout-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-080);
+  --b-layout-padding: var(--b-spacer-070);
   --b-inspector-animation-leave-active-easing: var(--b-animation-easing-exit);
   --b-inspector-animation-enter-active-easing: var(--b-animation-easing-enter);
   --b-inspector-animation-duration: var(--b-animation-duration-slow);
@@ -1335,6 +1349,8 @@
   --b-date-picker-description-error-margin-top: var(--b-spacer-020);
   --b-date-picker-description-margin-top: var(--b-spacer-040);
   --b-date-picker-description-color: var(--b-color-label-secondary);
+  --b-data-grid-horizontal-scrollbar-z-index: 2;
+  --b-data-grid-horizontal-scrollbar-background-color: var(--b-color-background-primary);
   --b-data-grid-empty-state-padding: var(--b-spacer-100) 0;
   --b-data-grid-re-order-column-target-separator-z-index: 1;
   --b-data-grid-re-order-column-target-separator-background-color: var(--b-color-background-highlight-strong);

package/dist/timeline.js

@@ -1,4 +1,4 @@
-import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.Bmn0Pu11.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.CxB3KFiu.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { t as r } from "./chunks/tutorial.DG5I6TRS.js";
+import { t as r } from "./chunks/tutorial.CGjM0EJT.js";
 export {
   r as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1103,42 +1103,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-currency",
-          "description": "A Currency component is used to display a formatted currency value.",
-          "attributes": [
-            {
-              "name": "currency",
-              "value": {
-                "kind": "expression",
-                "type": "BentoCurrencyISOCode | `${BentoCurrencyISOCode}`"
-              },
-              "default": "BentoCurrencyISOCode.EUR"
-            },
-            {
-              "name": "majorUnits",
-              "description": "Accepts currency value in major units instead of minor ones",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "disableTypography",
-              "description": "Disable the default typography for the component. Only use this when the component is inside another typography component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/currency/currency.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-data-grid",
           "description": "",
@@ -1797,52 +1761,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-image",
-          "description": "",
-          "attributes": [
-            {
-              "name": "src",
-              "required": true,
-              "description": "Url to image, same as src attribute of `<img>` tag",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "alt",
-              "required": true,
-              "description": "Accessible text describing the image, same as alt attribute of `<img>` tag",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "aspectRatio",
-              "description": "Aspect ratio of the image, maps to css aspect-ratio",
-              "value": {
-                "kind": "expression",
-                "type": "BentoImageAspectRatio | `${BentoImageAspectRatio}`"
-              },
-              "default": "null"
-            },
-            {
-              "name": "objectFit",
-              "description": "Object fitting strategy, maps to css object-fit",
-              "value": {
-                "kind": "expression",
-                "type": "BentoImageObjectFit | `${BentoImageObjectFit}`"
-              },
-              "default": "null"
-            }
-          ],
-          "source": {
-            "module": "./src/components/image/image.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-info-icon",
           "description": "",
@@ -4392,6 +4310,56 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "currency",
+          "description": "",
+          "attributes": [
+            {
+              "name": "currency",
+              "required": false,
+              "description": "Currency code based on the ISO 4217 standard",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoCurrencyISOCode.EUR"
+            },
+            {
+              "name": "disableTypography",
+              "required": false,
+              "description": "Disable the default typography for the component. Only use this when the component is inside another typography component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "majorUnits",
+              "required": false,
+              "description": "Accepts currency value in major units instead of minor ones",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "Currency value to be formatted",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/currency/currency.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "dashed-underline",
           "description": "",
@@ -4661,6 +4629,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "stickyHorizontalScrollbar",
+              "description": "Sticks the horizontal scrollbar to the bottom of the screen if the data-grid is larger than the screen height.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "stickyPagination",
               "description": "Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.\nBecause styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).",
@@ -5172,6 +5149,10 @@
             {
               "name": "<undefined>"
             },
+            {
+              "name": "sort",
+              "description": "Triggered when a column is sorted."
+            },
             {
               "name": "column-hover",
               "description": "Emitted when a column header is hovered over."
@@ -7536,6 +7517,54 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "image",
+          "description": "",
+          "attributes": [
+            {
+              "name": "src",
+              "required": true,
+              "description": "Url to image, same as src attribute of `<img>` tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "alt",
+              "required": true,
+              "description": "Accessible text describing the image, same as alt attribute of `<img>` tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "aspectRatio",
+              "required": false,
+              "description": "Aspect ratio of the image, maps to css aspect-ratio",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "objectFit",
+              "required": false,
+              "description": "Object fitting strategy, maps to css object-fit",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            }
+          ],
+          "source": {
+            "module": "./src/components/image/image.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "info-icon-with-popover",
           "description": "",
@@ -7959,6 +7988,72 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "layout",
+          "description": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Defines if the layout is used in a page or only a section",
+              "value": {
+                "kind": "expression",
+                "type": "BentoLayoutVariant"
+              },
+              "default": "'page'"
+            },
+            {
+              "name": "size",
+              "required": false,
+              "description": "Defines the size of the page",
+              "value": {
+                "kind": "expression",
+                "type": "BentoLayoutSize"
+              },
+              "default": "'full-width'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/layout/layout.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "layout-row",
+          "description": "",
+          "attributes": [
+            {
+              "name": "columnsLayout",
+              "required": false,
+              "description": "Sets the layout of the columns when multiple columns are used",
+              "value": {
+                "kind": "expression",
+                "type": "BentoLayoutRowColumnLayout"
+              },
+              "default": "'6-6'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "col-1"
+            },
+            {
+              "name": "col-2"
+            }
+          ],
+          "source": {
+            "module": "./src/components/layout/components/layout-row/layout-row.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "link",
           "description": "",
@@ -9800,6 +9895,95 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "promo-banner",
+          "description": "",
+          "attributes": [
+            {
+              "name": "actions",
+              "required": false,
+              "description": "List of actions that will be used to render the buttons.\n\nEach object in the list should have a `title`, an `event` and a `variant`.\n\n`title`: Button's text.\n`event`: Event triggered when clicking the Button.\n`variant`: Button's style.\n\n```\n[{\n  title: 'Primary',\n  event: () => { ... },\n  variant: 'primary'\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n  variant: 'secondary'\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "null"
+            },
+            {
+              "name": "color",
+              "required": false,
+              "description": "Defines the color of banner's background",
+              "value": {
+                "kind": "expression",
+                "type": "TSLiteralType"
+              },
+              "default": "BentoPromoBannerColor.GREY"
+            },
+            {
+              "name": "isDismissible",
+              "required": false,
+              "description": "Defines whether the banner has a `Dismiss` button",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "dismissButtonText",
+              "required": false,
+              "description": "Defines whether the banner has a `Dismiss` button",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "image",
+              "required": true,
+              "description": "Defines the image used in the banner.\n\nThe promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\nOnly the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n\nIn Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n - `./1-1.png` with an aspect ratio of `1:1`\n - `./2-1.png` with an aspect ratio of `2:1`\n - `./16-9.png` with an aspect ratio of `16:9`",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPromoBannerImage"
+              }
+            },
+            {
+              "name": "layout",
+              "required": false,
+              "description": "Defines style of the banner.\n\nThe horizontal layout is responsive to the container size and\nchanges depending on the image aspect ratio.\n\nThe vertical layout remains the same regardless of container size.",
+              "value": {
+                "kind": "expression",
+                "type": "TSLiteralType"
+              },
+              "default": "BentoPromoBannerLayout.HORIZONTAL"
+            },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Defines the title text to be shown on the banner",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "dismiss",
+              "description": "Emits a dismiss event when dismiss button on the promotional banner is pressed"
+            }
+          ],
+          "slots": [
+            {
+              "name": "description"
+            }
+          ],
+          "source": {
+            "module": "./src/components/promo-banner/promo-banner.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "radio-button",
           "description": "",
@@ -10867,6 +11051,15 @@
                 "type": "BentoSelectionCardItem[]"
               }
             },
+            {
+              "name": "itemsPerRow",
+              "description": "Sets the responsive number of items rendered in each row.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoSelectionCardGroupItemsPerRow"
+              },
+              "default": "undefined"
+            },
             {
               "name": "modelValue",
               "description": "Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.\nDefaults to no value selected.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
     "date-fns": "2.28.0",
     "focus-lock": "0.11.0",
     "uuid": "11.0.5",
-    "@adyen/bento-design-tokens": "1.40.0"
+    "@adyen/bento-design-tokens": "1.41.0"
   },
   "peerDependencies": {
     "vue": "~2.7",