@adyen/bento-vue2 1.68.2 → 1.70.0

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

@@ -0,0 +1,85 @@
+import { ref as v, watch as A, nextTick as m, defineComponent as w, toRef as b, computed as _, provide as h } from "vue";
+import { M as y, e as B, f as C, B as M } from "./toggle-button.COXDzXWu.js";
+import { u as T } from "./index.BdrLbvtJ.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/button-actions-with-menu.css";
+const W = (p) => {
+  const { breakpoint: t, container: o, defaultActionsCount: e, offset: s } = p, { width: l } = T(), i = v(e.value), r = 150, u = async () => {
+    var n;
+    await m();
+    const c = o.value.clientWidth, a = r * i.value + (((n = s == null ? void 0 : s.value) == null ? void 0 : n.offsetWidth) ?? 0) + r;
+    c >= a && i.value < e.value && (i.value += 1, await u());
+  }, d = async () => {
+    var n;
+    await m();
+    const c = o.value.clientWidth, a = r * i.value + (((n = s == null ? void 0 : s.value) == null ? void 0 : n.offsetWidth) ?? 0);
+    c < a && i.value > 0 && (i.value -= 1, await d());
+  };
+  return A([l, o], async ([c, a], [n]) => {
+    if (!a || !e || c > t)
+      return;
+    await m(), c > n ? await u() : await d();
+  }), A(e, async (c) => {
+    i.value = c, t && l.value <= t && o.value && await d();
+  }), {
+    displayedActionsCount: i
+  };
+}, E = {}, I = /* @__PURE__ */ w({
+  ...E,
+  __name: "button-actions-with-menu",
+  props: {
+    actions: null,
+    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(p) {
+    const t = p, o = b(t, "inverse"), e = v(null), s = v(null), l = v(!1), i = _(() => {
+      const a = t.hideDisplayedActionsBreakpoint ? u.value : t.displayedActions;
+      return t.actions.slice(0, a);
+    }), r = _(() => {
+      var a;
+      return (a = s == null ? void 0 : s.value) == null ? void 0 : a.$el;
+    }), { displayedActionsCount: u } = W({
+      breakpoint: t.hideDisplayedActionsBreakpoint,
+      container: e,
+      defaultActionsCount: b(t, "displayedActions"),
+      offset: r
+    });
+    h(y, o), t.disableResponsiveBehavior || h(B, { buttonActionsWithMenu: e, menu: s, stackButtons: l });
+    const d = _(() => ({
+      "b-button-actions-with-menu__container-wrapper--buttons-end": t.actionsLayout === "buttons-end",
+      "b-button-actions-with-menu__container-wrapper--buttons-start": t.actionsLayout === "buttons-start",
+      "b-button-actions-with-menu__container-wrapper--stacked-buttons": l.value
+    })), c = _(() => u.value === void 0 || u.value >= t.actions.length ? [] : t.actions.slice(u.value, t.actions.length).flatMap((n) => n.data ? n.data : {
+      text: n.title,
+      handler: () => {
+        var f;
+        return (f = n.event) == null ? void 0 : f.call(n, {});
+      },
+      icon: n.icon,
+      critical: n.critical,
+      disabled: n.disabled
+    }));
+    return { __sfc: !0, props: t, inverseRef: o, buttonActionsWithMenu: e, menu: s, stackButtons: l, computedActions: i, computedMenuRef: r, displayedActionsCount: u, conditionalClasses: d, computedMenuActions: c, BentoButtonActions: M, BentoMenu: C };
+  }
+});
+var R = function() {
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o("div", { staticClass: "b-button-actions-with-menu" }, [o("div", { ref: "buttonActionsWithMenu", staticClass: "b-button-actions-with-menu__container-wrapper", class: e.conditionalClasses, attrs: { role: "group" } }, [o(e.BentoButtonActions, { attrs: { actions: e.computedActions, inverse: t.inverse, layout: t.actionsLayout } }), e.computedMenuActions.length ? o(e.BentoMenu, { ref: "menu", attrs: { data: e.computedMenuActions, "menu-position": t.menuPosition } }) : t._e()], 1)]);
+}, k = [], g = /* @__PURE__ */ N(
+  I,
+  R,
+  k,
+  !1,
+  null,
+  "36190b44"
+);
+const S = g.exports;
+export {
+  S as B
+};
+//# sourceMappingURL=button-actions-with-menu.BDpWI2Fh.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions-with-menu.BDpWI2Fh.js","sources":["../../src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../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 = defineProps({\n  actions: null,\n  actionsLayout: { default: 'buttons-end' },\n  disableResponsiveBehavior: { type: Boolean, default: false },\n  displayedActions: { default: undefined },\n  inverse: { type: Boolean, default: false },\n  hideDisplayedActionsBreakpoint: { default: 0 },\n  menuPosition: { default: '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__","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":["../../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';\nimport type { VNodeRef } from 'vue/types/vnode';\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     * Provides a template ref to the underlying component instance.\n     */\n    elementRef?: Exclude<VNodeRef, string>;\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":"AAWY,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.hF-nD1Og.js → button.CilT7NmM.js}

@@ -1,7 +1,7 @@
 import { defineComponent as y, useAttrs as m, useSlots as v, computed as i } from "vue";
-import { B as S } from "./typography.J1v_SPG3.js";
+import { B as S } from "./typography.hlOAxsEn.js";
 import { u as g } from "./use-has-slot.C9lQZ6nz.js";
-import { B as C, a as E } from "./link.CXy_LoFI.js";
+import { B as C, a as E } from "./link.C4htMrDV.js";
 import { n as h } 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 || {});
