@adyen/bento-vue2 1.71.0 → 1.72.0

package/dist/styles/styleguide.css

@@ -149,10 +149,9 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
-  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
-  --b-data-grid-column-hover-padding: 7px 15px;
+  --b-data-grid-column-min-height: 34px;
   --b-data-grid-column-height: auto;
   --b-data-grid-overflow-shadow-right-background: linear-gradient(270deg, rgba(0, 17, 44, 0.12), rgba(0, 0, 0, 0));
   --b-data-grid-overflow-shadow-left-background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 17, 44, 0.12));
@@ -196,6 +195,8 @@
   --b-avatar-image-small-height: 24px;
   --b-alert-tip-icon-height: 20px;
   --b-alert-icon-height: 24px;
+  --b-ai-button-button-z-index: 1;
+  --b-ai-button-animation-background-z-index: -1;
   --b-action-bar-container-border-radius: 28px;
   --b-z-index-local-tier-4: 4;
   --b-z-index-local-tier-3: 3;
@@ -443,12 +444,16 @@
   --b-color-background-success-strong: #008845;
   --b-color-background-success-weak: #e4faef;
   --b-color-background-warning-strong: #d77f00;
+  --b-color-background-warning-weak-active: #ffe0b3;
+  --b-color-background-warning-weak-hover: #ffecd0;
   --b-color-background-warning-weak: #fff4e5;
   --b-color-background-critical-strong-active: #751e00;
   --b-color-background-critical-strong-hover: #c13101;
   --b-color-background-critical-strong: #dc3801;
   --b-color-background-critical-weak: #fff3ef;
   --b-color-background-spotlight: #ffe379;
+  --b-color-background-selected-active: #c8dff7;
+  --b-color-background-selected-hover: #d4e6f9;
   --b-color-background-selected: #e3effb;
   --b-color-background-disabled: #ecedef;
   --b-color-background-modal-active: #ecedef;
@@ -466,6 +471,8 @@
   --b-color-background-primary-active: #ecedef;
   --b-color-background-primary-hover: #f4f5f6;
   --b-color-background-primary: #ffffff;
+  --b-gradient-data-grid-highlighted-hover: linear-gradient(270deg, var(--b-color-background-warning-weak-hover) 0%, rgba(255, 236, 208, .82) 53.34%, rgba(255, 236, 208, .75) 61.73%, rgba(255, 236, 208, .11) 99.25%, rgba(255, 236, 208, 0) 100%);
+  --b-gradient-data-grid-selected-hover: linear-gradient(270deg, var(--b-color-background-selected-hover) 0%, rgba(212, 230, 249, .82) 53.34%, rgba(212, 230, 249, .75) 61.73%, rgba(212, 230, 249, .11) 99.25%, rgba(212, 230, 249, 0) 100%);
   --b-gradient-data-grid-zebra-hover: linear-gradient(270deg, var(--b-color-background-secondary-hover) 0%, rgba(236, 237, 239, .82) 53.34%, rgba(236, 237, 239, .75) 61.73%, rgba(236, 237, 239, .11) 99.25%, rgba(236, 237, 239, 0) 100%);
   --b-gradient-data-grid-hover: linear-gradient(270deg, var(--b-color-background-primary-hover) 0%, rgba(247, 247, 248, .82) 53.34%, rgba(247, 247, 248, .75) 61.73%, rgba(247, 247, 248, .11) 99.25%, rgba(247, 247, 248, 0) 100%);
   --b-tutorial-indicator-border: var(--b-border-width-m) solid var(--b-color-decorative-green);
@@ -771,6 +778,7 @@
   --b-selection-card-container-color: var(--b-color-label-primary);
   --b-selection-card-container-border-radius: var(--b-border-radius-l);
   --b-selection-card-container-border: var(--b-border-width-s) solid var(--b-color-outline-primary);
+  --b-selection-card-container-background-color: var(--b-color-background-primary);
   --b-selection-card-group-error-message-margin-top: var(--b-spacer-060);
   --b-selection-card-group-items-gap: var(--b-spacer-040);
   --b-segmented-control-button-label-container-checked-color: var(--b-color-label-primary);
@@ -1586,28 +1594,33 @@
   --b-data-grid-footer-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-footer-padding: var(--b-spacer-040) var(--b-spacer-090);
   --b-data-grid-footer-background-color: var(--b-color-background-primary);
