@adyen/bento-vue2 1.27.0 → 1.28.0

package/dist/chunks/{button-actions-with-menu.bf968959.js → button-actions-with-menu.f3yuLK-L.js}

@@ -1,10 +1,10 @@
-import { defineComponent as a, computed as i, toRef as r, provide as u } from "vue";
-import { M as d, B as p } from "./index.a48e7f99.js";
-import { B as _ } from "./index.0a30d358.js";
-import { B as l } from "./button-actions.87e589e3.js";
-import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { defineComponent as c, computed as i, toRef as r, provide as u } from "vue";
+import { M as p, B as d } from "./menu.2TwUMlA9.js";
+import { a as m } from "./popover.B8YH92W8.js";
+import { B as _ } from "./button-actions.Bg9ey0p6.js";
+import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button-actions-with-menu.css";
-const f = {}, v = /* @__PURE__ */ a({
+const f = {}, v = /* @__PURE__ */ c({
   ...f,
   __name: "button-actions-with-menu",
   props: {
@@ -67,39 +67,37 @@ const f = {}, v = /* @__PURE__ */ a({
     menuPosition: {
       type: String,
       default: "bottom-start",
-      validator: (s) => Object.values(_).includes(s)
+      validator: (s) => Object.values(m).includes(s)
     }
   },
   setup(s) {
-    const t = s, n = i(() => t.actions.slice(0, t.displayedActions)), e = r(t, "inverse");
-    u(d, e);
-    const c = i(
-      () => t.displayedActions !== void 0 && t.displayedActions < t.actions.length ? t.actions.slice(t.displayedActions, t.actions.length).map((o) => ({
-        text: o.title,
-        handler: o.event,
-        icon: o.icon,
-        critical: o.critical,
-        disabled: o.disabled
+    const t = s, o = i(() => t.actions.slice(0, t.displayedActions)), e = r(t, "inverse");
+    u(p, e);
+    const a = i(
+      () => t.displayedActions !== void 0 && t.displayedActions < t.actions.length ? t.actions.slice(t.displayedActions, t.actions.length).map((n) => ({
+        text: n.title,
+        handler: n.event,
+        icon: n.icon,
+        critical: n.critical,
+        disabled: n.disabled
       })) : []
     );
-    return { __sfc: !0, props: t, computedActions: n, inverseRef: e, computedMenuActions: c, BentoMenu: p, BentoButtonActions: l };
+    return { __sfc: !0, props: t, computedActions: o, inverseRef: e, computedMenuActions: a, BentoMenu: d, BentoButtonActions: _ };
   }
 });
 var A = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n("div", { staticClass: "b-button-actions-with-menu" }, [n("div", { staticClass: "b-button-actions-with-menu__container-wrapper", attrs: { role: "group" } }, [n(e.BentoButtonActions, { attrs: { actions: e.computedActions, inverse: t.inverse } }), e.computedMenuActions.length ? n(e.BentoMenu, { attrs: { data: e.computedMenuActions, "menu-position": t.menuPosition } }) : t._e()], 1)]);
-}, y = [], B = /* @__PURE__ */ m(
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o("div", { staticClass: "b-button-actions-with-menu" }, [o("div", { staticClass: "b-button-actions-with-menu__container-wrapper", attrs: { role: "group" } }, [o(e.BentoButtonActions, { attrs: { actions: e.computedActions, inverse: t.inverse } }), e.computedMenuActions.length ? o(e.BentoMenu, { attrs: { data: e.computedMenuActions, "menu-position": t.menuPosition } }) : t._e()], 1)]);
+}, B = [], y = /* @__PURE__ */ l(
   v,
   A,
-  y,
+  B,
   !1,
   null,
-  "7d0c6a50",
-  null,
-  null
+  "7d0c6a50"
 );
-const C = B.exports;
+const E = y.exports;
 export {
-  C as B
+  E as B
 };
-//# sourceMappingURL=button-actions-with-menu.bf968959.js.map
+//# sourceMappingURL=button-actions-with-menu.f3yuLK-L.js.map

package/dist/chunks/{button-actions-with-menu.bf968959.js.map → button-actions-with-menu.f3yuLK-L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.bf968959.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, 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\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        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\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\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__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,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;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.f3yuLK-L.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, 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\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        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\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\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__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,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;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions.87e589e3.js → button-actions.Bg9ey0p6.js}

@@ -1,10 +1,10 @@
-import { defineComponent as v, computed as c } from "vue";
-import { a as p } from "./button.cb90b55c.js";
-import { B as f } from "./loading-button.692dbdc8.js";
-import { n as u } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { defineComponent as v, computed as o } from "vue";
+import { B as p } from "./button.DhAUh5JA.js";
+import { B as f } from "./loading-button.CoF1IhEU.js";
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button-actions.css";
-var l = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(l || {}), _ = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(_ || {});
-const o = { ...l, ..._ }, g = {}, y = /* @__PURE__ */ v({
+var l = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(l || {}), d = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(d || {});
+const c = { ...l, ...d }, g = {}, y = /* @__PURE__ */ v({
   ...g,
   __name: "button-actions",
   props: {
@@ -66,48 +66,46 @@ const o = { ...l, ..._ }, g = {}, y = /* @__PURE__ */ v({
      */
     layout: {
       type: String,
-      default: o.BUTTONS_END,
-      validator: (t) => Object.values(o).includes(t)
+      default: c.BUTTONS_END,
+      validator: (t) => Object.values(c).includes(t)
     }
   },
   setup(t) {
-    const n = t, a = c(() => n.actions.slice().reverse()), s = (r) => {
-      const d = n.actions.length - 1;
-      return r === d ? "primary" : "secondary";
-    }, e = c(() => ({
+    const n = t, a = o(() => n.actions.slice().reverse()), r = (s) => {
+      const _ = n.actions.length - 1;
+      return s === _ ? "primary" : "secondary";
+    }, e = o(() => ({
       [`b-button-actions--${n.layout}`]: !0
     }));
-    return { __sfc: !0, props: n, reversedActionsList: a, generateButtonVariantByIndex: s, conditionalClasses: e, generateButtonEvents: (r) => (r == null ? void 0 : r.event) !== void 0 ? {
-      click: r.event
-    } : {}, isIconOnly: (r) => r.iconOnly && (r.iconLeft || r.iconRight || r.icon), BentoButton: p, BentoLoadingButton: f };
+    return { __sfc: !0, props: n, reversedActionsList: a, generateButtonVariantByIndex: r, conditionalClasses: e, generateButtonEvents: (s) => (s == null ? void 0 : s.event) !== void 0 ? {
+      click: s.event
+    } : {}, isIconOnly: (s) => s.iconOnly && (s.iconLeft || s.iconRight || s.icon), BentoButton: p, BentoLoadingButton: f };
   }
 });
-var m = function() {
-  var n = this, a = n._self._c, s = n._self._setupProxy;
-  return a("div", { staticClass: "b-button-actions" }, [a("div", { staticClass: "b-button-actions__container-wrapper", class: s.conditionalClasses, attrs: { role: "group" } }, n._l(s.reversedActionsList, function(e, i) {
-    return a("div", { key: i, staticClass: "b-button-actions__button-wrapper" }, [e.state ? a(s.BentoLoadingButton, n._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: n.inverse, state: e.state, variant: e.variant || s.generateButtonVariantByIndex(i) } }, s.generateButtonEvents(e)), [n._v(" " + n._s(e.title) + " ")]) : a(s.BentoButton, n._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: n.inverse, link: e.link, variant: e.variant || s.generateButtonVariantByIndex(i) }, scopedSlots: n._u([e.icon || e.iconLeft ? { key: "iconLeft", fn: function() {
+var B = function() {
+  var n = this, a = n._self._c, r = n._self._setupProxy;
+  return a("div", { staticClass: "b-button-actions" }, [a("div", { staticClass: "b-button-actions__container-wrapper", class: r.conditionalClasses, attrs: { role: "group" } }, n._l(r.reversedActionsList, function(e, i) {
+    return a("div", { key: i, staticClass: "b-button-actions__button-wrapper" }, [e.state ? a(r.BentoLoadingButton, n._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: n.inverse, state: e.state, variant: e.variant || r.generateButtonVariantByIndex(i) } }, r.generateButtonEvents(e)), [n._v(" " + n._s(e.title) + " ")]) : a(r.BentoButton, n._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: n.inverse, link: e.link, variant: e.variant || r.generateButtonVariantByIndex(i) }, scopedSlots: n._u([e.icon || e.iconLeft ? { key: "iconLeft", fn: function() {
       return [a(e.icon || e.iconLeft, { tag: "component", attrs: { "svg-title": e.title } })];
-    }, proxy: !0 } : null, s.isIconOnly(e) ? null : { key: "default", fn: function() {
+    }, proxy: !0 } : null, r.isIconOnly(e) ? null : { key: "default", fn: function() {
       return [n._v(" " + n._s(e.title) + " ")];
     }, proxy: !0 }, e.iconRight ? { key: "iconRight", fn: function() {
       return [a(e.iconRight, { tag: "component", attrs: { "svg-title": e.title } })];
-    }, proxy: !0 } : null], null, !0) }, s.generateButtonEvents(e)))], 1);
+    }, proxy: !0 } : null], null, !0) }, r.generateButtonEvents(e)))], 1);
   }), 0)]);
-}, B = [], E = /* @__PURE__ */ u(
+}, m = [], E = /* @__PURE__ */ u(
   y,
-  m,
   B,
+  m,
   !1,
   null,
-  "b25746d9",
-  null,
-  null
+  "b25746d9"
 );
-const L = E.exports;
+const k = E.exports;
 export {
-  L as B,
+  k as B,
   l as a,
-  _ as b,
-  o as c
+  d as b,
+  c
 };
-//# sourceMappingURL=button-actions.87e589e3.js.map
+//# sourceMappingURL=button-actions.Bg9ey0p6.js.map

package/dist/chunks/{button-actions.87e589e3.js.map → button-actions.Bg9ey0p6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions.87e589e3.js","sources":["../../src/components/button/components/button-actions/button-actions.types.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonProps, BentoLoadingButtonState } from '@/components/button';\n\nexport interface BentoButtonActionObject extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: VueNodeElement;\n    iconLeft?: VueNodeElement;\n    iconRight?: VueNodeElement;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionObject, BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\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: 'secondary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_START\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        layout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\n    });\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","__default__","reversedActionsList","computed","props","generateButtonVariantByIndex","actionIndex","lastActionIndex","conditionalClasses","button"],"mappings":";;;;;AAeY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAOL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCoIHG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAC,IAAA,CAAAC,MAAA;AACI,YAAAC,IAAAH,EAAA,QAAA,SAAA;AACA,aAAAE,MAAAC,IAAA,YAAA;AAAA,IAAqD,GAGzDC,IAAAL,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,QAAA,GAAA;AAAA,IACA,EAAA;wIAG3C,CAAAK,OAAAA,KAAA,gBAAAA,EAAA,WAAA,SAAA;AAAA,MAEU,OAAAA,EAAA;AAAA,IACkB,IAAA,CAAA,eAI5B,CAAAA,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions.Bg9ey0p6.js","sources":["../../src/components/button/components/button-actions/button-actions.types.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonProps, BentoLoadingButtonState } from '@/components/button';\n\nexport interface BentoButtonActionObject extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: VueNodeElement;\n    iconLeft?: VueNodeElement;\n    iconRight?: VueNodeElement;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionObject, BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\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: 'secondary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_START\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        layout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\n    });\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","__default__","reversedActionsList","computed","props","generateButtonVariantByIndex","actionIndex","lastActionIndex","conditionalClasses","button"],"mappings":";;;;;AAeY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAOL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCoIHG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAC,IAAA,CAAAC,MAAA;AACI,YAAAC,IAAAH,EAAA,QAAA,SAAA;AACA,aAAAE,MAAAC,IAAA,YAAA;AAAA,IAAqD,GAGzDC,IAAAL,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,MAAA,EAAA,GAAA;AAAA,IACA,EAAA;wIAG3C,CAAAK,OAAAA,KAAA,gBAAAA,EAAA,WAAA,SAAA;AAAA,MAEU,OAAAA,EAAA;AAAA,IACkB,IAAA,CAAA,eAI5B,CAAAA,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button.cb90b55c.js → button.DhAUh5JA.js}

@@ -1,10 +1,10 @@
-import { defineComponent as y, useAttrs as m, useSlots as v, computed as l } from "vue";
-import { B as g } from "./index.e29a6907.js";
-import { u as C } from "./use-has-slot.fbeb19ec.js";
-import { B as S, a as E } from "./index.bd1d28d0.js";
-import { n as R } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { defineComponent as y, useAttrs as m, useSlots as v, computed as i } from "vue";
+import { B as g } from "./typography.Bjtu3Gca.js";
+import { u as C } from "./use-has-slot.C9lQZ6nz.js";
+import { B as S, a as E } from "./link.DJ1A53gF.js";
+import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button.css";
-var r = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.TERTIARY = "tertiary", e.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", e))(r || {}), s = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DESTRUCTIVE = "critical", e.DISABLED = "disabled", e.ICON_ONLY = "icon-only", e.INVERSE = "inverse", e))(s || {});
+var l = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.TERTIARY = "tertiary", e.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", e))(l || {}), s = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DESTRUCTIVE = "critical", e.DISABLED = "disabled", e.ICON_ONLY = "icon-only", e.INVERSE = "inverse", e))(s || {});
 const I = {
   name: "bento-button"
 }, T = /* @__PURE__ */ y({
@@ -44,33 +44,33 @@ const I = {
      */
     variant: {
       type: String,
-      default: r.PRIMARY,
-      validator: (e) => Object.values(r).includes(e)
+      default: l.PRIMARY,
+      validator: (e) => Object.values(l).includes(e)
     }
   },
   emits: ["blur", "click", "focus", "keydown.esc"],
   setup(e, { emit: a }) {
-    const t = e, n = m(), i = v(), c = C(i), u = l(() => (t == null ? void 0 : t.link) !== void 0 ? S : "button"), d = l(() => {
-      var o, p;
+    const t = e, n = m(), r = v(), c = C(r), u = i(() => (t == null ? void 0 : t.link) !== void 0 ? S : "button"), d = i(() => {
+      var o, b;
       return {
         "aria-controls": (o = n["aria-controls"]) == null ? void 0 : o.toString(),
-        "aria-expanded": (p = n["aria-expanded"]) == null ? void 0 : p.toString()
+        "aria-expanded": (b = n["aria-expanded"]) == null ? void 0 : b.toString()
       };
-    }), b = l(
+    }), _ = i(
       () => u.value === "button" ? {
         ...d.value,
         disabled: t.disabled,
         type: t.type
       } : { ...t.link, disableTypography: !0, variant: E.DEFAULT, isButton: !0 }
-    ), _ = l(() => ({
+    ), p = i(() => ({
       [`b-button--${t.variant}${t.critical ? `-${s.DESTRUCTIVE}` : ""}`]: !0
-    })), f = l(() => ({
-      ..._.value,
+    })), f = i(() => ({
+      ...p.value,
       [`b-button--${s.CONDENSED}`]: t.condensed,
       [`b-button--${s.DISABLED}`]: t.disabled,
       [`b-button--${s.INVERSE}`]: t.inverse
     }));
-    return { __sfc: !0, props: t, emit: a, attrs: n, slots: i, hasSlot: c, componentType: u, ariaAttributes: d, componentProps: b, variantClass: _, conditionalClasses: f, getIconOnlyClass: () => ({
+    return { __sfc: !0, props: t, emit: a, attrs: n, slots: r, hasSlot: c, componentType: u, ariaAttributes: d, componentProps: _, variantClass: p, conditionalClasses: f, getIconOnlyClass: () => ({
       [`b-button--${s.ICON_ONLY}`]: !c("default")
     }), onClickButton: (o) => {
       t.disabled ? (o.preventDefault(), o.stopPropagation()) : a("click", o);
@@ -79,7 +79,7 @@ const I = {
 });
 var D = function() {
   var a = this, t = a._self._c, n = a._self._setupProxy;
-  return t(n.componentType, a._b({ tag: "component", staticClass: "b-button", class: { ...n.conditionalClasses, ...n.getIconOnlyClass() }, on: { "!click": function(i) {
+  return t(n.componentType, a._b({ tag: "component", staticClass: "b-button", class: { ...n.conditionalClasses, ...n.getIconOnlyClass() }, on: { "!click": function(r) {
     return n.onClickButton.apply(null, arguments);
   } } }, "component", n.componentProps, !1), [n.hasSlot("iconLeft") ? t("span", { staticClass: "b-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [a._t("iconLeft")], 2) : a._e(), n.hasSlot("default") ? t(n.BentoTypography, { staticClass: "b-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [a._t("default")], 2) : a._e(), n.hasSlot("iconRight") ? t("span", { staticClass: "b-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [a._t("iconRight")], 2) : a._e()], 1);
 }, h = [], k = /* @__PURE__ */ R(
@@ -88,14 +88,12 @@ var D = function() {
   h,
   !1,
   null,
-  "2e6aa8ec",
-  null,
-  null
+  "2e6aa8ec"
 );
-const B = k.exports;
+const x = k.exports;
 export {
-  r as B,
-  B as a,
+  x as B,
+  l as a,
   s as b
 };
-//# sourceMappingURL=button.cb90b55c.js.map
+//# sourceMappingURL=button.DhAUh5JA.js.map

package/dist/chunks/{button.cb90b55c.js.map → button.DhAUh5JA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button.cb90b55c.js","sources":["../../../core/src/components/button/button.types.ts","../../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';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\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        // eslint-disable-next-line vue/require-default-prop\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__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","props","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"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;ACkLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhFAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SACIC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAM,EAAA,SAAA,UAAA,GAAA;AAAA,IAE4E,GAGtGC,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,UAAAA,EAAA,WAAA,IAAAX,EAAA,gBAAA,IAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,WAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,UAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,SAAA,GAAAW,EAAA;AAAA,IACD,EAAA;6LAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAX,EAAA,WAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.DhAUh5JA.js","sources":["../../../core/src/components/button/button.types.ts","../../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';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\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        // eslint-disable-next-line vue/require-default-prop\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__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","props","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"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;ACkLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhFAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SACIC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAM,EAAA,SAAA,UAAA,GAAA;AAAA,IAE4E,GAGtGC,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAX,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,SAAA,EAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAW,EAAA;AAAA,IACD,EAAA;6LAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAX,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;"}