@adyen/bento-vue2 1.84.2 → 1.86.0

package/dist/chunks/{search-bar.B0SdQBnY.js → search-bar.UVSaoX0h.js}

@@ -1,8 +1,8 @@
 import { defineComponent as h, provide as _, toRef as b, useAttrs as v, ref as u, watch as C } from "vue";
 import { d as y } from "./debounce.DUTu11PS.js";
 import { u as I } from "./index.B6WW_F-J.js";
-import { I as S } from "./dropdown.C2pXf8Li.js";
-import { B as k } from "./input-field.hf0_ALq0.js";
+import { I as S } from "./dropdown.DDPfKc74.js";
+import { B as k } from "./input-field.NEKXqT4R.js";
 import { S as T } from "./search.D53Ia3rC.js";
 import { C as E } from "./cross-circle-fill.DTDtgLMf.js";
 import { n as A } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -92,7 +92,7 @@ var N = function() {
 const H = g.exports;
 export {
   H as B,
-  i as a,
-  F as b
+  F as a,
+  i as b
 };
-//# sourceMappingURL=search-bar.B0SdQBnY.js.map
+//# sourceMappingURL=search-bar.UVSaoX0h.js.map

package/dist/chunks/{search-bar.B0SdQBnY.js.map → search-bar.UVSaoX0h.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.B0SdQBnY.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../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     * Disables the text input.\n     */\n    disabled?: boolean;\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            :model-value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :disabled=\"disabled\"\n            :placeholder=\"placeholder\"\n            @update:model-value=\"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, type 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    // eslint-disable-next-line @typescript-eslint/consistent-type-imports\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 = defineProps({\n  inputFieldAriaLabel: null,\n  condensed: { type: Boolean, default: false },\n  debounceTime: { default: 300 },\n  disabled: { type: Boolean, default: false },\n  hint: { default: '' },\n  placeholder: { default: '' },\n  value: { default: undefined }\n});\n\n    const emit = defineEmits([\"input\", \"clear\", \"escape-pressed\", \"blur\", \"focus\"]);\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        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","useI18n","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","props","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","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;;;;;;;;;;;;;;GCiJRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;iBAvGA,EAAA,EAAA,IAAAC,EAAA;AAcA,IAAAC,EAAAC,GAAAC,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,EAAA,KAAA,GACAK,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAN,EAAA;AAAA,MACgB,MAAA;AAER,QAAAG,EAAA,QAAAH,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAO,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAK,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAL,EAAA,KAAA;AAAA,IAA8B,GAAAH,EAAA,YAAA,GAGlCW,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AAEI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-bar.UVSaoX0h.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../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     * Disables the text input.\n     */\n    disabled?: boolean;\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            :model-value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :disabled=\"disabled\"\n            :placeholder=\"placeholder\"\n            @update:model-value=\"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, type 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    // eslint-disable-next-line @typescript-eslint/consistent-type-imports\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 = defineProps({\n  inputFieldAriaLabel: null,\n  condensed: { type: Boolean, default: false },\n  debounceTime: { default: 300 },\n  disabled: { type: Boolean, default: false },\n  hint: { default: '' },\n  placeholder: { default: '' },\n  value: { default: undefined }\n});\n\n    const emit = defineEmits([\"input\", \"clear\", \"escape-pressed\", \"blur\", \"focus\"]);\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        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","useI18n","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","props","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;GCiJRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;iBAvGA,EAAA,EAAA,IAAAC,EAAA;AAcA,IAAAC,EAAAC,GAAAC,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,EAAA,KAAA,GACAK,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAN,EAAA;AAAA,MACgB,MAAA;AAER,QAAAG,EAAA,QAAAH,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAO,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAK,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAL,EAAA,KAAA;AAAA,IAA8B,GAAAH,EAAA,YAAA,GAGlCW,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AAEI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{secondary-nav.BPGpxd0p.js → secondary-nav.C6ldQMZ2.js}

@@ -1,10 +1,10 @@
 import { defineComponent as v, inject as g, computed as r, ref as C, readonly as I, watch as h, provide as w } from "vue";
-import { B as S } from "./dropdown.C2pXf8Li.js";
-import { g as k } from "./index.BDK4hwK_.js";
+import { B as S } from "./dropdown.DDPfKc74.js";
+import { j as k } from "./index.BkJqgYF1.js";
 import { u as A } from "./index.B6WW_F-J.js";
 import { a as B } from "./es6.C1DXQV6f.js";
-import { B as b } from "./typography.Bq-EGj9y.js";
-import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as b } from "./typography.C8lPlsbD.js";
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/secondary-nav.css";
 const f = /* @__PURE__ */ Symbol("secondary nav state"), $ = {}, N = /* @__PURE__ */ v({
   ...$,
@@ -25,14 +25,14 @@ const f = /* @__PURE__ */ Symbol("secondary nav state"), $ = {}, N = /* @__PURE_
 });
 var V = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
-  return a("button", { staticClass: "b-secondary-nav-item", class: t.conditionalClasses, attrs: { "aria-selected": t.isItemSelected }, on: { click: t.onClick } }, [a(t.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1);
-}, x = [], D = /* @__PURE__ */ m(
+  return a("button", { staticClass: "b-secondary-nav-item", class: t.conditionalClasses, attrs: { "aria-current": t.isItemSelected ? "page" : void 0 }, on: { click: t.onClick } }, [a(t.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1);
+}, x = [], D = /* @__PURE__ */ p(
   N,
   V,
   x,
   !1,
   null,
-  "89779b43"
+  "2ddb108a"
 );
 const y = D.exports, M = {}, R = /* @__PURE__ */ v({
   ...M,
@@ -50,15 +50,15 @@ var T = function() {
   return a("section", { staticClass: "b-secondary-nav-category", attrs: { "aria-label": e.label } }, [a(t.BentoTypography, { staticClass: "b-secondary-nav-category__label", attrs: { el: "h1", variant: "caption", stronger: "" } }, [e._v(e._s(e.label))]), a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(s) {
     return a("li", { key: s.value }, [a(t.SecondaryNavItem, { attrs: { label: s.label, value: s.value } })], 1);
   }), 0)], 1);
-}, F = [], L = /* @__PURE__ */ m(
+}, j = [], F = /* @__PURE__ */ p(
   R,
   T,
-  F,
+  j,
   !1,
   null,
   "a7c2cab3"
 );
-const O = L.exports, P = {
+const L = F.exports, O = {
   "en-US": {
     mobileDropdownAriaLabel: "Navigation options dropdown"
   },
@@ -68,10 +68,10 @@ const O = L.exports, P = {
   "pt-BR": {
     mobileDropdownAriaLabel: "Menu suspenso de opções de navegação"
   }
-}, j = {
-  i18n: { messages: P }
+}, P = {
+  i18n: { messages: O }
 }, E = /* @__PURE__ */ v({
-  ...j,
+  ...P,
   __name: "secondary-nav",
   props: {
     items: null,
@@ -84,18 +84,18 @@ const O = L.exports, P = {
     }), l = s.smallerOrEqual("s"), _ = r(() => a.items.some((n) => Object.hasOwn(n, "items"))), u = r(() => a.items), c = r(() => {
       const n = u.value[0];
       return "items" in n ? n.items[0].value : n.value;
-    }), i = C(a.value ?? c.value), p = (n) => {
+    }), i = C(a.value ?? c.value), m = (n) => {
       i.value = n, e("change", n);
     }, d = {
       activeItemValue: I(i),
-      updateActiveItemValue: p
+      updateActiveItemValue: m
     };
     return h(
       () => a.value,
       (n) => {
         i.value = n;
       }
-    ), w(f, d), { __sfc: !0, t, breakpoints: s, isMobile: l, props: a, emit: e, hasCategories: _, dropdownItems: u, activeItemValueFallback: c, activeItemValue: i, updateActiveItemValue: p, state: d, SecondaryNavItem: y, SecondaryNavCategory: O, BentoDropdown: S };
+    ), w(f, d), { __sfc: !0, t, breakpoints: s, isMobile: l, props: a, emit: e, hasCategories: _, dropdownItems: u, activeItemValueFallback: c, activeItemValue: i, updateActiveItemValue: m, state: d, SecondaryNavItem: y, SecondaryNavCategory: L, BentoDropdown: S };
   }
 });
 var q = function() {
@@ -103,7 +103,7 @@ var q = function() {
   return a("nav", { staticClass: "b-secondary-nav" }, [t.isMobile ? a(t.BentoDropdown, { attrs: { "aria-label": t.t("mobileDropdownAriaLabel"), items: t.dropdownItems, "static-categories": t.hasCategories, "model-value": t.activeItemValue }, on: { "update:model-value": t.updateActiveItemValue } }) : a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(s) {
     return a("li", { key: s.label }, ["items" in s ? a(t.SecondaryNavCategory, { attrs: { label: s.label, items: s.items } }) : a(t.SecondaryNavItem, { attrs: { label: s.label, value: s.value } })], 1);
   }), 0)], 1);
-}, z = [], J = /* @__PURE__ */ m(
+}, z = [], J = /* @__PURE__ */ p(
   E,
   q,
   z,
@@ -115,4 +115,4 @@ const X = J.exports;
 export {
   X as s
 };
-//# sourceMappingURL=secondary-nav.BPGpxd0p.js.map
+//# sourceMappingURL=secondary-nav.C6ldQMZ2.js.map

package/dist/chunks/secondary-nav.C6ldQMZ2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary-nav.C6ldQMZ2.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { type InjectionKey } from 'vue';\nimport { type BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button\n        class=\"b-secondary-nav-item\"\n        :class=\"conditionalClasses\"\n        :aria-current=\"isItemSelected ? 'page' : undefined\"\n        @click=\"onClick\"\n    >\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  label: null,\n  value: null\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([\"click\"]);\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 { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps({\n  label: null,\n  items: null\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            :model-value=\"activeItemValue\"\n            @update:model-value=\"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 { type BentoSecondaryNavItems, type 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 { type BentoListboxOptions } from '@/types/listbox';\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  items: null,\n  value: null\n});\n\n    const emit = defineEmits([\"change\"]);\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","isItemSelected","computed","props","conditionalClasses","e","emit","__default__$1","__default__","messages","useI18n","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGO,MAAAA,IAAA,uBAAA,qBAAA,GCwCHC,IAAA,CAAA;;;;;;;;;iBAzBA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAOAK,IAAAC,EAAA,MAAAJ,EAAA,UAAAK,EAAA,KAAA,GAEAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,gCAAAD,EAAA;AAAA,IACQ,EAAA;4IAKnD,CAAAI,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAN,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;qBCPrCI,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC+EAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBA1EA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GAQAI,IAAAb,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAa,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAf,EAAA,MAAAC,EAAA,KAAA,GAEAe,IAAAhB,EAAA,MAAA;AACI,YAAAiB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJrB,IAAAsB,EAAAjB,EAAA,SAAAe,EAAA,KAAA,GACAnB,IAAA,CAAAsB,MAAA;AACI,MAAAvB,EAAA,QAAAuB,GACAf,EAAA,UAAAe,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAzB,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAyB;AAAA,MAAA,MAAArB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAvB,EAAA,QAAAuB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA7B,GAAA0B,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{segmented-control.BtWFda0P.js → segmented-control.BLnuxgnJ.js}

@@ -1,7 +1,7 @@
 import { defineComponent as m, ref as c, computed as d, toRef as g, watch as C, onMounted as h } from "vue";
-import { B, p as y } from "./typography.Bq-EGj9y.js";
+import { B, p as y } from "./typography.C8lPlsbD.js";
 import { g as w } from "./generate-uid.NJ8tVoha.js";
-import { b as x } from "./tooltip.C6YCavPw.js";
+import { b as x } from "./tooltip.DF11J3k3.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { o as $ } from "./resize.Bqks3WUm.js";
 import "../assets/segmented-control.css";
@@ -110,4 +110,4 @@ const q = P.exports;
 export {
   q as B
 };
-//# sourceMappingURL=segmented-control.BtWFda0P.js.map
+//# sourceMappingURL=segmented-control.BLnuxgnJ.js.map

package/dist/chunks/{segmented-control.BtWFda0P.js.map → segmented-control.BLnuxgnJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.BtWFda0P.js","sources":["../../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            v-bento-tooltip-directive=\"tooltipText\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <bento-typography\n                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type ComputedRef, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const props = defineProps({\n  disabled: { type: Boolean, default: false },\n  fullWidth: { type: Boolean, default: false },\n  label: null,\n  modelValue: { default: null },\n  tooltipText: { default: undefined },\n  truncate: { type: Boolean, default: false },\n  value: null,\n  wrap: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const segmentedControlButtonLabel = ref();\n    const segmentedControlButtonId = generateUid('segmented-control-button');\n    const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control-button--hug-content': !props.fullWidth,\n        'b-segmented-control-button--full-width': props.fullWidth,\n        'b-segmented-control-button--truncate': props.truncate,\n        'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n    }));\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('update:model-value', props.value);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","<template>\n    <div ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            :tooltip-text=\"item.tooltipText\"\n            @update:model-value=\"onInput\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  fullWidth: { type: Boolean, default: false },\n  items: null,\n  modelValue: { default: null },\n  wrap: { type: Boolean, default: false }\n});\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        observeSizeOfElement(segmentedControlRef.value, () => {\n            if (segmentedControlRef.value) {\n                hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                    el =>\n                        el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                        el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                );\n            }\n        });\n    });\n\n    const computedItems = computed(() =>\n        props.items.map((el, index) => ({\n            ...el,\n            tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n        }))\n    );\n\n    const onInput = value => {\n        emit('update:model-value', value);\n        emit('input', value);\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control--hug': !props.fullWidth,\n        'b-segmented-control--full-width': props.fullWidth,\n        'b-segmented-control--truncate': truncate.value,\n        'b-segmented-control--wrap': props.wrap,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              @update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-segmented-control',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value"],"mappings":";;;;;;;AAoEI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA;sJAE7D,MAAA;AACI,MAAAA,EAAA,YACIE,EAAA,sBAAAF,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;qBC6CJG,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;iBAvEAC,IAAAC,EAAAL,GAAA,YAAA,GAEAM,IAAAX,EAAA,GACAY,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GAEAc,IAAAV,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIW;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;;AACI,QAAAA,EAAA,UACIE,EAAA,SAAAM,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,UAAsD,CAAAC,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA;AAAA,MAK1D,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAjB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAe,GAAAE,MAAA;;AAAA;AAAA,UACc,GAAAF;AAAA,UACzB,aAAAN,EAAA,WAAAK,IAAAN,KAAA,gBAAAA,EAAA,UAAA,QAAAM,EAAAG,MAAAF,EAAA,QAAA;AAAA,QACqE;AAAA,OAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAjB,EAAA,sBAAAiB,CAAA,GACAjB,EAAA,SAAAiB,CAAA;AAAA,IAAmB,GAGvBlB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAS,EAAA;AAAA,MACC,6BAAAT,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"segmented-control.BLnuxgnJ.js","sources":["../../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            v-bento-tooltip-directive=\"tooltipText\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <bento-typography\n                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type ComputedRef, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const props = defineProps({\n  disabled: { type: Boolean, default: false },\n  fullWidth: { type: Boolean, default: false },\n  label: null,\n  modelValue: { default: null },\n  tooltipText: { default: undefined },\n  truncate: { type: Boolean, default: false },\n  value: null,\n  wrap: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const segmentedControlButtonLabel = ref();\n    const segmentedControlButtonId = generateUid('segmented-control-button');\n    const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control-button--hug-content': !props.fullWidth,\n        'b-segmented-control-button--full-width': props.fullWidth,\n        'b-segmented-control-button--truncate': props.truncate,\n        'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n    }));\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('update:model-value', props.value);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","<template>\n    <div ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            :tooltip-text=\"item.tooltipText\"\n            @update:model-value=\"onInput\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  fullWidth: { type: Boolean, default: false },\n  items: null,\n  modelValue: { default: null },\n  wrap: { type: Boolean, default: false }\n});\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        observeSizeOfElement(segmentedControlRef.value, () => {\n            if (segmentedControlRef.value) {\n                hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                    el =>\n                        el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                        el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                );\n            }\n        });\n    });\n\n    const computedItems = computed(() =>\n        props.items.map((el, index) => ({\n            ...el,\n            tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n        }))\n    );\n\n    const onInput = value => {\n        emit('update:model-value', value);\n        emit('input', value);\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control--hug': !props.fullWidth,\n        'b-segmented-control--full-width': props.fullWidth,\n        'b-segmented-control--truncate': truncate.value,\n        'b-segmented-control--wrap': props.wrap,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              @update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-segmented-control',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value"],"mappings":";;;;;;;AAoEI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA;sJAE7D,MAAA;AACI,MAAAA,EAAA,YACIE,EAAA,sBAAAF,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;qBC6CJG,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;iBAvEAC,IAAAC,EAAAL,GAAA,YAAA,GAEAM,IAAAX,EAAA,GACAY,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GAEAc,IAAAV,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIW;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;;AACI,QAAAA,EAAA,UACIE,EAAA,SAAAM,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,UAAsD,CAAAC,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA;AAAA,MAK1D,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAjB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAe,GAAAE,MAAA;;AAAA;AAAA,UACc,GAAAF;AAAA,UACzB,aAAAN,EAAA,WAAAK,IAAAN,KAAA,gBAAAA,EAAA,UAAA,QAAAM,EAAAG,MAAAF,EAAA,QAAA;AAAA,QACqE;AAAA,OAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAjB,EAAA,sBAAAiB,CAAA,GACAjB,EAAA,SAAAiB,CAAA;AAAA,IAAmB,GAGvBlB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAS,EAAA;AAAA,MACC,6BAAAT,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/segmented-control.types.BHRLV8KU.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.types.BHRLV8KU.js","sources":["../../src/components/segmented-control/segmented-control.types.ts"],"sourcesContent":["export type BentoSegmentedControlValue = string | number;\nexport interface BentoSegmentedControlProps {\n    /**\n     * Accessible name describing the segmented control.\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * If set to true, renders the component full width.\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Items that will populate the segmented control.\n     */\n    items: Array<BentoSegmentedControlItem>;\n\n    /**\n     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n     */\n    modelValue?: BentoSegmentedControlValue;\n\n    /**\n     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n     */\n    wrap?: boolean;\n}\n\nexport interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@update:model-value\" or \"v-model\" instead\n */\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n"],"names":["BentoSegmentedControlEvent"],"mappings":"AAsCY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"segmented-control.types.BHRLV8KU.js","sources":["../../src/components/segmented-control/segmented-control.types.ts"],"sourcesContent":["export type BentoSegmentedControlValue = string | number;\nexport interface BentoSegmentedControlProps {\n    /**\n     * Accessible name describing the segmented control.\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * If set to true, renders the component full width.\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Items that will populate the segmented control.\n     */\n    items: Array<BentoSegmentedControlItem>;\n\n    /**\n     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n     */\n    modelValue?: BentoSegmentedControlValue;\n\n    /**\n     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n     */\n    wrap?: boolean;\n}\n\nexport interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@update:model-value\" or \"v-model\" instead\n */\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n"],"names":["BentoSegmentedControlEvent"],"mappings":"AAsCO,IAAKA,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/chunks/{selection-card-group.BryV14qP.js → selection-card-group.CqGYskmS.js}

@@ -1,7 +1,7 @@
 import { defineComponent as O, useSlots as D, computed as n, inject as F, ref as h, watch as j, provide as P, onMounted as W } from "vue";
-import { b as Y } from "./index.BDK4hwK_.js";
+import { b as Y } from "./index.BkJqgYF1.js";
 import { a as Q, b as U } from "./es6.C1DXQV6f.js";
-import { B as H } from "./typography.Bq-EGj9y.js";
+import { B as H } from "./typography.C8lPlsbD.js";
 import { C as J } from "./checkbox-input.08E9BNeF.js";
 import { u as K } from "./aria-label.CaUURpnB.js";
 import { g as $ } from "./generate-uid.NJ8tVoha.js";
@@ -10,8 +10,8 @@ import { a as Z } from "./radio-input.kzb4gxLW.js";
 import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as ee } from "./form-field.D_2g7vaP.js";
 import { G as te } from "./grid-layout.1aIiz2N_.js";
-import { E as oe } from "./field-label.CEkJnsiL.js";
-import { C as ae } from "./controls-group.D4eW9DtP.js";
+import { E as oe } from "./error-message.VenUl2OK.js";
+import { C as ae } from "./controls-group.HUWlAOhG.js";
 import "../assets/selection-card-group.css";
 var E = /* @__PURE__ */ ((c) => (c.DISABLED = "disabled", c.READONLY = "readonly", c.ERROR = "error", c))(E || {});
 const q = /* @__PURE__ */ Symbol("selection card radio input injection key"), le = {
@@ -237,4 +237,4 @@ export {
   E as a,
   Ve as s
 };
-//# sourceMappingURL=selection-card-group.BryV14qP.js.map
+//# sourceMappingURL=selection-card-group.CqGYskmS.js.map

package/dist/chunks/{selection-card-group.BryV14qP.js.map → selection-card-group.CqGYskmS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"selection-card-group.BryV14qP.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '../checkbox/checkbox.types';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\" aria-hidden=\"true\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :label=\"label\"\n        :hide-label=\"hideLabel\"\n        :description=\"description\"\n        :disabled=\"disabled\"\n        :tooltip-text=\"tooltipText\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        :optional=\"optional\"\n        class=\"b-selection-card-group\"\n        component-name=\"selection-card-group\"\n    >\n        <div\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\n            <bento-selection-card\n                v-for=\"item in items\"\n                :key=\"`selection-card-${item.value}`\"\n                class=\"b-selection-card-group__item\"\n                v-bind=\"item\"\n                :model-value=\"inputValue\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowGroupError\"\n                :disabled=\"disabled || item.disabled\"\n                @update:model-value=\"onInput\"\n            >\n                <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                    <slot name=\"icon\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('content') && item.content\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                    <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                </template>\n            </bento-selection-card>\n        </div>\n        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${columnIndex+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n                            v-bind=\"item\"\n                            :model-value=\"inputValue\"\n                            :readonly=\"readonly || item.readonly\"\n                            :has-error=\"shouldShowGroupError\"\n                            :disabled=\"disabled || item.disabled\"\n                            @update:model-value=\"onInput\"\n                        >\n                            <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                                <slot name=\"icon\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('content') && item.content\" #content>\n                                <slot name=\"content\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                                <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                            </template>\n                        </bento-selection-card>\n                    </template>\n                </grid-layout>\n            </div>\n        </template>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorMessageId\"\n            :error-message=\"errorMessage\"\n            class=\"b-selection-card-group__error-message\"\n        />\n    </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // 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\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(el => {\n                if (el && (el < 2 || el > 6)) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Group of bento-selection-cards.\n     *\n     * @example\n     * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectionCardGroup },\n     *     template: `\n     *          <bento-selection-card-group\n     *              :items=\"[\n     *                    {\n     *                        title: 'Card 1',\n     *                        value: 'card-1',\n     *                        content: 'Slot content 1',\n     *                        icon: RetailIcon,\n     *                    },\n     *                    {\n     *                        title: 'Card 2',\n     *                        value: 'card-2',\n     *                        content: 'Slot content 2',\n     *                        icon: LeafIcon,\n     *                    },\n     *                ]\"\n     *          >\n     *             <template #icon=\"{ icon }\">\n     *                 <component :is=\"icon\"/>\n     *              </template>\n     *              <template #content=\"{ content }\">\n     *                  <div>{{ content }}</div>\n     *               </template>\n     *          </bento-selection-card-group>\n     *     `,\n     * }\n     */\n    export default {\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","el"],"mappings":"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"}
+{"version":3,"file":"selection-card-group.CqGYskmS.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '../checkbox/checkbox.types';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\" aria-hidden=\"true\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :label=\"label\"\n        :hide-label=\"hideLabel\"\n        :description=\"description\"\n        :disabled=\"disabled\"\n        :tooltip-text=\"tooltipText\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        :optional=\"optional\"\n        class=\"b-selection-card-group\"\n        component-name=\"selection-card-group\"\n    >\n        <div\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\n            <bento-selection-card\n                v-for=\"item in items\"\n                :key=\"`selection-card-${item.value}`\"\n                class=\"b-selection-card-group__item\"\n                v-bind=\"item\"\n                :model-value=\"inputValue\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowGroupError\"\n                :disabled=\"disabled || item.disabled\"\n                @update:model-value=\"onInput\"\n            >\n                <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                    <slot name=\"icon\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('content') && item.content\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                    <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                </template>\n            </bento-selection-card>\n        </div>\n        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${columnIndex+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n                            v-bind=\"item\"\n                            :model-value=\"inputValue\"\n                            :readonly=\"readonly || item.readonly\"\n                            :has-error=\"shouldShowGroupError\"\n                            :disabled=\"disabled || item.disabled\"\n                            @update:model-value=\"onInput\"\n                        >\n                            <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                                <slot name=\"icon\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('content') && item.content\" #content>\n                                <slot name=\"content\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                                <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                            </template>\n                        </bento-selection-card>\n                    </template>\n                </grid-layout>\n            </div>\n        </template>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorMessageId\"\n            :error-message=\"errorMessage\"\n            class=\"b-selection-card-group__error-message\"\n        />\n    </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // 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\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(el => {\n                if (el && (el < 2 || el > 6)) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Group of bento-selection-cards.\n     *\n     * @example\n     * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectionCardGroup },\n     *     template: `\n     *          <bento-selection-card-group\n     *              :items=\"[\n     *                    {\n     *                        title: 'Card 1',\n     *                        value: 'card-1',\n     *                        content: 'Slot content 1',\n     *                        icon: RetailIcon,\n     *                    },\n     *                    {\n     *                        title: 'Card 2',\n     *                        value: 'card-2',\n     *                        content: 'Slot content 2',\n     *                        icon: LeafIcon,\n     *                    },\n     *                ]\"\n     *          >\n     *             <template #icon=\"{ icon }\">\n     *                 <component :is=\"icon\"/>\n     *              </template>\n     *              <template #content=\"{ content }\">\n     *                  <div>{{ content }}</div>\n     *               </template>\n     *          </bento-selection-card-group>\n     *     `,\n     * }\n     */\n    export default {\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","el"],"mappings":"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"}