@adyen/bento-vue3 1.55.1 → 1.56.0

package/dist/styles/bento.css

@@ -1235,13 +1235,14 @@
   --b-filter-bar-container-gap: var(--b-spacer-040);
   --b-filter-bar-before-filters-gap: var(--b-spacer-040);
   --b-filter-bar-actions-gap: var(--b-spacer-040);
+  --b-filter-bar-filters-gap: var(--b-spacer-040);
+  --b-filter-bar-search-external-container-margin-bottom: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-border-color: var(--b-color-outline-secondary);
   --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-hover-color: var(--b-color-label-inverse-primary);
-  --b-filter-bar-button-secondary-label-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-secondary-label-color: var(--b-color-label-primary);
   --b-filter-bar-button-label-container-gap: var(--b-spacer-020);
   --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-background-primary-hover);
@@ -1262,6 +1263,7 @@
   --b-filter-bar-button-container-gap: var(--b-spacer-040);
   --b-filter-bar-button-with-secondary-label-container-padding-right: var(--b-spacer-050);
   --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
+  --b-filter-bar-button-with-counter-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-disabled-background-color: var(--b-color-background-primary);
   --b-filter-bar-button-applied-filter-open-color: var(--b-color-label-inverse-primary);
@@ -1279,10 +1281,16 @@
   --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-icon-only-padding: var(--b-spacer-020);
+  --b-filter-bar-button-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-color: var(--b-color-label-primary);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-outline-secondary);
   --b-filter-bar-button-background-color: var(--b-color-background-primary);
+  --b-filter-bar-button-group-button-active-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-active);
+  --b-filter-bar-button-group-button-hover-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-hover);
+  --b-filter-bar-button-group-button-padding: var(--b-spacer-020);
+  --b-filter-bar-button-group-button-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary);
   --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
   --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
   --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
@@ -1558,7 +1566,10 @@
   --b-data-grid-template-data-grid-filters-padding-right: var(--b-spacer-090);
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
+  --b-data-grid-template-additional-content-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-template-additional-content-padding: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
+  --b-data-grid-template-additional-content-background-color: var(--b-color-background-primary);
   --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-gap: var(--b-spacer-060);

package/dist/styles/legacy.css

@@ -146,6 +146,7 @@
   --b-filter-bar-select-filter-divider-border-width: 0;
   --b-filter-bar-fixed-scroller-button-condensed-max-height: 28px;
   --b-filter-bar-fixed-scroller-button-condensed-height: 28px;
+  --b-filter-bar-button-secondary-label-background-color: inherit;
   --b-filter-bar-button-label-line-height: 15px;
   --b-filter-bar-button-height: 28px;
   --b-error-message-icon-height: 20px;
@@ -1186,15 +1187,15 @@
   --b-filter-bar-container-gap: var(--b-spacer-040);
   --b-filter-bar-before-filters-gap: var(--b-spacer-040);
   --b-filter-bar-actions-gap: var(--b-spacer-040);
+  --b-filter-bar-filters-gap: var(--b-spacer-040);
+  --b-filter-bar-search-external-container-margin-bottom: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-hover-color: var(--b-color-grey-50);
   --b-filter-bar-button-secondary-label-padding: var(--b-spacer-010) var(--b-spacer-030);
   --b-filter-bar-button-secondary-label-color: var(--b-color-grey-90);
   --b-filter-bar-button-secondary-label-border-radius: var(--b-border-radius-s);
-  --b-filter-bar-button-secondary-label-background-color: var(--b-color-grey-0);
   --b-filter-bar-button-label-container-gap: var(--b-spacer-050);
   --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-white);
@@ -1218,10 +1219,11 @@
   --b-filter-bar-button-with-counter-active-color: var(--b-color-grey-0);
   --b-filter-bar-button-with-counter-active-border-color: var(--b-color-navy-50);
   --b-filter-bar-button-with-counter-active-background-color: var(--b-color-navy-50);
+  --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-with-counter-color: var(--b-color-grey-0);
   --b-filter-bar-button-with-counter-border: var(--b-border-width-s) solid var(--b-color-navy-40);
   --b-filter-bar-button-with-counter-background-color: var(--b-color-navy-40);
-  --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
+  --b-filter-bar-button-with-counter-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-grey-40);
   --b-filter-bar-button-disabled-background-color: var(--b-color-grey-10);
   --b-filter-bar-button-applied-filter-open-border: var(--b-border-width-s) solid var(--b-color-background-inverse-secondary-active);
@@ -1235,11 +1237,16 @@
   --b-filter-bar-button-applied-background-color: var(--b-color-background-inverse-secondary);
   --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