-  --b-data-grid-select-cell-margin-left: var(--b-spacer-040);
+  --b-data-grid-select-cell-margin-left: calc(var(--b-spacer-040) - var(--b-border-width-s));
   --b-data-grid-cell-actions-column-selection-padding: var(--b-spacer-050) var(--b-spacer-070);
   --b-data-grid-cell-actions-column-nested-content-padding: var(--b-spacer-050) var(--b-spacer-070);
   --b-data-grid-cell-actions-row-actions-padding: 0 var(--b-spacer-060);
-  --b-data-grid-cell-actions-padding: 0 var(--b-spacer-070) 0 0;
+  --b-data-grid-cell-actions-padding: 0 calc(var(--b-spacer-070) - var(--b-border-width-s)) 0 0;
   --b-data-grid-cell-actions-gap: var(--b-spacer-040);
   --b-data-grid-cell-actions-background-gradient-width: var(--b-spacer-100);
   --b-data-grid-cell-actions-animation-duration: var(--b-animation-duration-fast);
   --b-data-grid-cell-condensed-column-hovered-padding: var(--b-spacer-030) 14px;
   --b-data-grid-cell-condensed-padding: var(--b-spacer-030) 15px;
-  --b-data-grid-cell-padding: 14px var(--b-spacer-070);
-  --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
+  --b-data-grid-cell-hover-border-color: var(--b-color-separator-primary);
+  --b-data-grid-cell-padding: calc(var(--b-spacer-070) - (var(--b-border-width-s) * 2)) calc(var(--b-spacer-070) - var(--b-border-width-s));
+  --b-data-grid-cell-border: var(--b-border-width-s) solid transparent;
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
   --b-data-grid-row-row-actions-container-row-actions-menu-open-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-row-row-actions-container-hover-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-row-row-actions-container-z-index: var(--b-z-index-local-tier-1);
   --b-data-grid-row-row-actions-container-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-rows-loading-container-padding: calc(var(--b-spacer-070) - (var(--b-border-width-s) * 2));
   --b-data-grid-row-nested-row-hover-background-color: var(--b-color-background-primary-hover);
   --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
   --b-data-grid-row-nested-row-background-color: var(--b-color-background-primary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-primary);
-  --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
+  --b-data-grid-row-selected-hover-background-color: var(--b-color-background-selected-hover);
+  --b-data-grid-row-selected-background-color: var(--b-color-background-selected);
+  --b-data-grid-row-highlighted-hover-background-color: var(--b-color-background-warning-weak-hover);
+  --b-data-grid-row-highlighted-background-color: var(--b-color-background-warning-weak);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);
   --b-data-grid-row-hover-background-color: var(--b-color-background-primary-hover);
   --b-data-grid-row-color: var(--b-color-label-primary);
@@ -1623,6 +1636,7 @@
   --b-data-grid-column-actions-padding-left: var(--b-spacer-030);
   --b-data-grid-column-actions-gap: var(--b-spacer-010);
   --b-data-grid-column-draggable-ghost-background-color: var(--b-color-background-selected);
+  --b-data-grid-column-header-padding: calc(var(--b-spacer-040) - var(--b-border-width-s)) 0;
   --b-data-grid-column-header-gap: var(--b-spacer-040);
   --b-data-grid-column-header-and-actions-gap: var(--b-spacer-020);
   --b-data-grid-column-separator-z-index: var(--b-z-index-local-tier-1);
@@ -1637,7 +1651,7 @@
   --b-data-grid-column-hover-sort-icon-color: var(--b-color-label-tertiary);
   --b-data-grid-column-hover-background-color: var(--b-color-background-tertiary);
   --b-data-grid-column-color: var(--b-color-label-primary);
-  --b-data-grid-column-padding: 7px var(--b-spacer-070);
+  --b-data-grid-column-padding: 0 calc(var(--b-spacer-070) - var(--b-border-width-s));
   --b-data-grid-column-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-column-background-color: var(--b-color-background-primary);
   --b-data-grid-columns-small-container-padding: var(--b-spacer-070);
@@ -1646,7 +1660,7 @@
   --b-data-grid-columns-select-column-all-padding-left: var(--b-spacer-010);
   --b-data-grid-columns-select-column-gap: var(--b-spacer-020);
   --b-data-grid-columns-select-column-padding-right: var(--b-spacer-020);
-  --b-data-grid-columns-select-column-padding-left: var(--b-spacer-040);
+  --b-data-grid-columns-select-column-padding-left: calc(var(--b-spacer-040) - var(--b-border-width-s));
   --b-data-grid-columns-frozen-z-index: var(--b-z-index-local-tier-2);
   --b-data-grid-columns-frozen-border-right-width: var(--b-border-width-s);
   --b-data-grid-columns-frozen-border-right-color: var(--b-color-separator-secondary);
