@adyen/bento-vue3 1.68.2 → 1.69.0

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

@@ -0,0 +1,93 @@
+import { ref as v, watch as h, nextTick as m, defineComponent as w, toRef as b, computed as p, provide as A, createElementBlock as B, openBlock as y, createElementVNode as N, normalizeClass as k, createVNode as E, createBlock as T, createCommentVNode as C, unref as I } from "vue";
+import { M as W, e as M, B as R, f as g } from "./toggle-button.ByyLw0Yf.js";
+import { u as O } from "./index.FNUaPG4G.js";
+import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/button-actions-with-menu.css";
+const S = (f) => {
+  const { breakpoint: e, container: u, defaultActionsCount: i, offset: o } = f, { width: l } = O(), s = v(i.value), r = 150, c = async () => {
+    var t;
+    await m();
+    const a = u.value.clientWidth, n = r * s.value + (((t = o == null ? void 0 : o.value) == null ? void 0 : t.offsetWidth) ?? 0) + r;
+    a >= n && s.value < i.value && (s.value += 1, await c());
+  }, d = async () => {
+    var t;
+    await m();
+    const a = u.value.clientWidth, n = r * s.value + (((t = o == null ? void 0 : o.value) == null ? void 0 : t.offsetWidth) ?? 0);
+    a < n && s.value > 0 && (s.value -= 1, await d());
+  };
+  return h([l, u], async ([a, n], [t]) => {
+    if (!n || !i || a > e)
+      return;
+    await m(), a > t ? await c() : await d();
+  }), h(i, async (a) => {
+    s.value = a, e && l.value <= e && u.value && await d();
+  }), {
+    displayedActionsCount: s
+  };
+}, V = { class: "b-button-actions-with-menu" }, D = {}, P = /* @__PURE__ */ w({
+  ...D,
+  __name: "button-actions-with-menu",
+  props: {
+    actions: {},
+    actionsLayout: { default: "buttons-end" },
+    disableResponsiveBehavior: { type: Boolean, default: !1 },
+    displayedActions: { default: void 0 },
+    inverse: { type: Boolean, default: !1 },
+    hideDisplayedActionsBreakpoint: { default: 0 },
+    menuPosition: { default: "bottom-start" }
+  },
+  setup(f) {
+    const e = f, u = b(e, "inverse"), i = v(null), o = v(null), l = v(!1), s = p(() => {
+      const n = e.hideDisplayedActionsBreakpoint ? c.value : e.displayedActions;
+      return e.actions.slice(0, n);
+    }), r = p(() => {
+      var n;
+      return (n = o == null ? void 0 : o.value) == null ? void 0 : n.$el;
+    }), { displayedActionsCount: c } = S({
+      breakpoint: e.hideDisplayedActionsBreakpoint,
+      container: i,
+      defaultActionsCount: b(e, "displayedActions"),
+      offset: r
+    });
+    A(W, u), e.disableResponsiveBehavior || A(M, { buttonActionsWithMenu: i, menu: o, stackButtons: l });
+    const d = p(() => ({
+      "b-button-actions-with-menu__container-wrapper--buttons-end": e.actionsLayout === "buttons-end",
+      "b-button-actions-with-menu__container-wrapper--buttons-start": e.actionsLayout === "buttons-start",
+      "b-button-actions-with-menu__container-wrapper--stacked-buttons": l.value
+    })), a = p(() => c.value === void 0 || c.value >= e.actions.length ? [] : e.actions.slice(c.value, e.actions.length).flatMap((t) => t.data ? t.data : {
+      text: t.title,
+      handler: () => {
+        var _;
+        return (_ = t.event) == null ? void 0 : _.call(t, {});
+      },
+      icon: t.icon,
+      critical: t.critical,
+      disabled: t.disabled
+    }));
+    return (n, t) => (y(), B("div", V, [
+      N("div", {
+        ref_key: "buttonActionsWithMenu",
+        ref: i,
+        role: "group",
+        class: k(["b-button-actions-with-menu__container-wrapper", d.value])
+      }, [
+        E(I(R), {
+          actions: s.value,
+          inverse: n.inverse,
+          layout: n.actionsLayout
+        }, null, 8, ["actions", "inverse", "layout"]),
+        a.value.length ? (y(), T(g, {
+          key: 0,
+          ref_key: "menu",
+          ref: o,
+          data: a.value,
+          "menu-position": n.menuPosition
+        }, null, 8, ["data", "menu-position"])) : C("", !0)
+      ], 2)
+    ]));
+  }
+}), J = /* @__PURE__ */ L(P, [["__scopeId", "data-v-803aebe6"]]);
+export {
+  J as B
+};
+//# sourceMappingURL=button-actions-with-menu.zdsGh7un.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions-with-menu.zdsGh7un.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n        actionsLayout: 'buttons-end',\n        disableResponsiveBehavior: false,\n        displayedActions: undefined,\n        inverse: false,\n        hideDisplayedActionsBreakpoint: 0,\n        menuPosition: 'bottom-start',\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\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     *        {\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     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","_a","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":"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"}

