@adyen/bento-vue3 1.50.0 → 1.52.0

package/dist/styles/bento.css

@@ -157,6 +157,9 @@
   --b-code-snippet-code-area-margin: 0;
   --b-card-toggle-small-text-height: 24px;
   --b-card-toggle-height: 26px;
+  --b-calendar-year-month-focus-visible-z-index: 1;
+  --b-calendar-year-month-width: 60px;
+  --b-calendar-year-month-height: 60px;
   --b-calendar-month-day-width: 40px;
   --b-calendar-month-day-height: 40px;
   --b-button-condensed-tertiary-height: auto;
@@ -292,7 +295,7 @@
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #8d95a3;
+  --b-color-link-primary-active: #6d7789;
   --b-color-link-primary-hover: #5c687c;
   --b-color-link-primary: #00112c;
   --b-color-label-always-dark: #00112c;
@@ -328,7 +331,7 @@
   --b-color-label-disabled: #8d95a3;
   --b-color-label-tertiary: #8d95a3;
   --b-color-label-secondary: #5c687c;
-  --b-color-label-primary-active: #8d95a3;
+  --b-color-label-primary-active: #6d7789;
   --b-color-label-primary-hover: #5c687c;
   --b-color-label-primary: #00112c;
   --b-color-background-always-dark-tertiary-selected: #002f68;
@@ -364,7 +367,7 @@
   --b-color-background-inverse-secondary-active: #37455d;
   --b-color-background-inverse-secondary-hover: #283750;
   --b-color-background-inverse-secondary: #1a2a44;
-  --b-color-background-inverse-primary-active: #8d95a3;
+  --b-color-background-inverse-primary-active: #6d7789;
   --b-color-background-inverse-primary-hover: #5c687c;
   --b-color-background-inverse-primary: #00112c;
   --b-color-background-highlight-strong: #0070f5;
@@ -875,7 +878,7 @@
   --b-menu-item-icon-right-color: var(--b-color-label-primary);
   --b-menu-item-icon-left-padding: var(--b-spacer-070);
   --b-menu-item-secondary-text-padding-left: var(--b-spacer-070);
-  --b-menu-item-secondary-text-color-inverse: var(--b-color-label-inverse-secondary);
+  --inverse: {color.label.inverse.primary};
   --b-menu-item-secondary-text-color: var(--b-color-label-secondary);
   --b-menu-item-hover-critical-color-inverse: var(--b-color-label-inverse-critical-hover);
   --b-menu-item-hover-critical-color: var(--b-color-label-critical-hover);
@@ -1673,6 +1676,29 @@
   --b-card-border-radius: var(--b-border-radius-l);
   --b-card-border-color: var(--b-color-outline-primary);
   --b-card-background-color: var(--b-color-background-primary);
+  --b-calendar-year-month-unselected-active-background: var(--b-color-background-primary-active);
+  --b-calendar-year-month-unselected-hover-background: var(--b-color-background-primary-hover);
+  --b-calendar-year-month-unselected-color: var(--b-color-label-primary);
+  --b-calendar-year-month-selected-active-background: var(--b-color-background-inverse-primary-active);
+  --b-calendar-year-month-selected-hover-background: var(--b-color-background-inverse-primary-hover);
+  --b-calendar-year-month-selected-color: var(--b-color-label-inverse-primary);
+  --b-calendar-year-month-selected-border-radius: var(--b-border-radius-s);
+  --b-calendar-year-month-selected-background: var(--b-color-background-inverse-primary);
+  --b-calendar-year-month-middle-active-background: var(--b-color-background-primary);
+  --b-calendar-year-month-middle-hover-background: var(--b-color-background-primary-hover);
+  --b-calendar-year-month-middle-color: var(--b-color-label-primary);
+  --b-calendar-year-month-middle-background: var(--b-color-background-tertiary);
+  --b-calendar-year-month-end-border-radius: 0 var(--b-border-radius-s) var(--b-border-radius-s) 0;
+  --b-calendar-year-month-disabled-unselected-color: var(--b-color-label-disabled);
+  --b-calendar-year-month-disabled-selected-background: var(--b-color-background-disabled);
+  --b-calendar-year-month-disabled-selected-color: var(--b-color-label-disabled);
+  --b-calendar-year-month-current-month-unselected-wrapper-background: var(--b-color-background-tertiary);
+  --b-calendar-year-month-current-month-unselected-hover-wrapper-background: var(--b-color-background-primary);
+  --b-calendar-year-month-current-month-selected-wrapper-background: var(--b-color-background-primary);
+  --b-calendar-year-month-current-month-selected-color: var(--b-color-label-primary);
+  --b-calendar-year-month-beginning-border-radius: var(--b-border-radius-s) 0 0 var(--b-border-radius-s);
+  --b-calendar-year-year-selector-margin-bottom: var(--b-spacer-090);
+  --b-calendar-year-year-selector-color: var(--b-color-label-primary);
   --b-calendar-month-day-unselected-active-background: var(--b-color-background-primary-active);
   --b-calendar-month-day-unselected-hover-background: var(--b-color-background-primary-hover);
   --b-calendar-month-day-unselected-color: var(--b-color-label-primary);