@@ -1691,7 +1705,9 @@
   --b-dashboard-section-controls-gap: var(--b-spacer-040);
   --b-dashboard-section-columns-m-and-up-gap: var(--b-spacer-120);
   --b-dashboard-section-columns-gap: var(--b-spacer-090);
-  --b-dashboard-section-content-gap: var(--b-spacer-100);
+  --b-dashboard-section-content-gap: var(--b-spacer-090);
+  --b-dashboard-section-l-and-up-padding-bottom: var(--b-spacer-100);
+  --b-dashboard-section-padding-bottom: var(--b-spacer-090);
   --b-dashboard-section-gap: var(--b-spacer-060);
   --b-dashboard-template-sticky-border-border-bottom: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-dashboard-template-sticky-items-z-index: var(--b-z-index-local-tier-3);
@@ -1700,10 +1716,13 @@
   --b-dashboard-template-top-section-gap: var(--b-spacer-040);
   --b-dashboard-template-header-padding-bottom: var(--b-spacer-040);
   --b-dashboard-template-container-m-and-up-spacing: var(--b-spacer-100);
+  --b-dashboard-template-container-l-and-up-spacing: var(--b-spacer-100);
   --b-dashboard-template-container-spacing: var(--b-spacer-090);
   --b-dashboard-template-xxl-padding: var(--b-spacer-110) var(--b-spacer-130);
   --b-dashboard-template-m-and-up-padding: var(--b-spacer-110) var(--b-spacer-110);
-  --b-dashboard-template-padding: var(--b-spacer-090) var(--b-spacer-090);
+  --b-dashboard-template-l-and-up-padding: var(--b-spacer-080) var(--b-spacer-090);
+  --b-dashboard-template-s-and-up-padding: var(--b-spacer-070) var(--b-spacer-090);
+  --b-dashboard-template-padding: var(--b-spacer-070) var(--b-spacer-070);
   --b-currency-color: var(--b-color-label-primary);
   --b-country-label-color: var(--b-color-label-primary);
   --b-controls-group-label-container-margin-bottom: var(--b-spacer-060);
@@ -2092,6 +2111,8 @@
   --b-alert-padding-mobile: var(--b-spacer-070);
   --b-alert-padding: var(--b-spacer-080);
   --b-alert-border-radius: var(--b-border-radius-m);
+  --b-ai-button-icon-color: var(--b-color-decorative-green);
+  --b-ai-button-animation-background: var(--b-color-decorative-green);
   --b-action-bar-animation-duration: var(--b-animation-duration-moderate);
   --b-action-bar-close-button-margin-right-mobile: var(--b-spacer-070);
   --b-action-bar-close-button-margin-right: var(--b-spacer-090);
@@ -2135,6 +2156,8 @@
   --b-text-rich-text-heading-margin: var(--b-spacer-100) 0 var(--b-spacer-050) 0;
   --b-focus-ring-outline: var(--b-border-width-l);
   --b-focus-ring-spacer: var(--b-border-width-s);
+  --b-data-grid-cell-actions-background-gradient-highlighted-background: var(--b-gradient-data-grid-highlighted-hover);
+  --b-data-grid-cell-actions-background-gradient-selected-background: var(--b-gradient-data-grid-selected-hover);
   --b-data-grid-cell-actions-background-gradient-zebra-background: var(--b-gradient-data-grid-zebra-hover);
   --b-data-grid-cell-actions-background-gradient-background: var(--b-gradient-data-grid-hover);
 }

package/dist/styles/utility.css

@@ -49,6 +49,12 @@
 .b-color-background-selected {
     background-color: #e3effb;
 }
+.b-color-background-selected-hover {
+    background-color: #d4e6f9;
+}
+.b-color-background-selected-active {
+    background-color: #c8dff7;
+}
 .b-color-background-spotlight {
     background-color: #ffe379;
 }
@@ -67,6 +73,12 @@
 .b-color-background-warning-weak {
     background-color: #fff4e5;
 }
+.b-color-background-warning-weak-hover {
+    background-color: #ffecd0;
+}
+.b-color-background-warning-weak-active {
+    background-color: #ffe0b3;
+}
 .b-color-background-warning-strong {
     background-color: #d77f00;
 }

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid.types.BZlzUWVO.js";
+import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid.types.DqzYJ9_N.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { a as e, B as s } from "./chunks/tab.ClkH0GtX.js";
+import { a as e, B as s } from "./chunks/tab.D8YyoNFV.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/tag.js

