@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/{segmented-control.Bkp2Y95s.js → segmented-control.CBc-wx0m.js}

@@ -1,14 +1,14 @@
-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.C8lPlsbD.js";
-import { g as w } from "./generate-uid.NJ8tVoha.js";
-import { b as x } from "./tooltip.7ct8WxCl.js";
-import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { o as $ } from "./resize.Bqks3WUm.js";
+import { defineComponent as c, ref as i, computed as d, toRef as v, watch as g, onMounted as C } from "vue";
+import { B as h, p as B } from "./typography.D1OZJbEa.js";
+import { g as y } from "./generate-uid.DBWe4g6T.js";
+import { b as w } from "./tooltip.D_XsoD_u.js";
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { o as x } from "./resize.Bqks3WUm.js";
 import "../assets/segmented-control.css";
-const W = {
+const $ = {
   name: "bento-segmented-control-button"
-}, k = /* @__PURE__ */ m({
-  ...W,
+}, W = /* @__PURE__ */ c({
+  ...$,
   props: {
     disabled: { type: Boolean, default: !1 },
     fullWidth: { type: Boolean, default: !1 },
@@ -20,34 +20,34 @@ const W = {
     wrap: { type: Boolean, default: !1 }
   },
   emits: ["update:model-value"],
-  setup(r, { emit: t }) {
-    const e = r, o = c(), n = w("segmented-control-button"), l = d(() => e.value === e.modelValue), s = d(() => ({
+  setup(s, { emit: t }) {
+    const e = s, o = i(), n = y("segmented-control-button"), a = d(() => e.value === e.modelValue), r = d(() => ({
       "b-segmented-control-button--hug-content": !e.fullWidth,
       "b-segmented-control-button--full-width": e.fullWidth,
       "b-segmented-control-button--truncate": e.truncate,
       "b-segmented-control-button--wrap": e.wrap && !e.truncate
     }));
-    return { __sfc: !0, props: e, emit: t, segmentedControlButtonLabel: o, segmentedControlButtonId: n, isChecked: l, conditionalClasses: s, onClick: () => {
+    return { __sfc: !0, props: e, emit: t, segmentedControlButtonLabel: o, segmentedControlButtonId: n, isChecked: a, conditionalClasses: r, onClick: () => {
       e.disabled || t("update:model-value", e.value);
-    }, BentoTypography: B, vBentoTooltipDirective: x };
+    }, BentoTypography: h, vBentoTooltipDirective: w };
   }
 });
-var I = function() {
+var k = function() {
   var t = this, e = t._self._c, o = t._self._setupProxy;
   return e("div", { staticClass: "b-segmented-control-button", class: o.conditionalClasses }, [e("input", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: t.tooltipText, expression: "tooltipText" }], staticClass: "b-segmented-control-button__input", attrs: { id: o.segmentedControlButtonId, "aria-checked": o.isChecked, "aria-label": t.label, disabled: t.disabled, type: "radio", role: "radio" }, domProps: { checked: o.isChecked, value: t.value }, on: { change: o.onClick } }), t.label ? e("label", { staticClass: "b-segmented-control-button__label-container", attrs: { for: o.segmentedControlButtonId } }, [e(o.BentoTypography, { ref: "segmentedControlButtonLabel", staticClass: "b-segmented-control-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(t.label) + " ")])], 1) : t._e()]);
-}, T = [], V = /* @__PURE__ */ f(
+}, I = [], T = /* @__PURE__ */ p(
+  W,
   k,
   I,
-  T,
   !1,
   null,
   "f9db935d"
 );
-const L = V.exports, R = {
+const R = T.exports, V = {
   name: "bento-segmented-control",
   model: { prop: "modelValue" }
-}, D = /* @__PURE__ */ m({
-  ...R,
+}, L = /* @__PURE__ */ c({
+  ...V,
   props: {
     ariaLabel: { default: null },
     fullWidth: { type: Boolean, default: !1 },
@@ -56,58 +56,54 @@ const L = V.exports, R = {
     wrap: { type: Boolean, default: !1 }
   },
   emits: ["update:model-value", "input"],
-  setup(r, { emit: t }) {
-    const e = r, o = g(e, "modelValue"), n = c(), l = c(), s = c(), u = d(() => !e.wrap);
-    C(
+  setup(s, { emit: t }) {
+    const e = s, o = v(e, "modelValue"), n = i(), a = i(), r = i(), u = d(() => !e.wrap);
+    g(
       () => e.items,
       () => {
-        e.items.length > 5 && y(
+        e.items.length > 5 && B(
           "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."
         );
       },
       { immediate: !0 }
-    ), h(() => {
-      $(n.value, () => {
-        var a;
-        n.value && (s.value = (a = l == null ? void 0 : l.value) == null ? void 0 : a.map(
-          (i) => i.$refs.segmentedControlButtonLabel.$el.offsetWidth < i.$refs.segmentedControlButtonLabel.$el.scrollWidth
+    ), C(() => {
+      x(n.value, () => {
+        n.value && (r.value = a?.value?.map(
+          (l) => l.$refs.segmentedControlButtonLabel.$el.offsetWidth < l.$refs.segmentedControlButtonLabel.$el.scrollWidth
         ));
       });
     });
-    const _ = d(
-      () => e.items.map((a, i) => {
-        var p;
-        return {
-          ...a,
-          tooltipText: u.value && ((p = s == null ? void 0 : s.value) != null && p[i]) ? a.label : void 0
-        };
-      })
-    ), b = (a) => {
-      t("update:model-value", a), t("input", a);
-    }, v = d(() => ({
+    const m = d(
+      () => e.items.map((l, b) => ({
+        ...l,
+        tooltipText: u.value && r?.value?.[b] ? l.label : void 0
+      }))
+    ), f = (l) => {
+      t("update:model-value", l), t("input", l);
+    }, _ = d(() => ({
       "b-segmented-control--hug": !e.fullWidth,
       "b-segmented-control--full-width": e.fullWidth,
       "b-segmented-control--truncate": u.value,
       "b-segmented-control--wrap": e.wrap
     }));
-    return { __sfc: !0, emit: t, props: e, inputValue: o, segmentedControlRef: n, segmentedControlButtonRef: l, hasEllipsis: s, truncate: u, computedItems: _, onInput: b, conditionalClasses: v, SegmentedControlButton: L };
+    return { __sfc: !0, emit: t, props: e, inputValue: o, segmentedControlRef: n, segmentedControlButtonRef: a, hasEllipsis: r, truncate: u, computedItems: m, onInput: f, conditionalClasses: _, SegmentedControlButton: R };
   }
 });
-var S = function() {
+var D = function() {
   var t = this, e = t._self._c, o = t._self._setupProxy;
-  return e("div", { ref: "segmentedControlRef", staticClass: "b-segmented-control", class: o.conditionalClasses, attrs: { role: "group" } }, t._l(o.computedItems, function(n, l) {
-    return e(o.SegmentedControlButton, { key: `segmented-control-item-${l}-${n.label}`, ref: "segmentedControlButtonRef", refInFor: !0, staticClass: "b-segmented-control__item", attrs: { label: n.label, value: n.value, disabled: n.disabled, truncate: o.truncate, wrap: t.wrap, "full-width": t.fullWidth, "model-value": o.inputValue, "tooltip-text": n.tooltipText }, on: { "update:model-value": o.onInput } });
+  return e("div", { ref: "segmentedControlRef", staticClass: "b-segmented-control", class: o.conditionalClasses, attrs: { role: "group" } }, t._l(o.computedItems, function(n, a) {
+    return e(o.SegmentedControlButton, { key: `segmented-control-item-${a}-${n.label}`, ref: "segmentedControlButtonRef", refInFor: !0, staticClass: "b-segmented-control__item", attrs: { label: n.label, value: n.value, disabled: n.disabled, truncate: o.truncate, wrap: t.wrap, "full-width": t.fullWidth, "model-value": o.inputValue, "tooltip-text": n.tooltipText }, on: { "update:model-value": o.onInput } });
   }), 1);
-}, F = [], P = /* @__PURE__ */ f(
+}, S = [], F = /* @__PURE__ */ p(
+  L,
   D,
   S,
-  F,
   !1,
   null,
   "414ab1a6"
 );
-const q = P.exports;
+const U = F.exports;
 export {
-  q as B
+  U as B
 };
-//# sourceMappingURL=segmented-control.Bkp2Y95s.js.map
+//# sourceMappingURL=segmented-control.CBc-wx0m.js.map

package/dist/chunks/{segmented-control.Bkp2Y95s.js.map → segmented-control.CBc-wx0m.js.map}

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.Bkp2Y95s.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.CBc-wx0m.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","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,QAAAD,GAAA,OAAA;AAAA,UAAsD,CAAAO,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA,QAGL;AAAA,MAErD,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAhB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAc,GAAAE,OAAA;AAAA,QACc,GAAAF;AAAA,QACzB,aAAAL,EAAA,SAAAD,GAAA,QAAAQ,CAAA,IAAAF,EAAA,QAAA;AAAA,MACqE,EAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAhB,EAAA,sBAAAgB,CAAA,GACAhB,EAAA,SAAAgB,CAAA;AAAA,IAAmB,GAGvBjB,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/{selection-card-group.EGigQJOW.js → selection-card-group.BaK3Rt4K.js}

@@ -1,23 +1,23 @@
-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 { h as Y } from "./index.C7m7gI5w.js";
-import { a as Q, B as U } from "./es6.Cu3DYUPA.js";
-import { B as H } from "./typography.C8lPlsbD.js";
-import { u as J } from "./aria-label.CaUURpnB.js";
-import { g as $ } from "./generate-uid.NJ8tVoha.js";
-import { u as K } from "./use-has-slot.C9lQZ6nz.js";
-import { a as X } from "./radio-input.CLlYadKI.js";
-import { C as Z } from "./checkbox-input.08E9BNeF.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 "./error-message.Hqp_VvD3.js";
-import { C as ae } from "./controls-group.BomXFNvi.js";
+import { defineComponent as $, useSlots as L, computed as l, inject as G, ref as v, watch as A, provide as O, onMounted as D } from "vue";
+import { h as N } from "./index.CL3TXc0a.js";
+import { a as q, B as z } from "./es6.Cu3DYUPA.js";
+import { B as F } from "./typography.D1OZJbEa.js";
+import { C as j } from "./checkbox-input.kfxcyjfd.js";
+import { u as W } from "./aria-label.CaUURpnB.js";
+import { g as M } from "./generate-uid.DBWe4g6T.js";
+import { u as Y } from "./use-has-slot.C9lQZ6nz.js";
+import { a as Q } from "./radio-input.CLlYadKI.js";
+import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as U } from "./form-field.D_2g7vaP.js";
+import { G as H } from "./grid-layout.BeCrjPgT.js";
+import { E as J } from "./error-message.BEHBfjmn.js";
+import { C as K } from "./controls-group.DPLAJjbv.js";
 import "../assets/selection-card-group.css";
-var B = /* @__PURE__ */ ((u) => (u.DISABLED = "disabled", u.READONLY = "readonly", u.ERROR = "error", u))(B || {});
-const q = /* @__PURE__ */ Symbol("selection card radio input injection key"), le = {
+var S = /* @__PURE__ */ ((i) => (i.DISABLED = "disabled", i.READONLY = "readonly", i.ERROR = "error", i))(S || {});
+const P = /* @__PURE__ */ Symbol("selection card radio input injection key"), X = {
   name: "bento-selection-card"
-}, ne = /* @__PURE__ */ O({
-  ...le,
+}, Z = /* @__PURE__ */ $({
+  ...X,
   props: {
     /**
      * The description of the selection card
@@ -78,70 +78,68 @@ const q = /* @__PURE__ */ Symbol("selection card radio input injection key"), le
     }
   },
   emits: ["input", "update:model-value"],
-  setup(u, { emit: e }) {
-    const t = u, o = D(), a = K(o), C = $("selection-card-input-id"), s = $("selection-card-description"), d = n(
+  setup(i, { emit: e }) {
+    const t = i, o = L(), a = Y(o), h = M("selection-card-input-id"), r = M("selection-card-description"), d = l(
       () => t.modelValue
-    ), E = n(
+    ), w = l(
       () => t.modelValue
-    ), V = n(() => ({
-      "b-selection-card--checked": R.value,
+    ), B = l(() => ({
+      "b-selection-card--checked": x.value,
       "b-selection-card--fully-clickable": t.fullyClickable
-    })), x = n(() => ({
-      [`b-selection-card--${B.DISABLED}`]: t.disabled,
-      [`b-selection-card--${B.ERROR}`]: t.hasError,
-      [`b-selection-card--${B.READONLY}`]: t.readonly,
+    })), g = l(() => ({
+      [`b-selection-card--${S.DISABLED}`]: t.disabled,
+      [`b-selection-card--${S.ERROR}`]: t.hasError,
+      [`b-selection-card--${S.READONLY}`]: t.readonly,
       "b-selection-card--center-aligned": m.value
-    })), _ = n(() => ({
+    })), f = l(() => ({
       "b-selection-card__checkbox-container--center-aligned": m.value
-    })), g = n(() => ({
+    })), C = l(() => ({
       "b-selection-card__checkbox-container-text--center-aligned": m.value
-    })), S = n(() => ({
+    })), k = l(() => ({
       "b-selection-card__slot--with-icon": a("icon")
-    })), y = J({
+    })), R = W({
       ariaLabel: t.title,
       label: t.value
-    }), l = n(() => Array.isArray(t.modelValue)), R = n(() => c.value ? t.value === t.modelValue : l.value ? t.modelValue.some((i) => i === t.value) : t.modelValue), c = F(q, h(!1)), m = n(() => !t.subtitle && !t.description), p = h(null), b = h(null), r = h(null), v = (i) => {
-      var f, k, L, T, G, A;
-      if (p.value.$refs.inputRef === i.target) {
-        const z = w();
-        M(z);
+    }), u = l(() => Array.isArray(t.modelValue)), x = l(() => c.value ? t.value === t.modelValue : u.value ? t.modelValue.some((s) => s === t.value) : t.modelValue), c = G(P, v(!1)), m = l(() => !t.subtitle && !t.description), p = v(null), _ = v(null), n = v(null), y = (s) => {
+      if (p.value.$refs.inputRef === s.target) {
+        const I = E();
+        V(I);
         return;
       }
-      if (t.disabled && t.readonly || !t.fullyClickable && (b.value && ((k = (f = b.value) == null ? void 0 : f.$el) != null && k.contains(i.target)) || r.value && ((T = (L = r.value) == null ? void 0 : L.$el) != null && T.contains(i.target)) || p.value && ((A = (G = p.value) == null ? void 0 : G.$el) != null && A.contains(i.target))))
+      if (t.disabled && t.readonly || !t.fullyClickable && (_.value && _.value?.$el?.contains(s.target) || n.value && n.value?.$el?.contains(s.target) || p.value && p.value?.$el?.contains(s.target)))
         return;
-      const I = w();
-      M(I);
-    }, w = () => {
-      var I;
-      const i = ((I = p.value) == null ? void 0 : I.$refs.inputRef).checked;
-      if (l.value) {
-        const f = [...t.modelValue], k = f.indexOf(t.value);
-        return k === -1 ? f.push(t.value) : f.splice(k, 1), f;
+      const b = E();
+      V(b);
+    }, E = () => {
+      const s = (p.value?.$refs.inputRef).checked;
+      if (u.value) {
+        const b = [...t.modelValue], I = b.indexOf(t.value);
+        return I === -1 ? b.push(t.value) : b.splice(I, 1), b;
       }
-      return c.value ? t.value : i;
-    }, M = (i) => {
-      !t.disabled && !t.readonly && (e("update:model-value", i), e("input", i));
+      return c.value ? t.value : s;
+    }, V = (s) => {
+      !t.disabled && !t.readonly && (e("update:model-value", s), e("input", s));
     };
-    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, inputId: C, descriptionId: s, computedRadioInputModelValue: d, computedCheckboxInputModelValue: E, conditionalClasses: V, containerConditionalClasses: x, checkboxContainerConditionalClasses: _, checkboxContainerTextConditionalClasses: g, slotConditionalClasses: S, ariaLabel: y, isCheckboxGroup: l, isChecked: R, isRadioInput: c, isTitleOnly: m, inputRef: p, slotRef: b, dynamicSlotRef: r, handleCardClick: v, toggleInput: w, onChange: M, BentoTypography: H, CheckboxInput: Z, RadioInput: X };
+    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, inputId: h, descriptionId: r, computedRadioInputModelValue: d, computedCheckboxInputModelValue: w, conditionalClasses: B, containerConditionalClasses: g, checkboxContainerConditionalClasses: f, checkboxContainerTextConditionalClasses: C, slotConditionalClasses: k, ariaLabel: R, isCheckboxGroup: u, isChecked: x, isRadioInput: c, isTitleOnly: m, inputRef: p, slotRef: _, dynamicSlotRef: n, handleCardClick: y, toggleInput: E, onChange: V, BentoTypography: F, CheckboxInput: j, RadioInput: Q };
   }
 });
-var re = function() {
+var ee = function() {
   var e = this, t = e._self._c, o = e._self._setupProxy;
   return t("div", { staticClass: "b-selection-card", class: o.conditionalClasses, on: { click: o.handleCardClick } }, [t("div", { staticClass: "b-selection-card__container", class: o.containerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container", class: o.checkboxContainerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container-text", class: o.checkboxContainerTextConditionalClasses }, [o.hasSlot("icon") ? t("div", { staticClass: "b-selection-card__icon", attrs: { role: "presentation", "aria-hidden": "true" } }, [e._t("icon")], 2) : e._e(), t("label", { staticClass: "b-selection-card__text", attrs: { for: o.inputId }, on: { click: function(a) {
     return a.stopPropagation(), a.preventDefault(), o.handleCardClick.apply(null, arguments);
   } } }, [e.subtitle ? t(o.BentoTypography, { staticClass: "b-selection-card__description", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.subtitle) + " ")]) : e._e(), t(o.BentoTypography, { attrs: { el: "span", variant: "title" } }, [e._v(e._s(e.title))]), e.description ? t(o.BentoTypography, { staticClass: "b-selection-card__description", attrs: { id: "descriptionId", el: "span", variant: "body" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1)]), o.isRadioInput ? t(o.RadioInput, { ref: "inputRef", attrs: { id: o.inputId, "aria-label": o.ariaLabel, "aria-describedby": e.description ? o.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": o.computedRadioInputModelValue } }) : t(o.CheckboxInput, { ref: "inputRef", attrs: { id: o.inputId, "aria-label": o.ariaLabel, "aria-describedby": e.description ? o.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": o.computedCheckboxInputModelValue } })], 1), o.hasSlot("content") ? t(o.BentoTypography, { ref: "slotRef", staticClass: "b-selection-card__slot", class: o.slotConditionalClasses, attrs: { el: "div" } }, [e._t("content")], 2) : e._e(), o.hasSlot("dynamicContent") && o.isChecked ? t(o.BentoTypography, { ref: "dynamicSlotRef", staticClass: "b-selection-card__slot", class: o.slotConditionalClasses, attrs: { el: "div" } }, [e._t("dynamicContent")], 2) : e._e()], 1)]);
-}, se = [], ie = /* @__PURE__ */ N(
-  ne,
-  re,
-  se,
+}, te = [], oe = /* @__PURE__ */ T(
+  Z,
+  ee,
+  te,
   !1,
   null,
   "6a98f99e"
 );
-const ue = ie.exports, ce = {
+const ae = oe.exports, le = {
   model: { prop: "modelValue" }
-}, de = /* @__PURE__ */ O({
-  ...ce,
+}, ne = /* @__PURE__ */ $({
+  ...le,
   __name: "selection-card-group",
   props: {
     description: { default: null },
@@ -162,45 +160,42 @@ const ue = ie.exports, ce = {
     variant: { default: "checkbox" }
   },
   emits: ["update:model-value", "input"],
-  setup(u, { emit: e }) {
-    const t = u, { emitValue: o } = ee(e), a = D(), C = (r) => !!a[r], s = n(() => ({
+  setup(i, { emit: e }) {
+    const t = i, { emitValue: o } = U(e), a = L(), h = (n) => !!a[n], r = l(() => ({
       "b-selection-card-group__items--horizontal": t.layout === "horizontal"
-    })), d = h(t.modelValue);
-    j(
+    })), d = v(t.modelValue);
+    A(
       () => t.modelValue,
       () => {
         d.value = t.modelValue;
       }
     );
-    const E = $("error"), V = n(() => !t.disabled && !t.readonly && !!t.errorMessage), x = h(null), { width: _ } = Y(x), g = n(() => Q.split("px")[0]), S = n(() => U.split("px")[0]), y = n(() => _.value < g.value ? "small" : _.value >= g.value && _.value < S.value ? "medium" : "large"), l = n(() => {
-      var r;
-      return ((r = t.itemsPerRow) == null ? void 0 : r[y == null ? void 0 : y.value]) || t.items.length;
-    }), R = n(() => {
+    const w = M("error"), B = l(() => !t.disabled && !t.readonly && !!t.errorMessage), g = v(null), { width: f } = N(g), C = l(() => q.split("px")[0]), k = l(() => z.split("px")[0]), R = l(() => f.value < C.value ? "small" : f.value >= C.value && f.value < k.value ? "medium" : "large"), u = l(() => t.itemsPerRow?.[R?.value] || t.items.length), x = l(() => {
       if (!t.itemsPerRow)
         return [];
-      const r = [];
-      for (let v = 0; v < t.items.length; v += l == null ? void 0 : l.value)
-        r.push(t.items.slice(v, v + (l == null ? void 0 : l.value)));
-      return r;
-    }), c = n(() => 12 / (l == null ? void 0 : l.value)), m = n(() => l != null && l.value ? new Array(l == null ? void 0 : l.value).fill({
+      const n = [];
+      for (let y = 0; y < t.items.length; y += u?.value)
+        n.push(t.items.slice(y, y + u?.value));
+      return n;
+    }), c = l(() => 12 / u?.value), m = l(() => u?.value ? new Array(u?.value).fill({
       // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy
       small: c.value,
       medium: c.value,
       large: c.value
-    }) : []), p = (r) => {
-      d.value = r, o(r);
-    }, b = n(() => t.variant === "radio");
-    return P(q, b), W(() => {
-      t.itemsPerRow && Object.values(t.itemsPerRow).forEach((r) => {
-        if (r && (r < 2 || r > 6))
+    }) : []), p = (n) => {
+      d.value = n, o(n);
+    }, _ = l(() => t.variant === "radio");
+    return O(P, _), D(() => {
+      t.itemsPerRow && Object.values(t.itemsPerRow).forEach((n) => {
+        if (n && (n < 2 || n > 6))
           throw new Error(
             "itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information."
           );
       });
-    }), { __sfc: !0, props: t, emit: e, emitValue: o, slots: a, hasSlot: C, conditionalItemsClasses: s, inputValue: d, errorMessageId: E, shouldShowGroupError: V, containerRef: x, width: _, smallBreakpoint: g, mediumBreakpoint: S, currentBreakpoint: y, computedItemsPerRow: l, computedRows: R, itemColumnWidth: c, computedColumnWidth: m, onInput: p, isRadioVariant: b, BentoSelectionCard: ue, ControlsGroup: ae, ErrorMessage: oe, GridLayout: te };
+    }), { __sfc: !0, props: t, emit: e, emitValue: o, slots: a, hasSlot: h, conditionalItemsClasses: r, inputValue: d, errorMessageId: w, shouldShowGroupError: B, containerRef: g, width: f, smallBreakpoint: C, mediumBreakpoint: k, currentBreakpoint: R, computedItemsPerRow: u, computedRows: x, itemColumnWidth: c, computedColumnWidth: m, onInput: p, isRadioVariant: _, BentoSelectionCard: ae, ControlsGroup: K, ErrorMessage: J, GridLayout: H };
   }
 });
-var pe = function() {
+var re = function() {
   var e = this, t = e._self._c, o = e._self._setupProxy;
   return t(o.ControlsGroup, { ref: "containerRef", staticClass: "b-selection-card-group", attrs: { "aria-describedby": o.shouldShowGroupError ? o.errorMessageId : null, "aria-required": e.required, label: e.label, "hide-label": e.hideLabel, description: e.description, disabled: e.disabled, "tooltip-text": e.tooltipText, readonly: e.readonly, required: e.required, optional: e.optional, "component-name": "selection-card-group" } }, [!e.itemsPerRow || e.layout === "vertical" ? t("div", { staticClass: "b-selection-card-group__items", class: o.conditionalItemsClasses }, e._l(e.items, function(a) {
     return t(o.BentoSelectionCard, e._b({ key: `selection-card-${a.value}`, staticClass: "b-selection-card-group__item", attrs: { "model-value": o.inputValue, readonly: e.readonly || a.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || a.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && a.icon ? { key: "icon", fn: function() {
@@ -210,31 +205,31 @@ var pe = function() {
     }, proxy: !0 } : null, o.hasSlot("dynamicContent") && a.dynamicContent ? { key: "dynamicContent", fn: function() {
       return [e._t("dynamicContent", null, null, a)];
     }, proxy: !0 } : null], null, !0) }, "bento-selection-card", a, !1));
-  }), 1) : [t("div", { key: `selection-card-group-layout-breakpoint-${o.currentBreakpoint}` }, e._l(o.computedRows, function(a, C) {
-    return t(o.GridLayout, { key: `selection-card-group-row-${C}-cols-${o.computedItemsPerRow}`, staticClass: "b-selection-card-group__items--wrap", attrs: { "column-width": o.computedColumnWidth }, scopedSlots: e._u([e._l(a, function(s, d) {
+  }), 1) : [t("div", { key: `selection-card-group-layout-breakpoint-${o.currentBreakpoint}` }, e._l(o.computedRows, function(a, h) {
+    return t(o.GridLayout, { key: `selection-card-group-row-${h}-cols-${o.computedItemsPerRow}`, staticClass: "b-selection-card-group__items--wrap", attrs: { "column-width": o.computedColumnWidth }, scopedSlots: e._u([e._l(a, function(r, d) {
       return { key: `col-${Number(d) + 1}`, fn: function() {
-        return [t(o.BentoSelectionCard, e._b({ key: `selection-card-${s.value}`, staticClass: "b-selection-card-group__item b-selection-card-group__item--full-height", attrs: { "model-value": o.inputValue, readonly: e.readonly || s.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || s.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && s.icon ? { key: "icon", fn: function() {
-          return [e._t("icon", null, null, s)];
-        }, proxy: !0 } : null, o.hasSlot("content") && s.content ? { key: "content", fn: function() {
-          return [e._t("content", null, null, s)];
-        }, proxy: !0 } : null, o.hasSlot("dynamicContent") && s.dynamicContent ? { key: "dynamicContent", fn: function() {
-          return [e._t("dynamicContent", null, null, s)];
-        }, proxy: !0 } : null], null, !0) }, "bento-selection-card", s, !1))];
+        return [t(o.BentoSelectionCard, e._b({ key: `selection-card-${r.value}`, staticClass: "b-selection-card-group__item b-selection-card-group__item--full-height", attrs: { "model-value": o.inputValue, readonly: e.readonly || r.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || r.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && r.icon ? { key: "icon", fn: function() {
+          return [e._t("icon", null, null, r)];
+        }, proxy: !0 } : null, o.hasSlot("content") && r.content ? { key: "content", fn: function() {
+          return [e._t("content", null, null, r)];
+        }, proxy: !0 } : null, o.hasSlot("dynamicContent") && r.dynamicContent ? { key: "dynamicContent", fn: function() {
+          return [e._t("dynamicContent", null, null, r)];
+        }, proxy: !0 } : null], null, !0) }, "bento-selection-card", r, !1))];
       }, proxy: !0 };
     })], null, !0) });
   }), 1)], o.shouldShowGroupError ? t(o.ErrorMessage, { staticClass: "b-selection-card-group__error-message", attrs: { id: o.errorMessageId, "error-message": e.errorMessage } }) : e._e()], 2);
-}, fe = [], _e = /* @__PURE__ */ N(
-  de,
-  pe,
-  fe,
+}, se = [], ie = /* @__PURE__ */ T(
+  ne,
+  re,
+  se,
   !1,
   null,
   "f5ed58f5"
 );
-const Ve = _e.exports;
+const Re = ie.exports;
 export {
-  ue as B,
-  B as a,
-  Ve as s
+  ae as B,
+  S as a,
+  Re as s
 };
-//# sourceMappingURL=selection-card-group.EGigQJOW.js.map
+//# sourceMappingURL=selection-card-group.BaK3Rt4K.js.map