package/dist/styles/legacy.css

@@ -194,6 +194,9 @@
   --b-code-snippet-code-area-margin: 0;
   --b-card-toggle-small-text-height: 24px;
   --b-card-toggle-height: 26px;
+  --b-calendar-year-month-focus-visible-z-index: 1;
+  --b-calendar-year-month-width: 60px;
+  --b-calendar-year-month-height: 60px;
   --b-calendar-month-month-container-border-collapse: collapse;
   --b-calendar-month-day-unselected-active-background: transparent;
   --b-calendar-month-day-unselected-hover-background: none;
@@ -265,9 +268,11 @@
   --b-text-subtitle-font-size: 16px;
   --b-text-body-strongest-wide-line-height: 24px;
   --b-text-body-stronger-wide-line-height: 24px;
+  --b-text-body-stronger-font-weight: 350;
   --b-text-body-wide-line-height: 24px;
   --b-text-body-letter-spacing: normal;
   --b-text-body-line-height: 24px;
+  --b-text-body-font-weight: 350;
   --b-text-caption-stronger-wide-line-height: 20px;
   --b-text-caption-wide-line-height: 20px;
   --b-text-caption-letter-spacing: 0;
@@ -359,7 +364,7 @@
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #8d95a3;
+  --b-color-link-primary-active: #6d7789;
   --b-color-link-primary-hover: #5c687c;
   --b-color-link-primary: #00112c;
   --b-color-label-always-dark: #00112c;
@@ -392,7 +397,7 @@
   --b-color-label-disabled: #8d95a3;
   --b-color-label-tertiary: #8d95a3;
   --b-color-label-secondary: #5c687c;
-  --b-color-label-primary-active: #8d95a3;
+  --b-color-label-primary-active: #6d7789;
   --b-color-label-primary-hover: #5c687c;
   --b-color-label-primary: #00112c;
   --b-color-background-always-dark-tertiary-selected: #002f68;
@@ -427,7 +432,7 @@
   --b-color-background-inverse-secondary-active: #37455d;
   --b-color-background-inverse-secondary-hover: #283750;
   --b-color-background-inverse-secondary: #1a2a44;
-  --b-color-background-inverse-primary-active: #8d95a3;
+  --b-color-background-inverse-primary-active: #6d7789;
   --b-color-background-inverse-primary-hover: #5c687c;
   --b-color-background-inverse-primary: #00112c;
   --b-color-background-highlight-strong: #0070f5;
@@ -845,7 +850,7 @@
   --b-menu-item-icon-right-color: var(--b-color-label-primary);
   --b-menu-item-icon-left-padding: var(--b-spacer-070);
   --b-menu-item-secondary-text-padding-left: var(--b-spacer-070);
-  --b-menu-item-secondary-text-color-inverse: var(--b-color-label-inverse-secondary);
+  --inverse: {color.label.inverse.primary};
   --b-menu-item-secondary-text-color: var(--b-color-label-secondary);
   --b-menu-item-hover-critical-color-inverse: var(--b-color-label-inverse-critical-hover);
   --b-menu-item-hover-critical-color: var(--b-color-label-critical-hover);
@@ -1561,6 +1566,25 @@
   --b-card-header-border-radius: var(--b-border-radius-s);
   --b-card-border-width: var(--b-border-width-s);
   --b-card-border-radius: var(--b-border-radius-s);
