@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/{alert.CDP-LTh5.js.map → alert.Dj57zB88.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.CDP-LTh5.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/warning-filled.vue","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@close-alert` instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.72456 2.45856C6.84306 0.797505 9.35301 0.852915 10.3789 2.62457L15 10.6246C16.0585 12.4537 14.7382 14.7493 12.6201 14.7496H3.37984C1.26177 14.7493 -0.0573711 12.4537 1.00093 10.6246L5.62105 2.62457L5.72456 2.45856ZM8.20991 10.3492C8.02 10.3092 7.80975 10.3298 7.62984 10.4097C7.44993 10.4897 7.28964 10.61 7.17964 10.7798C7.06984 10.9397 7.00984 11.1397 7.00972 11.3394C7.00972 11.6092 7.11997 11.8594 7.29976 12.0494C7.48973 12.2394 7.73976 12.3394 8.00972 12.3394L7.99995 12.3297C8.19979 12.3296 8.38964 12.2696 8.55952 12.1597C8.71947 12.0497 8.84966 11.8895 8.92964 11.7095C9.00952 11.5296 9.03016 11.3293 8.99019 11.1295C8.95014 10.9396 8.85955 10.7596 8.71968 10.6197C8.57975 10.4799 8.39975 10.3792 8.20991 10.3492ZM7.24995 4.57965V9.07965H8.74995V4.57965H7.24995Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid$1","_sfc_main$2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAApB,EAAA,GAAA,GAEAqB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAApB,EAAA,GAAA,EAAA,GAAAkB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAlB,EAAA;AAEZ,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAEP,iBAAAwB;AAAA,QAAO,KAAAxB,EAAA;AAAA,QACe;AAEtB,iBAAAyB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAlB,EAAA,YAAA,WAAA,OAAA,GAEA8B,IAAA,MAAA;AACI,MAAAC,EAAA7B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA8B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.Dj57zB88.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/warning-filled.vue","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@close-alert` instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.72456 2.45856C6.84306 0.797505 9.35301 0.852915 10.3789 2.62457L15 10.6246C16.0585 12.4537 14.7382 14.7493 12.6201 14.7496H3.37984C1.26177 14.7493 -0.0573711 12.4537 1.00093 10.6246L5.62105 2.62457L5.72456 2.45856ZM8.20991 10.3492C8.02 10.3092 7.80975 10.3298 7.62984 10.4097C7.44993 10.4897 7.28964 10.61 7.17964 10.7798C7.06984 10.9397 7.00984 11.1397 7.00972 11.3394C7.00972 11.6092 7.11997 11.8594 7.29976 12.0494C7.48973 12.2394 7.73976 12.3394 8.00972 12.3394L7.99995 12.3297C8.19979 12.3296 8.38964 12.2696 8.55952 12.1597C8.71947 12.0497 8.84966 11.8895 8.92964 11.7095C9.00952 11.5296 9.03016 11.3293 8.99019 11.1295C8.95014 10.9396 8.85955 10.7596 8.71968 10.6197C8.57975 10.4799 8.39975 10.3792 8.20991 10.3492ZM7.24995 4.57965V9.07965H8.74995V4.57965H7.24995Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid$1","_sfc_main$2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAApB,EAAA,GAAA,GAEAqB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAApB,EAAA,GAAA,EAAA,GAAAkB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAlB,EAAA;AAEZ,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAEP,iBAAAwB;AAAA,QAAO,KAAAxB,EAAA;AAAA,QACe;AAEtB,iBAAAyB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAlB,EAAA,YAAA,WAAA,OAAA,GAEA8B,IAAA,MAAA;AACI,MAAAC,EAAA7B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA8B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.Bhgy748g.js

@@ -0,0 +1,120 @@
+import { defineComponent as f, computed as c, toRef as v, ref as S, watch as _ } from "vue";
+import { i as x } from "./index.CL3TXc0a.js";
+import { p as y, B as T } from "./typography.D1OZJbEa.js";
+import { u as C } from "./index.CPOlyau9.js";
+import { g as j } from "./generate-uid.DBWe4g6T.js";
+import { u as k } from "./utils.DWmc2mUI.js";
+import { u as B, s as F, a as R } from "./scroll-to-section.DhW8SFy0.js";
+import { B as w } from "./button.C4kKejsg.js";
+import { n as b } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { F as N } from "./fixed-scroller.oObE3f7m.js";
+import "../assets/anchor-scroller.css";
+const O = /* @__PURE__ */ f({
+  __name: "anchor-scroller-list",
+  props: {
+    activeIndex: { default: void 0 },
+    items: null,
+    scrollOffset: { default: void 0 }
+  },
+  setup(u) {
+    const e = u, n = c(() => e.items), { isFocusable: t, navigationItemRefs: l, onKeydownNavigation: s } = B(n, {
+      isDisabled: (a) => a.disabled,
+      initialIndex: v(e, "activeIndex")
+    });
+    return { __sfc: !0, props: e, navigationItems: n, isFocusable: t, navigationItemRefs: l, onKeydownNavigation: s, onScrollToSection: (a, r) => F(a, {
+      disabled: r,
+      scrollOffset: e.scrollOffset,
+      warningPrefix: "bento-anchor-scroller"
+    }), BentoButton: w };
+  }
+});
+var A = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return n("ul", { staticClass: "b-anchor-scroller-list", on: { keydown: t.onKeydownNavigation } }, e._l(e.items, function({ title: l, disabled: s, elementRef: i }, a) {
+    return n("li", { key: a, staticClass: "b-anchor-scroller-list__item" }, [n(t.BentoButton, { ref: "navigationItemRefs", refInFor: !0, staticClass: "b-anchor-scroller-list__item-button", class: {
+      "b-anchor-scroller-list__item-button--active": e.activeIndex === a,
+      "b-anchor-scroller-list__item-button--disabled": s
+    }, attrs: { "aria-current": e.activeIndex === a ? "location" : null, "aria-disabled": s, tabindex: t.isFocusable(a) ? null : "-1", variant: "tertiary-with-background" }, on: { click: function(r) {
+      return t.onScrollToSection(i, s);
+    } }, nativeOn: { keydown: [function(r) {
+      return !r.type.indexOf("key") && e._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : (r.preventDefault(), t.onScrollToSection(i, s));
+    }, function(r) {
+      return !r.type.indexOf("key") && e._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : (r.preventDefault(), t.onScrollToSection(i, s));
+    }] } }, [e._v(" " + e._s(l) + " ")])], 1);
+  }), 0);
+}, D = [], E = /* @__PURE__ */ b(
+  O,
+  A,
+  D,
+  !1,
+  null,
+  "a49180be"
+);
+const L = E.exports, P = {
+  "de-DE": { jumpTo: "Springe zu" },
+  "en-GB": { jumpTo: "Jump to" },
+  "en-US": { jumpTo: "Jump to" },
+  "es-419": { jumpTo: "Saltar a" },
+  "es-ES": { jumpTo: "Saltar a" },
+  "es-MX": { jumpTo: "Saltar a" },
+  "fr-FR": { jumpTo: "Passer à" },
+  "it-IT": { jumpTo: "Vai a" },
+  "ja-JP": { jumpTo: "移動先" },
+  "pt-BR": { jumpTo: "Ir para" },
+  "zh-CN": { jumpTo: "跳转到" }
+}, z = {
+  i18n: { messages: P },
+  name: "bento-anchor-scroller"
+}, J = /* @__PURE__ */ f({
+  ...z,
+  props: {
+    activeIndex: { default: void 0 },
+    items: null
+  },
+  emits: ["update:active-index"],
+  setup(u, { emit: e }) {
+    const n = u, { t } = C(), l = S(null), s = c(() => n.items.map((o) => ({ ...o }))), i = c(
+      () => n.items.map((o, h) => ({
+        element: k(o.elementRef),
+        originalIndex: h,
+        disabled: o.disabled
+      })).filter(
+        (o) => !o.disabled && !!o.element
+      )
+    ), { top: a, bottom: r } = x(l), d = c(() => i.value.map((o) => o.element)), g = c(() => ({
+      "b-anchor-scroller__navigation--pinned": a.value <= 1
+    })), { activeIndex: m } = R(d, {
+      default: v(n, "activeIndex"),
+      debounce: 200
+    }), p = c(() => {
+      const o = i.value[m.value];
+      return o ? o.originalIndex : 0;
+    });
+    _(p, (o) => {
+      Number.isFinite(o) && e("update:active-index", o);
+    }), _(
+      () => n.activeIndex,
+      (o) => {
+        Number.isFinite(o) && s.value[o].disabled && y("[bento-anchor-scroller] activeIndex should not be a disabled item");
+      }
+    );
+    const I = j("bento-anchor-scroller-label");
+    return { __sfc: !0, t, props: n, emit: e, navigationRef: l, computedItems: s, enabledItems: i, top: a, bottom: r, scrollToTargets: d, navigationConditionalClasses: g, scrollSpyActiveIndex: m, currentActiveIndex: p, navLabelId: I, BentoTypography: T, FixedScroller: N, AnchorScrollerList: L };
+  }
+});
+var K = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return t.computedItems.length ? n("div", { staticClass: "b-anchor-scroller" }, [n("nav", { ref: "navigationRef", staticClass: "b-anchor-scroller__navigation", class: t.navigationConditionalClasses, attrs: { "aria-labelledby": t.navLabelId } }, [n(t.FixedScroller, { attrs: { condensed: "", centered: "" } }, [n("div", { staticClass: "b-anchor-scroller__navigation-panel" }, [n(t.BentoTypography, { staticClass: "b-anchor-scroller__navigation-panel-label", attrs: { id: t.navLabelId, el: "span", stronger: "" } }, [e._v(" " + e._s(t.t("jumpTo")) + " ")]), n(t.AnchorScrollerList, { attrs: { items: t.computedItems, "active-index": t.currentActiveIndex, "scroll-offset": t.bottom } })], 1)])], 1), e._t("default")], 2) : e._e();
+}, U = [], G = /* @__PURE__ */ b(
+  J,
+  K,
+  U,
+  !1,
+  null,
+  "d6e20408"
+);
+const ee = G.exports;
+export {
+  ee as a
+};
+//# sourceMappingURL=anchor-scroller.Bhgy748g.js.map

