@adyen/bento-vue3 1.67.0 → 1.68.0

package/dist/chunks/{search-bar.a-jzP1UA.js → search-bar.CpQ_MEVj.js}

@@ -1,8 +1,8 @@
 import { defineComponent as A, provide as P, toRef as T, useAttrs as F, ref as p, watch as N, createElementBlock as S, openBlock as y, createVNode as l, mergeProps as g, unref as t, createSlots as L, withCtx as m, createElementVNode as U, withKeys as f } from "vue";
 import { d as k } from "./debounce.DUTu11PS.js";
 import { u as K } from "./i18n.B6g5VX0q.js";
-import { I as R } from "./dropdown.B5ZaFDn_.js";
-import { B as w } from "./input-field.DExw_Cow.js";
+import { I as R } from "./dropdown.CJBk1euy.js";
+import { B as w } from "./input-field.CmV2d_Zc.js";
 import { S as x } from "./search.PczW-onY.js";
 import { C as D } from "./cross-circle-fill.CYLL7jfC.js";
 import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -111,4 +111,4 @@ export {
   h as a,
   B as b
 };
-//# sourceMappingURL=search-bar.a-jzP1UA.js.map
+//# sourceMappingURL=search-bar.CpQ_MEVj.js.map

package/dist/chunks/{search-bar.a-jzP1UA.js.map → search-bar.CpQ_MEVj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.a-jzP1UA.js","sources":["../../../vue2/src/components/search-bar/search-bar.types.ts","../../../vue2/src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n\nexport interface BentoSearchBarProps {\n    /**\n     * Text that labels an the search bar input element\n     */\n    inputFieldAriaLabel: string;\n\n    /**\n     * Reduces height of the search bar. Default: false\n     */\n    condensed?: boolean;\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * Text displayed as a hint when the field is not empty\n     */\n    hint?: string;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Text displayed as the value being searched\n     */\n    value?: string;\n}\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-bind=\"attrs\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, ref, toRef, useAttrs, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent, BentoSearchBarProps } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoSearchBarProps>(), {\n        condensed: false,\n        debounceTime: 300,\n        hint: '',\n        placeholder: '',\n        value: undefined,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the \"clear search\" button is clicked\n         */\n        (e: 'clear'): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed inside the Search Bar input\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n    }>();\n\n    provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint'));\n\n    const attrs = useAttrs();\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","t","useI18n","props","__props","emit","__emit","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","debouncedEmit","debounce","onInputEvent","value","__expose"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;kCCqKRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;AA7HA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAQAC,IAAAC;AA2BA,IAAAC,EAAAC,GAAAC,EAAAN,GAAA,MAAA,CAAA;AAEA,UAAAO,IAAAC,EAAA,GACAC,IAAAC,EAAAV,EAAA,KAAA,GACAW,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAZ,EAAA;AAAA,MACgB,MAAA;AAER,QAAAS,EAAA,QAAAT,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAa,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAP,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBY,IAAAC,EAAA,MAAA;AACI,MAAAb,EAAA,SAAAO,EAAA,KAAA;AAAA,IAA8B,GAAAT,EAAA,YAAA,GAGlCgB,IAAA,CAAAC,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAH,EAAA;AAAA,IAAc;AAQlB,WAAAI,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OALb,MAAA;AACI,QAAAP,EAAA,MAAA,WAAA;AAAA,MAAiC;AAAA,IAQjC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-bar.CpQ_MEVj.js","sources":["../../../vue2/src/components/search-bar/search-bar.types.ts","../../../vue2/src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n\nexport interface BentoSearchBarProps {\n    /**\n     * Text that labels an the search bar input element\n     */\n    inputFieldAriaLabel: string;\n\n    /**\n     * Reduces height of the search bar. Default: false\n     */\n    condensed?: boolean;\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * Text displayed as a hint when the field is not empty\n     */\n    hint?: string;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Text displayed as the value being searched\n     */\n    value?: string;\n}\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-bind=\"attrs\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, ref, toRef, useAttrs, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent, BentoSearchBarProps } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoSearchBarProps>(), {\n        condensed: false,\n        debounceTime: 300,\n        hint: '',\n        placeholder: '',\n        value: undefined,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the \"clear search\" button is clicked\n         */\n        (e: 'clear'): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed inside the Search Bar input\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n    }>();\n\n    provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint'));\n\n    const attrs = useAttrs();\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","t","useI18n","props","__props","emit","__emit","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","debouncedEmit","debounce","onInputEvent","value","__expose"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;kCCqKRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;AA7HA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAQAC,IAAAC;AA2BA,IAAAC,EAAAC,GAAAC,EAAAN,GAAA,MAAA,CAAA;AAEA,UAAAO,IAAAC,EAAA,GACAC,IAAAC,EAAAV,EAAA,KAAA,GACAW,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAZ,EAAA;AAAA,MACgB,MAAA;AAER,QAAAS,EAAA,QAAAT,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAa,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAP,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBY,IAAAC,EAAA,MAAA;AACI,MAAAb,EAAA,SAAAO,EAAA,KAAA;AAAA,IAA8B,GAAAT,EAAA,YAAA,GAGlCgB,IAAA,CAAAC,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAH,EAAA;AAAA,IAAc;AAQlB,WAAAI,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OALb,MAAA;AACI,QAAAP,EAAA,MAAA,WAAA;AAAA,MAAiC;AAAA,IAQjC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{secondary-nav.UrmIAVGD.js → secondary-nav.RTBLEukC.js}

@@ -1,5 +1,5 @@
 import { defineComponent as g, inject as E, computed as u, createElementBlock as s, openBlock as a, normalizeClass as O, createVNode as f, unref as t, withCtx as I, createTextVNode as B, toDisplayString as V, createElementVNode as T, Fragment as w, renderList as N, ref as x, readonly as L, watch as M, provide as j, createBlock as y } from "vue";
-import { B as F } from "./dropdown.B5ZaFDn_.js";
+import { B as F } from "./dropdown.CJBk1euy.js";
 import { g as q } from "./index.FNUaPG4G.js";
 import { u as z } from "./i18n.B6g5VX0q.js";
 import { B as Q } from "./es6.n1ewaW31.js";
@@ -135,4 +135,4 @@ const C = Symbol("secondary nav state"), R = ["aria-selected"], U = {}, Y = /* @
 export {
   ie as s
 };
-//# sourceMappingURL=secondary-nav.UrmIAVGD.js.map
+//# sourceMappingURL=secondary-nav.RTBLEukC.js.map

package/dist/chunks/{secondary-nav.UrmIAVGD.js.map → secondary-nav.RTBLEukC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.UrmIAVGD.js","sources":["../../../vue2/src/components/secondary-nav/secondary-nav.keys.ts","../../../vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../../vue2/src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../../vue2/src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" :aria-selected=\"isItemSelected\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': isItemSelected.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","props","__props","isItemSelected","computed","conditionalClasses","emit","__emit","onClick","e","__default__$1","__default__","messages","t","useI18n","isMobile","useBreakpoints","BMediaQuerySMax","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,0BC8CTC,IAAA,CAAA;;;;;;;;;AApCA,UAAA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,GAWAC,IAAAC,EAAA,MAAAN,EAAA,UAAAG,EAAA,KAAA,GAEAI,IAAAD,EAAA,OAAA;AAAA,MAA2C,gCAAAD,EAAA;AAAA,IACQ,EAAA,GAGnDG,IAAAC,GAOAC,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,SAAAG,CAAA,GACAV,EAAAE,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;;;8HCPrCS,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsFAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;AAvFA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAMAG,IAJAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,EAGP,eAAA,GAAA,GACAhB,IAAAC,GAaAI,IAAAC,GAOAW,IAAAd,EAAA,MAAAH,EAAA,MAAA,KAAA,CAAAkB,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAhB,EAAA,MAAAH,EAAA,KAAA,GAEAoB,IAAAjB,EAAA,MAAA;AACI,YAAAkB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJxB,IAAAyB,EAAAtB,EAAA,SAAAoB,EAAA,KAAA,GACAtB,IAAA,CAAAyB,MAAA;AACI,MAAA1B,EAAA,QAAA0B,GACAlB,EAAA,UAAAkB,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAA5B,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAA4B;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACgB,CAAAuB,MAAA;AAER,QAAA1B,EAAA,QAAA0B;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAAhC,GAAA6B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"secondary-nav.RTBLEukC.js","sources":["../../../vue2/src/components/secondary-nav/secondary-nav.keys.ts","../../../vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../../vue2/src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../../vue2/src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" :aria-selected=\"isItemSelected\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': isItemSelected.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","props","__props","isItemSelected","computed","conditionalClasses","emit","__emit","onClick","e","__default__$1","__default__","messages","t","useI18n","isMobile","useBreakpoints","BMediaQuerySMax","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,0BC8CTC,IAAA,CAAA;;;;;;;;;AApCA,UAAA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,GAWAC,IAAAC,EAAA,MAAAN,EAAA,UAAAG,EAAA,KAAA,GAEAI,IAAAD,EAAA,OAAA;AAAA,MAA2C,gCAAAD,EAAA;AAAA,IACQ,EAAA,GAGnDG,IAAAC,GAOAC,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,SAAAG,CAAA,GACAV,EAAAE,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;;;8HCPrCS,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsFAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;AAvFA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAMAG,IAJAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,EAGP,eAAA,GAAA,GACAhB,IAAAC,GAaAI,IAAAC,GAOAW,IAAAd,EAAA,MAAAH,EAAA,MAAA,KAAA,CAAAkB,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAhB,EAAA,MAAAH,EAAA,KAAA,GAEAoB,IAAAjB,EAAA,MAAA;AACI,YAAAkB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJxB,IAAAyB,EAAAtB,EAAA,SAAAoB,EAAA,KAAA,GACAtB,IAAA,CAAAyB,MAAA;AACI,MAAA1B,EAAA,QAAA0B,GACAlB,EAAA,UAAAkB,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAA5B,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAA4B;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACgB,CAAAuB,MAAA;AAER,QAAA1B,EAAA,QAAA0B;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAAhC,GAAA6B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{sidepanel.BuNmgmpj.js → sidepanel.DPN__L3Q.js}

@@ -1,6 +1,6 @@
 import { defineComponent as S, createBlock as T, openBlock as f, unref as t, createSlots as K, withCtx as n, createElementVNode as E, createVNode as c, renderSlot as O, createTextVNode as J, toDisplayString as Y, toRefs as M, ref as i, computed as C, watch as j, nextTick as z, provide as A, createElementBlock as D, withKeys as H, normalizeClass as q, withModifiers as Q, withDirectives as W, createCommentVNode as X } from "vue";
 import { B as y, d as Z } from "./typography.DN5eC5ch.js";
-import { F as ee } from "./footer-actions.CdJLLWNR.js";
+import { F as ee } from "./footer-actions.Bje-DDqw.js";
 import { D as te, B as se, b as ae, a as ie } from "./dialog-page.C80HOigq.js";
 import { _ as N } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { B as ne } from "./button.AB0SOQMn.js";
@@ -251,4 +251,4 @@ export {
   ke as a,
   Ge as s
 };
-//# sourceMappingURL=sidepanel.BuNmgmpj.js.map
+//# sourceMappingURL=sidepanel.DPN__L3Q.js.map

package/dist/chunks/{sidepanel.BuNmgmpj.js.map → sidepanel.DPN__L3Q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.BuNmgmpj.js","sources":["../../../vue2/src/components/sidepanel/components/sidepanel-page.vue","../../../vue2/src/components/sidepanel/sidepanel.types.ts","../../../vue2/src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n        <template #header>\n            <div class=\"b-sidepanel-page__header\">\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-sidepanel-page__content\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-sidepanel-page__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 { PropType } from 'vue';\n\n    import { BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import { DialogPage } from '@/internal';\n\n    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         *\n         * ```\n         * [{\n         *   title: 'Primary',\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         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap :id=\"sidepanelId\" v-bento-click-outside-directive=\"closeSidepanelOnClickOutside\">\n            <div v-if=\"!computedHideCloseButton\" class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { BentoSidepanelEvent } from './sidepanel.types';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed.\n         * Shows close button when `true` and hides close button when `false`.\n         *\n         * _Note: This property will not set the visibility of the close button in v2.0.0_\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel.\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n\n        /**\n         * Controls the visibility of close button on the sidepanel.\n         * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`.\n         *\n         * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_\n         */\n        hideCloseButton: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n    const internalIsOpen = ref(false);\n    const isAnimationActive = ref(false);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n        'b-sidepanel--animation': isAnimationActive.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = () => {\n        if (isClosing.value) {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = () => {\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    const closeSidepanelOnClickOutside = () => {\n        if (props.isDismissible) {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`.\n    const computedHideCloseButton = computed(() => {\n        if (props.hideCloseButton !== null) {\n            return props.hideCloseButton;\n        }\n\n        return !props.isDismissible;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Pages\n    const updatePage = page => emit(BentoSidepanelEvent.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        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isAnimationActive,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    // Let's Children components know they are inside a SidePanel (dialog element)\n    provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n\n    if (!props.isDismissible && props.hideCloseButton === null) {\n        deprecate(\n            'BentoSidepanel \"isDismissible\" property’s behavior',\n            'BentoSidepanel \"isDismissible\" will no longer hide the close button. Use \"hideCloseButton=true\" instead.',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","props","__props","emit","__emit","activePage","isOpen","toRefs","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","isAnimationActive","conditionalClasses","computed","closeSidepanelAfterAnimation","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","watch","nextTick","updatePage","page","unregisterPage","pageIdToRemove","_a","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","deprecate"],"mappings":";;;;;;;;;;;;;4IA2IIA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IQ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,qBAAA,sBACAA,EAAA,iBAAA,kBAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;GC6PRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhNA,UAAAC,IAAAC,GA0CAC,IAAAC,GAYA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAN,CAAA,GACA,EAAA,GAAAO,EAAA,IAAAC,GAAA,EAAA,UAAAT,EAAA,CAAA,GACAU,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,CAAA,CAAA,GACAE,IAAAF,EAAA,CAAA,CAAA,GACAG,IAAAH,EAAAI,GAAA,uBAAA,GACAC,IAAAL,EAAA,EAAA,GACAM,IAAAC,GAAA,WAAA,GACAC,IAAAR,EAAA,EAAA,GACAS,IAAAT,EAAA,EAAA,GAGAU,IAAAC,EAAA,OAAA;AAAA,MAA2C,qBAAAN,EAAA;AAAA,MACR,0BAAAI,EAAA;AAAA,IACa,EAAA,GAIhDG,IAAA,MAAA;AACI,MAAAP,EAAA,UACIN,EAAA,MAAA,MAAA,GACAG,EAAA,MAAA,CAAA,KACIV,EAAAN,EAAA,oBAAAgB,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAG,EAAA,QAAA,IACAG,EAAA,QAAA,IACAhB,EAAAN,EAAA,gBAAA,EAAA;AAAA,IACJ,GAGJ2B,IAAA,MAAA;AACI,MAAAd,EAAA,MAAA,SAGAM,EAAA,QAAA;AAAA,IAAkB,GAGtBS,IAAA,MAAA;AACI,MAAAxB,EAAA,iBACIuB,EAAA;AAAA,IACJ,GAIJE,IAAAJ,EAAA,MACIrB,EAAA,oBAAA,OACIA,EAAA,kBAGJ,CAAAA,EAAA,aAAc;AAIlB,IAAA0B;AAAA,MAAA,MAAArB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAsB,EAAA,GAEAlB,EAAA,UAIAJ,EAAA,SACIa,EAAA,QAAA,IACAT,EAAA,MAAA,UAAA,GACAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAR,EAAA,KAAA,KACJK,EAAA,MAAA,QAEAc,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAK,IAAA,CAAAC,MAAA3B,EAAAN,EAAA,oBAAAiC,CAAA,GAGAC,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAApB,EAAA,SAAAqB,IAAArB,EAAA,UAAA,gBAAAqB,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACItB,EAAA,MAAA,KAAAsB,CAAA,GAEA,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAE,EAAAC,IAAA;AAAA,MAAqE,YAAAhC;AAAA,MACjE,WAAAS;AAAA,MACA,mBAAAM;AAAA,MACA,QAAAD;AAAA,MACQ,OAAAP;AAAA,MACR,eAAAC;AAAA,MACA,YAAAgB;AAAA,IACA,CAAA,GAEJO,EAAAE,IAAAH,CAAA,GAGAC,EAAAG,IAAAtB,CAAA,GAEA,CAAAhB,EAAA,iBAAAA,EAAA,oBAAA,QACIuC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sidepanel.DPN__L3Q.js","sources":["../../../vue2/src/components/sidepanel/components/sidepanel-page.vue","../../../vue2/src/components/sidepanel/sidepanel.types.ts","../../../vue2/src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n        <template #header>\n            <div class=\"b-sidepanel-page__header\">\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-sidepanel-page__content\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-sidepanel-page__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 { PropType } from 'vue';\n\n    import { BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import { DialogPage } from '@/internal';\n\n    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         *\n         * ```\n         * [{\n         *   title: 'Primary',\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         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap :id=\"sidepanelId\" v-bento-click-outside-directive=\"closeSidepanelOnClickOutside\">\n            <div v-if=\"!computedHideCloseButton\" class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { BentoSidepanelEvent } from './sidepanel.types';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed.\n         * Shows close button when `true` and hides close button when `false`.\n         *\n         * _Note: This property will not set the visibility of the close button in v2.0.0_\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel.\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n\n        /**\n         * Controls the visibility of close button on the sidepanel.\n         * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`.\n         *\n         * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_\n         */\n        hideCloseButton: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n    const internalIsOpen = ref(false);\n    const isAnimationActive = ref(false);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n        'b-sidepanel--animation': isAnimationActive.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = () => {\n        if (isClosing.value) {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = () => {\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    const closeSidepanelOnClickOutside = () => {\n        if (props.isDismissible) {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`.\n    const computedHideCloseButton = computed(() => {\n        if (props.hideCloseButton !== null) {\n            return props.hideCloseButton;\n        }\n\n        return !props.isDismissible;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Pages\n    const updatePage = page => emit(BentoSidepanelEvent.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        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isAnimationActive,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    // Let's Children components know they are inside a SidePanel (dialog element)\n    provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n\n    if (!props.isDismissible && props.hideCloseButton === null) {\n        deprecate(\n            'BentoSidepanel \"isDismissible\" property’s behavior',\n            'BentoSidepanel \"isDismissible\" will no longer hide the close button. Use \"hideCloseButton=true\" instead.',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","props","__props","emit","__emit","activePage","isOpen","toRefs","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","isAnimationActive","conditionalClasses","computed","closeSidepanelAfterAnimation","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","watch","nextTick","updatePage","page","unregisterPage","pageIdToRemove","_a","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","deprecate"],"mappings":";;;;;;;;;;;;;4IA2IIA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IQ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,qBAAA,sBACAA,EAAA,iBAAA,kBAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;GC6PRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhNA,UAAAC,IAAAC,GA0CAC,IAAAC,GAYA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAN,CAAA,GACA,EAAA,GAAAO,EAAA,IAAAC,GAAA,EAAA,UAAAT,EAAA,CAAA,GACAU,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,CAAA,CAAA,GACAE,IAAAF,EAAA,CAAA,CAAA,GACAG,IAAAH,EAAAI,GAAA,uBAAA,GACAC,IAAAL,EAAA,EAAA,GACAM,IAAAC,GAAA,WAAA,GACAC,IAAAR,EAAA,EAAA,GACAS,IAAAT,EAAA,EAAA,GAGAU,IAAAC,EAAA,OAAA;AAAA,MAA2C,qBAAAN,EAAA;AAAA,MACR,0BAAAI,EAAA;AAAA,IACa,EAAA,GAIhDG,IAAA,MAAA;AACI,MAAAP,EAAA,UACIN,EAAA,MAAA,MAAA,GACAG,EAAA,MAAA,CAAA,KACIV,EAAAN,EAAA,oBAAAgB,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAG,EAAA,QAAA,IACAG,EAAA,QAAA,IACAhB,EAAAN,EAAA,gBAAA,EAAA;AAAA,IACJ,GAGJ2B,IAAA,MAAA;AACI,MAAAd,EAAA,MAAA,SAGAM,EAAA,QAAA;AAAA,IAAkB,GAGtBS,IAAA,MAAA;AACI,MAAAxB,EAAA,iBACIuB,EAAA;AAAA,IACJ,GAIJE,IAAAJ,EAAA,MACIrB,EAAA,oBAAA,OACIA,EAAA,kBAGJ,CAAAA,EAAA,aAAc;AAIlB,IAAA0B;AAAA,MAAA,MAAArB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAsB,EAAA,GAEAlB,EAAA,UAIAJ,EAAA,SACIa,EAAA,QAAA,IACAT,EAAA,MAAA,UAAA,GACAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAR,EAAA,KAAA,KACJK,EAAA,MAAA,QAEAc,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAK,IAAA,CAAAC,MAAA3B,EAAAN,EAAA,oBAAAiC,CAAA,GAGAC,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAApB,EAAA,SAAAqB,IAAArB,EAAA,UAAA,gBAAAqB,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACItB,EAAA,MAAA,KAAAsB,CAAA,GAEA,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAE,EAAAC,IAAA;AAAA,MAAqE,YAAAhC;AAAA,MACjE,WAAAS;AAAA,MACA,mBAAAM;AAAA,MACA,QAAAD;AAAA,MACQ,OAAAP;AAAA,MACR,eAAAC;AAAA,MACA,YAAAgB;AAAA,IACA,CAAA,GAEJO,EAAAE,IAAAH,CAAA,GAGAC,EAAAG,IAAAtB,CAAA,GAEA,CAAAhB,EAAA,iBAAAA,EAAA,oBAAA,QACIuC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{summary-grid.types.CoSCUI1V.js → summary-grid.types.CjbbSZBJ.js}

@@ -4,7 +4,7 @@ import { S as X, a as V } from "./summary-grid.keys.CxTf_FOc.js";
 import { G as x } from "./grid-layout.BTLE3rac.js";
 import { _ as E } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { u as ee } from "./i18n.B6g5VX0q.js";
-import { B as te } from "./dashed-underline.DgE-UB-x.js";
+import { B as te } from "./dashed-underline.DkzQkpaf.js";
 import { B as oe } from "./info-icon.DprUQ9fj.js";
 import { B as N } from "./typography.DN5eC5ch.js";
 import { B as A } from "./tag.D3in0-Bp.js";
@@ -207,7 +207,7 @@ const ie = { class: "b-summary-grid" }, re = {}, le = /* @__PURE__ */ b({
       })) : C("", !0)
     ], 6));
   }
-}), D = /* @__PURE__ */ E(ue, [["__scopeId", "data-v-64de14b8"]]), ce = { class: "b-summary-grid-item-amount__content" }, pe = {
+}), D = /* @__PURE__ */ E(ue, [["__scopeId", "data-v-8dd0be85"]]), ce = { class: "b-summary-grid-item-amount__content" }, pe = {
   key: 0,
   class: "b-summary-grid-item-amount__secondary-label"
 }, me = {}, fe = /* @__PURE__ */ b({
@@ -273,7 +273,7 @@ const ie = { class: "b-summary-grid" }, re = {}, le = /* @__PURE__ */ b({
       } : void 0
     ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-popover-size", "underline-tooltip-text"]));
   }
-}), Ne = /* @__PURE__ */ E(fe, [["__scopeId", "data-v-6d10929e"]]), ye = {}, Ee = /* @__PURE__ */ b({
+}), Ne = /* @__PURE__ */ E(fe, [["__scopeId", "data-v-2128dfb7"]]), ye = {}, Ee = /* @__PURE__ */ b({
   ...ye,
   __name: "summary-grid-item-numeric",
   props: {
@@ -487,4 +487,4 @@ export {
   be as e,
   Be as s
 };
-//# sourceMappingURL=summary-grid.types.CoSCUI1V.js.map
+//# sourceMappingURL=summary-grid.types.CjbbSZBJ.js.map

package/dist/chunks/summary-grid.types.CjbbSZBJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-grid.types.CjbbSZBJ.js","sources":["../../../vue2/src/components/summary-grid/summary-grid.vue","../../../vue2/src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../../vue2/src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../../vue2/src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../../vue2/src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../../vue2/src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../../vue2/src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../../vue2/src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = withDefaults(defineProps<BentoSummaryGridProps>(), {\n        columnWidth: null,\n        slashedZero: false,\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" @click=\"$emit('copy-click', $event)\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                    @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'copy-click', event: MouseEvent): void;\n\n        /**\n         * Emitted when the mouse pointer enters the info icon component.\n         */\n        (e: 'info-icon-mouseenter', event: MouseEvent): void;\n    }>();\n\n    const props = withDefaults(defineProps<BentoSummaryGridItemProps>(), {\n        copy: undefined,\n        fitContent: false,\n        infoIconTooltipText: null,\n        itemType: 'custom',\n        secondaryTrend: null,\n        secondaryTrendDirection: 'positive',\n        size: 'small',\n        trend: null,\n        trendDirection: 'positive',\n        underlinePopoverSize: 'fit-content',\n        underlineTooltipText: null,\n    });\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'copy-click', event: MouseEvent): void;\n\n        /**\n         * Emitted when the mouse pointer enters the info icon component.\n         */\n        (e: 'info-icon-mouseenter', event: MouseEvent): void;\n    }>();\n\n    withDefaults(defineProps<BentoSummaryGridItemAmountProps>(), {\n        copy: undefined,\n        fitContent: false,\n        infoIconTooltipText: null,\n        secondaryLabel: null,\n        secondaryMetric: null,\n        secondaryTrend: null,\n        secondaryTrendDirection: 'positive',\n        size: 'small',\n        trend: null,\n        trendDirection: 'positive',\n        underlinePopoverSize: 'fit-content',\n        underlineTooltipText: null,\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'copy-click', event: MouseEvent): void;\n\n        /**\n         * Emitted when the mouse pointer enters the info icon component.\n         */\n        (e: 'info-icon-mouseenter', event: MouseEvent): void;\n    }>();\n\n    withDefaults(defineProps<BentoSummaryGridItemNumericProps>(), {\n        copy: undefined,\n        fitContent: false,\n        infoIconTooltipText: null,\n        secondaryMetric: null,\n        secondaryTrend: null,\n        secondaryTrendDirection: 'positive',\n        size: 'small',\n        trend: null,\n        trendDirection: 'positive',\n        underlinePopoverSize: 'fit-content',\n        underlineTooltipText: null,\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ computedLabelPercentage }}\n        <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n    import type { NumberFormatOptions } from 'vue-i18n';\n\n    const { locale } = useI18n();\n\n    defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'copy-click', event: MouseEvent): void;\n\n        /**\n         * Emitted when the mouse pointer enters the info icon component.\n         */\n        (e: 'info-icon-mouseenter', event: MouseEvent): void;\n    }>();\n\n    const props = withDefaults(defineProps<BentoSummaryGridItemPercentageProps>(), {\n        copy: undefined,\n        fitContent: false,\n        infoIconTooltipText: null,\n        secondaryMetric: null,\n        secondaryTrend: null,\n        secondaryTrendDirection: 'positive',\n        size: 'small',\n        trend: null,\n        trendDirection: 'positive',\n        underlinePopoverSize: 'fit-content',\n        underlineTooltipText: null,\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const percentageArgs: NumberFormatOptions = {\n        style: 'percent',\n        maximumFractionDigits: 2,\n    };\n\n    const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value));\n    const convertToPercentIfNumber = (value: string | number) => {\n        if (value && isNumeric(value)) {\n            return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n        }\n        return value;\n    };\n\n    const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n    const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: {},\n    };\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'copy-click', event: MouseEvent): void;\n\n        /**\n         * Emitted when the mouse pointer enters the info icon component.\n         */\n        (e: 'info-icon-mouseenter', event: MouseEvent): void;\n    }>();\n\n    withDefaults(defineProps<BentoSummaryGridItemTextProps>(), {\n        copy: undefined,\n        fitContent: false,\n        infoIconTooltipText: null,\n        underlinePopoverSize: 'fit-content',\n        underlineTooltipText: null,\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'copy-click', event: MouseEvent): void;\n\n        /**\n         * Emitted when the mouse pointer enters the info icon component.\n         */\n        (e: 'info-icon-mouseenter', event: MouseEvent): void;\n    }>();\n\n    withDefaults(defineProps<BentoSummaryGridItemCustomProps>(), {\n        copy: undefined,\n        infoIconTooltipText: null,\n        fitContent: false,\n        underlinePopoverSize: 'fit-content',\n        underlineTooltipText: null,\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","props","__props","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":";;;;;;;;;;;;wCAgGIA,KAAA,CAAA;;;;;;;;;AAxDA,UAAAC,IAAAC,GAKAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;AAEA,QAAAI,IAAA;AACA,QAAAJ,GAAA;AACI,YAAAK,KAAAC,KAAAC,IAAA,OAAA,KAAAP,CAAA,MAAA,gBAAAO,EAAA,OAAA,CAAAC,MAAAA,EAAA,SAAA,OAAA,OAAA,gBAAAF,EAAA,IAAA,CAAAE,MAAA;;AAAA,yBAAAD,IAAAC,EAAA,MAAA,GAAA,MAAA,gBAAAD,EAAA,IAAA,EAAA;AAAA;AAGA,MAAAH,IAAA,KAAA,IAAA,GAAAC,CAAA;AAAA,IAAmC;AAGvC,WAAAI,EAAA,MAAA;AACI,UAAAL,IAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA,GAQJM,EAAAC,GALA,OAEI,EAAA,wBAAA,EAGJ,GACAD,EAAAE,GAAAC,EAAAf,GAAA,aAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uKCkGAgB,KAAA,CAAA;;;;;;;;;;;;;;;;;;;AA3EA,UAAAhB,IAAAC,GAcA,EAAA,gBAAAgB,GAAA,yBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAArB,CAAA,GACAsB,IAAAC,EAAAT,GAAAU,EAAA,EAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,cAAAA,GAAA;AAAA,QAAmB,KAAA;AAEX,iBAAA;AAAA,QAAO,KAAA;AAEP,iBAAA;AAAA,QAAO;AAEP,iBAAA;AAAA,MAAO;AAAA,IACf,GAIJC,IAAAC,EAAA,MAAAH,EAAAR,EAAA,KAAA,CAAA,GACAY,IAAAD,EAAA,MAAAH,EAAAP,EAAA,KAAA,CAAA,GAEAY,IAAAF,EAAA,MACIR,EAAA,UAAA,UACI,SAEJD,EAAA,UAAA,SACI,UAGJ,IAAO,GAGXY,IAAAH,EAAA,OAAA;AAAA,MAAwC,QAAAR,EAAA,UAAA;AAAA,MACb,WAAAA,EAAA,UAAA;AAAA,MACG,MAAAA,EAAA,UAAA;AAAA,MACL,SAAAU,EAAA;AAAA,IACa,EAAA,GAGtCE,IAAAJ,EAAA,MAAA5B,EAAA,aAAA,EAAA,OAAA,cAAA,IAAA,CAAA,CAAA,GAEAiC,IAAAL,EAAA,OAAA,EAAA,qCAAAN,EAAA,MAAA,EAAA,GAEApB,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAgC,IAAAN,EAAA,MAAA5B,EAAA,wBAAAI,EAAA,kBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC3DA+B,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AA1BA,UAAAjC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oECoBAkC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;AAzBA,UAAAlC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IC0CAmC,KAAA;AAAA,EAAe,MAAA,CAAA;AAEf;;;;;;;;;;;;;;;;;;;;AAvEA,UAAA,EAAA,QAAAC,EAAA,IAAAC,GAAA,GAcAvC,IAAAC,GAcAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAsC,IAAA;AAAA,MAA4C,OAAA;AAAA,MACjC,uBAAA;AAAA,IACgB,GAG3BC,IAAA,CAAAC,MAAAA,KAAA,QAAAA,MAAA,MAAA,CAAA,MAAA,OAAAA,CAAA,CAAA,GACAC,IAAA,CAAAD,MACIA,KAAAD,EAAAC,CAAA,IACI,IAAA,KAAA,aAAAJ,EAAA,OAAAE,CAAA,EAAA,OAAA,OAAAE,CAAA,IAAA,GAAA,IAEJA,GAGJE,IAAAhB,EAAA,MAAAe,EAAA3C,EAAA,KAAA,CAAA,GACA6C,IAAAjB,EAAA,MAAAe,EAAA3C,EAAA,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICVA8C,KAAA,CAAA;;;;;;;;;;;;;;AAtBA,UAAA5C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ICgBA6C,KAAA,CAAA;;;;;;;;;;;;;AApBA,UAAA7C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;ACxCQ,IAAA8C,KAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,MAAA,CAAA,CAAA,GASAE,KAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WAHQA,IAAAD,MAAA,CAAA,CAAA;"}

package/dist/chunks/{textarea.DXSe9MHH.js → textarea.BBhN67-I.js}

@@ -1,12 +1,12 @@
-import { defineComponent as pe, useAttrs as he, toRefs as F, ref as b, toRef as ye, computed as n, watch as N, nextTick as ge, onMounted as xe, onUnmounted as Le, createElementBlock as M, openBlock as c, normalizeClass as L, createElementVNode as k, normalizeStyle as T, createVNode as B, createBlock as h, createCommentVNode as v, unref as l, withCtx as E, createTextVNode as Y, toDisplayString as z, withKeys as O } from "vue";
+import { defineComponent as pe, useAttrs as he, toRefs as F, ref as v, toRef as ye, computed as n, watch as N, nextTick as ge, onMounted as xe, onUnmounted as Le, createElementBlock as M, openBlock as c, normalizeClass as L, createElementVNode as k, normalizeStyle as T, createVNode as B, createBlock as h, createCommentVNode as b, unref as l, withCtx as E, createTextVNode as q, toDisplayString as Y, withKeys as O } from "vue";
 import { B as Ee } from "./button.AB0SOQMn.js";
 import { B as P } from "./typography.DN5eC5ch.js";
 import { C as Ce } from "./cross-circle-fill-small.Dv5-PxwF.js";
-import { g as _e } from "./generate-uid.NJ8tVoha.js";
-import { o as q } from "./resize.Bqks3WUm.js";
-import { u as Ae } from "./aria-label.CaUURpnB.js";
-import { u as Se } from "./i18n.B6g5VX0q.js";
-import { u as Re } from "./use-form-layout-loading.D3lALhtC.js";
+import { g as Ae } from "./generate-uid.NJ8tVoha.js";
+import { o as z } from "./resize.Bqks3WUm.js";
+import { u as Se } from "./aria-label.CaUURpnB.js";
+import { u as Re } from "./i18n.B6g5VX0q.js";
+import { u as _e } from "./use-form-layout-loading.D3lALhtC.js";
 import { F as Ie, E as V } from "./error-message.DHMHq9bR.js";
 import { _ as Ne } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/textarea.css";
@@ -17,7 +17,7 @@ const G = {
     textarea: "textarea",
     yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
   }
-}, ke = ["id", "value", "aria-label", "aria-invalid", "readonly", "disabled", "placeholder"], Be = {
+}, ke = ["id", "value", "aria-label", "aria-invalid", "readonly", "required", "disabled", "placeholder"], Be = {
   key: 0,
   class: "b-textarea__clear-button"
 }, Oe = {
@@ -92,18 +92,18 @@ const G = {
     value: { type: String, default: "" }
   },
   setup(e, { expose: j, emit: Z }) {
-    const J = he(), a = e, s = Z, { height: d } = F(a), D = _e("textarea"), r = b(null), m = b(null), o = b(a.value), C = 44, p = b(a.height || `${C}px`), _ = b("100%");
+    const J = he(), a = e, s = Z, { height: d } = F(a), D = Ae("textarea"), r = v(null), m = v(null), o = v(a.value), C = 44, p = v(a.height || `${C}px`), A = v("100%");
     let y = null, g = null;
-    const { t: H, n: K } = Se({ messages: G }), { isReadOnly: x } = Re(ye(a, "readonly")), Q = n(() => {
+    const { t: H, n: K } = Re({ messages: G }), { isReadOnly: x } = _e(ye(a, "readonly")), Q = n(() => {
       var t;
       return `${K(((t = o == null ? void 0 : o.value) == null ? void 0 : t.length) ?? 0)} / ${K(a.characterLimit)}`;
-    }), A = n(
+    }), S = n(
       () => a.characterLimit && o.value.length > a.characterLimit
-    ), S = () => {
+    ), R = () => {
       r.value && r.value.scrollHeight > C && (p.value = `${r.value.scrollHeight + 3}px`);
     };
     N(d, () => {
-      d.value ? p.value = d.value : S();
+      d.value ? p.value = d.value : R();
     }), N(
       () => a.value,
       () => {
@@ -117,12 +117,12 @@ const G = {
         if (!d.value && (!r.value || ((t = r.value) == null ? void 0 : t.scrollHeight) > ((u = r.value) == null ? void 0 : u.clientHeight))) {
           if (p.value = `${C}px`, !o.value)
             return;
-          await ge(), S();
+          await ge(), R();
         }
       },
       { immediate: !0 }
     );
-    const w = n(() => !!a.errorMessage || A.value), X = n(() => ({
+    const w = n(() => !!a.errorMessage || S.value), X = n(() => ({
       [`b-textarea--${f.DISABLED}`]: a.disabled
     })), ee = n(() => ({
       [`b-textarea__input--${f.CLEARABLE}`]: a.clearable,
@@ -132,12 +132,12 @@ const G = {
     })), ae = n(() => ({
       "b-textarea__label-box--no-label": !a.label
     })), te = n(() => ({
-      [`b-textarea__label-item--${f.ERROR}`]: A.value
-    })), le = n(() => H("yourTextCanBenAtMost", { characterLimit: a.characterLimit })), re = b(J["aria-label"]), { ariaLabel: oe, label: R } = F(a), ie = Ae({
+      [`b-textarea__label-item--${f.ERROR}`]: S.value
+    })), le = n(() => H("yourTextCanBenAtMost", { characterLimit: a.characterLimit })), re = v(J["aria-label"]), { ariaLabel: oe, label: _ } = F(a), ie = Se({
       ariaLabel: re.value,
       // TODO: take this line away when the aria-label props is removed
       label: oe,
-      defaultFallback: R
+      defaultFallback: _
     }), se = n(
       () => a.clearable && o.value && !a.disabled && !x.value
     ), I = () => {
@@ -150,9 +150,9 @@ const G = {
       r.value.focus(), s(i.FOCUS);
     }, de = () => {
       s(i.CHANGE);
-    }, be = () => {
+    }, ve = () => {
       s(i.ESCAPE_PRESSED);
-    }, ve = (t) => {
+    }, be = (t) => {
       t.stopPropagation(), s(i.KEYDOWN, t);
     }, fe = (t) => {
       t.stopPropagation(), s(i.KEYUP, t);
@@ -162,18 +162,18 @@ const G = {
       if (r.value.style.height && (p.value = r.value.style.height), t && !u)
         return;
       const me = ($ = m == null ? void 0 : m.value) == null ? void 0 : $.offsetWidth;
-      !u || parseInt(u, 10) > me ? _.value = "100%" : _.value = u;
+      !u || parseInt(u, 10) > me ? A.value = "100%" : A.value = u;
     };
     return j({
       focus: () => {
         r.value.focus();
       }
     }), xe(() => {
-      y = q(r.value, () => {
+      y = z(r.value, () => {
         W(!0);
-      }), g = q(m.value, () => {
+      }), g = z(m.value, () => {
         W();
-      }), d.value || S();
+      }), d.value || R();
     }), Le(() => {
       y == null || y.disconnect(), g == null || g.disconnect();
     }), (t, u) => (c(), M("div", {
@@ -182,29 +182,29 @@ const G = {
       class: L(["b-textarea", X.value])
     }, [
       k("div", {
-        style: T({ width: _.value })
+        style: T({ width: A.value })
       }, [
         k("div", {
           class: L(["b-textarea__label-box", ae.value])
         }, [
-          l(R) ? (c(), h(l(Ie), {
+          l(_) ? (c(), h(l(Ie), {
             key: 0,
             for: l(D),
-            label: l(R),
+            label: l(_),
             "tooltip-text": e.tooltipText,
             optional: e.optional,
             required: e.required
-          }, null, 8, ["for", "label", "tooltip-text", "optional", "required"])) : v("", !0),
+          }, null, 8, ["for", "label", "tooltip-text", "optional", "required"])) : b("", !0),
           e.characterLimit ? (c(), h(l(P), {
             key: 1,
             el: "span",
             class: L(["b-textarea__label-item", te.value])
           }, {
             default: E(() => [
-              Y(z(Q.value), 1)
+              q(Y(Q.value), 1)
             ]),
             _: 1
-          }, 8, ["class"])) : v("", !0)
+          }, 8, ["class"])) : b("", !0)
         ], 2),
         B(l(P), {
           el: "div",
@@ -221,6 +221,7 @@ const G = {
               "aria-label": l(ie),
               "aria-invalid": w.value,
               readonly: l(x),
+              required: e.required,
               disabled: e.disabled,
               placeholder: e.placeholder,
               style: T({ resize: e.resizable, height: p.value }),
@@ -229,8 +230,8 @@ const G = {
               onFocus: ce,
               onInput: ne,
               onKeydown: [
-                O(be, ["esc"]),
-                ve
+                O(ve, ["esc"]),
+                be
               ],
               onKeyup: fe
             }, "                ", 46, ke),
@@ -249,33 +250,33 @@ const G = {
                 ]),
                 _: 1
               }, 8, ["disabled"])
-            ])) : v("", !0)
+            ])) : b("", !0)
           ]),
           _: 1
         }, 8, ["aria-disabled"]),
-        A.value ? (c(), h(l(V), {
+        S.value ? (c(), h(l(V), {
           key: 0,
           "error-message": le.value
-        }, null, 8, ["error-message"])) : v("", !0),
+        }, null, 8, ["error-message"])) : b("", !0),
         e.errorMessage ? (c(), h(l(V), {
           key: 1,
           "error-message": e.errorMessage
-        }, null, 8, ["error-message"])) : v("", !0),
+        }, null, 8, ["error-message"])) : b("", !0),
         e.description ? (c(), h(l(P), {
           key: 2,
           class: "b-textarea__description",
           el: "span"
         }, {
           default: E(() => [
-            Y(z(e.description), 1)
+            q(Y(e.description), 1)
           ]),
           _: 1
-        })) : v("", !0)
+        })) : b("", !0)
       ], 4)
     ], 2));
   }
-}), qe = /* @__PURE__ */ Ne(Pe, [["__scopeId", "data-v-f7d9b105"]]);
+}), ze = /* @__PURE__ */ Ne(Pe, [["__scopeId", "data-v-16eae629"]]);
 export {
-  qe as B
+  ze as B
 };
-//# sourceMappingURL=textarea.DXSe9MHH.js.map
+//# sourceMappingURL=textarea.BBhN67-I.js.map