+  --b-calendar-year-month-unselected-active-background: var(--b-color-background-primary-active);
+  --b-calendar-year-month-unselected-hover-background: var(--b-color-background-primary-hover);
+  --b-calendar-year-month-unselected-color: var(--b-color-label-primary);
+  --b-calendar-year-month-selected-active-background: var(--b-color-background-inverse-primary-active);
+  --b-calendar-year-month-selected-hover-background: var(--b-color-background-inverse-primary-hover);
+  --b-calendar-year-month-selected-border-radius: var(--b-border-radius-s);
+  --b-calendar-year-month-selected-background: var(--b-color-background-inverse-primary);
+  --b-calendar-year-month-middle-hover-background: var(--b-color-background-primary-hover);
+  --b-calendar-year-month-middle-color: var(--b-color-label-primary);
+  --b-calendar-year-month-middle-background: var(--b-color-background-tertiary);
+  --b-calendar-year-month-end-border-radius: 0 var(--b-border-radius-s) var(--b-border-radius-s) 0;
+  --b-calendar-year-month-disabled-unselected-color: var(--b-color-label-disabled);
+  --b-calendar-year-month-disabled-selected-background: var(--b-color-background-disabled);
+  --b-calendar-year-month-disabled-selected-color: var(--b-color-label-disabled);
+  --b-calendar-year-month-current-month-unselected-wrapper-background: var(--b-color-background-tertiary);
+  --b-calendar-year-month-current-month-selected-color: var(--b-color-label-primary);
+  --b-calendar-year-month-beginning-border-radius: var(--b-border-radius-s) 0 0 var(--b-border-radius-s);
+  --b-calendar-year-year-selector-margin-bottom: var(--b-spacer-090);
+  --b-calendar-year-year-selector-color: var(--b-color-label-primary);
   --b-calendar-month-week-header-border-bottom: var(--b-border-width-s) solid var(--b-color-neutral-20);
   --b-calendar-month-day-unselected-color: var(--b-color-label-primary);
   --b-calendar-month-day-end-after-z-index: var(--b-z-index-local-tier-2);
@@ -1761,8 +1785,6 @@
   --b-text-body-strongest-wide-font-weight: var(--b-font-weight-600);
   --b-text-body-strongest-font-weight: var(--b-font-weight-600);
   --b-text-body-stronger-wide-font-weight: var(--b-font-weight-500);
-  --b-text-body-stronger-font-weight: var(--b-font-weight-100);
-  --b-text-body-font-weight: var(--b-font-weight-100);
   --b-text-body-font-size: var(--b-font-size-15);
   --b-text-body-font-family: var(--b-font-family-primary);
   --b-text-caption-stronger-wide-font-weight: var(--b-font-weight-500);
@@ -2045,6 +2067,10 @@
   --b-checkbox-input-icon-color: var(--b-color-neutral-0);
   --b-card-border-color: var(--b-color-neutral-20);
   --b-card-background-color: var(--b-color-background-primary);
+  --b-calendar-year-month-selected-color: var(--b-color-label-inverse-primary);
+  --b-calendar-year-month-middle-active-background: var(--b-color-background-primary);
+  --b-calendar-year-month-current-month-unselected-hover-wrapper-background: var(--b-color-background-primary);
+  --b-calendar-year-month-current-month-selected-wrapper-background: var(--b-color-background-primary);
   --b-calendar-month-day-selected-active-background: var(--b-color-primary-40);
   --b-calendar-month-day-selected-hover-background: var(--b-color-primary-40);
   --b-calendar-month-day-selected-color: var(--b-color-neutral-0);

package/dist/styles/styleguide.css

@@ -157,6 +157,9 @@
   --b-code-snippet-code-area-margin: 0;
   --b-card-toggle-small-text-height: 24px;
   --b-card-toggle-height: 26px;
+  --b-calendar-year-month-focus-visible-z-index: 1;
+  --b-calendar-year-month-width: 60px;
+  --b-calendar-year-month-height: 60px;
   --b-calendar-month-day-width: 40px;
   --b-calendar-month-day-height: 40px;
   --b-button-condensed-tertiary-height: auto;
@@ -347,7 +350,7 @@
   --b-color-outline-primary-hover: #c9cdd3;
   --b-color-outline-primary: #dbdee2;
   --b-color-link-primary-disabled: #8d95a3;
