@adyen/bento-vue2 1.26.0 → 1.27.0

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

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.e845d77a.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.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;;;;;;;;;;;;;;;;;;"}

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

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

package/dist/chunks/button-actions.87e589e3.js.map

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/button.cb90b55c.js

@@ -0,0 +1,101 @@
+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 "../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 || {});
+const I = {
+  name: "bento-button"
+}, T = /* @__PURE__ */ y({
+  ...I,
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Displays button as critical
+     */
+    critical: { type: Boolean, default: !1 },
+    /**
+     * Disables button functionality
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Sets color set to inverse
+     */
+    inverse: { type: Boolean, default: !1 },
+    /**
+     * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.
+     */
+    link: { type: Object, default: void 0 },
+    /**
+     * The default behavior of the button.
+     * Possible values are: 'button', 'reset', 'submit'
+     */
+    type: {
+      type: String,
+      default: "button"
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary, tertiary-with-background
+     */
+    variant: {
+      type: String,
+      default: r.PRIMARY,
+      validator: (e) => Object.values(r).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;
+      return {
+        "aria-controls": (o = n["aria-controls"]) == null ? void 0 : o.toString(),
+        "aria-expanded": (p = n["aria-expanded"]) == null ? void 0 : p.toString()
+      };
+    }), b = l(
+      () => u.value === "button" ? {
+        ...d.value,
+        disabled: t.disabled,
+        type: t.type
+      } : { ...t.link, disableTypography: !0, variant: E.DEFAULT, isButton: !0 }
+    ), _ = l(() => ({
+      [`b-button--${t.variant}${t.critical ? `-${s.DESTRUCTIVE}` : ""}`]: !0
+    })), f = l(() => ({
+      ..._.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: () => ({
+      [`b-button--${s.ICON_ONLY}`]: !c("default")
+    }), onClickButton: (o) => {
+      t.disabled ? (o.preventDefault(), o.stopPropagation()) : a("click", o);
+    }, BentoTypography: g };
+  }
+});
+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 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(
+  T,
+  D,
+  h,
+  !1,
+  null,
+  "2e6aa8ec",
+  null,
+  null
+);
+const B = k.exports;
+export {
+  r as B,
+  B as a,
+  s as b
+};
+//# sourceMappingURL=button.cb90b55c.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{calendar.640b8d25.js → calendar.f02e0a5a.js}

@@ -1,14 +1,14 @@
 import { defineComponent as le, computed as M, ref as F, watch as V, nextTick as Oe, toRef as L, reactive as ye } from "vue";
 import { r as k, t as N, g as fe, e as oe, d as Ne, f as Se } from "./index.f55fdc32.js";
-import { t as T, B as ke, a as Ee, f as ve } from "./index.b21197ca.js";
+import { t as T, B as ke, a as Ee, f as ve } from "./index.614a5138.js";
 import { e as ue } from "./index.d80206ed.js";
-import { a as Me } from "./button.9d6435ae.js";
-import { B as be } from "./index.dd30e538.js";
+import { a as Me } from "./button.cb90b55c.js";
+import { B as be } from "./index.e29a6907.js";
 import { u as we } from "./i18n.eb5b985b.js";
 import { g as Te } from "./unique-id.a2a2b458.js";
 import { C as Ie, a as pe } from "./chevron-left.5edf02ac.js";
 import { n as ie } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { a as xe } from "./keyboard-navigation.ca47dfa8.js";
+import { a as xe } from "./keyboard-navigation.bbc3d15c.js";
 import "../assets/calendar.css";
 function q(e, t) {
   k(2, arguments);
@@ -910,4 +910,4 @@ export {
   W as s,
   nt as u
 };
-//# sourceMappingURL=calendar.640b8d25.js.map
+//# sourceMappingURL=calendar.f02e0a5a.js.map