package/dist/chunks/anchor-scroller.Bhgy748g.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-scroller.Bhgy748g.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"navigationItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"isFocusable(index) ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard';\n    import { scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, toRef } from 'vue';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const navigationItems = computed(() => props.items);\n    const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard(navigationItems, {\n        isDisabled: item => item.disabled,\n        initialIndex: toRef(props, 'activeIndex'),\n    });\n\n    const onScrollToSection = (\n        elementRef: AnchorScrollerListProps['items'][number]['elementRef'],\n        disabled?: boolean\n    ) =>\n        scrollToSection(elementRef as ScrollToSectionTarget, {\n            disabled,\n            scrollOffset: props.scrollOffset,\n            warningPrefix: 'bento-anchor-scroller',\n        });\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from '@/composables/use-scroll-spy';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n        debounce: 200,\n    });\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[scrollSpyActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["navigationItems","computed","props","isFocusable","navigationItemRefs","onKeydownNavigation","useSectionNavigationKeyboard","item","toRef","elementRef","disabled","scrollToSection","__default__","messages","useI18n","navigationRef","ref","computedItems","enabledItems","originalIndex","unrefElement","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","scrollSpyActiveIndex","useScrollSpy","currentActiveIndex","candidate","watch","val","emit","printDevelopmentWarning","navLabelId","generateUid"],"mappings":";;;;;;;;;;;;;;;;;;;iBAqCIA,IAAAC,EAAA,MAAAC,EAAA,KAAA,GACA,EAAA,aAAAC,GAAA,oBAAAC,GAAA,qBAAAC,EAAA,IAAAC,EAAAN,GAAA;AAAA,MAA+G,YAAA,CAAAO,MAAAA,EAAA;AAAA,MAClF,cAAAC,EAAAN,GAAA,aAAA;AAAA,IACe,CAAA;wIAG5C,CAAAO,GAAAC,MAAAC,EAAAF,GAAA;AAAA,MAIyD,UAAAC;AAAA,MACjD,cAAAR,EAAA;AAAA,MACoB,eAAA;AAAA,IACL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8FvBU,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;iBAnGA,EAAA,EAAA,IAAAC,EAAA,GASAC,IAAAC,EAAA,IAAA,GAEAC,IAAAhB,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAAK,OAAA,EAAA,GAAAA,EAAA,EAAA,CAAA,GAGAW,IAAAjB;AAAA,MAAqB,MAAAC,EAAA,MAAA,IAAA,CAAAK,GAAAY,OAAA;AAAA,QAEkB,SAAAC,EAAAb,EAAA,UAAA;AAAA,QACU,eAAAY;AAAA,QACrC,UAAAZ,EAAA;AAAA,MACe,EAAA,EAAA;AAAA,QAElB,CAAAA,MAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,MAEgC;AAAA,IACjC,GAGR,EAAA,KAAAc,GAAA,QAAAC,EAAA,IAAAC,EAAAR,CAAA,GAGAS,IAAAvB,EAAA,MAAAiB,EAAA,MAAA,IAAA,CAAAO,MAAAA,EAAA,OAAA,CAAA,GAEAC,IAAAzB,EAAA,OAAA;AAAA,MAAqD,yCAAAoB,EAAA,SAAA;AAAA,IACK,EAAA,GAG1D,EAAA,aAAAM,EAAA,IAAAC,EAAAJ,GAAA;AAAA,MAA4E,SAAAhB,EAAAN,GAAA,aAAA;AAAA,MACrC,UAAA;AAAA,IACzB,CAAA,GAGd2B,IAAA5B,EAAA,MAAA;AACI,YAAA6B,IAAAZ,EAAA,MAAAS,EAAA,KAAA;AAEA,aAAAG,IAAAA,EAAA,gBAAA;AAAA,IAA6C,CAAA;AAGjD,IAAAC,EAAAF,GAAA,CAAAG,MAAA;AACI,MAAA,OAAA,SAAAA,CAAA,KACIC,EAAA,uBAAAD,CAAA;AAAA,IACJ,CAAA,GAGJD;AAAA,MAAA,MAAA7B,EAAA;AAAA,MACgB,CAAA8B,MAAA;AAER,QAAA,OAAA,SAAAA,CAAA,KAAAf,EAAA,MAAAe,CAAA,EAAA,YACIE,EAAA,mEAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAAC,IAAAC,EAAA,6BAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{avatar.rwWPYJnt.js → avatar.D__jLgjI.js}