-  --b-filter-bar-button-active-background-color: var(--b-color-grey-10);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-icon-only-padding: var(--b-spacer-020);
+  --b-filter-bar-button-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-color: var(--b-color-grey-90);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-grey-20);
+  --b-filter-bar-button-group-button-active-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-active);
+  --b-filter-bar-button-group-button-hover-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-hover);
+  --b-filter-bar-button-group-button-padding: var(--b-spacer-020);
+  --b-filter-bar-button-group-button-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary);
   --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
   --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
   --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
@@ -1498,6 +1505,8 @@
   --b-data-grid-template-data-grid-columns-padding-left: var(--b-spacer-050);
   --b-data-grid-template-data-grid-filters-padding-right: var(--b-spacer-090);
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
+  --b-data-grid-template-additional-content-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-template-additional-content-padding: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
@@ -2089,6 +2098,7 @@
   --b-data-grid-column-headers-background-color: var(--b-color-background-primary);
   --b-data-grid-border-color: var(--b-color-neutral-20);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
+  --b-data-grid-template-additional-content-background-color: var(--b-color-background-primary);
   --b-dashboard-template-sticky-items-background-color: var(--b-color-background-primary);
   --b-code-snippet-language-picker-background-color: var(--b-color-background-primary);
   --b-checkbox-text-disabled-color: var(--b-color-neutral-40);

package/dist/styles/styleguide.css

@@ -1290,13 +1290,14 @@
   --b-filter-bar-container-gap: var(--b-spacer-040);
   --b-filter-bar-before-filters-gap: var(--b-spacer-040);
   --b-filter-bar-actions-gap: var(--b-spacer-040);
+  --b-filter-bar-filters-gap: var(--b-spacer-040);
+  --b-filter-bar-search-external-container-margin-bottom: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-padding-right: var(--b-spacer-040);
   --b-filter-bar-persistent-filters-border-color: var(--b-color-outline-secondary);
   --b-filter-bar-z-index: var(--b-z-index-global-elevated);
   --b-filter-bar-padding-right: var(--b-spacer-070);
   --b-filter-bar-gap: var(--b-spacer-040);
-  --b-filter-bar-button-secondary-label-hover-color: var(--b-color-label-inverse-primary);
-  --b-filter-bar-button-secondary-label-color: var(--b-color-label-inverse-primary);
+  --b-filter-bar-button-secondary-label-color: var(--b-color-label-primary);
   --b-filter-bar-button-label-container-gap: var(--b-spacer-020);
   --b-filter-bar-button-hover-color: var(--b-color-label-secondary);
   --b-filter-bar-button-hover-background-color: var(--b-color-background-primary-hover);
@@ -1317,6 +1318,7 @@
   --b-filter-bar-button-container-gap: var(--b-spacer-040);
   --b-filter-bar-button-with-secondary-label-container-padding-right: var(--b-spacer-050);
   --b-filter-bar-button-with-counter-container-padding-right: var(--b-spacer-020);
+  --b-filter-bar-button-with-counter-padding-right: var(--b-spacer-020);
   --b-filter-bar-button-disabled-color: var(--b-color-label-disabled);
   --b-filter-bar-button-disabled-background-color: var(--b-color-background-primary);
   --b-filter-bar-button-applied-filter-open-color: var(--b-color-label-inverse-primary);
@@ -1334,10 +1336,16 @@
   --b-filter-bar-button-attention-outline: 0.5px solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-attention-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
   --b-filter-bar-button-active-border: var(--b-border-width-s) solid var(--b-color-outline-secondary-active);
+  --b-filter-bar-button-icon-only-padding: var(--b-spacer-020);
+  --b-filter-bar-button-padding: var(--b-spacer-020) var(--b-spacer-050);
   --b-filter-bar-button-color: var(--b-color-label-primary);
   --b-filter-bar-button-border-radius: var(--b-border-radius-m);
   --b-filter-bar-button-border: var(--b-border-width-s) solid var(--b-color-outline-secondary);
   --b-filter-bar-button-background-color: var(--b-color-background-primary);
+  --b-filter-bar-button-group-button-active-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-active);
+  --b-filter-bar-button-group-button-hover-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary-hover);
+  --b-filter-bar-button-group-button-padding: var(--b-spacer-020);
+  --b-filter-bar-button-group-button-border: calc(var(--b-border-width-s) / 2) solid var(--b-color-outline-inverse-primary);
   --b-file-uploader-restrictions-error-color: var(--b-color-label-critical);
   --b-file-uploader-restrictions-disabled-color: var(--b-color-label-disabled);
   --b-file-uploader-restrictions-margin-top: var(--b-spacer-020);