@@ -1,4 +1,4 @@
-import { B as t, a as e } from "./chunks/tag.Dcm5YMUI.js";
+import { B as t, a as e } from "./chunks/tag.Tjg4linG.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.B2jAycbX.js";
+import { B as o } from "./chunks/textarea.DUPV-I-L.js";
 export {
   o as BentoTextarea
 };

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.Dhcs9a0S.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.DaRKHndA.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/tutorial.js

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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -172,6 +172,85 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "ai-button",
+          "description": "",
+          "attributes": [
+            {
+              "name": "condensed",
+              "required": false,
+              "description": "Reduces size of the button",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables button functionality",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "false"
+            },
+            {
+              "name": "inverse",
+              "required": false,
+              "description": "Sets color set to inverse",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "false"
+            },
+            {
+              "name": "link",
+              "required": false,
+              "description": "Object containing props passed on to the BentoLink component.",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "type",
+              "required": false,
+              "description": "The default behavior of the button.\nPossible values are: 'button', 'reset', 'submit'",
+              "value": {
+                "kind": "expression",
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'button'"
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Click event handler"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/button/components/ai-button/ai-button.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "ai-button-default",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/components/ai-button/__tests__/ai-button-default.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "alert",
           "description": "",
@@ -4067,6 +4146,15 @@
               },
               "default": "() => []"
             },
+            {
+              "name": "filterValuesObject",
+              "description": "An object of the values for each filter in the filter bar where key is a the field name and the value is the BentoFilterBarValue.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterValueObject"
+              },
+              "default": "() => undefined"
+            },
             {
               "name": "filterSearchConfig",
               "description": "Filter's search bar properties with which the placeholder, hint and other\n\"bento-search-bar\" properties can be set. @see {@link BentoFilterBarSearchBarProps}",
@@ -4426,6 +4514,24 @@
               },
               "default": "false"
             },
+            {
+              "name": "isSelected",
+              "description": "Set to true if the row is selected.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "isHighlighted",
+              "description": "Set to true if the row is highlighted.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "hoveredOverColumnState",
               "required": true,
@@ -4604,6 +4710,24 @@
               },
               "default": "false"
             },
