@adyen/bento-vue2 1.1.0 → 1.2.0

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["export enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :class=\"conditionalClasses\"\n            :form=\"formId\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"readonly || item.readonly\"\n                @update:model-value=\"onInput\"\n            >\n                {{ item.label }}\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRef } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { BentoCheckboxEvent } from '../../checkbox.types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-checkbox-group',\n        components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n        props: {\n            /**\n             * The checkbox group's items.\n             */\n            items: {\n                type: Array as PropType<BentoCheckboxGroupItems>,\n                required: true,\n            },\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n             * Defaults to no value selected.\n             */\n            modelValue: {\n                type: Array<number | string | null>,\n                default: () => [],\n            },\n            /**\n             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoCheckboxGroupVariant>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n            /**\n             * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n             */\n            formId: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a readonly state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in an error state.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders all checkboxes in an error state with an error message.\n             */\n            errorMessage: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n        },\n        emits: [BentoCheckboxEvent.UPDATE],\n        setup(props, { emit }) {\n            const errorId = generateUid('error');\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !props.readonly && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !props.readonly && !!props.errorMessage\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n            const inputValue = toRef(props, 'modelValue');\n\n            const onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoCheckboxGroup \"hasError\" property',\n                    `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                errorId,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","errorId","generateUid","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","inputValue","toRef","onInput","deprecate"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;AC+DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,eAAAC,GAAA,cAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAC,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA,GAEAC,IAAAC;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,aAAA,CAAA,CAAAA,EAAA,gBAAAA,EAAA;AAAA,IACA,GAEAM,IAAAD;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,IACA,GAGAO,IAAAF,EAAA,OAAA;AAAA,MAAA,4CAAAL,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAEAiB,IAAAC,EAAAT,GAAA,YAAA,GAEAU,IAAA,CAAAZ,MAAA;AACA,MAAAU,EAAA,QAAAV,GACAG,EAAAF,EAAA,QAAAD,CAAA;AAAA,IAAA;AAGA,WAAAE,EAAA,YACAW;AAAA,MAAA;AAAA,MACA;AAAA;AAAA;AAAA,MACA;AAAA,IAGA,GAIA;AAAA;AAAA,MAAA,SAAAT;AAAA,MAEA,sBAAAE;AAAA,MACA,6BAAAE;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAC;AAAA;AAAA,MACA,SAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox.js","sources":["../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["export enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :class=\"conditionalClasses\"\n            :form=\"formId\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"readonly || item.readonly\"\n                @update:model-value=\"onInput\"\n            >\n                {{ item.label }}\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRef } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { BentoCheckboxEvent } from '../../checkbox.types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-checkbox-group',\n        components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n        props: {\n            /**\n             * The checkbox group's items.\n             */\n            items: {\n                type: Array as PropType<BentoCheckboxGroupItems>,\n                required: true,\n            },\n            /**\n             * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n             * Defaults to no value selected.\n             */\n            modelValue: {\n                type: Array<number | string | null>,\n                default: () => [],\n            },\n            /**\n             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n            /**\n             * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n             */\n            formId: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a readonly state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in an error state.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders all checkboxes in an error state with an error message.\n             */\n            errorMessage: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n        },\n        emits: [BentoCheckboxEvent.UPDATE],\n        setup(props, { emit }) {\n            const errorId = generateUid('error');\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !props.readonly && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !props.readonly && !!props.errorMessage\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n            const inputValue = toRef(props, 'modelValue');\n\n            const onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoCheckboxGroup \"hasError\" property',\n                    `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                errorId,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","errorId","generateUid","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","inputValue","toRef","onInput","deprecate"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;AC+DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,eAAAC,GAAA,cAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAC,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA,GAEAC,IAAAC;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,aAAA,CAAA,CAAAA,EAAA,gBAAAA,EAAA;AAAA,IACA,GAEAM,IAAAD;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,IACA,GAGAO,IAAAF,EAAA,OAAA;AAAA,MAAA,4CAAAL,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAEAiB,IAAAC,EAAAT,GAAA,YAAA,GAEAU,IAAA,CAAAZ,MAAA;AACA,MAAAU,EAAA,QAAAV,GACAG,EAAAF,EAAA,QAAAD,CAAA;AAAA,IAAA;AAGA,WAAAE,EAAA,YACAW;AAAA,MAAA;AAAA,MACA;AAAA;AAAA;AAAA,MACA;AAAA,IAGA,GAIA;AAAA;AAAA,MAAA,SAAAT;AAAA,MAEA,sBAAAE;AAAA,MACA,6BAAAE;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAC;AAAA;AAAA,MACA,SAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-button.e7630a1d.js → base-button.d4487ac9.js}

@@ -1,5 +1,5 @@
 import { defineComponent as b, computed as i, ref as p } from "vue";
-import { B as u, a as d, b as f } from "./index.e1fcc9e0.js";
+import { B as u, a as d, b as f } from "./index.175f9e2d.js";
 import { u as C } from "./use-has-slot.068222e6.js";
 import { n as y } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-button.css";
@@ -82,4 +82,4 @@ export {
   x as B,
   n as a
 };
-//# sourceMappingURL=base-button.e7630a1d.js.map
+//# sourceMappingURL=base-button.d4487ac9.js.map

package/dist/chunks/{base-button.e7630a1d.js.map → base-button.d4487ac9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.e7630a1d.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-base-button__label\"\n        >\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\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        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AASA,WAAA;AAAA;AAAA,MAAA,wBAAAS;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbA,CAAAG,MAAA;AACA,QAAAZ,EAAA,YACAE,EAAAP,EAAA,OAAAiB,CAAA;AAAA,MACA;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.d4487ac9.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-base-button__label\"\n        >\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\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        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AASA,WAAA;AAAA;AAAA,MAAA,wBAAAS;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbA,CAAAG,MAAA;AACA,QAAAZ,EAAA,YACAE,EAAAP,EAAA,OAAAiB,CAAA;AAAA,MACA;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions.03751d96.js → button-actions.cf73ed47.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, computed as a } from "vue";
-import { B as d, a as o } from "./button.f64585fc.js";
+import { B as d, a as o } from "./button.c27a7ce2.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/button-actions.css";
 var c = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(c || {}), l = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(l || {});
@@ -62,7 +62,7 @@ const i = { ...c, ...l }, v = u({
     }
   },
   setup(t) {
-    const e = a(() => t.actions.slice().reverse()), s = (r) => {
+    const n = a(() => t.actions.slice().reverse()), s = (r) => {
       const _ = t.actions.length - 1;
       return r === _ ? o.PRIMARY : o.SECONDARY;
     };
@@ -71,18 +71,18 @@ const i = { ...c, ...l }, v = u({
       conditionalClasses: a(() => ({
         [`b-button-actions--${t.layout}`]: !0
       })),
-      reversedActionsList: e,
+      reversedActionsList: n,
       // Methods
       generateButtonVariantByIndex: s
     };
   }
 });
 var b = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", { staticClass: "b-button-actions" }, [s("div", { staticClass: "b-button-actions__container-wrapper", class: e.conditionalClasses, attrs: { role: "group" } }, e._l(e.reversedActionsList, function(n, r) {
-    return s("div", { key: r, staticClass: "b-button-actions__button-wrapper" }, [s("bento-button", { attrs: { critical: n.critical, disabled: n.disabled, variant: n.variant || e.generateButtonVariantByIndex(r) }, on: { click: n.event }, scopedSlots: e._u([n.icon ? { key: "iconLeft", fn: function() {
-      return [s(n.icon, { tag: "component", attrs: { "svg-title": n.title } })];
-    }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(n.title) + " ")])], 1);
+  var n = this, s = n._self._c;
+  return n._self._setupProxy, s("div", { staticClass: "b-button-actions" }, [s("div", { staticClass: "b-button-actions__container-wrapper", class: n.conditionalClasses, attrs: { role: "group" } }, n._l(n.reversedActionsList, function(e, r) {
+    return s("div", { key: r, staticClass: "b-button-actions__button-wrapper" }, [s("bento-button", { attrs: { critical: e.critical, disabled: e.disabled, variant: e.variant || n.generateButtonVariantByIndex(r) }, on: { click: e.event }, scopedSlots: n._u([e.icon ? { key: "iconLeft", fn: function() {
+      return [s(e.icon, { tag: "component", attrs: { "svg-title": e.title } })];
+    }, proxy: !0 } : null], null, !0) }, [n._v(" " + n._s(e.title) + " ")])], 1);
   }), 0)]);
 }, f = [], m = /* @__PURE__ */ p(
   v,
@@ -90,7 +90,7 @@ var b = function() {
   f,
   !1,
   null,
-  "41916e0b",
+  "db164701",
   null,
   null
 );
@@ -101,4 +101,4 @@ export {
   l as b,
   i as c
 };
-//# sourceMappingURL=button-actions.03751d96.js.map
+//# sourceMappingURL=button-actions.cf73ed47.js.map

package/dist/chunks/{button-actions.03751d96.js.map → button-actions.cf73ed47.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions.03751d96.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 { BentoButtonVariant } from '@/components/button';\n\nexport interface BentoButtonActionObject {\n    title: string;\n    event: (event: Event) => void;\n    icon?: VueNodeElement;\n    disabled?: boolean;\n    variant?: BentoButtonVariant;\n    critical?: 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}\n\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\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-button\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    @click=\"button.event\"\n                >\n                    <template v-if=\"button.icon\" #iconLeft>\n                        <component :is=\"button.icon\" :svg-title=\"button.title\"></component>\n                    </template>\n                    {{ button.title }}\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n\n    export default defineComponent({\n        name: 'bento-button-actions',\n        components: { BentoButton },\n        props: {\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             * `disabled` (optional): Disables the action.\n             *\n             * `variant` (optional): Sets button's variant background color.\n             *\n             * `critical` (optional): Sets button red border adn color.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: BentoButtonVariant.PRIMARY,\n             *   critical: true\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                required: true,\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>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (layout: BentoButtonActionsLayout) =>\n                    Object.values(BentoButtonActionsLayout).includes(layout),\n            },\n        },\n        setup(props) {\n            const reversedActionsList = computed(() => props.actions.slice().reverse());\n            const generateButtonVariantByIndex = actionIndex => {\n                const lastActionIndex = props.actions.length - 1;\n                return actionIndex === lastActionIndex ? BentoButtonVariant.PRIMARY : BentoButtonVariant.SECONDARY;\n            };\n\n            const conditionalClasses = computed(() => ({\n                [`b-button-actions--${props.layout}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                reversedActionsList,\n\n                // Methods\n                generateButtonVariantByIndex,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","_sfc_main","defineComponent","BentoButton","layout","props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","BentoButtonVariant"],"mappings":";;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAIL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCCPG,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAmCA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAYA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAEA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAAF,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAG,IAAA,CAAAC,MAAA;AACA,YAAAC,IAAAL,EAAA,QAAA,SAAA;AACA,aAAAI,MAAAC,IAAAC,EAAA,UAAAA,EAAA;AAAA,IAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBAJAJ,EAAA,OAAA;AAAA,QAAA,CAAA,qBAAAF,EAAA,QAAA,GAAA;AAAA,MACA,EAAA;AAAA,MAKA,qBAAAC;AAAA;AAAA,MACA,8BAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions.cf73ed47.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 { BentoButtonVariant } from '@/components/button';\n\nexport interface BentoButtonActionObject {\n    title: string;\n    event: (event: Event) => void;\n    icon?: VueNodeElement;\n    disabled?: boolean;\n    variant?: BentoButtonVariant;\n    critical?: 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}\n\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\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-button\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    @click=\"button.event\"\n                >\n                    <template v-if=\"button.icon\" #iconLeft>\n                        <component :is=\"button.icon\" :svg-title=\"button.title\"></component>\n                    </template>\n                    {{ button.title }}\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n\n    export default defineComponent({\n        name: 'bento-button-actions',\n        components: { BentoButton },\n        props: {\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             * `disabled` (optional): Disables the action.\n             *\n             * `variant` (optional): Sets button's variant background color.\n             *\n             * `critical` (optional): Sets button red border adn color.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: BentoButtonVariant.PRIMARY,\n             *   critical: true\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                required: true,\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) =>\n                    Object.values(BentoButtonActionsLayout).includes(layout),\n            },\n        },\n        setup(props) {\n            const reversedActionsList = computed(() => props.actions.slice().reverse());\n            const generateButtonVariantByIndex = actionIndex => {\n                const lastActionIndex = props.actions.length - 1;\n                return actionIndex === lastActionIndex ? BentoButtonVariant.PRIMARY : BentoButtonVariant.SECONDARY;\n            };\n\n            const conditionalClasses = computed(() => ({\n                [`b-button-actions--${props.layout}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                reversedActionsList,\n\n                // Methods\n                generateButtonVariantByIndex,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","_sfc_main","defineComponent","BentoButton","layout","props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","BentoButtonVariant"],"mappings":";;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAIL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCCPG,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAmCA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAYA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAEA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAAF,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAG,IAAA,CAAAC,MAAA;AACA,YAAAC,IAAAL,EAAA,QAAA,SAAA;AACA,aAAAI,MAAAC,IAAAC,EAAA,UAAAA,EAAA;AAAA,IAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBAJAJ,EAAA,OAAA;AAAA,QAAA,CAAA,qBAAAF,EAAA,QAAA,GAAA;AAAA,MACA,EAAA;AAAA,MAKA,qBAAAC;AAAA;AAAA,MACA,8BAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button.f64585fc.js → button.c27a7ce2.js}

@@ -1,5 +1,5 @@
 import { defineComponent as f, computed as o } from "vue";
-import { B as p, a as y, b as m } from "./index.e1fcc9e0.js";
+import { B as p, a as y, b as m } from "./index.175f9e2d.js";
 import { u as v } from "./use-has-slot.068222e6.js";
 import { BentoLink as g, BentoLinkVariant as S } from "../link.js";
 import { n as h } from "./_plugin-vue2_normalizer.71e2aa87.js";
@@ -58,22 +58,22 @@ const C = f({
   emits: ["click", "focus", "blur", "keydown.esc"],
   setup(t, { slots: n, emit: e, attrs: l }) {
     const r = o(() => (t == null ? void 0 : t.link) !== void 0 ? g : "button"), c = o(() => {
-      var a, u;
+      var a, d;
       return {
         "aria-controls": (a = l["aria-controls"]) == null ? void 0 : a.toString(),
-        "aria-expanded": (u = l["aria-expanded"]) == null ? void 0 : u.toString()
+        "aria-expanded": (d = l["aria-expanded"]) == null ? void 0 : d.toString()
       };
-    }), d = o(
+    }), u = o(
       () => r.value === "button" ? {
         ...c.value,
         disabled: t.disabled,
         type: t.type
       } : { ...t.link, disableTypography: !0, variant: S.DEFAULT }
-    ), b = o(() => ({
+    ), _ = o(() => ({
       [`b-button--${t.variant}${t.critical ? `-${i.DESTRUCTIVE}` : ""}`]: !0
-    })), _ = o(
+    })), b = o(
       () => ({
-        ...b.value,
+        ..._.value,
         [`b-button--${i.CONDENSED}`]: t.condensed,
         [`b-button--${i.ICON_ONLY}`]: !n.default,
         [`b-button--${i.DISABLED}`]: t.disabled
@@ -85,9 +85,9 @@ const C = f({
       BentoTypographyVariant: m,
       // Values
       ariaAttributes: c,
-      conditionalClasses: _,
+      conditionalClasses: b,
       componentType: r,
-      componentProps: d,
+      componentProps: u,
       // Methods
       onClickButton: (a) => {
         t.disabled ? (a.preventDefault(), a.stopPropagation()) : e("click", a);
@@ -107,7 +107,7 @@ var E = function() {
   T,
   !1,
   null,
-  "9b484955",
+  "d69cf818",
   null,
   null
 );
@@ -117,4 +117,4 @@ export {
   s as a,
   i as b
 };
-//# sourceMappingURL=button.f64585fc.js.map
+//# sourceMappingURL=button.c27a7ce2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.c27a7ce2.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["export enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"conditionalClasses\"\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\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-button__label\"\n        >\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 lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n    import type { RouterLinkProps } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoLink, BentoLinkVariant } from '../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    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @usage\n     * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             :icon-position=\"AdlIconPosition.AFTER\"\n     *         >\n     *             Button text\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\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             * Reduces sizing of button\n             */\n            condensed: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Types of flavour of Button\n             * @values primary, secondary, tertiary\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             * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n             */\n            link: {\n                type: Object,\n                default: undefined,\n            },\n        },\n        emits: ['click', 'focus', 'blur', 'keydown.esc'],\n        setup(props, { slots, emit, attrs }) {\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 }\n            );\n\n            const variantClass = computed((): { [x: string]: boolean } => ({\n                [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n            }));\n\n            const conditionalClasses = computed(\n                (): {\n                    [x: string]: boolean;\n                } => ({\n                    ...variantClass.value,\n                    [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n                    [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n                    [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n                })\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\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n                componentType,\n                componentProps,\n\n                // Methods\n                onClickButton,\n                hasSlot: useHasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","useHasSlot"],"mappings":";;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA,QAAA,aAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OACAL,KAAA,gBAAAA,EAAA,UAAA,SACAM,IAEA,QAAA,GAEAC,IAAAF,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAG,IAAAL,EAAA,eAAA,MAAA,gBAAAK,EAAA;AAAA,QACA,kBAAAC,IAAAN,EAAA,eAAA,MAAA,gBAAAM,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAL;AAAA,MAAA,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEA,GAAAG,EAAA;AAAA,QACA,UAAAP,EAAA;AAAA,QACA,MAAAA,EAAA;AAAA,MACA,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAW,EAAA,QAAA;AAAA,IAEA,GAGAC,IAAAP,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAL,EAAA,UAAAA,EAAA,WAAA,IAAAN,EAAA,gBAAA,IAAA,GAAA;AAAA,IACA,EAAA,GAGAmB,IAAAR;AAAA,MAAA,OAAA;AAAA,QAGA,GAAAO,EAAA;AAAA,QACA,CAAA,aAAAlB,EAAA,WAAA,GAAAM,EAAA;AAAA,QACA,CAAA,aAAAN,EAAA,WAAA,GAAA,CAAAO,EAAA;AAAA,QACA,CAAA,aAAAP,EAAA,UAAA,GAAAM,EAAA;AAAA,MACA;AAAA,IACA;AAYA,WAAA;AAAA;AAAA,MAAA,wBAAAc;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAR;AAAA,MAGA,oBAAAM;AAAA,MACA,eAAAT;AAAA,MACA,gBAAAM;AAAA;AAAA,MACA,eAlBA,CAAAM,MAAA;AACA,QAAAhB,EAAA,YAGAgB,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAd,EAAA,SAAAc,CAAA;AAAA,MAIA;AAAA,MAeA,SAAAC,EAAAhB,CAAA;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{calendar.c9cfce76.js → calendar.8f50a65a.js}

@@ -1,8 +1,8 @@
 import { defineComponent as te, computed as M, ref as p, watch as C, nextTick as me, toRef as U, reactive as ve } from "vue";
 import { r as y, t as _, g as le, e as ee, d as _e, f as ge } from "./index.f55fdc32.js";
-import { t as E, B as ye, a as he, f as ie } from "./index.8d590c55.js";
-import { B as Te, a as Ee } from "./button.f64585fc.js";
-import { B as Ne, a as be, b as Se } from "./index.e1fcc9e0.js";
+import { t as E, B as ye, a as he, f as ie } from "./index.d07f9800.js";
+import { B as Te, a as Ee } from "./button.c27a7ce2.js";
+import { B as Ne, a as be, b as Se } from "./index.175f9e2d.js";
 import { u as Me } from "./i18n.155748d6.js";
 import { g as Oe } from "./unique-id.a2a2b458.js";
 import { C as ke, a as Ie } from "./chevron-right.3b826337.js";
@@ -798,4 +798,4 @@ export {
   O as a,
   L as b
 };
-//# sourceMappingURL=calendar.c9cfce76.js.map
+//# sourceMappingURL=calendar.8f50a65a.js.map