@adyen/bento-vue3 1.40.0 → 1.41.0

package/dist/chunks/{search-bar.DN-QKFlJ.js → search-bar.D_4u91te.js}

@@ -1,8 +1,8 @@
 import { defineComponent as S, provide as E, toRef as g, useAttrs as A, ref as p, watch as P, openBlock as T, createElementBlock as N, createVNode as n, mergeProps as F, unref as s, createSlots as x, withCtx as m, createElementVNode as L, withKeys as f } from "vue";
 import { d as U } from "./debounce.DUTu11PS.js";
 import { u as k } from "./i18n.CPGoe9tN.js";
-import { B as K } from "./input-field.DbeVnbwg.js";
-import { I as R } from "./dropdown.DBxpqjEM.js";
+import { B as K } from "./input-field.Bk2p3kIb.js";
+import { I as R } from "./dropdown.CMKdLPHi.js";
 import { S as w } from "./search.EnLryD8V.js";
 import { C as D } from "./cross-circle-fill.DN5b3_eL.js";
 import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -129,4 +129,4 @@ export {
   h as a,
   B as b
 };
-//# sourceMappingURL=search-bar.DN-QKFlJ.js.map
+//# sourceMappingURL=search-bar.D_4u91te.js.map

package/dist/chunks/{search-bar.DN-QKFlJ.js.map → search-bar.D_4u91te.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.DN-QKFlJ.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","<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, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\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    import { useAttrs } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Text that labels an the search bar input element\n         */\n        inputFieldAriaLabel: { type: String, required: true },\n\n        /**\n         * Reduces height of the search bar\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Text displayed as a hint when the field is not empty\n         */\n        hint: { type: String, default: '' },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Text displayed as the value being searched\n         */\n        value: { type: String, default: 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;;;;;;;;;;;;;;kCC8LRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArJA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAgCAC,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.D_4u91te.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","<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, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\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    import { useAttrs } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Text that labels an the search bar input element\n         */\n        inputFieldAriaLabel: { type: String, required: true },\n\n        /**\n         * Reduces height of the search bar\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Text displayed as a hint when the field is not empty\n         */\n        hint: { type: String, default: '' },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Text displayed as the value being searched\n         */\n        value: { type: String, default: 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;;;;;;;;;;;;;;kCC8LRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArJA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAgCAC,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.C-7Qq6rE.js → secondary-nav.CQ3aLyrM.js}

@@ -1,8 +1,8 @@
 import { defineComponent as f, inject as E, computed as v, openBlock as a, createElementBlock as s, normalizeClass as O, createVNode as y, unref as t, withCtx as I, createTextVNode as V, toDisplayString as w, createElementVNode as T, Fragment as B, renderList as N, ref as x, readonly as L, watch as M, provide as j, createBlock as b } from "vue";
-import { B as F } from "./dropdown.DBxpqjEM.js";
-import { b as q } from "./index.DKQuLmwu.js";
+import { B as F } from "./dropdown.CMKdLPHi.js";
+import { d as q } from "./index.ChdIlujs.js";
 import { u as z } from "./i18n.CPGoe9tN.js";
-import { d as Q } from "./es6.BvpG4Oi6.js";
+import { d as Q } from "./es6.b4enG1py.js";
 import { B as C } from "./typography.DNzU41ah.js";
 import { _ as g } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/secondary-nav.css";
@@ -134,4 +134,4 @@ const S = Symbol("secondary nav state"), R = {}, U = /* @__PURE__ */ f({
 export {
   ce as s
 };
-//# sourceMappingURL=secondary-nav.C-7Qq6rE.js.map
+//# sourceMappingURL=secondary-nav.CQ3aLyrM.js.map

package/dist/chunks/{secondary-nav.C-7Qq6rE.js.map → secondary-nav.CQ3aLyrM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.C-7Qq6rE.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\" @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 conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.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","conditionalClasses","computed","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,GC4CTC,IAAA,CAAA;;;;;;;;;AAlCA,UAAA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,GAWAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAN,EAAA,UAAAG,EAAA;AAAA,IACyB,EAAA,GAGpEI,IAAAC,GAOAC,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,SAAAG,CAAA,GACAT,EAAAE,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;;8HCLrCQ,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,GACAf,IAAAC,GAaAG,IAAAC,GAOAW,IAAAb,EAAA,MAAAH,EAAA,MAAA,KAAA,CAAAiB,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAf,EAAA,MAAAH,EAAA,KAAA,GAEAmB,IAAAhB,EAAA,MAAA;AACI,YAAAiB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJvB,IAAAwB,EAAArB,EAAA,SAAAmB,EAAA,KAAA,GACArB,IAAA,CAAAwB,MAAA;AACI,MAAAzB,EAAA,QAAAyB,GACAlB,EAAA,UAAAkB,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAA3B,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAA2B;AAAA,MAAA,MAAAzB,EAAA;AAAA,MACgB,CAAAsB,MAAA;AAER,QAAAzB,EAAA,QAAAyB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA/B,GAAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"secondary-nav.CQ3aLyrM.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\" @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 conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.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","conditionalClasses","computed","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,GC4CTC,IAAA,CAAA;;;;;;;;;AAlCA,UAAA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,GAWAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAN,EAAA,UAAAG,EAAA;AAAA,IACyB,EAAA,GAGpEI,IAAAC,GAOAC,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,SAAAG,CAAA,GACAT,EAAAE,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;;8HCLrCQ,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,GACAf,IAAAC,GAaAG,IAAAC,GAOAW,IAAAb,EAAA,MAAAH,EAAA,MAAA,KAAA,CAAAiB,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAf,EAAA,MAAAH,EAAA,KAAA,GAEAmB,IAAAhB,EAAA,MAAA;AACI,YAAAiB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJvB,IAAAwB,EAAArB,EAAA,SAAAmB,EAAA,KAAA,GACArB,IAAA,CAAAwB,MAAA;AACI,MAAAzB,EAAA,QAAAyB,GACAlB,EAAA,UAAAkB,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAA3B,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAA2B;AAAA,MAAA,MAAAzB,EAAA;AAAA,MACgB,CAAAsB,MAAA;AAER,QAAAzB,EAAA,QAAAyB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA/B,GAAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/selection-card-group.Du3Cwf47.js

@@ -0,0 +1,474 @@
+import { defineComponent as ae, useSlots as le, computed as o, inject as re, ref as V, openBlock as i, createElementBlock as E, normalizeClass as k, createElementVNode as q, unref as t, renderSlot as y, createCommentVNode as $, withModifiers as ie, createBlock as f, withCtx as u, createTextVNode as Y, toDisplayString as Q, createVNode as de, watch as se, provide as ue, onMounted as ce, Fragment as Z, renderList as W, mergeProps as m, createSlots as F } from "vue";
+import { a as fe } from "./index.ChdIlujs.js";
+import { d as ve, e as ye } from "./es6.b4enG1py.js";
+import { B as I } from "./typography.DNzU41ah.js";
+import { a as be } from "./checkbox-input.D8ZUqd4m.js";
+import { u as me } from "./aria-label.CaUURpnB.js";
+import { g as H } from "./generate-uid.D-HFI38h.js";
+import { u as pe } from "./use-has-slot.B7eQSabc.js";
+import { a as he } from "./radio-input.DtvlM-mr.js";
+import { _ as te } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { C as ge } from "./controls-group.RL8WrYdy.js";
+import { G as ke } from "./grid-layout.CqLbbEzI.js";
+import { E as Ce } from "./error-message.CmMyB-k9.js";
+import "../assets/selection-card-group.css";
+var G = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e))(G || {});
+const oe = Symbol("selection card radio input injection key"), Se = {
+  key: 0,
+  class: "b-selection-card__icon",
+  role: "presentation"
+}, Re = ["for"], $e = {
+  name: "bento-selection-card"
+}, Ve = /* @__PURE__ */ ae({
+  ...$e,
+  props: {
+    /**
+     * The description of the selection card
+     */
+    description: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Disables the selection card
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.
+     */
+    fullyClickable: { type: Boolean, default: !1 },
+    /**
+     * Shows the selection card in error state
+     */
+    hasError: { type: Boolean, default: !1 },
+    /**
+     * This property should not be used directly.
+     * It will be used by v-model directive on selection card component.
+     *
+     * When handling a single input, use a string or a number.
+     *
+     * When handling multiple inputs, use an array of keys.
+     * These keys exist as a set "value" prop for each input.
+     */
+    modelValue: {
+      type: [Boolean, String, Array],
+      default: null
+    },
+    /**
+     * Sets the selection card to readonly
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * The subtitle of the selection card
+     */
+    subtitle: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The title of the selection card
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Indicates the value of the input that will be returned when it's checked.
+     */
+    value: {
+      type: [String, Number],
+      required: !0
+    }
+  },
+  emits: ["input", "update:model-value"],
+  setup(e, { emit: j }) {
+    const a = e, x = j, z = le(), c = pe(z), B = H("selection-card-input-id"), p = H("selection-card-description"), L = o(
+      () => a.modelValue
+    ), C = o(
+      () => a.modelValue
+    ), N = o(() => ({
+      "b-selection-card--checked": S.value,
+      "b-selection-card--fully-clickable": a.fullyClickable
+    })), w = o(() => ({
+      [`b-selection-card--${G.DISABLED}`]: a.disabled,
+      [`b-selection-card--${G.ERROR}`]: a.hasError,
+      [`b-selection-card--${G.READONLY}`]: a.readonly,
+      "b-selection-card--center-aligned": R.value
+    })), O = o(() => ({
+      "b-selection-card__checkbox-container--center-aligned": R.value
+    })), U = o(() => ({
+      "b-selection-card__checkbox-container-text--center-aligned": R.value
+    })), h = o(() => ({
+      "b-selection-card__slot--with-icon": c("icon")
+    })), n = me({
+      ariaLabel: a.title,
+      label: a.value
+    }), D = o(() => Array.isArray(a.modelValue)), S = o(() => _.value ? a.value === a.modelValue : D.value ? a.modelValue.some((r) => r === a.value) : a.modelValue), _ = re(oe, V(!1)), R = o(() => !a.subtitle && !a.description), b = V(null), l = V(null), v = V(null), d = (r) => {
+      var g, A, J, K, P, X;
+      if (b.value.$refs.inputRef === r.target) {
+        const ne = T();
+        s(ne);
+        return;
+      }
+      if (a.disabled && a.readonly || !a.fullyClickable && (l.value && ((A = (g = l.value) == null ? void 0 : g.$el) != null && A.contains(r.target)) || v.value && ((K = (J = v.value) == null ? void 0 : J.$el) != null && K.contains(r.target)) || b.value && ((X = (P = b.value) == null ? void 0 : P.$el) != null && X.contains(r.target))))
+        return;
+      const M = T();
+      s(M);
+    }, T = () => {
+      var M;
+      const r = ((M = b.value) == null ? void 0 : M.$refs.inputRef).checked;
+      if (D.value) {
+        const g = [...a.modelValue], A = g.indexOf(a.value);
+        return A === -1 ? g.push(a.value) : g.splice(A, 1), g;
+      }
+      return _.value ? a.value : r;
+    }, s = (r) => {
+      !a.disabled && !a.readonly && (x("update:model-value", r), x("input", r));
+    };
+    return (r, M) => (i(), E("div", {
+      class: k(["b-selection-card", N.value]),
+      onClick: d
+    }, [
+      q("div", {
+        class: k(["b-selection-card__container", w.value])
+      }, [
+        q("div", {
+          class: k(["b-selection-card__checkbox-container", O.value])
+        }, [
+          q("div", {
+            class: k(["b-selection-card__checkbox-container-text", U.value])
+          }, [
+            t(c)("icon") ? (i(), E("div", Se, [
+              y(r.$slots, "icon", {}, void 0, !0)
+            ])) : $("", !0),
+            q("label", {
+              for: t(B),
+              class: "b-selection-card__text",
+              onClick: ie(d, ["stop", "prevent"])
+            }, [
+              e.subtitle ? (i(), f(t(I), {
+                key: 0,
+                class: "b-selection-card__description",
+                el: "span",
+                variant: "caption"
+              }, {
+                default: u(() => [
+                  Y(Q(e.subtitle), 1)
+                ]),
+                _: 1
+              })) : $("", !0),
+              de(t(I), {
+                el: "span",
+                variant: "title"
+              }, {
+                default: u(() => [
+                  Y(Q(e.title), 1)
+                ]),
+                _: 1
+              }),
+              e.description ? (i(), f(t(I), {
+                key: 1,
+                id: "descriptionId",
+                class: "b-selection-card__description",
+                el: "span",
+                variant: "body"
+              }, {
+                default: u(() => [
+                  Y(Q(e.description), 1)
+                ]),
+                _: 1
+              })) : $("", !0)
+            ], 8, Re)
+          ], 2),
+          t(_) ? (i(), f(t(he), {
+            key: 0,
+            id: t(B),
+            ref_key: "inputRef",
+            ref: b,
+            "aria-label": t(n),
+            "aria-describedby": e.description ? t(p) : void 0,
+            disabled: e.disabled,
+            "has-error": e.hasError,
+            "aria-readonly": e.readonly ?? void 0,
+            value: e.value,
+            readonly: e.readonly,
+            "model-value": L.value
+          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"])) : (i(), f(t(be), {
+            key: 1,
+            id: t(B),
+            ref_key: "inputRef",
+            ref: b,
+            "aria-label": t(n),
+            "aria-describedby": e.description ? t(p) : void 0,
+            disabled: e.disabled,
+            "has-error": e.hasError,
+            "aria-readonly": e.readonly ?? void 0,
+            value: e.value,
+            readonly: e.readonly,
+            "model-value": C.value
+          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"]))
+        ], 2),
+        t(c)("content") ? (i(), f(t(I), {
+          key: 0,
+          ref_key: "slotRef",
+          ref: l,
+          el: "div",
+          class: k(["b-selection-card__slot", h.value])
+        }, {
+          default: u(() => [
+            y(r.$slots, "content", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["class"])) : $("", !0),
+        t(c)("dynamicContent") && S.value ? (i(), f(t(I), {
+          key: 1,
+          ref_key: "dynamicSlotRef",
+          ref: v,
+          el: "div",
+          class: k(["b-selection-card__slot", h.value])
+        }, {
+          default: u(() => [
+            y(r.$slots, "dynamicContent", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["class"])) : $("", !0)
+      ], 2)
+    ], 2));
+  }
+}), ee = /* @__PURE__ */ te(Ve, [["__scopeId", "data-v-582a885b"]]), Ee = {}, xe = /* @__PURE__ */ ae({
+  ...Ee,
+  __name: "selection-card-group",
+  props: {
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
+    description: { type: String, default: null },
+    /**
+     * If set to true, renders all cards in the group in a disabled state.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Renders all cards in an error state with an error message.
+     */
+    errorMessage: { type: String, default: null },
+    /**
+     * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.
+     */
+    formId: { type: String, default: null },
+    /**
+     * Shows/hides the group label.
+     */
+    hideLabel: { type: Boolean, default: null },
+    /**
+     * Label of the group. Required for accessibility purposes, even if it's not shown
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.
+     * @values horizontal, vertical
+     */
+    layout: {
+      type: String,
+      default: "vertical"
+    },
+    /**
+     * The selection card group's items.
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Sets the responsive number of items rendered in each row.
+     */
+    itemsPerRow: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.
+     * Defaults to no value selected.
+     */
+    modelValue: {
+      type: [Array, String, Number],
+      default: null
+    },
+    /**
+     * Indicates the field is optional.
+     */
+    optional: { type: Boolean, default: !1 },
+    /**
+     * Indicates the field is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Tooltip message.
+     */
+    tooltipText: { type: String, default: null },
+    /**
+     * If set to true, renders all cards in the group in a readonly state.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.
+     * @values checkbox, radio
+     */
+    variant: { type: String, default: "checkbox" }
+  },
+  emits: ["input", "update:model-value"],
+  setup(e, { emit: j }) {
+    const a = e, x = j, z = le(), c = (l) => !!z[l], B = o(() => ({
+      "b-selection-card-group__items--horizontal": a.layout === "horizontal"
+    })), p = V(a.modelValue);
+    se(
+      () => a.modelValue,
+      () => {
+        p.value = a.modelValue;
+      }
+    );
+    const L = H("error"), C = o(() => !a.disabled && !a.readonly && !!a.errorMessage), N = V(null), { width: w } = fe(N), O = o(() => ve.split("px")[0]), U = o(() => ye.split("px")[0]), h = o(() => w.value < O.value ? "small" : w.value >= O.value && w.value < U.value ? "medium" : "large"), n = o(() => {
+      var l;
+      return ((l = a.itemsPerRow) == null ? void 0 : l[h == null ? void 0 : h.value]) || a.items.length;
+    }), D = o(() => {
+      if (!a.itemsPerRow)
+        return [];
+      const l = [];
+      for (let v = 0; v < a.items.length; v += n == null ? void 0 : n.value)
+        l.push(a.items.slice(v, v + (n == null ? void 0 : n.value)));
+      return l;
+    }), S = o(() => 12 / (n == null ? void 0 : n.value)), _ = o(() => n != null && n.value ? new Array(n == null ? void 0 : n.value).fill({
+      // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy
+      small: S.value,
+      medium: S.value,
+      large: S.value
+    }) : []), R = (l) => {
+      p.value = l, x("update:model-value", l), x("input", l);
+    }, b = o(() => a.variant === "radio");
+    return ue(oe, b), ce(() => {
+      a.itemsPerRow && Object.values(a.itemsPerRow).forEach((l) => {
+        if (l && (l < 2 || l > 6))
+          throw new Error(
+            "itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information."
+          );
+      });
+    }), (l, v) => (i(), f(t(ge), {
+      ref_key: "containerRef",
+      ref: N,
+      "aria-describedby": C.value ? t(L) : null,
+      label: e.label,
+      "hide-label": e.hideLabel,
+      description: e.description,
+      disabled: e.disabled,
+      "tooltip-text": e.tooltipText,
+      readonly: e.readonly,
+      required: e.required,
+      optional: e.optional,
+      class: "b-selection-card-group",
+      "component-name": "selection-card-group"
+    }, {
+      default: u(() => [
+        !e.itemsPerRow || e.layout === "vertical" ? (i(), E("div", {
+          key: 0,
+          class: k(["b-selection-card-group__items", B.value])
+        }, [
+          (i(!0), E(Z, null, W(e.items, (d) => (i(), f(ee, m({
+            key: `selection-card-${d.value}`,
+            class: "b-selection-card-group__item",
+            ref_for: !0
+          }, d, {
+            "model-value": p.value,
+            readonly: e.readonly || d.readonly,
+            "has-error": C.value,
+            disabled: e.disabled || d.disabled,
+            "onUpdate:modelValue": R
+          }), F({ _: 2 }, [
+            c("icon") && d.icon ? {
+              name: "icon",
+              fn: u(() => [
+                y(l.$slots, "icon", m({ ref_for: !0 }, d), void 0, !0)
+              ]),
+              key: "0"
+            } : void 0,
+            c("content") && d.content ? {
+              name: "content",
+              fn: u(() => [
+                y(l.$slots, "content", m({ ref_for: !0 }, d), void 0, !0)
+              ]),
+              key: "1"
+            } : void 0,
+            c("dynamicContent") && d.dynamicContent ? {
+              name: "dynamicContent",
+              fn: u(() => [
+                y(l.$slots, "dynamicContent", m({ ref_for: !0 }, d), void 0, !0)
+              ]),
+              key: "2"
+            } : void 0
+          ]), 1040, ["model-value", "readonly", "has-error", "disabled"]))), 128))
+        ], 2)) : (i(), E("div", {
+          key: `selection-card-group-layout-breakpoint-${h.value}`
+        }, [
+          (i(!0), E(Z, null, W(D.value, (d, T) => (i(), f(t(ke), {
+            key: `selection-card-group-row-${T}-cols-${n.value}`,
+            class: "b-selection-card-group__items--wrap",
+            "column-width": _.value
+          }, F({ _: 2 }, [
+            W(d, (s, r) => ({
+              name: `col-${r + 1}`,
+              fn: u(() => [
+                (i(), f(ee, m({
+                  key: `selection-card-${s.value}`,
+                  class: "b-selection-card-group__item",
+                  ref_for: !0
+                }, s, {
+                  "model-value": p.value,
+                  readonly: e.readonly || s.readonly,
+                  "has-error": C.value,
+                  disabled: e.disabled || s.disabled,
+                  "onUpdate:modelValue": R
+                }), F({ _: 2 }, [
+                  c("icon") && s.icon ? {
+                    name: "icon",
+                    fn: u(() => [
+                      y(l.$slots, "icon", m({ ref_for: !0 }, s), void 0, !0)
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  c("content") && s.content ? {
+                    name: "content",
+                    fn: u(() => [
+                      y(l.$slots, "content", m({ ref_for: !0 }, s), void 0, !0)
+                    ]),
+                    key: "1"
+                  } : void 0,
+                  c("dynamicContent") && s.dynamicContent ? {
+                    name: "dynamicContent",
+                    fn: u(() => [
+                      y(l.$slots, "dynamicContent", m({ ref_for: !0 }, s), void 0, !0)
+                    ]),
+                    key: "2"
+                  } : void 0
+                ]), 1040, ["model-value", "readonly", "has-error", "disabled"]))
+              ])
+            }))
+          ]), 1032, ["column-width"]))), 128))
+        ])),
+        C.value ? (i(), f(t(Ce), {
+          key: 2,
+          id: t(L),
+          "error-message": e.errorMessage,
+          class: "b-selection-card-group__error-message"
+        }, null, 8, ["id", "error-message"])) : $("", !0)
+      ]),
+      _: 3
+    }, 8, ["aria-describedby", "label", "hide-label", "description", "disabled", "tooltip-text", "readonly", "required", "optional"]));
+  }
+}), je = /* @__PURE__ */ te(xe, [["__scopeId", "data-v-4bd92e75"]]);
+export {
+  ee as B,
+  G as a,
+  je as s
+};
+//# sourceMappingURL=selection-card-group.Du3Cwf47.js.map