+            {
+              "name": "isSelected",
+              "description": "Set to true if the row is selected.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "isHighlighted",
+              "description": "Set to true if the row is highlighted.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "teleportMenu",
               "description": "Set if set to true will teleport the action menu component",
@@ -8091,6 +8215,7 @@
           "attributes": [
             {
               "name": "action",
+              "required": false,
               "description": "Defines the button at the end of the component.",
               "value": {
                 "kind": "expression",
@@ -8100,6 +8225,7 @@
             },
             {
               "name": "description",
+              "required": false,
               "description": "The empty state description.\nGives additional details to the issue.\nThis can be used or the default slot",
               "value": {
                 "kind": "expression",
@@ -8109,24 +8235,27 @@
             },
             {
               "name": "headingEl",
+              "required": false,
               "description": "Sets the heading HTML DOM element.",
               "value": {
                 "kind": "expression",
-                "type": "`${BentoTypographyElement}`"
+                "type": "TSLiteralType"
               },
               "default": "null"
             },
             {
               "name": "image",
+              "required": false,
               "description": "Name of the illustration for the empty state.",
               "value": {
                 "kind": "expression",
-                "type": "`${BentoEmptyStateImage}`"
+                "type": "TSLiteralType"
               },
               "default": "null"
             },
             {
               "name": "title",
+              "required": false,
               "description": "The empty state heading.\nShould clearly explain the issue.",
               "value": {
                 "kind": "expression",
@@ -8136,10 +8265,11 @@
             },
             {
               "name": "variant",
+              "required": false,
               "description": "Types of different empty states",
               "value": {
                 "kind": "expression",
-                "type": "`${BentoEmptyStateVariant}`"
+                "type": "TSLiteralType"
               },
               "default": "'basic'"
             }
@@ -8965,6 +9095,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "trapAllOptions",
+              "description": "Configurations for the focus-trap when trap-all is active.",
+              "value": {
+                "kind": "expression",
+                "type": "FocusTrapOptions"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
@@ -10340,15 +10479,6 @@
                 "type": "string"
               }
             },
-            {
-              "name": "error",
-              "required": false,
-              "description": "If true, applies error styling to the field.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
             {
               "name": "disabled",
               "required": false,
@@ -10387,6 +10517,15 @@
               },
               "default": "true"
             },
+            {
+              "name": "error",
+              "required": false,
+              "description": "If true, applies error styling to the field.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
             {
               "name": "selectedCountry",
               "required": false,
@@ -12620,7 +12759,7 @@
               "description": "Popover's target element.\nThe popover will position itself relatively to target element, in specified position.",
               "value": {
                 "kind": "expression",
-                "type": "TSIndexedAccessType"
+                "type": "VueNodeElement"
               }
             },
             {
@@ -12633,6 +12772,16 @@
               },
               "default": "false"
             },
+            {
+              "name": "trapAllOptions",
+              "required": false,
+              "description": "Configurations for the focus-trap when trap-all is active.",
+              "value": {
+                "kind": "expression",
+                "type": "FocusTrapOptions"
+              },
+              "default": "undefined"
+            },
             {
               "name": "withoutSpace",
               "required": false,
@@ -12963,6 +13112,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "trapAllOptions",
+              "description": "Configurations for the focus-trap when trap-all is active.",
+              "value": {
+                "kind": "expression",
+                "type": "FocusTrapOptions"
+              },
+              "default": "undefined"
             }
           ],
           "events": [
@@ -14860,6 +15018,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "structured-list-default",
+          "description": "",
+          "source": {
+            "module": "./src/components/structured-list/__tests__/structured-list-default.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "structured-list-item",
           "description": "",
@@ -14919,6 +15085,12 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "copy",
+              "description": "Emits copy event and value when copy button is clicked"
+            }
+          ],
           "slots": [
             {
               "name": "default"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -47,7 +47,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.71.0"
+    "@adyen/bento-design-tokens": "1.72.0"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -141,7 +141,7 @@
     "@adyen/bento-cli": "0.6.1",
     "@adyen/bento-core": "0.0.1",
     "@adyen/bento-tailwind": "0.6.1",
-    "@adyen/ui-assets-icons-16": "6.7.1",
+    "@adyen/ui-assets-icons-16": "7.0.0",
     "@adyen/ui-assets-payment-method-icons": "10.3.1"
   },
   "optionalDependencies": {

package/dist/assets/error-message.css

@@ -1 +0,0 @@
-.b-field-label[data-v-2cfbcc40]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--b-field-label-color);display:inline-block;margin-bottom:var(--b-field-label-margin-bottom)}.b-field-label[data-v-2cfbcc40],.b-field-label[data-v-2cfbcc40]:before,.b-field-label[data-v-2cfbcc40]:after{box-sizing:border-box}.b-field-label *[data-v-2cfbcc40],.b-field-label *[data-v-2cfbcc40]:before,.b-field-label *[data-v-2cfbcc40]:after{box-sizing:border-box}.b-field-label[data-v-2cfbcc40] ::-webkit-scrollbar{height:14px;width:14px}.b-field-label[data-v-2cfbcc40] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-field-label[data-v-2cfbcc40]>:not(:last-child){margin-right:var(--b-field-label-margin-right)}.b-field-label__tooltip-wrapper[data-v-2cfbcc40]:not(:last-child){margin-right:var(--b-field-label-tooltip-wrapper-margin-right)}.b-field-label__tooltip[data-v-2cfbcc40]{vertical-align:text-bottom}.b-field-label__requirement[data-v-2cfbcc40]{color:var(--b-field-label-requirement-color)}.b-field-label--condensed[data-v-2cfbcc40]{margin-bottom:var(--b-field-label-condensed-margin-bottom)}[data-v-2cfbcc40]:host{display:inline-block}.b-error-message[data-v-2490b85a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:flex-start;color:var(--b-error-message-color);display:flex}.b-error-message[data-v-2490b85a],.b-error-message[data-v-2490b85a]:before,.b-error-message[data-v-2490b85a]:after{box-sizing:border-box}.b-error-message *[data-v-2490b85a],.b-error-message *[data-v-2490b85a]:before,.b-error-message *[data-v-2490b85a]:after{box-sizing:border-box}.b-error-message[data-v-2490b85a] ::-webkit-scrollbar{height:14px;width:14px}.b-error-message[data-v-2490b85a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-error-message__icon[data-v-2490b85a]{align-items:center;display:inline-flex;height:var(--b-error-message-icon-height);margin-right:var(--b-error-message-icon-margin-right)}