package/dist/chunks/button-actions.types.BptAXjD8.js

@@ -0,0 +1,8 @@
+var T = /* @__PURE__ */ ((r) => (r.BUTTONS_END = "buttons-end", r.FILL_CONTAINER = "fill-container", r.SPACE_BETWEEN = "space-between", r.VERTICAL_STACK = "vertical-stack", r))(T || {}), e = /* @__PURE__ */ ((r) => (r.BUTTONS_START = "buttons-start", r))(e || {});
+const E = { ...T, ...e };
+export {
+  E as B,
+  T as a,
+  e as b
+};
+//# sourceMappingURL=button-actions.types.BptAXjD8.js.map

package/dist/chunks/button-actions.types.BptAXjD8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions.types.BptAXjD8.js","sources":["../../../vue2/src/components/button/components/button-actions/button-actions.types.ts"],"sourcesContent":["import type { BentoButtonProps } from '../../button.types';\nimport type { BentoMenuProps } from '@/components/menu/menu.types';\nimport type { BentoLoadingButtonState } from '../loading-button/loading-button.types';\nimport type { OmitStrict, VueNodeElement } from '@/types';\n\nexport type BentoButtonActionObject = BentoActionButton;\n\n// TODO: Update to Array<BentoButtonActionButton | BentoButtonActionMenuObject> in v2.0.0\nexport type BentoButtonActionsList = Array<BentoActionButton & BentoActionMenu>;\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\nexport interface BentoButtonActionsProps {\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: BentoButtonActionsList;\n\n    /**\n     * Sets the Button Actions to color scheme inverse\n     */\n    inverse?: boolean;\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?: string;\n}\n\n/**\n * Private\n */\n\n/**\n * Base interface for the Button and Menu objects\n */\nexport interface BentoButtonActionBase {\n    title: string;\n    icon?: VueNodeElement;\n    iconLeft?: VueNodeElement;\n    iconRight?: VueNodeElement;\n}\n\n/**\n * Type for the Buttons passed as objects to Button Actions\n */\nexport interface BentoActionButton extends BentoButtonActionBase, BentoButtonProps {\n    event?: (event: Event) => void;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\n/**\n * Type for the Menus passed as objects to Button Actions\n */\nexport type BentoActionMenu = BentoButtonActionBase &\n    OmitStrict<BentoMenuProps, 'button' | 'data'> &\n    Partial<Pick<BentoMenuProps, 'data'>>;\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutExtended","BentoButtonActionsLayout"],"mappings":"AAUY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,iBAAiB,kBACjBA,EAAA,gBAAgB,iBAChBA,EAAA,iBAAiB,kBAJTA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACRA,EAAA,gBAAgB,iBADRA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAA2B,EAAE,GAAGF,GAA+B,GAAGC,EAAiC;"}

package/dist/chunks/{button.AB0SOQMn.js → button.wMNce6wZ.js}

@@ -1,7 +1,7 @@
 import { defineComponent as I, useAttrs as C, useSlots as N, computed as s, createBlock as f, openBlock as r, resolveDynamicComponent as T, mergeProps as A, withCtx as v, createElementBlock as m, createCommentVNode as d, unref as n, renderSlot as c } from "vue";
-import { B as O } from "./typography.DN5eC5ch.js";
+import { B as O } from "./typography.CFHvBR7L.js";
 import { u as $ } from "./use-has-slot.B7eQSabc.js";
-import { B as L, a as Y } from "./link.BBpxiclu.js";
+import { B as L, a as Y } from "./link.Di0rtpOj.js";
 import { _ as B } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/button.css";
 var u = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.TERTIARY = "tertiary", t.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", t))(u || {}), i = /* @__PURE__ */ ((t) => (t.CONDENSED = "condensed", t.DESTRUCTIVE = "critical", t.DISABLED = "disabled", t.ICON_ONLY = "icon-only", t.INVERSE = "inverse", t))(i || {});
@@ -122,10 +122,10 @@ const U = ["aria-hidden"], w = ["aria-hidden"], x = {
       _: 3
     }, 16, ["class"]));
   }
-}), K = /* @__PURE__ */ B(V, [["__scopeId", "data-v-49914ff4"]]);
+}), K = /* @__PURE__ */ B(V, [["__scopeId", "data-v-b940e906"]]);
 export {
   K as B,
   u as a,
   i as b
 };
-//# sourceMappingURL=button.AB0SOQMn.js.map
+//# sourceMappingURL=button.wMNce6wZ.js.map

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

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

package/dist/chunks/{calendar._oPk_A1C.js → calendar.CYrrR8wd.js}