@@ -99,7 +99,7 @@ var T = function() {
   k,
   !1,
   null,
-  "ed1a67e0"
+  "da571696"
 );
 const x = D.exports;
 export {
@@ -107,4 +107,4 @@ export {
   r as a,
   s as b
 };
-//# sourceMappingURL=button.hF-nD1Og.js.map
+//# sourceMappingURL=button.CilT7NmM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.CilT7NmM.js","sources":["../../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\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([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\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=\"./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;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SAMIA,EAAA,WAAA,SAAAC,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;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAM,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAN,EAAA,WAAA,SAAA;AAAA,QAMiC,MAAAA,EAAA,WAAA,SAAA;AAAA,MACX;AAAA,IACpC,GAGVO,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;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{calendar.DvIQEYwN.js → calendar.DYI4omOF.js}

@@ -1,16 +1,16 @@
 import { defineComponent as oe, computed as S, ref as Q, watch as z, nextTick as at, toRef as F, reactive as Fe } from "vue";
-import { r as y, t as _, g as ye, l as nt } from "./index.BrH1t1iu.js";
-import { d as Se, g as rt, a as De } from "./get-date-locale.CAyOIbcp.js";
-import { B as Ae } from "./button.hF-nD1Og.js";
-import { B as Be } from "./typography.J1v_SPG3.js";
-import { B as Ge, a as He } from "./date.BfyWX2PY.js";
-import { n as se } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as qe, a as $e } from "./chevron-right.C--ZOC9j.js";
-import { g as je } from "./generate-uid.NJ8tVoha.js";
-import { u as Qe } from "./i18n.BQkEbtPM.js";
-import { a as ot } from "./index.BdrLbvtJ.js";
+import { B as Ae } from "./button.CilT7NmM.js";
+import { B as Be } from "./typography.hlOAxsEn.js";
+import { u as Ge } from "./i18n.BQkEbtPM.js";
+import { d as Se, g as nt, a as De } from "./get-date-locale.CAyOIbcp.js";
+import { g as He } from "./generate-uid.NJ8tVoha.js";
+import { a as rt } from "./index.BdrLbvtJ.js";
+import { r as y, t as _, g as ye, l as ot } from "./index.BrH1t1iu.js";
 import { g as st } from "./_commonjsHelpers.C6fGbg64.js";