@@ -1613,7 +1621,10 @@
   --b-data-grid-template-data-grid-filters-padding-right: var(--b-spacer-090);
   --b-data-grid-template-tabs-padding: var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-tabs-background-color: var(--b-color-background-primary);
+  --b-data-grid-template-additional-content-z-index: var(--b-z-index-local-tier-2);
+  --b-data-grid-template-additional-content-padding: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-additional-content-margin: var(--b-spacer-000) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
+  --b-data-grid-template-additional-content-background-color: var(--b-color-background-primary);
   --b-data-grid-template-header-z-index: var(--b-z-index-local-tier-3);
   --b-data-grid-template-header-margin: var(--b-spacer-080) var(--b-spacer-090) var(--b-spacer-000) var(--b-spacer-090);
   --b-data-grid-template-gap: var(--b-spacer-060);

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, d as a, _ as o, b as i, B as n, c as u, e as d } from "./chunks/summary-grid.types.DOYW579A.js";
+import { s as r, a as t, d as a, _ as o, b as i, B as n, c as u, e as d } from "./chunks/summary-grid.types.lGX16F4w.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.DZk78MLK.js";
+import { B as e, a as s } from "./chunks/tabs.BVuOvNxx.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/textarea.js

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

package/dist/toast.js

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

package/dist/tutorial.js

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

package/dist/web-types.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.55.1",
+  "version": "1.56.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,7 @@
     "mime": "4.0.6",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.55.1"
+    "@adyen/bento-design-tokens": "1.56.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",
@@ -108,15 +108,15 @@
     "vitest": "2.1.9",
     "vue": "3.5.13",
     "vue-docgen-web-types": "0.1.8",
-    "vue-i18n": "9.14.3",
+    "vue-i18n": "9.14.5",
     "vue-i18n-bridge": "9.14.3",
     "vue-router": "~4.1",
     "vue-style-loader": "4.1.3",
     "vue-tsc": "1.0.24",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.3.6-1",
+    "@adyen/bento-tailwind": "0.3.7",
     "@adyen/ui-assets-icons-16": "6.2.0",
-    "@adyen/ui-assets-payment-method-icons": "9.0.0"
+    "@adyen/ui-assets-payment-method-icons": "9.1.0"
   },
   "scripts": {
     "build": "pnpm run build:prod",

package/dist/chunks/button.DEVuqLVT.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.DEVuqLVT.js","sources":["../../../core/src/components/button/button.types.ts","../../../vue2/src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n    TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n        @click.capture=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { Booleanish } from '@/types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\n\n        /**\n         * The default behavior of the button.\n         * Possible values are: 'button', 'reset', 'submit'\n         */\n        type: {\n            type: String as PropType<ButtonHTMLAttributes['type']>,\n            default: 'button',\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary, tertiary-with-background\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur');\n\n        /**\n         * Emitted when the button is clicked\n         */\n        (e: 'click', event: MouseEvent);\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus');\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'keydown.esc');\n    }>();\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            return BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT, isButton: true }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const getIconOnlyClass = () => ({\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\n    });\n\n    const onClickButton = (e: MouseEvent) => {\n        if (!props.disabled) {\n            emit('click', e);\n        } else {\n            e.preventDefault();\n            e.stopPropagation();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","getIconOnlyClass","onClickButton","e"],"mappings":";;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;GCiLRE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApJA,UAAAC,IAAAC,GA8CAC,IAAAC,GAsBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIX,KAAA,gBAAAA,EAAA,UAAA,SACIY,IAEJ,QAAO,GAEXC,IAAAF,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAG,IAAAV,EAAA,eAAA,MAAA,gBAAAU,EAAA;AAAA,QACe,kBAAAC,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAL;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAG,EAAA;AAAA,QACsB,UAAAb,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAiB,EAAA,SAAA,UAAA,GAAA;AAAA,IAE4E,GAGtGC,IAAAP,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAX,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAH,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGsB,IAAAR,EAAA,OAAA;AAAA,MAA2C,GAAAO,EAAA;AAAA,MACvB,CAAA,aAAArB,EAAA,SAAA,EAAA,GAAAG,EAAA;AAAA,MACuC,CAAA,aAAAH,EAAA,QAAA,EAAA,GAAAG,EAAA;AAAA,MACD,CAAA,aAAAH,EAAA,OAAA,EAAA,GAAAG,EAAA;AAAA,IACD,EAAA,GAGzDoB,IAAA,OAAA;AAAA,MAAgC,CAAA,aAAAvB,EAAA,SAAA,EAAA,GAAA,CAAAW,EAAA,SAAA;AAAA,IACuC,IAGvEa,IAAA,CAAAC,MAAA;AACI,MAAAtB,EAAA,YAGIsB,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHApB,EAAA,SAAAoB,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}