@@ -1,5 +1,5 @@
 import { ref as b, computed as n, defineComponent as _, toRefs as m } from "vue";
-import { B as p } from "./typography.C8lPlsbD.js";
+import { B as p } from "./typography.D1OZJbEa.js";
 import "./index.Cl4_42j5.js";
 import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/avatar.css";
@@ -68,4 +68,4 @@ const W = B.exports;
 export {
   W as B
 };
-//# sourceMappingURL=avatar.rwWPYJnt.js.map
+//# sourceMappingURL=avatar.D__jLgjI.js.map

package/dist/chunks/{avatar.rwWPYJnt.js.map → avatar.D__jLgjI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"avatar.rwWPYJnt.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, type ComputedRef, ref } from 'vue';\nimport { type MaybeRef } from '@/types/refs';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :role=\"iconOnly ? 'img' : null\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbO,IAAAG,IAAA,kBAAAC,OACHA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"avatar.D__jLgjI.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, type ComputedRef, ref } from 'vue';\nimport { type MaybeRef } from '@/types/refs';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :role=\"iconOnly ? 'img' : null\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbO,IAAAG,IAAA,kBAAAC,OACHA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-button.BPRPrO0p.js → base-button.D5C9VIYP.js}

@@ -1,9 +1,9 @@
 import { defineComponent as b, computed as r, ref as d } from "vue";