-import { a as Ve } from "./keyboard-navigation.pB8weElW.js";
+import { C as qe, a as $e } from "./chevron-right.C--ZOC9j.js";
+import { a as je } from "./keyboard-navigation.pB8weElW.js";
+import { B as Qe, a as Ve } from "./date.BTdCYdkj.js";
+import { n as se } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/calendar.css";
 var R = /* @__PURE__ */ ((t) => (t.SINGLE = "single", t.MIDDLE = "middle", t.BEGINNING = "beginning", t.END = "end", t))(R || {}), G = /* @__PURE__ */ ((t) => (t.SINGLE = "single", t.MIDDLE = "middle", t.BEGINNING = "beginning", t.END = "end", t.SELECTED = "selected", t.UNSELECTED = "unselected", t.CURRENT_DAY = "current-day", t.DISABLED = "disabled", t))(G || {}), ae = /* @__PURE__ */ ((t) => (t.CLICK = "click", t.MOUSE_OVER = "mouseover", t))(ae || {});
 const it = {
@@ -37,7 +37,7 @@ const it = {
   }
 }, ut = oe({
   name: "calendar-month-day",
-  components: { BentoDate: Ge },
+  components: { BentoDate: Qe },
   inheritAttrs: !0,
   props: it,
   emits: [ae.CLICK, ae.MOUSE_OVER],
@@ -64,7 +64,7 @@ const it = {
       })),
       isCurrentDay: a,
       // Enums
