@adyen/bento-vue2 2.0.1 → 2.1.0

package/dist/chunks/{alert.DJDHwVeR.js.map → alert.BddJPWMN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.DJDHwVeR.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 setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\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 setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\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","instance","getCurrentInstance","uuid","__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;;;;AChBZ,UAAAE,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;ACJA,UAAAA,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmIIG,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,YAAAnB,EAAA,GAAA,GAEAoB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAnB,EAAA,GAAA,EAAA,GAAAiB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAjB,EAAA;AAEZ,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAAA,QACe;AAEtB,iBAAAwB;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,SAAAjB,EAAA,YAAA,WAAA,OAAA,GAEA6B,IAAA,MAAA;AACI,MAAAC,EAAA5B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA6B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.BddJPWMN.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 v3.0.0. Use string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated Since v3.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 v3.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 setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\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 setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\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","instance","getCurrentInstance","uuid","__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;;;;AChBZ,UAAAE,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;ACJA,UAAAA,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmIIG,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,YAAAnB,EAAA,GAAA,GAEAoB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAnB,EAAA,GAAA,EAAA,GAAAiB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAjB,EAAA;AAEZ,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAAA,QACe;AAEtB,iBAAAwB;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,SAAAjB,EAAA,YAAA,WAAA,OAAA,GAEA6B,IAAA,MAAA;AACI,MAAAC,EAAA5B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA6B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{anchor-scroller.BbvghQxZ.js → anchor-scroller.Clb_9RNz.js}

@@ -1,13 +1,13 @@
 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 { p as y, B as T } from "./typography.Cd386LC_.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.DII5Ifwa.js";
+import { u as B, s as F, a as R } from "./scroll-to-section.CzeBpNj4.js";
+import { B as w } from "./button.tsTeQRcP.js";
 import { n as b } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { F as N } from "./fixed-scroller.YC4bZifw.js";
+import { F as N } from "./fixed-scroller.CHmrgoTQ.js";
 import "../assets/anchor-scroller.css";
 const O = /* @__PURE__ */ f({
   __name: "anchor-scroller-list",
@@ -117,4 +117,4 @@ const ee = G.exports;
 export {
   ee as a
 };
-//# sourceMappingURL=anchor-scroller.BbvghQxZ.js.map
+//# sourceMappingURL=anchor-scroller.Clb_9RNz.js.map

package/dist/chunks/{anchor-scroller.BbvghQxZ.js.map → anchor-scroller.Clb_9RNz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"anchor-scroller.BbvghQxZ.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 '@/utils/ts/generate-uid';\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;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"anchor-scroller.Clb_9RNz.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 '@/utils/ts/generate-uid';\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.CxPKc8Gy.js → avatar.BN4MI-42.js}

@@ -1,5 +1,5 @@
 import { ref as _, computed as r, defineComponent as n, toRefs as m } from "vue";
-import { B as o } from "./typography.D1OZJbEa.js";
+import { B as o } from "./typography.Cd386LC_.js";
 import "./index.Cl4_42j5.js";
 import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/avatar.css";
@@ -67,4 +67,4 @@ const T = x.exports;
 export {
   T as B
 };
-//# sourceMappingURL=avatar.CxPKc8Gy.js.map
+//# sourceMappingURL=avatar.BN4MI-42.js.map

package/dist/chunks/{avatar.CxPKc8Gy.js.map → avatar.BN4MI-42.js.map}

@@ -1 +1 @@
-{"version":3,"file":"avatar.CxPKc8Gy.js","sources":["../../src/composables/initials.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","<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\" v-bind=\"iconInitialsTypographyProps\">\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 { BentoTypography, type BentoTypographyProps } from '@/components/typography';\n    import { useInitials } from '@/composables';\n    import { type BentoAvatarSize } from '../../avatar.types';\n\n    const props = defineProps({\n  src: { default: null },\n  username: { default: null },\n  size: { default: 'medium' }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${props.size}`]: props.size,\n    }));\n\n    const iconInitialsTypographyProps = computed<BentoTypographyProps>(() => ({\n        variant: props.size === 'large' || props.size === 'xlarge' ? 'title' : 'body',\n        strongest: props.size === 'small' || props.size === 'medium',\n        medium: props.size === 'large',\n        large: props.size === 'xlarge',\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 :src=\"src\" :username=\"computedUsername\" :size=\"size\" />\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 } from 'vue';\n    import { AvatarImage } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoAvatarSize } from './avatar.types';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  size: { default: 'small' },\n  username: null\n});\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\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","__default__$1","toRefs","props","initials","conditionalClasses","iconInitialsTypographyProps","__default__","computedAriaLabel"],"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,GCqCIG,IAAA,CAAA;;;;;;;;;iBA3BA,EAAA,UAAAJ,EAAA,IAAAK,EAAAC,CAAA,GACAC,IAAAR,EAAAC,CAAA,GAEAQ,IAAAL,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAG,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,IACE,EAAA,GAG7CG,IAAAN,EAAA,OAAA;AAAA,MAA0E,SAAAG,EAAA,SAAA,WAAAA,EAAA,SAAA,WAAA,UAAA;AAAA,MACC,WAAAA,EAAA,SAAA,WAAAA,EAAA,SAAA;AAAA,MACnB,QAAAA,EAAA,SAAA;AAAA,MAC7B,OAAAA,EAAA,SAAA;AAAA,IACD,EAAA;;;;;;;;;;;;;;;qBCI1BI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;iBAlBAC,IAAAR,EAAA,MAAAG,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAL,IAAAE,EAAA,MAAAG,EAAA,MAAA,OAAAA,EAAA,QAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"avatar.BN4MI-42.js","sources":["../../src/composables/initials.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","<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\" v-bind=\"iconInitialsTypographyProps\">\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 { BentoTypography, type BentoTypographyProps } from '@/components/typography';\n    import { useInitials } from '@/composables';\n    import { type BentoAvatarSize } from '../../avatar.types';\n\n    const props = defineProps({\n  src: { default: null },\n  username: { default: null },\n  size: { default: 'medium' }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${props.size}`]: props.size,\n    }));\n\n    const iconInitialsTypographyProps = computed<BentoTypographyProps>(() => ({\n        variant: props.size === 'large' || props.size === 'xlarge' ? 'title' : 'body',\n        strongest: props.size === 'small' || props.size === 'medium',\n        medium: props.size === 'large',\n        large: props.size === 'xlarge',\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 :src=\"src\" :username=\"computedUsername\" :size=\"size\" />\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 } from 'vue';\n    import { AvatarImage } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoAvatarSize } from './avatar.types';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  size: { default: 'small' },\n  username: null\n});\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\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","__default__$1","toRefs","props","initials","conditionalClasses","iconInitialsTypographyProps","__default__","computedAriaLabel"],"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,GCqCIG,IAAA,CAAA;;;;;;;;;iBA3BA,EAAA,UAAAJ,EAAA,IAAAK,EAAAC,CAAA,GACAC,IAAAR,EAAAC,CAAA,GAEAQ,IAAAL,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAG,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,IACE,EAAA,GAG7CG,IAAAN,EAAA,OAAA;AAAA,MAA0E,SAAAG,EAAA,SAAA,WAAAA,EAAA,SAAA,WAAA,UAAA;AAAA,MACC,WAAAA,EAAA,SAAA,WAAAA,EAAA,SAAA;AAAA,MACnB,QAAAA,EAAA,SAAA;AAAA,MAC7B,OAAAA,EAAA,SAAA;AAAA,IACD,EAAA;;;;;;;;;;;;;;;qBCI1BI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;iBAlBAC,IAAAR,EAAA,MAAAG,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAL,IAAAE,EAAA,MAAAG,EAAA,MAAA,OAAAA,EAAA,QAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-button.DOhHyU7x.js → base-button.DYroENBg.js}

@@ -1,6 +1,6 @@
 import { defineComponent as C, useAttrs as S, useSlots as g, ref as v, computed as r } from "vue";
-import { B, a as h } from "./link.Cls8XShm.js";
-import { B as T } from "./typography.D1OZJbEa.js";
+import { B, a as h } from "./link.iNnolG9W.js";
+import { B as T } from "./typography.Cd386LC_.js";
 import { u as L } from "./use-has-slot.C9lQZ6nz.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/base-button.css";
@@ -98,4 +98,4 @@ export {
   P as B,
   R as a
 };
-//# sourceMappingURL=base-button.DOhHyU7x.js.map
+//# sourceMappingURL=base-button.DYroENBg.js.map

package/dist/chunks/{base-button.DOhHyU7x.js.map → base-button.DYroENBg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.DOhHyU7x.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    <component\n        :is=\"componentType\"\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        v-bind=\"componentProps\"\n        @click=\"onClickButton\"\n        @keydown.space.native=\"onSpacebarKeydown\"\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    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, type PropType, ref, useAttrs, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { BentoBaseButtonPropClass } from './base-button.types';\n    import { type Booleanish } from '@/types/prop-types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import type { BentoLinkProps } from '@/components/link/link.types';\n\n    const props = defineProps({\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         * Object containing props passed on to the BentoLink component, rendering the element as a link instead of a\n         * button. @see BentoLink documentation for the properties it supports.\n         */\n        link: {\n            type: Object as PropType<BentoLinkProps>,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"click\", \"focus\", \"blur\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const bentoBaseButtonRef = ref(null);\n\n    const componentType = computed(() => {\n        if (props.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return props.disabled ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        props.link === undefined\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the link is disabled, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers, while\n                   * respecting a consumer-provided `role` (e.g. `menuitem`) when present.\n                   */\n                  'aria-disabled': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? ((attrs.role as string) ?? 'link') : undefined,\n              }\n    );\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            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n\n    /**\n     * Anchors are activated by Enter but not Space. When rendered as a link, replicate a native\n     * click on Space so keyboard activation matches the native button variant and the WAI-ARIA\n     * button/menuitem pattern. Native `<button>` handles Space itself, so it is excluded.\n     */\n    const onSpacebarKeydown = (e: KeyboardEvent) => {\n        if (props.link === undefined || props.disabled) {\n            return;\n        }\n\n        e.preventDefault();\n        (e.currentTarget as HTMLElement | null)?.click();\n    };\n\n    const onFocusButton = (e: FocusEvent) => {\n        emit('focus', e);\n    };\n\n    const onBlurButton = (e: FocusEvent) => {\n        emit('blur', e);\n    };\n\n    defineExpose({\n        bentoBaseButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * Renders a native `<button>` by default. When a `link` object is provided, the root element is rendered as a\n     * `BentoLink` (an anchor / router-link) instead, while keeping the same visual structure and styling. A disabled\n     * link is rendered as a `<span>` with the appropriate ARIA attributes.\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: [BaseButtonEvent.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 {\n        name: 'base-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","bentoBaseButtonRef","ref","componentType","computed","props","BentoLink","ariaAttributes","componentProps","BentoLinkVariant","conditionalClasses","onClickButton","emit","onSpacebarKeydown","onFocusButton","onBlurButton","expose"],"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;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1HAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,SAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAGXC,IAAAH,EAAA,OAAA;AAAA,MAAuC,iBAAAT,EAAA,eAAA,GAAA,SAAA;AAAA,IACe,EAAA,GAGtDa,IAAAJ;AAAA,MAAuB,MAAAC,EAAA,SAAA,SAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAI,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAJ,EAAA,WAAA,SAAA;AAAA,QAOiC,MAAAA,EAAA,WAAAV,EAAA,QAAA,SAAA;AAAA,MACiB;AAAA,IAChE,GAGVe,IAAAN,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAd,EAAA,WAAA,EAAA,GAAAe,EAAA;AAAA,MAC2B,CAAA,kBAAAf,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA;AAAA,IACD,EAAA,GAGrEc,IAAA,CAAA,MAAA;AACI,MAAAN,EAAA,YACI,EAAA,eAAA,GACA,EAAA,gBAAA,KAEAO,EAAA,SAAA,CAAA;AAAA,IACJ,GAQJC,IAAA,CAAA,MAAA;AACI,MAAAR,EAAA,SAAA,UAAAA,EAAA,aAIA,EAAA,eAAA,GACA,EAAA,eAAA,MAAA;AAAA,IAA+C,GAGnDS,IAAA,CAAA,MAAA;AACI,MAAAF,EAAA,SAAA,CAAA;AAAA,IAAe,GAGnBG,IAAA,CAAA,MAAA;AACI,MAAAH,EAAA,QAAA,CAAA;AAAA,IAAc;AAGlB,WAAAI,EAAA;AAAA,MAAa,oBAAAf;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.DYroENBg.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    <component\n        :is=\"componentType\"\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        v-bind=\"componentProps\"\n        @click=\"onClickButton\"\n        @keydown.space.native=\"onSpacebarKeydown\"\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    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, type PropType, ref, useAttrs, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { BentoBaseButtonPropClass } from './base-button.types';\n    import { type Booleanish } from '@/types/prop-types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import type { BentoLinkProps } from '@/components/link/link.types';\n\n    const props = defineProps({\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         * Object containing props passed on to the BentoLink component, rendering the element as a link instead of a\n         * button. @see BentoLink documentation for the properties it supports.\n         */\n        link: {\n            type: Object as PropType<BentoLinkProps>,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"click\", \"focus\", \"blur\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const bentoBaseButtonRef = ref(null);\n\n    const componentType = computed(() => {\n        if (props.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return props.disabled ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        props.link === undefined\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the link is disabled, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers, while\n                   * respecting a consumer-provided `role` (e.g. `menuitem`) when present.\n                   */\n                  'aria-disabled': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? ((attrs.role as string) ?? 'link') : undefined,\n              }\n    );\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            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n\n    /**\n     * Anchors are activated by Enter but not Space. When rendered as a link, replicate a native\n     * click on Space so keyboard activation matches the native button variant and the WAI-ARIA\n     * button/menuitem pattern. Native `<button>` handles Space itself, so it is excluded.\n     */\n    const onSpacebarKeydown = (e: KeyboardEvent) => {\n        if (props.link === undefined || props.disabled) {\n            return;\n        }\n\n        e.preventDefault();\n        (e.currentTarget as HTMLElement | null)?.click();\n    };\n\n    const onFocusButton = (e: FocusEvent) => {\n        emit('focus', e);\n    };\n\n    const onBlurButton = (e: FocusEvent) => {\n        emit('blur', e);\n    };\n\n    defineExpose({\n        bentoBaseButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * Renders a native `<button>` by default. When a `link` object is provided, the root element is rendered as a\n     * `BentoLink` (an anchor / router-link) instead, while keeping the same visual structure and styling. A disabled\n     * link is rendered as a `<span>` with the appropriate ARIA attributes.\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: [BaseButtonEvent.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 {\n        name: 'base-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","bentoBaseButtonRef","ref","componentType","computed","props","BentoLink","ariaAttributes","componentProps","BentoLinkVariant","conditionalClasses","onClickButton","emit","onSpacebarKeydown","onFocusButton","onBlurButton","expose"],"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;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1HAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,SAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAGXC,IAAAH,EAAA,OAAA;AAAA,MAAuC,iBAAAT,EAAA,eAAA,GAAA,SAAA;AAAA,IACe,EAAA,GAGtDa,IAAAJ;AAAA,MAAuB,MAAAC,EAAA,SAAA,SAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAI,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAJ,EAAA,WAAA,SAAA;AAAA,QAOiC,MAAAA,EAAA,WAAAV,EAAA,QAAA,SAAA;AAAA,MACiB;AAAA,IAChE,GAGVe,IAAAN,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAd,EAAA,WAAA,EAAA,GAAAe,EAAA;AAAA,MAC2B,CAAA,kBAAAf,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA;AAAA,IACD,EAAA,GAGrEc,IAAA,CAAA,MAAA;AACI,MAAAN,EAAA,YACI,EAAA,eAAA,GACA,EAAA,gBAAA,KAEAO,EAAA,SAAA,CAAA;AAAA,IACJ,GAQJC,IAAA,CAAA,MAAA;AACI,MAAAR,EAAA,SAAA,UAAAA,EAAA,aAIA,EAAA,eAAA,GACA,EAAA,eAAA,MAAA;AAAA,IAA+C,GAGnDS,IAAA,CAAA,MAAA;AACI,MAAAF,EAAA,SAAA,CAAA;AAAA,IAAe,GAGnBG,IAAA,CAAA,MAAA;AACI,MAAAH,EAAA,QAAA,CAAA;AAAA,IAAc;AAGlB,WAAAI,EAAA;AAAA,MAAa,oBAAAf;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.CcmoTJdc.js → base-modal._-Cc6jfi.js}

@@ -1,15 +1,15 @@
 import { useAttrs as q, defineComponent as I, useSlots as W, ref as u, computed as l, inject as Q, watch as G, nextTick as X, onUnmounted as Z, onMounted as V, provide as O, toRefs as tt } from "vue";
-import { B as et } from "./button.DII5Ifwa.js";
+import { B as et } from "./button.tsTeQRcP.js";
 import { B as at } from "./focus-trap.fd6_d2EW.js";
 import { u as j } from "./use-has-slot.C9lQZ6nz.js";
 import { u as ot } from "./index.CPOlyau9.js";
-import { l as st } from "./button-actions.bkcLUE1G.js";
+import { l as st } from "./button-actions.CdetBz3J.js";
 import { g as nt } from "./generate-uid.DBWe4g6T.js";
 import { C as lt } from "./cross.szJ_ZUTI.js";
 import { B as it, D as rt, a as ct } from "./dialog-page.keys.Dym9e6k3.js";
-import { B as ut } from "./typography.D1OZJbEa.js";
-import { F as dt } from "./footer-actions.C9STwwcv.js";
-import { D as mt } from "./dialog-page.Bct3zOQO.js";
+import { B as ut } from "./typography.Cd386LC_.js";
+import { F as dt } from "./footer-actions.B8f-gEQV.js";
+import { D as mt } from "./dialog-page.DORdXmEm.js";
 import { o as pt } from "./resize.Bqks3WUm.js";
 import { a as ft, G as gt } from "./grid-layout.BeCrjPgT.js";
 import { n as H } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -309,4 +309,4 @@ export {
   bt as g,
   Xt as h
 };
-//# sourceMappingURL=base-modal.CcmoTJdc.js.map
+//# sourceMappingURL=base-modal._-Cc6jfi.js.map

package/dist/chunks/{base-modal.CcmoTJdc.js.map → base-modal._-Cc6jfi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-modal.CcmoTJdc.js","sources":["../../src/composables/use-attribute-routing/use-attribute-routing.ts","../../src/components/modal/modal.types.ts","../../src/components/modal/modal.keys.ts","../../src/components/modal/components/modal-page/modal-page.vue","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { type SetupContext, useAttrs } from 'vue';\n\nexport type Attributes = SetupContext['attrs'];\n\nexport interface AttributeRouting {\n    getAriaAttributes: (attrs?: Attributes) => Attributes;\n    getRootAttributes: (attrs?: Attributes) => Attributes;\n}\n\n/**\n * Routes ARIA attributes away from a component root to its semantic element.\n *\n * @returns Functions that return ARIA and root attribute groups.\n */\nexport const useAttributeRouting = (): AttributeRouting => {\n    const attrs = useAttrs();\n\n    const filterAttrs = (attrsArg: Attributes, shouldInclude: (key: string) => boolean): Attributes =>\n        Object.fromEntries(Object.entries(attrsArg).filter(([key]) => shouldInclude(key)));\n\n    return {\n        getAriaAttributes: overrideAttrs => filterAttrs(overrideAttrs ?? attrs, key => key.startsWith('aria-')),\n        getRootAttributes: overrideAttrs => filterAttrs(overrideAttrs ?? attrs, key => !key.startsWith('aria-')),\n    };\n};\n","/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'default',\n    DIALOG = 'dialog',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoModalVariantMapping {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n    <dialog-page\n        ref=\"page\"\n        class=\"b-modal-page\"\n        :class=\"modalPageConditionalClasses\"\n        :page-id=\"pageId\"\n        :always-show-border=\"hasColumnLayout\"\n        :back-button-styling=\"customPaddingStyles?.backButton\"\n        :previous-page=\"previousPage\"\n        @animationend=\"isAnimationActive = false\"\n    >\n        <template v-if=\"hasSlot('default') || showCloseButton\" #header>\n            <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n                <div class=\"b-modal-page__header\">\n                    <bento-typography class=\"b-modal-page__title\" el=\"span\" variant=\"title\" stronger>\n                        <slot v-if=\"hasSlot('default')\" />\n                    </bento-typography>\n                </div>\n            </div>\n        </template>\n\n        <template #content>\n            <div\n                class=\"b-modal-page__content\"\n                :class=\"modalContentConditionalClasses\"\n                :style=\"customPaddingStyles.content\"\n            >\n                <bento-typography\n                    v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                    el=\"div\"\n                >\n                    <grid-layout\n                        v-if=\"hasColumnLayout\"\n                        :column-width=\"computedColumnWidth\"\n                        :container-type=\"GridLayoutContainerType.NORMAL\"\n                        no-gap\n                        class=\"b-modal-page__grid\"\n                    >\n                        <template #col-1><slot name=\"content-col-1\"></slot></template>\n                        <template #col-2><slot name=\"content-col-2\"></slot></template>\n                    </grid-layout>\n                    <slot v-else name=\"content\" />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"hasSlot('actions')\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n        </template>\n        <template v-else-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalSize } from '@/components/modal/modal.types';\n    import { type BentoModalConfigData } from '@/components/modal/modal.internal.types';\n    import { BentoTypography } from '@/components/typography';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n\n    import { FooterActions } from '@/components/internal/footer-actions';\n\n    import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import type { BentoModalPageProps } from './modal-page.types';\n\n    const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const page = ref<InstanceType<typeof DialogPage>>(null);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLabel: { default: null },\n  columnsSize: { default: BentoModalColumnLayoutVariant.SMALLER },\n  customPadding: { default: null },\n  destructiveActions: { type: Boolean, default: false },\n  withColumnLayout: { type: Boolean, default: false },\n  pageId: { default: undefined },\n  previousPage: { default: undefined }\n});\n\n    const modalPageConditionalClasses = computed(() => ({\n        'b-modal-page--custom-padding': props.customPadding,\n    }));\n\n    const modalContentConditionalClasses = computed(() => ({\n        'b-modal-page__content--with-header': hasSlot('default'),\n        'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length,\n    }));\n\n    // Setting custom padding styles\n    const customPaddingStyles = computed(() => {\n        if (!props.customPadding) {\n            return {};\n        }\n\n        const xPadding = {\n            paddingLeft: props.customPadding,\n            paddingRight: props.customPadding,\n        };\n\n        const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n        if (!hasSlot('default')) {\n            content.paddingTop = props.customPadding;\n        }\n\n        if (!hasSlot('actions')) {\n            content.paddingBottom = props.customPadding;\n        }\n\n        return {\n            header: {\n                ...xPadding,\n                paddingTop: props.customPadding,\n                paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n                flex: 1,\n            },\n            content,\n            actions: { ...xPadding, paddingBottom: props.customPadding },\n            backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n        };\n    });\n\n    // Column layout styles\n    const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n    const computedColumnWidth = computed(() => {\n        if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n            return [\n                { small: 4, medium: 4, large: 4 },\n                { small: 8, medium: 8, large: 8 },\n            ];\n        }\n        if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n            return [\n                { small: 8, medium: 8, large: 8 },\n                { small: 4, medium: 4, large: 4 },\n            ];\n        }\n        return [\n            { small: 6, medium: 6, large: 6 },\n            { small: 6, medium: 6, large: 6 },\n        ];\n    });\n\n    // Register page to parent component and inject data from parent component\n    const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n        inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n    const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value);\n\n    // Animation\n    // Set resize observer on mount of update the height of the dialog on resize\n    let pageElementObserver: ResizeObserver | null = null;\n\n    // Watching activePage changes to set the height of the page and set isAnimationActive\n    watch(\n        () => activePage.value,\n        async (value, oldValue) => {\n            if (isCurrentPage.value) {\n                await nextTick();\n                height.value = `${page.value?.$el?.clientHeight}px`;\n                pageCustomPadding.value = props.customPadding;\n                // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n                isAnimationActive.value = oldValue !== undefined;\n\n                pageElementObserver = observeSizeOfElement(page.value, () => {\n                    const pageHeight = `${page.value?.$el?.clientHeight}px`;\n                    if (pageHeight && pageHeight !== height.value) {\n                        height.value = pageHeight;\n                    }\n                });\n            }\n        },\n        { immediate: true }\n    );\n\n    // Disconnect observer on unmounting the page\n    onUnmounted(() => {\n        pageElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalPage is used to render different pages of the Modal component\n     *\n     * @example\n     * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModal, BentoModalPage },\n     *     template: `\n     *          <bento-modal active-page='page1' :is-open='true'>\n     *              <bento-modal-page\n     *                  pageId='page1'\n     *                  actions-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1\n     *                  <template #content>\n     *                         Page 1 content\n     *                  </template>\n     *              </bento-modal-page>\n     *              <bento-modal-page\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2\n     *                  <template #content>\n     *                         Page 2 content\n     *                  </template>\n     *              </bento-modal-page>\n     *          </bento-modal>\n     *     `\n     * }\n     */\n    export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n    <div v-bind=\"getRootAttributes($attrs)\" class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"$attrs?.['aria-label'] ?? t('ariaLabelFallback')\"\n            :style=\"{ height: height }\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap\n                v-if=\"isOpen || initiallyOpen\"\n                :id=\"modalId\"\n                v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n            >\n                <bento-button\n                    v-if=\"showCloseButton\"\n                    class=\"b-modal-base__close-button\"\n                    variant=\"tertiary\"\n                    type=\"button\"\n                    :style=\"customPaddingStyles\"\n                    @click=\"internalModalActionClose\"\n                >\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n                <template v-if=\"props.activePage\">\n                    <slot />\n                </template>\n                <bento-modal-page\n                    v-else\n                    :with-column-layout=\"withColumnLayout\"\n                    :size=\"size\"\n                    :custom-padding=\"customPadding\"\n                    :columns-size=\"columnsSize\"\n                >\n                    <template v-if=\"hasSlot('default')\" #default>\n                        <slot></slot>\n                    </template>\n                    <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n                        ><slot name=\"content-col-1\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n                        ><slot name=\"content-col-2\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n                    <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n                </bento-modal-page>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalRole, BentoModalSize } from '@/components/modal/modal.types';\n    import { type BentoModalConfigData } from '@/components/modal/modal.internal.types';\n    import { BentoButton, type BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { useAttributeRouting, useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import messages from './messages.json';\n\n    import { BentoModalPage } from '@/components/modal/components/modal-page';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const { getRootAttributes } = useAttributeRouting();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const modal = ref<HTMLDialogElement>(null);\n    const isClosing = ref(false);\n    const modalId = generateUid('modal');\n\n    const emit = defineEmits([\"update:active-page\", \"close-modal\"]);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoModalPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: { type: Boolean, default: false },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, required: true },\n\n        /**\n         * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n         */\n        initiallyOpen: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed by clicking outside of it\n         */\n        isDismissible: { type: Boolean, required: true },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: { type: Boolean, required: true },\n\n        /**\n         * Defines whether the modal will be an alert modal\n         */\n        modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n        /**\n         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n        },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n    });\n\n    const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n    const pageCustomPadding = ref(props.customPadding);\n\n    const customPaddingStyles = computed(() => {\n        if (!pageCustomPadding.value) {\n            return {};\n        }\n\n        return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n    });\n\n    const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n    const openModal = (): void => {\n        modal.value.showModal();\n    };\n\n    const emitCloseEvent = (): void => {\n        emit('close-modal');\n    };\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value && modal.value) {\n            modal.value.close();\n            if (previousPages.value[0]) {\n                emit('update:active-page', previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emitCloseEvent();\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * If the user has pressed escape, clicked outside or clicked the close icon.\n     * Needs to be called from outside, following the \"dialog.close()\" pattern,\n     * when the closing event is triggered outside of the \"base-modal\"\n     * component (e.g. from a closing action).\n     */\n    const internalModalActionClose = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n            return;\n        }\n        startCloseModalAnimation();\n    };\n\n    const closeModalOnClickOutside = () => {\n        if (props.isDismissible) {\n            internalModalActionClose();\n        }\n    };\n\n    const modalConditionalClasses = computed(() => ({\n        [`b-modal-base__container--${props.size}`]: props.size,\n        'b-modal-base__container--hide': isClosing.value,\n        'b-modal-base__container--column-layout': hasColumnLayout.value,\n        'b-modal-base__container--animation': isAnimationActive.value,\n    }));\n\n    watch(\n        () => [props.isOpen, modal.value],\n        ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n            if (!newModalValue) {\n                return;\n            }\n\n            const isFirstMutation = !oldModalValue;\n            if (newIsOpen) {\n                openModal();\n                // add the first page to the array when the modal opens\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (!isFirstMutation) {\n                startCloseModalAnimation();\n            }\n        }\n    );\n\n    // If the first button is a loading button then close the modal have 0.5 seconds\n    // if the state is changed to 'success'.\n    watch(\n        () => props.actions,\n        () => {\n            if (props.actions?.[0]?.state === 'success') {\n                setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n            }\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        if (props.isOpen && modal.value) {\n            openModal();\n        }\n    });\n\n    /**\n     * Expose methods through its 'ref'\n     */\n    defineExpose({\n        internalModalActionClose,\n    });\n\n    // Let's Children components know they are inside a Modal (dialog element)\n    provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n    // Modal pagination\n    const { activePage, isOpen, size } = toRefs(props);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n    const pages = ref<Array<string>>([]);\n    const previousPages = ref([]);\n\n    const updatePage = page => emit('update:active-page', page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        if (pageId) {\n            pages.value.push(pageId);\n        }\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    const height = ref('');\n    const isAnimationActive = ref(false);\n\n    provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n        activePage,\n        height,\n        isAnimationActive,\n        pageCustomPadding,\n        showCloseButton,\n        size,\n    });\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dialog container. It creates a dialog HTML element for the modal to use.\n     *\n     * @example\n     * import BaseModal from './components/base-modal/base-modal.vue';\n     *\n     * export default {\n     *     components: { BaseModal },\n     *     template: `\n     *          <base-modal\n     *              :hide-close-button=\"true\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              <template #content-col-1>\n     *                  // Content on the left side column\n     *              </template>\n     *\n     *              <template #content-col-2>\n     *                  // Content on the right side column\n     *              </template>\n     *\n     *              <template v-if=\"actions\" #actions>\n     *                  <footer-actions :actions=\"actions\" />\n     *              </template>\n     *          </base-modal>\n     *     `,\n     *     setup() {\n     *          const isOpen = ref(true)\n     *          const  footerActions =  [{\n     *              title: 'Primary action',\n     *              event: () => { ... }\n     *          }]\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["useAttributeRouting","attrs","useAttrs","filterAttrs","attrsArg","shouldInclude","key","overrideAttrs","BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","CLOSE_BUTTON_ICON_WIDTH","slots","useSlots","hasSlot","useHasSlot","page","ref","modalPageConditionalClasses","computed","props","modalContentConditionalClasses","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","t","useI18n","getRootAttributes","modal","isClosing","modalId","generateUid","openModal","emitCloseEvent","emit","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}
+{"version":3,"file":"base-modal._-Cc6jfi.js","sources":["../../src/composables/use-attribute-routing/use-attribute-routing.ts","../../src/components/modal/modal.types.ts","../../src/components/modal/modal.keys.ts","../../src/components/modal/components/modal-page/modal-page.vue","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { type SetupContext, useAttrs } from 'vue';\n\nexport type Attributes = SetupContext['attrs'];\n\nexport interface AttributeRouting {\n    getAriaAttributes: (attrs?: Attributes) => Attributes;\n    getRootAttributes: (attrs?: Attributes) => Attributes;\n}\n\n/**\n * Routes ARIA attributes away from a component root to its semantic element.\n *\n * @returns Functions that return ARIA and root attribute groups.\n */\nexport const useAttributeRouting = (): AttributeRouting => {\n    const attrs = useAttrs();\n\n    const filterAttrs = (attrsArg: Attributes, shouldInclude: (key: string) => boolean): Attributes =>\n        Object.fromEntries(Object.entries(attrsArg).filter(([key]) => shouldInclude(key)));\n\n    return {\n        getAriaAttributes: overrideAttrs => filterAttrs(overrideAttrs ?? attrs, key => key.startsWith('aria-')),\n        getRootAttributes: overrideAttrs => filterAttrs(overrideAttrs ?? attrs, key => !key.startsWith('aria-')),\n    };\n};\n","/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'default',\n    DIALOG = 'dialog',\n}\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoModalVariantMapping {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n    <dialog-page\n        ref=\"page\"\n        class=\"b-modal-page\"\n        :class=\"modalPageConditionalClasses\"\n        :page-id=\"pageId\"\n        :always-show-border=\"hasColumnLayout\"\n        :back-button-styling=\"customPaddingStyles?.backButton\"\n        :previous-page=\"previousPage\"\n        @animationend=\"isAnimationActive = false\"\n    >\n        <template v-if=\"hasSlot('default') || showCloseButton\" #header>\n            <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n                <div class=\"b-modal-page__header\">\n                    <bento-typography class=\"b-modal-page__title\" el=\"span\" variant=\"title\" stronger>\n                        <slot v-if=\"hasSlot('default')\" />\n                    </bento-typography>\n                </div>\n            </div>\n        </template>\n\n        <template #content>\n            <div\n                class=\"b-modal-page__content\"\n                :class=\"modalContentConditionalClasses\"\n                :style=\"customPaddingStyles.content\"\n            >\n                <bento-typography\n                    v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                    el=\"div\"\n                >\n                    <grid-layout\n                        v-if=\"hasColumnLayout\"\n                        :column-width=\"computedColumnWidth\"\n                        :container-type=\"GridLayoutContainerType.NORMAL\"\n                        no-gap\n                        class=\"b-modal-page__grid\"\n                    >\n                        <template #col-1><slot name=\"content-col-1\"></slot></template>\n                        <template #col-2><slot name=\"content-col-2\"></slot></template>\n                    </grid-layout>\n                    <slot v-else name=\"content\" />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"hasSlot('actions')\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n        </template>\n        <template v-else-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalSize } from '@/components/modal/modal.types';\n    import { type BentoModalConfigData } from '@/components/modal/modal.internal.types';\n    import { BentoTypography } from '@/components/typography';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n\n    import { FooterActions } from '@/components/internal/footer-actions';\n\n    import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import type { BentoModalPageProps } from './modal-page.types';\n\n    const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const page = ref<InstanceType<typeof DialogPage>>(null);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLabel: { default: null },\n  columnsSize: { default: BentoModalColumnLayoutVariant.SMALLER },\n  customPadding: { default: null },\n  destructiveActions: { type: Boolean, default: false },\n  withColumnLayout: { type: Boolean, default: false },\n  pageId: { default: undefined },\n  previousPage: { default: undefined }\n});\n\n    const modalPageConditionalClasses = computed(() => ({\n        'b-modal-page--custom-padding': props.customPadding,\n    }));\n\n    const modalContentConditionalClasses = computed(() => ({\n        'b-modal-page__content--with-header': hasSlot('default'),\n        'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length,\n    }));\n\n    // Setting custom padding styles\n    const customPaddingStyles = computed(() => {\n        if (!props.customPadding) {\n            return {};\n        }\n\n        const xPadding = {\n            paddingLeft: props.customPadding,\n            paddingRight: props.customPadding,\n        };\n\n        const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n        if (!hasSlot('default')) {\n            content.paddingTop = props.customPadding;\n        }\n\n        if (!hasSlot('actions')) {\n            content.paddingBottom = props.customPadding;\n        }\n\n        return {\n            header: {\n                ...xPadding,\n                paddingTop: props.customPadding,\n                paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n                flex: 1,\n            },\n            content,\n            actions: { ...xPadding, paddingBottom: props.customPadding },\n            backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n        };\n    });\n\n    // Column layout styles\n    const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n    const computedColumnWidth = computed(() => {\n        if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n            return [\n                { small: 4, medium: 4, large: 4 },\n                { small: 8, medium: 8, large: 8 },\n            ];\n        }\n        if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n            return [\n                { small: 8, medium: 8, large: 8 },\n                { small: 4, medium: 4, large: 4 },\n            ];\n        }\n        return [\n            { small: 6, medium: 6, large: 6 },\n            { small: 6, medium: 6, large: 6 },\n        ];\n    });\n\n    // Register page to parent component and inject data from parent component\n    const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n        inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n    const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value);\n\n    // Animation\n    // Set resize observer on mount of update the height of the dialog on resize\n    let pageElementObserver: ResizeObserver | null = null;\n\n    // Watching activePage changes to set the height of the page and set isAnimationActive\n    watch(\n        () => activePage.value,\n        async (value, oldValue) => {\n            if (isCurrentPage.value) {\n                await nextTick();\n                height.value = `${page.value?.$el?.clientHeight}px`;\n                pageCustomPadding.value = props.customPadding;\n                // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n                isAnimationActive.value = oldValue !== undefined;\n\n                pageElementObserver = observeSizeOfElement(page.value, () => {\n                    const pageHeight = `${page.value?.$el?.clientHeight}px`;\n                    if (pageHeight && pageHeight !== height.value) {\n                        height.value = pageHeight;\n                    }\n                });\n            }\n        },\n        { immediate: true }\n    );\n\n    // Disconnect observer on unmounting the page\n    onUnmounted(() => {\n        pageElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalPage is used to render different pages of the Modal component\n     *\n     * @example\n     * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModal, BentoModalPage },\n     *     template: `\n     *          <bento-modal active-page='page1' :is-open='true'>\n     *              <bento-modal-page\n     *                  pageId='page1'\n     *                  actions-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1\n     *                  <template #content>\n     *                         Page 1 content\n     *                  </template>\n     *              </bento-modal-page>\n     *              <bento-modal-page\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2\n     *                  <template #content>\n     *                         Page 2 content\n     *                  </template>\n     *              </bento-modal-page>\n     *          </bento-modal>\n     *     `\n     * }\n     */\n    export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n    <div v-bind=\"getRootAttributes($attrs)\" class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"$attrs?.['aria-label'] ?? t('ariaLabelFallback')\"\n            :style=\"{ height: height }\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap\n                v-if=\"isOpen || initiallyOpen\"\n                :id=\"modalId\"\n                v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n            >\n                <bento-button\n                    v-if=\"showCloseButton\"\n                    class=\"b-modal-base__close-button\"\n                    variant=\"tertiary\"\n                    type=\"button\"\n                    :style=\"customPaddingStyles\"\n                    @click=\"internalModalActionClose\"\n                >\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n                <template v-if=\"props.activePage\">\n                    <slot />\n                </template>\n                <bento-modal-page\n                    v-else\n                    :with-column-layout=\"withColumnLayout\"\n                    :size=\"size\"\n                    :custom-padding=\"customPadding\"\n                    :columns-size=\"columnsSize\"\n                >\n                    <template v-if=\"hasSlot('default')\" #default>\n                        <slot></slot>\n                    </template>\n                    <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n                        ><slot name=\"content-col-1\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n                        ><slot name=\"content-col-2\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n                    <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n                </bento-modal-page>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalRole, BentoModalSize } from '@/components/modal/modal.types';\n    import { type BentoModalConfigData } from '@/components/modal/modal.internal.types';\n    import { BentoButton, type BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { useAttributeRouting, useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import messages from './messages.json';\n\n    import { BentoModalPage } from '@/components/modal/components/modal-page';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const { getRootAttributes } = useAttributeRouting();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const modal = ref<HTMLDialogElement>(null);\n    const isClosing = ref(false);\n    const modalId = generateUid('modal');\n\n    const emit = defineEmits([\"update:active-page\", \"close-modal\"]);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoModalPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: { type: Boolean, default: false },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, required: true },\n\n        /**\n         * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n         */\n        initiallyOpen: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed by clicking outside of it\n         */\n        isDismissible: { type: Boolean, required: true },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: { type: Boolean, required: true },\n\n        /**\n         * Defines whether the modal will be an alert modal\n         */\n        modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n        /**\n         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n        },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n    });\n\n    const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n    const pageCustomPadding = ref(props.customPadding);\n\n    const customPaddingStyles = computed(() => {\n        if (!pageCustomPadding.value) {\n            return {};\n        }\n\n        return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n    });\n\n    const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n    const openModal = (): void => {\n        modal.value.showModal();\n    };\n\n    const emitCloseEvent = (): void => {\n        emit('close-modal');\n    };\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value && modal.value) {\n            modal.value.close();\n            if (previousPages.value[0]) {\n                emit('update:active-page', previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emitCloseEvent();\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * If the user has pressed escape, clicked outside or clicked the close icon.\n     * Needs to be called from outside, following the \"dialog.close()\" pattern,\n     * when the closing event is triggered outside of the \"base-modal\"\n     * component (e.g. from a closing action).\n     */\n    const internalModalActionClose = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n            return;\n        }\n        startCloseModalAnimation();\n    };\n\n    const closeModalOnClickOutside = () => {\n        if (props.isDismissible) {\n            internalModalActionClose();\n        }\n    };\n\n    const modalConditionalClasses = computed(() => ({\n        [`b-modal-base__container--${props.size}`]: props.size,\n        'b-modal-base__container--hide': isClosing.value,\n        'b-modal-base__container--column-layout': hasColumnLayout.value,\n        'b-modal-base__container--animation': isAnimationActive.value,\n    }));\n\n    watch(\n        () => [props.isOpen, modal.value],\n        ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n            if (!newModalValue) {\n                return;\n            }\n\n            const isFirstMutation = !oldModalValue;\n            if (newIsOpen) {\n                openModal();\n                // add the first page to the array when the modal opens\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (!isFirstMutation) {\n                startCloseModalAnimation();\n            }\n        }\n    );\n\n    // If the first button is a loading button then close the modal have 0.5 seconds\n    // if the state is changed to 'success'.\n    watch(\n        () => props.actions,\n        () => {\n            if (props.actions?.[0]?.state === 'success') {\n                setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n            }\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        if (props.isOpen && modal.value) {\n            openModal();\n        }\n    });\n\n    /**\n     * Expose methods through its 'ref'\n     */\n    defineExpose({\n        internalModalActionClose,\n    });\n\n    // Let's Children components know they are inside a Modal (dialog element)\n    provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n    // Modal pagination\n    const { activePage, isOpen, size } = toRefs(props);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n    const pages = ref<Array<string>>([]);\n    const previousPages = ref([]);\n\n    const updatePage = page => emit('update:active-page', page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        if (pageId) {\n            pages.value.push(pageId);\n        }\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    const height = ref('');\n    const isAnimationActive = ref(false);\n\n    provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n        activePage,\n        height,\n        isAnimationActive,\n        pageCustomPadding,\n        showCloseButton,\n        size,\n    });\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dialog container. It creates a dialog HTML element for the modal to use.\n     *\n     * @example\n     * import BaseModal from './components/base-modal/base-modal.vue';\n     *\n     * export default {\n     *     components: { BaseModal },\n     *     template: `\n     *          <base-modal\n     *              :hide-close-button=\"true\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              <template #content-col-1>\n     *                  // Content on the left side column\n     *              </template>\n     *\n     *              <template #content-col-2>\n     *                  // Content on the right side column\n     *              </template>\n     *\n     *              <template v-if=\"actions\" #actions>\n     *                  <footer-actions :actions=\"actions\" />\n     *              </template>\n     *          </base-modal>\n     *     `,\n     *     setup() {\n     *          const isOpen = ref(true)\n     *          const  footerActions =  [{\n     *              title: 'Primary action',\n     *              event: () => { ... }\n     *          }]\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["useAttributeRouting","attrs","useAttrs","filterAttrs","attrsArg","shouldInclude","key","overrideAttrs","BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","CLOSE_BUTTON_ICON_WIDTH","slots","useSlots","hasSlot","useHasSlot","page","ref","modalPageConditionalClasses","computed","props","modalContentConditionalClasses","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","t","useI18n","getRootAttributes","modal","isClosing","modalId","generateUid","openModal","emitCloseEvent","emit","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}

package/dist/chunks/{button-actions-with-menu.BY394ars.js → button-actions-with-menu.1vZJWN1K.js}

@@ -1,5 +1,5 @@
 import { ref as _, watch as m, nextTick as v, defineComponent as h, toRef as b, computed as f, provide as A } from "vue";
-import { M as w, d as y, f as B, B as C } from "./button-actions.bkcLUE1G.js";
+import { M as w, d as y, f as B, B as C } from "./button-actions.CdetBz3J.js";
 import { b as M } from "./index.CL3TXc0a.js";
 import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button-actions-with-menu.css";
@@ -74,4 +74,4 @@ const S = k.exports;
 export {
   S as B
 };
-//# sourceMappingURL=button-actions-with-menu.BY394ars.js.map
+//# sourceMappingURL=button-actions-with-menu.1vZJWN1K.js.map

package/dist/chunks/{button-actions-with-menu.BY394ars.js.map → button-actions-with-menu.1vZJWN1K.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.BY394ars.js","sources":["../../src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = defineProps({\n  actions: null,\n  actionsLayout: { default: 'buttons-end' },\n  disableResponsiveBehavior: { type: Boolean, default: false },\n  displayedActions: { default: undefined },\n  inverse: { type: Boolean, default: false },\n  hideDisplayedActionsBreakpoint: { default: 0 },\n  menuPosition: { default: 'bottom-start' }\n});\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        {\n     *          title: 'Primary',\n     *          event: () => { ... },\n     *          icon: FourPeopleIcon,\n     *          link: {\n     *              variant: 'default',\n     *              external: true,\n     *              to: 'https://www.adyen.com/'\n     *          },\n     *        },\n     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,GC6CIa,IAAA,CAAA;;;;;;;;;;;;;iBAnFAC,IAAAC,EAAAtB,GAAA,SAAA,GACAuB,IAAAf,EAAA,IAAA,GACAgB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,EAAA,GAEAkB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA5B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA4B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAjB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAuB;AAAA,MACP,qBAAAD,EAAAtB,GAAA,kBAAA;AAAA,MACyC,QAAA6B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEArB,EAAA,6BACI8B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA3B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAAyB,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIpB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAmC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.1vZJWN1K.js","sources":["../../src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: Ref<number>;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref(defaultActionsCount.value);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n            displayedActionsCount.value += 1;\n\n            await showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            await hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            await showActions();\n        } else {\n            await hideActions();\n        }\n    });\n\n    watch(defaultActionsCount, async count => {\n        displayedActionsCount.value = count;\n\n        if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n            await hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions } from '@/components/button';\n    import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = defineProps({\n  actions: null,\n  actionsLayout: { default: 'buttons-end' },\n  disableResponsiveBehavior: { type: Boolean, default: false },\n  displayedActions: { default: undefined },\n  inverse: { type: Boolean, default: false },\n  hideDisplayedActionsBreakpoint: { default: 0 },\n  menuPosition: { default: 'bottom-start' }\n});\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: toRef(props, 'displayedActions'),\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() => {\n        if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n            return [];\n        }\n\n        const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n        return actionsToProcess.flatMap<BentoMenuItem>(action => {\n            if (!action.data) {\n                return {\n                    text: action.title,\n                    handler: () => action.event?.({} as Event),\n                    icon: action.icon,\n                    critical: action.critical,\n                    disabled: action.disabled,\n                };\n            }\n\n            return action.data;\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        {\n     *          title: 'Primary',\n     *          event: () => { ... },\n     *          icon: FourPeopleIcon,\n     *          link: {\n     *              variant: 'default',\n     *              external: true,\n     *              to: 'https://www.adyen.com/'\n     *          },\n     *        },\n     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\n     * />\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,GC6CIa,IAAA,CAAA;;;;;;;;;;;;;iBAnFAC,IAAAC,EAAAtB,GAAA,SAAA,GACAuB,IAAAf,EAAA,IAAA,GACAgB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,EAAA,GAEAkB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA5B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA4B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAjB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAuB;AAAA,MACP,qBAAAD,EAAAtB,GAAA,kBAAA;AAAA,MACyC,QAAA6B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEArB,EAAA,6BACI8B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA3B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAAyB,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIpB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAmC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions.bkcLUE1G.js → button-actions.CdetBz3J.js}

@@ -1,5 +1,5 @@
 import { defineComponent as y, useSlots as L, computed as f, onMounted as M, onUnmounted as U, useAttrs as se, inject as I, getCurrentInstance as oe, ref as d, watch as V, nextTick as N, toRef as K, provide as ae } from "vue";
-import { B as v } from "./button.DII5Ifwa.js";
+import { B as v } from "./button.tsTeQRcP.js";
 import { B as ie } from "./loading-indicator.PxbRzshH.js";
 import { C as re } from "./cross-circle-fill.D3dEmLeQ.js";
 import { C as le } from "./checkmark-circle-fill.Ds9Mwqpi.js";
@@ -9,16 +9,16 @@ import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { i as G } from "./index.Cl4_42j5.js";
 import { B as Y, D as ue } from "./divider.KxXy6nzJ.js";
 import { C as ce } from "./cross.szJ_ZUTI.js";
-import { B as J, c as D, p as de } from "./typography.D1OZJbEa.js";
+import { B as J, c as D, p as de } from "./typography.Cd386LC_.js";
 import { a as fe, P as pe, b as me } from "./popper-container.Cj3AWXSd.js";
 import { o as _e } from "./on-click-outside.BgIzQ2G1.js";
 import { g as ve } from "./generate-uid.DBWe4g6T.js";
 import { C as ye } from "./chevron-down.B_QiVCoO.js";
 /* empty css              */
 import { C as he, a as F } from "./chevron-left.BdXFLX5u.js";
-import { a as $, B as be } from "./base-button.DOhHyU7x.js";
+import { a as $, B as be } from "./base-button.DYroENBg.js";
 import { t as ge } from "./truncate.DmCXQmeb.js";
-import { E as Ce } from "./link.Cls8XShm.js";
+import { E as Ce } from "./link.iNnolG9W.js";
 import { o as ke } from "./resize.Bqks3WUm.js";
 import { g as Ie } from "./es6.yPcTMnSH.js";
 import "../assets/button-actions.css";
@@ -36,10 +36,10 @@ const Be = {
   "pt-BR": { failed: "Falhou", succeded: "Bem-sucedido" },
   "zh-CN": { failed: "失败", succeded: "成功" }
 }, Oe = {
-  i18n: { messages: Be }
+  i18n: { messages: Be },
+  name: "bento-loading-button"
 }, Se = /* @__PURE__ */ y({
   ...Oe,
-  __name: "loading-button",
   props: {
     /**
      * Reduces sizing of button
@@ -119,7 +119,7 @@ var xe = function() {
   Ee,
   !1,
   null,
-  "bc74b2f7"
+  "c34147b2"
 );
 const Me = Le.exports, we = {}, Te = /* @__PURE__ */ y({
   ...we,
@@ -1084,4 +1084,4 @@ export {
   H as l,
   Je as u
 };
-//# sourceMappingURL=button-actions.bkcLUE1G.js.map
+//# sourceMappingURL=button-actions.CdetBz3J.js.map