-  --b-color-link-primary-active: #8d95a3;
+  --b-color-link-primary-active: #6d7789;
   --b-color-link-primary-hover: #5c687c;
   --b-color-link-primary: #00112c;
   --b-color-label-always-dark: #00112c;
@@ -383,7 +386,7 @@
   --b-color-label-disabled: #8d95a3;
   --b-color-label-tertiary: #8d95a3;
   --b-color-label-secondary: #5c687c;
-  --b-color-label-primary-active: #8d95a3;
+  --b-color-label-primary-active: #6d7789;
   --b-color-label-primary-hover: #5c687c;
   --b-color-label-primary: #00112c;
   --b-color-background-always-dark-tertiary-selected: #002f68;
@@ -419,7 +422,7 @@
   --b-color-background-inverse-secondary-active: #37455d;
   --b-color-background-inverse-secondary-hover: #283750;
   --b-color-background-inverse-secondary: #1a2a44;
-  --b-color-background-inverse-primary-active: #8d95a3;
+  --b-color-background-inverse-primary-active: #6d7789;
   --b-color-background-inverse-primary-hover: #5c687c;
   --b-color-background-inverse-primary: #00112c;
   --b-color-background-highlight-strong: #0070f5;
@@ -930,7 +933,7 @@
   --b-menu-item-icon-right-color: var(--b-color-label-primary);
   --b-menu-item-icon-left-padding: var(--b-spacer-070);
   --b-menu-item-secondary-text-padding-left: var(--b-spacer-070);
-  --b-menu-item-secondary-text-color-inverse: var(--b-color-label-inverse-secondary);
+  --inverse: {color.label.inverse.primary};
   --b-menu-item-secondary-text-color: var(--b-color-label-secondary);
   --b-menu-item-hover-critical-color-inverse: var(--b-color-label-inverse-critical-hover);
   --b-menu-item-hover-critical-color: var(--b-color-label-critical-hover);
@@ -1728,6 +1731,29 @@
   --b-card-border-radius: var(--b-border-radius-l);
   --b-card-border-color: var(--b-color-outline-primary);
   --b-card-background-color: var(--b-color-background-primary);
+  --b-calendar-year-month-unselected-active-background: var(--b-color-background-primary-active);
+  --b-calendar-year-month-unselected-hover-background: var(--b-color-background-primary-hover);
+  --b-calendar-year-month-unselected-color: var(--b-color-label-primary);
+  --b-calendar-year-month-selected-active-background: var(--b-color-background-inverse-primary-active);
+  --b-calendar-year-month-selected-hover-background: var(--b-color-background-inverse-primary-hover);
+  --b-calendar-year-month-selected-color: var(--b-color-label-inverse-primary);
+  --b-calendar-year-month-selected-border-radius: var(--b-border-radius-s);
+  --b-calendar-year-month-selected-background: var(--b-color-background-inverse-primary);
+  --b-calendar-year-month-middle-active-background: var(--b-color-background-primary);
+  --b-calendar-year-month-middle-hover-background: var(--b-color-background-primary-hover);
+  --b-calendar-year-month-middle-color: var(--b-color-label-primary);
+  --b-calendar-year-month-middle-background: var(--b-color-background-tertiary);
+  --b-calendar-year-month-end-border-radius: 0 var(--b-border-radius-s) var(--b-border-radius-s) 0;
+  --b-calendar-year-month-disabled-unselected-color: var(--b-color-label-disabled);
+  --b-calendar-year-month-disabled-selected-background: var(--b-color-background-disabled);
+  --b-calendar-year-month-disabled-selected-color: var(--b-color-label-disabled);
+  --b-calendar-year-month-current-month-unselected-wrapper-background: var(--b-color-background-tertiary);
+  --b-calendar-year-month-current-month-unselected-hover-wrapper-background: var(--b-color-background-primary);
+  --b-calendar-year-month-current-month-selected-wrapper-background: var(--b-color-background-primary);
+  --b-calendar-year-month-current-month-selected-color: var(--b-color-label-primary);
+  --b-calendar-year-month-beginning-border-radius: var(--b-border-radius-s) 0 0 var(--b-border-radius-s);
+  --b-calendar-year-year-selector-margin-bottom: var(--b-spacer-090);
+  --b-calendar-year-year-selector-color: var(--b-color-label-primary);
   --b-calendar-month-day-unselected-active-background: var(--b-color-background-primary-active);
   --b-calendar-month-day-unselected-hover-background: var(--b-color-background-primary-hover);
   --b-calendar-month-day-unselected-color: var(--b-color-label-primary);