@@ -1,13 +1,12 @@
 import { defineComponent as ye, computed as C, resolveComponent as ie, createElementBlock as x, openBlock as _, withKeys as ue, normalizeClass as Ge, createElementVNode as R, createVNode as X, ref as ee, watch as de, nextTick as Ot, toRef as H, resolveDirective as Mt, withDirectives as at, mergeProps as nt, toHandlers as rt, createBlock as ne, createCommentVNode as De, withCtx as te, createTextVNode as Ce, toDisplayString as Ye, Fragment as ce, renderList as fe, unref as Y, reactive as ot, resolveDynamicComponent as Et } from "vue";
 import { r as w, t as T, g as Ue, l as Nt } from "./index.BrH1t1iu.js";
 import { d as He, g as kt, a as pe } from "./get-date-locale.CAyOIbcp.js";
-import { B as Pe } from "./button.AB0SOQMn.js";
-import { B as st } from "./typography.DN5eC5ch.js";
-import { B as it, a as ut } from "./date.DSjCnSgL.js";
+import { B as Pe } from "./button.wMNce6wZ.js";
+import { B as st } from "./typography.CFHvBR7L.js";
+import { B as it, a as ut } from "./date.BZENjOb6.js";
 import { _ as we } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { a as lt, C as dt } from "./chevron-right.Brdj0WlO.js";
-import "./events.FNmSWp_P.js";
-import { a as ct } from "./keyboard-navigation.CqgGzfZQ.js";
+import { a as ct } from "./keyboard-navigation.pB8weElW.js";
 import { g as ft } from "./generate-uid.NJ8tVoha.js";
 import { u as vt } from "./i18n.B6g5VX0q.js";
 import { a as St } from "./index.FNUaPG4G.js";
@@ -1673,7 +1672,7 @@ function Sa(e, t, a, n, r, o) {
     [g]
   ]);
 }
-const et = /* @__PURE__ */ we(Ta, [["render", Sa], ["__scopeId", "data-v-780ba24e"]]);
+const et = /* @__PURE__ */ we(Ta, [["render", Sa], ["__scopeId", "data-v-6cf54ef6"]]);
 var q = /* @__PURE__ */ ((e) => (e.SINGLE = "single", e.MIDDLE = "middle", e.BEGINNING = "beginning", e.END = "end", e))(q || {}), V = /* @__PURE__ */ ((e) => (e.SINGLE = "single", e.MIDDLE = "middle", e.BEGINNING = "beginning", e.END = "end", e.SELECTED = "selected", e.UNSELECTED = "unselected", e.CURRENT_MONTH = "current-month", e.DISABLED = "disabled", e))(V || {}), Ae = /* @__PURE__ */ ((e) => (e.CLICK = "click", e.MOUSE_OVER = "mouseover", e))(Ae || {});
 const pa = ["tabindex", "aria-selected"], Ia = { class: "b-calendar-year-month__wrapper" }, _a = {}, Ca = /* @__PURE__ */ ye({
   ..._a,
@@ -1722,7 +1721,7 @@ const pa = ["tabindex", "aria-selected"], Ia = { class: "b-calendar-year-month__
       ])
     ], 42, pa));
   }
-}), Ya = /* @__PURE__ */ we(Ca, [["__scopeId", "data-v-c3eabd57"]]), Tt = {
+}), Ya = /* @__PURE__ */ we(Ca, [["__scopeId", "data-v-cbfd6847"]]), Tt = {
   "en-US": {
     nextYear: "Next year",
     previousYear: "Previous year"
@@ -1865,7 +1864,7 @@ const pa = ["tabindex", "aria-selected"], Ia = { class: "b-calendar-year-month__
       [Y(ct)]
     ]);
   }
-}), tt = /* @__PURE__ */ we(Ra, [["__scopeId", "data-v-0a67988c"]]), $a = ({ selectedDate: e }, t) => {
+}), tt = /* @__PURE__ */ we(Ra, [["__scopeId", "data-v-1af4dde0"]]), $a = ({ selectedDate: e }, t) => {
   const a = ot({
     startDate: null,
     endDate: null
@@ -2184,10 +2183,10 @@ function Ba(e, t, a, n, r, o) {
     }, null, 40, ["first-day-of-week", "is-date-disabled", "month", "year", "position", "min", "max", "is-range", "start-date", "end-date", "granularity", "onInput", "onMouseover", "onChangeDay", "onNextMonth", "onPreviousMonth"]))), 128))
   ], 2);
 }
-const rn = /* @__PURE__ */ we(Ga, [["render", Ba], ["__scopeId", "data-v-9e7fc5f0"]]);
+const nn = /* @__PURE__ */ we(Ga, [["render", Ba], ["__scopeId", "data-v-7a1c47c1"]]);
 export {
   ae as C,
-  rn as a,
+  nn as a,
   J as b,
   le as c,
   Le as d,
@@ -2206,4 +2205,4 @@ export {
   O as t,
   Fa as u
 };
-//# sourceMappingURL=calendar._oPk_A1C.js.map
+//# sourceMappingURL=calendar.CYrrR8wd.js.map