-      BentoDateFormat: He,
+      BentoDateFormat: Ve,
       CalendarMonthDayEvent: ae,
       // Events
       onClick: (o, s) => {
@@ -1048,7 +1048,7 @@ function Ue(t, e, a) {
 var Pt = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g, Lt = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g, Rt = /^'([^]*?)'?$/, Wt = /''/g, Ft = /[a-zA-Z]/;
 function Pe(t, e, a) {
   y(2, arguments);
-  var n = String(e), r = a || {}, o = r.locale || nt, s = o.options && o.options.firstWeekContainsDate, i = s == null ? 1 : b(s), f = r.firstWeekContainsDate == null ? i : b(r.firstWeekContainsDate);
+  var n = String(e), r = a || {}, o = r.locale || ot, s = o.options && o.options.firstWeekContainsDate, i = s == null ? 1 : b(s), f = r.firstWeekContainsDate == null ? i : b(r.firstWeekContainsDate);
   if (!(f >= 1 && f <= 7))
     throw new RangeError("firstWeekContainsDate must be between 1 and 7 inclusively");
   var h = o.options && o.options.weekStartsOn, D = h == null ? 0 : b(h), g = r.weekStartsOn == null ? D : b(r.weekStartsOn);
@@ -1240,7 +1240,7 @@ const Le = /* @__PURE__ */ st(Jt), et = ({ currentSelectedDate: t, month: e, isD
   z(t, () => {
     s.value = new Date(t.value);
   });
-  const i = ot(), f = Q(s.value);
+  const i = rt(), f = Q(s.value);
   z(i, (c) => {
     const M = c.getAttribute("data-date");
     f.value = M ? new Date(M) : s.value;
@@ -1393,7 +1393,7 @@ const Le = /* @__PURE__ */ st(Jt), et = ({ currentSelectedDate: t, month: e, isD
     ChevronLeftIcon: $e,
     ChevronRightIcon: qe
   },
-  directives: { BentoKeyboardNavigationDirective: Ve },
+  directives: { BentoKeyboardNavigationDirective: je },
   props: {
     /**
      * end of the selected range
@@ -1451,7 +1451,7 @@ const Le = /* @__PURE__ */ st(Jt), et = ({ currentSelectedDate: t, month: e, isD
     L.MOUSE_OVER
   ],
   setup(t, { emit: e }) {
-    const { locale: a, t: n } = Qe(), r = rt(), o = je("bento-date-picker-month-label"), s = S(
+    const { locale: a, t: n } = Ge(), r = nt(), o = He("bento-date-picker-month-label"), s = S(
       () => (N) => {
         var W;
         return t.min && N < t.min || t.max && N > t.max || ((W = t.isDateDisabled) == null ? void 0 : W.call(t, N));
@@ -1600,7 +1600,7 @@ var ea = function() {
   ta,
   !1,
   null,
-  "a0054d45"
+  "5f260dcf"
 );
 const Re = aa.exports;
 var A = /* @__PURE__ */ ((t) => (t.SINGLE = "single", t.MIDDLE = "middle", t.BEGINNING = "beginning", t.END = "end", t))(A || {}), H = /* @__PURE__ */ ((t) => (t.SINGLE = "single", t.MIDDLE = "middle", t.BEGINNING = "beginning", t.END = "end", t.SELECTED = "selected", t.UNSELECTED = "unselected", t.CURRENT_MONTH = "current-month", t.DISABLED = "disabled", t))(H || {}), Ee = /* @__PURE__ */ ((t) => (t.CLICK = "click", t.MOUSE_OVER = "mouseover", t))(Ee || {});
@@ -1634,7 +1634,7 @@ const na = {}, ra = /* @__PURE__ */ oe({
     }));
     return { __sfc: !0, props: a, emit: e, isCurrentMonth: n, conditionalClasses: r, onClick: (s, i) => {
       a.disabled ? (s.preventDefault(), s.stopPropagation()) : e(Ee.CLICK, i, a.month);
-    }, BentoDate: Ge, BentoDateFormat: He, CalendarYearMonthEvent: Ee };
+    }, BentoDate: Qe, BentoDateFormat: Ve, CalendarYearMonthEvent: Ee };
   }
 });
 var oa = function() {
@@ -1650,7 +1650,7 @@ var oa = function() {
   sa,
   !1,
   null,
-  "9d0ea56b"
+  "517c430a"
 );
 const ua = ia.exports, la = {
   "en-US": {
@@ -1682,7 +1682,7 @@ const ua = ia.exports, la = {
   },
   emits: ["input", "mouseover", "nextMonth", "previousMonth"],
   setup(t, { expose: e, emit: a }) {
-    const n = t, r = je("bento-date-picker-year-label"), { t: o } = Qe(), s = (T) => {
+    const n = t, r = He("bento-date-picker-year-label"), { t: o } = Ge(), s = (T) => {
       var I;
       return n.min && T < n.min || n.max && T > n.max || ((I = n.isDateDisabled) == null ? void 0 : I.call(n, T));
     }, i = S(() => ["first", "unique"].includes(n.position)), f = S(() => ["last", "unique"].includes(n.position)), {
@@ -1728,7 +1728,7 @@ const ua = ia.exports, la = {
       "keydown:page-up": v,
       "keydown:page-down": u
     };
-    return { __sfc: !0, yearLabelId: r, props: n, emit: a, t: o, isDateDisabled: s, shouldShowPreviousYearButton: i, shouldShowNextYearButton: f, internalDate: h, addDayRef: D, moveToPreviousMonth: g, moveToPreviousYear: v, moveToNextMonth: d, moveToNextYear: u, moveToFirstMonthOfYear: l, moveToLastMonthOfYear: w, focusOnDate: k, monthRows: m, monthVariant: O, isSelectedDate: P, onMonthClicked: Y, listeners: C, BentoButton: Ae, BentoTypography: Be, CalendarYearMonth: ua, ChevronLeftIcon: $e, ChevronRightIcon: qe, vBentoKeyboardNavigationDirective: Ve };
+    return { __sfc: !0, yearLabelId: r, props: n, emit: a, t: o, isDateDisabled: s, shouldShowPreviousYearButton: i, shouldShowNextYearButton: f, internalDate: h, addDayRef: D, moveToPreviousMonth: g, moveToPreviousYear: v, moveToNextMonth: d, moveToNextYear: u, moveToFirstMonthOfYear: l, moveToLastMonthOfYear: w, focusOnDate: k, monthRows: m, monthVariant: O, isSelectedDate: P, onMonthClicked: Y, listeners: C, BentoButton: Ae, BentoTypography: Be, CalendarYearMonth: ua, ChevronLeftIcon: $e, ChevronRightIcon: qe, vBentoKeyboardNavigationDirective: je };
   }
 });
 var fa = function() {
@@ -1754,7 +1754,7 @@ var fa = function() {
   va,
   !1,
   null,
-  "88d584a6"
+  "e4a83f75"
 );
 const We = ma.exports, Da = ({ selectedDate: t }, e) => {
   const a = Fe({
@@ -2059,7 +2059,7 @@ var wa = function() {
   _a,
   !1,
   null,
-  "50663464"
+  "2eb151e7"
 );
 const Pa = Ta.exports;
 export {
@@ -2083,4 +2083,4 @@ export {
   b as t,
   ha as u
 };
-//# sourceMappingURL=calendar.DvIQEYwN.js.map
+//# sourceMappingURL=calendar.DYI4omOF.js.map