package/dist/styles/utility.css

@@ -86,7 +86,7 @@
     background-color: #5c687c;
 }
 .b-color-background-inverse-primary-active {
-    background-color: #8d95a3;
+    background-color: #6d7789;
 }
 .b-color-background-inverse-secondary {
     background-color: #1a2a44;
@@ -194,7 +194,7 @@
     color: #5c687c;
 }
 .b-color-label-primary-active {
-    color: #8d95a3;
+    color: #6d7789;
 }
 .b-color-label-secondary {
     color: #5c687c;

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-item-custom.D6s8sw36.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-item-custom.DTCzOBBy.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { B as e, a as s } from "./chunks/tabs.CiTn85aw.js";
+import { B as e, a as s } from "./chunks/tabs.hp52NnXH.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.Bmw9RaOG.js";
+import { B as t, a as e } from "./chunks/tag.B1hW92hG.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.CzuRg2pM.js";
+import { B as o } from "./chunks/textarea.DMA29yQA.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.CjltBKy0.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.kWg3dTy1.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { t as a } from "./chunks/toast.BWxPbCOy.js";
+import { t as a } from "./chunks/toast.7D23cICy.js";
 export {
   a as BentoToast
 };

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { B as a, b as g, a as s } from "./chunks/toggle.BmwlaQon.js";
+import { B as a, b as g, a as s } from "./chunks/toggle.hoD_i2Ey.js";
 export {
   a as BentoToggle,
   g as BentoToggleLabelPosition,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.CxTHd8yr.js";
+import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.CUmJbMsw.js";
 export {
   t as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.50.0",
+  "version": "1.52.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.50.0",
+  "version": "1.52.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -27,8 +27,6 @@
     "url": "git@github.com:Adyen/bento.git"
   },
   "dependencies": {
-    "@adyen/ui-assets-icons-16": "4.1.0",
-    "@adyen/ui-assets-payment-method-icons": "6.1.0",
     "@floating-ui/core": "1.6.8",
     "@floating-ui/vue": "1.0.7",
     "@vueuse/core": "11.3.0",
@@ -38,7 +36,8 @@
     "mime": "4.0.6",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.50.0"
+    "@adyen/bento-design-tokens": "1.52.0",
+    "@adyen/ui-assets-icons-16": "6.1.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",
@@ -114,8 +113,9 @@
     "vue-router": "~4.1",
     "vue-style-loader": "4.1.3",
     "vue-tsc": "1.0.24",
-    "@adyen/bento-tailwind": "0.3.1",
-    "@adyen/bento-core": "0.0.1"
+    "@adyen/bento-core": "0.0.1",
+    "@adyen/ui-assets-payment-method-icons": "8.2.0",
+    "@adyen/bento-tailwind": "0.3.3"
   },
   "scripts": {
     "build": "pnpm run build:prod",

package/dist/chunks/alert.DGewBB2a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.DGewBB2a.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../../vue2/src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits event when the alert is closed. `closeButton` must be `true`\n         */\n        (e: 'close-alert');\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton?: boolean;\n\n            /**\n             * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n             */\n            type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;\n\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant?: BentoAlertVariant | `${BentoAlertVariant}`;\n        }>(),\n        {\n            closeButton: false,\n            type: BentoAlertTypeOption.HIGHLIGHT,\n            variant: BentoAlertVariant.DEFAULT,\n        }\n    );\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAVZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,qCAAAD,EAAA,OAAA;AAAA;;QAAkE,MAAA;AAAA,QAAe,GAAA;AAAA;IAF7R,IAAA,GAAAL,CAAA;AAAA;;QAE8xC,IAAA,gCAAAK,EAAA;AAAA;;UAAgD,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAFr2C,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/button-actions-with-menu.BXRKkFiw.js

@@ -1,119 +0,0 @@
-import { defineComponent as _, computed as n, toRef as f, ref as s, provide as u, createElementBlock as v, openBlock as l, createElementVNode as b, normalizeClass as B, createVNode as h, createBlock as N, createCommentVNode as y, unref as A } from "vue";
-import { M as E, B as I } from "./menu.DKluB_Dn.js";
-import { a as k } from "./popover.BNOfWuSb.js";
-import { f as C, B as M } from "./button-actions.BZEKcCbe.js";
-import { _ as T } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/button-actions-with-menu.css";
-const w = { class: "b-button-actions-with-menu" }, O = {}, R = /* @__PURE__ */ _({
-  ...O,
-  __name: "button-actions-with-menu",
-  props: {
-    /**
-         * List of actions that will be used to render the buttons.
-         * First element in the list will be rendered as "primary".
-         * All elements after the first will be rendered as "secondary".
-         *
-         * Each object in the list should have a `title`, an `event` and
-         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-         *
-         * `title`: Button's text.
-         *
-         * `event`: Event triggered when clicking the Button.
-         *
-         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
-         *
-         * @see BentoButton for a list of all the other props supported by each button action.
-         *
-         * ```
-         * [{
-         *   title: 'Primary',
-         *   event: () => { ... },
-         *   icon: FourPeopleIcon,
-         *   link: {
-                    variant: 'default',
-                    external: true,
-                    to: 'https://www.adyen.com/'
-                },
-         * }, {
-         *   title: 'Secondary',
-         *   event: () => { ... }
-         *   disabled: true,
-         *   variant: 'primary',
-         *   critical: true
-         * }]
-         * ```
-         */
-    actions: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.
-     */
-    disableResponsiveBehavior: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.
-     */
-    displayedActions: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Set inverse color scheme to buttons and menu
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The position of where the menu should open.
-     */
-    menuPosition: {
-      type: String,
-      default: "bottom-start",
-      validator: (o) => Object.values(k).includes(o)
-    }
-  },
-  setup(o) {
-    const e = o, d = n(() => e.actions.slice(0, e.displayedActions)), p = f(e, "inverse"), i = s(null), a = s(null), c = s(!1);
-    u(E, p), e.disableResponsiveBehavior || u(C, { buttonActionsWithMenu: i, menu: a, stackButtons: c });
-    const m = n(() => ({
-      "b-button-actions-with-menu__container-wrapper--stacked-buttons": c.value
-    })), r = n(
-      () => e.displayedActions !== void 0 && e.displayedActions < e.actions.length ? e.actions.slice(e.displayedActions, e.actions.length).map((t) => ({
-        text: t.title,
-        handler: t.event,
-        icon: t.icon,
-        critical: t.critical,
-        disabled: t.disabled
-      })) : []
-    );
-    return (t, g) => (l(), v("div", w, [
-      b("div", {
-        ref_key: "buttonActionsWithMenu",
-        ref: i,
-        role: "group",
-        class: B(["b-button-actions-with-menu__container-wrapper", m.value])
-      }, [
-        h(A(M), {
-          actions: d.value,
-          inverse: o.inverse
-        }, null, 8, ["actions", "inverse"]),
-        r.value.length ? (l(), N(I, {
-          key: 0,
-          ref_key: "menu",
-          ref: a,
-          data: r.value,
-          "menu-position": o.menuPosition
-        }, null, 8, ["data", "menu-position"])) : y("", !0)
-      ], 2)
-    ]));
-  }
-}), U = /* @__PURE__ */ T(R, [["__scopeId", "data-v-76b1bc7f"]]);
-export {
-  U as B
-};
-//# sourceMappingURL=button-actions-with-menu.BXRKkFiw.js.map

package/dist/chunks/button-actions-with-menu.BXRKkFiw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions-with-menu.BXRKkFiw.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref<HTMLDivElement>(null);\n    const stackButtons = ref(false);\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","props","__props","computedActions","computed","inverseRef","toRef","buttonActionsWithMenu","ref","menu","stackButtons","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","el"],"mappings":";;;;;;mDAsLIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlIA,UAAAC,IAAAC,GA2EAC,IAAAC,EAAA,MAAAH,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAI,IAAAC,EAAAL,GAAA,SAAA,GACAM,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AAEA,IAAAG,EAAAC,GAAAP,CAAA,GAEAJ,EAAA,6BACIU,EAAAE,GAAA,EAAA,uBAAAN,GAAA,MAAAE,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAI,IAAAV,EAAA,OAAA;AAAA,MAA2C,kEAAAM,EAAA;AAAA,IAC0C,EAAA,GAGrFK,IAAAX;AAAA,MAA4B,MAAAH,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAe,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;;;;;;"}