-import { B as f } from "./typography.C8lPlsbD.js";
+import { B as f } from "./typography.D1OZJbEa.js";
 import { u as p } from "./use-has-slot.C9lQZ6nz.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/base-button.css";
-var s = /* @__PURE__ */ ((o) => (o.DESTRUCTIVE = "critical", o.ICON_ONLY = "icon-only", o))(s || {}), e = /* @__PURE__ */ ((o) => (o.BLUR = "blur", o.CLICK = "click", o.FOCUS = "focus", o.KEYDOWN_ESC = "keydown.esc", o))(e || {});
+var s = /* @__PURE__ */ ((o) => (o.DESTRUCTIVE = "critical", o.ICON_ONLY = "icon-only", o))(s || {}), n = /* @__PURE__ */ ((o) => (o.BLUR = "blur", o.CLICK = "click", o.FOCUS = "focus", o.KEYDOWN_ESC = "keydown.esc", o))(n || {});
 const C = b({
   name: "base-button",
   components: { BentoTypography: f },
@@ -32,18 +32,15 @@ const C = b({
     }
   },
   emits: [
-    e.CLICK,
-    e.FOCUS,
-    e.BLUR,
-    e.KEYDOWN_ESC
+    n.CLICK,
+    n.FOCUS,
+    n.BLUR,
+    n.KEYDOWN_ESC
   ],
-  setup(o, { slots: t, emit: n, attrs: i }) {
-    const l = r(() => {
-      var a;
-      return {
-        "aria-expanded": (a = i["aria-expanded"]) == null ? void 0 : a.toString()
-      };
-    }), c = d(null), u = r(() => ({
+  setup(o, { slots: t, emit: a, attrs: i }) {
+    const l = r(() => ({
+      "aria-expanded": i["aria-expanded"]?.toString()
+    })), c = d(null), u = r(() => ({
       [`b-base-button--${s.DESTRUCTIVE}`]: o.critical,
       [`b-base-button--${s.ICON_ONLY}`]: !t.default
     }));
@@ -52,14 +49,14 @@ const C = b({
       ariaAttributes: l,
       conditionalClasses: u,
       // Methods
-      onClickButton: (a) => {
-        o.disabled ? (a.preventDefault(), a.stopPropagation()) : n(e.CLICK, a);
+      onClickButton: (e) => {
+        o.disabled ? (e.preventDefault(), e.stopPropagation()) : a(n.CLICK, e);
       },
-      onFocusButton: (a) => {
-        n(e.FOCUS, a);
+      onFocusButton: (e) => {
+        a(n.FOCUS, e);
       },
-      onBlurButton: (a) => {
-        n(e.BLUR, a);
+      onBlurButton: (e) => {
+        a(n.BLUR, e);
       },
       hasSlot: p(t),
       // Refs
@@ -68,8 +65,8 @@ const C = b({
   }
 });
 var m = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("button", t._b({ ref: "bentoBaseButtonRef", staticClass: "b-base-button", class: t.conditionalClasses, attrs: { disabled: t.disabled, type: t.type, "aria-expanded": t.ariaAttributes["aria-expanded"] }, on: { click: t.onClickButton, focus: t.onFocusButton, blur: t.onBlurButton } }, "button", t.$attrs, !1), [t.hasSlot("iconLeft") ? n("span", { staticClass: "b-base-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [t._t("iconLeft")], 2) : t._e(), t.hasSlot("default") ? n("bento-typography", { staticClass: "b-base-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("iconRight") ? n("span", { staticClass: "b-base-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [t._t("iconRight")], 2) : t._e()], 1);
+  var t = this, a = t._self._c;
+  return t._self._setupProxy, a("button", t._b({ ref: "bentoBaseButtonRef", staticClass: "b-base-button", class: t.conditionalClasses, attrs: { disabled: t.disabled, type: t.type, "aria-expanded": t.ariaAttributes["aria-expanded"] }, on: { click: t.onClickButton, focus: t.onFocusButton, blur: t.onBlurButton } }, "button", t.$attrs, !1), [t.hasSlot("iconLeft") ? a("span", { staticClass: "b-base-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [t._t("iconLeft")], 2) : t._e(), t.hasSlot("default") ? a("bento-typography", { staticClass: "b-base-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t._t("default")], 2) : t._e(), t.hasSlot("iconRight") ? a("span", { staticClass: "b-base-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [t._t("iconRight")], 2) : t._e()], 1);
 }, y = [], B = /* @__PURE__ */ _(
   C,
   m,
@@ -81,6 +78,6 @@ var m = function() {
 const x = B.exports;
 export {
   x as B,
-  e as a
+  n as a
 };
-//# sourceMappingURL=base-button.BPRPrO0p.js.map
+//# sourceMappingURL=base-button.D5C9VIYP.js.map

package/dist/chunks/{base-button.BPRPrO0p.js.map → base-button.D5C9VIYP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.BPRPrO0p.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        v-bind=\"$attrs\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\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 v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\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, type PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { type Booleanish } from '@/types/prop-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                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\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","e","useHasSlot"],"mappings":";;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACyDZ,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,WAAA,EAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.D5C9VIYP.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        v-bind=\"$attrs\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\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 v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\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, type PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { type Booleanish } from '@/types/prop-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                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\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","bentoBaseButtonRef","ref","conditionalClasses","useHasSlot"],"mappings":";;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACyDZ,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,OAAA;AAAA,MAAA,iBAAAF,EAAA,eAAA,GAAA,SAAA;AAAA,IACA,EAAA,GAGAG,IAAAC,EAAA,IAAA,GAEAC,IAAAH,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAI;AAAA;AAAA,MACA,eApBA,CAAA,MAAA;AACA,QAAAR,EAAA,YAGA,EAAA,eAAA,GACA,EAAA,gBAAA,KAHAE,EAAAP,EAAA,OAAA,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAA,MAAA;AACA,QAAAO,EAAAP,EAAA,OAAA,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAA,MAAA;AACA,QAAAO,EAAAP,EAAA,MAAA,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAc,EAAAR,CAAA;AAAA;AAAA,MACA,oBAAAK;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}