@adyen/bento-vue3 1.27.0 → 1.28.0

package/dist/segmented-control.js

@@ -1,252 +1,7 @@
-import { defineComponent as y, ref as c, computed as m, resolveComponent as B, openBlock as b, createElementBlock as g, normalizeClass as k, createElementVNode as S, createVNode as I, withCtx as W, createTextVNode as T, toDisplayString as A, createCommentVNode as D, toRef as N, toRefs as U, onMounted as E, resolveDirective as q, Fragment as F, renderList as R, withDirectives as P, createBlock as z } from "vue";
-import { B as M } from "./chunks/index.ee15db35.js";
-import { g as O } from "./chunks/unique-id.a2a2b458.js";
-import { _ as w } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { b as j } from "./chunks/tooltip.36172265.js";
-import { u as G } from "./chunks/i18n.f7e6533e.js";
-import { u as H } from "./chunks/aria-label.ac9651a5.js";
-import { o as J } from "./chunks/resize.a041304d.js";
-import "./assets/index26.css";
-const K = y({
-  name: "bento-segmented-control-button",
-  components: { BentoTypography: M },
-  props: {
-    /**
-     * The string the button will showcase
-     */
-    label: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Indicates the value of the input that will be returned when it's selected
-     */
-    value: {
-      type: [String, Number],
-      required: !0
-    },
-    /**
-     * This property should not be used directly.
-     * It will be used by v-model directive on the segmented control component
-     */
-    modelValue: {
-      type: [String, Number],
-      default: null
-    },
-    /**
-     * Disable the radio button (optional)
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the button with a 100% width
-     */
-    fullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the button with a truncated text if the space is not enough to render the whole content
-     */
-    truncate: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the button with centered text in case the text has to wrap multiple lines
-     */
-    wrap: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:model-value"],
-  setup(e, { emit: o }) {
-    const r = c(), d = O("segmented-control-button"), s = m(() => e.value === e.modelValue), u = m(() => ({
-      "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 {
-      // Values
-      segmentedControlButtonLabel: r,
-      segmentedControlButtonId: d,
-      isChecked: s,
-      conditionalClasses: u,
-      // Methods
-      onClick: () => {
-        e.disabled || o("update:model-value", e.value);
-      }
-    };
-  }
-});
-const Q = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"], X = ["for"];
-function Y(e, o, r, d, s, u) {
-  const l = B("bento-typography");
-  return b(), g("div", {
-    class: k(["b-segmented-control-button", e.conditionalClasses])
-  }, [
-    S("input", {
-      id: e.segmentedControlButtonId,
-      "aria-checked": e.isChecked,
-      "aria-label": e.label,
-      checked: e.isChecked,
-      disabled: e.disabled,
-      value: e.value,
-      type: "radio",
-      class: "b-segmented-control-button__input",
-      role: "radio",
-      onChange: o[0] || (o[0] = (...i) => e.onClick && e.onClick(...i))
-    }, null, 40, Q),
-    e.label ? (b(), g("label", {
-      key: 0,
-      for: e.segmentedControlButtonId,
-      class: "b-segmented-control-button__label-container"
-    }, [
-      I(l, {
-        ref: "segmentedControlButtonLabel",
-        class: "b-segmented-control-button__label",
-        el: "span",
-        variant: "body",
-        stronger: ""
-      }, {
-        default: W(() => [
-          T(A(e.label), 1)
-        ]),
-        _: 1
-      }, 512)
-    ], 8, X)) : D("", !0)
-  ], 2);
-}
-const Z = /* @__PURE__ */ w(K, [["render", Y], ["__scopeId", "data-v-f27ff53f"]]);
-var v = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(v || {});
-const C = {
-  "en-US": {
-    ariaLabelFallback: "Segmented control"
-  }
-}, x = y({
-  name: "bento-segmented-control",
-  i18n: { messages: C },
-  components: { SegmentedControlButton: Z },
-  directives: { BentoTooltipDirective: j },
-  props: {
-    /**
-     * Items that will populate the segmented control.
-     */
-    items: {
-      type: Array,
-      required: !0,
-      validator: (e) => e.length <= 5
-    },
-    /**
-     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
-     */
-    modelValue: {
-      type: [Number, String, null],
-      required: !0
-    },
-    /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-     */
-    /**
-     * Accessible name describing the segmented control.
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * If set to true, renders the component full width.
-     */
-    fullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 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.
-     */
-    wrap: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [v.UPDATE],
-  setup(e, { attrs: o, emit: r }) {
-    const { t: d } = G({ messages: C }), s = N(e, "modelValue"), u = c(o["aria-label"]), { ariaLabel: l } = U(e), i = H({
-      ariaLabel: u.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: l,
-      defaultFallback: d("ariaLabelFallback")
-    }), t = c(), a = c(), f = c(), _ = m(() => !e.wrap);
-    E(() => {
-      J(t.value, () => {
-        var n;
-        t.value && (f.value = (n = a == null ? void 0 : a.value) == null ? void 0 : n.map(
-          (p) => p.$refs.segmentedControlButtonLabel.$el.offsetWidth < p.$refs.segmentedControlButtonLabel.$el.scrollWidth
-        ));
-      });
-    });
-    const $ = m(
-      () => e.items.map((n, p) => {
-        var h;
-        return {
-          ...n,
-          tooltipText: _.value && ((h = f == null ? void 0 : f.value) != null && h[p]) ? n.label : void 0
-        };
-      })
-    ), L = (n) => {
-      r(v.UPDATE, n);
-    }, V = m(() => ({
-      "b-segmented-control--hug": !e.fullWidth,
-      "b-segmented-control--full-width": e.fullWidth,
-      "b-segmented-control--truncate": _.value,
-      "b-segmented-control--wrap": e.wrap
-    }));
-    return {
-      // Values
-      computedAriaLabel: i,
-      inputValue: s,
-      segmentedControlRef: t,
-      segmentedControlButtonRef: a,
-      computedItems: $,
-      truncate: _,
-      conditionalClasses: V,
-      // Methods
-      onInput: L
-    };
-  }
-});
-function ee(e, o, r, d, s, u) {
-  const l = B("segmented-control-button"), i = q("bento-tooltip-directive");
-  return b(), g("div", {
-    ref: "segmentedControlRef",
-    role: "group",
-    class: k(["b-segmented-control", e.conditionalClasses])
-  }, [
-    (b(!0), g(F, null, R(e.computedItems, (t, a) => P((b(), z(l, {
-      ref_for: !0,
-      ref: "segmentedControlButtonRef",
-      key: `segmented-control-item-${a}-${t.label}`,
-      class: "b-segmented-control__item",
-      label: t.label,
-      value: t.value,
-      disabled: t.disabled,
-      truncate: e.truncate,
-      wrap: e.wrap,
-      "full-width": e.fullWidth,
-      "model-value": e.inputValue,
-      "onUpdate:modelValue": e.onInput
-    }, null, 8, ["label", "value", "disabled", "truncate", "wrap", "full-width", "model-value", "onUpdate:modelValue"])), [
-      [i, t.tooltipText]
-    ])), 128))
-  ], 2);
-}
-const ue = /* @__PURE__ */ w(x, [["render", ee], ["__scopeId", "data-v-d443d921"]]);
+import { B as t } from "./chunks/segmented-control.NnFfAdTq.js";
+import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
 export {
-  ue as BentoSegmentedControl,
-  v as BentoSegmentedControlEvent
+  t as BentoSegmentedControl,
+  r as BentoSegmentedControlEvent
 };
 //# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../vue2/src/components/segmented-control/segmented-control.types.ts","../../vue2/src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\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 lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent, ref } from 'vue';\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * The string the button will showcase\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on the segmented control component\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a truncated text if the space is not enough to render the whole content\n             */\n            truncate: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with centered text in case the text has to wrap multiple lines\n             */\n            wrap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['update:model-value'],\n        setup(props, { emit }) {\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            return {\n                // Values\n                segmentedControlButtonLabel,\n                segmentedControlButtonId,\n                isChecked,\n                conditionalClasses,\n                // Methods\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","export interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\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            v-bento-tooltip-directive=\"item.tooltipText\"\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            @update:model-value=\"onInput\"\n        ></segmented-control-button>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, toRef, toRefs } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import messages from './messages.json';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\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 defineComponent({\n        name: 'bento-segmented-control',\n        i18n: { messages },\n        components: { SegmentedControlButton },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: {\n                type: Array as PropType<BentoSegmentedControlItem[]>,\n                required: true,\n                validator: (arr: Array<BentoSegmentedControlItem[]>) => arr.length <= 5,\n            },\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: {\n                type: [Number, String, null],\n                required: true,\n            },\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name describing the segmented control.\n             */\n            ariaLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\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: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        emits: [BentoSegmentedControlEvent.UPDATE],\n        setup(props, { attrs, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const inputValue = toRef(props, 'modelValue');\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: t('ariaLabelFallback'),\n            });\n\n            const segmentedControlRef = ref();\n            const segmentedControlButtonRef = ref();\n            const hasEllipsis = ref();\n\n            const truncate = computed(() => !props.wrap);\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(BentoSegmentedControlEvent.UPDATE, 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\n            return {\n                // Values\n                computedAriaLabel,\n                inputValue,\n                segmentedControlRef,\n                segmentedControlButtonRef,\n                computedItems,\n                truncate,\n                conditionalClasses,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["_sfc_main$1","defineComponent","BentoTypography","props","emit","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","conditionalClasses","createElementVNode","_ctx","_hoisted_1","openBlock","createElementBlock","createVNode","_component_bento_typography","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","messages","SegmentedControlButton","BentoTooltipDirective","arr","attrs","t","useI18n","inputValue","toRef","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value","_directive_bento_tooltip_directive","resolveDirective","normalizeClass","item"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/selection-card.js

@@ -1,387 +1,7 @@
-import { defineComponent as K, useSlots as Q, computed as n, inject as ae, ref as S, openBlock as r, createElementBlock as w, normalizeClass as y, unref as a, createElementVNode as V, renderSlot as p, createCommentVNode as m, withModifiers as te, createBlock as i, withCtx as s, createTextVNode as O, toDisplayString as T, createVNode as le, watch as oe, provide as ne, Fragment as re, renderList as de, mergeProps as ie, createSlots as se, normalizeProps as q, guardReactiveProps as M } from "vue";
-import { B as _ } from "./chunks/index.ee15db35.js";
-import { u as ce } from "./chunks/aria-label.ac9651a5.js";
-import { g as G } from "./chunks/unique-id.a2a2b458.js";
-import { u as ue } from "./chunks/use-has-slot.4d98bf29.js";
-import { a as ye } from "./chunks/radio-input.1dd15424.js";
-import { a as be } from "./chunks/checkbox-input.99336948.js";
-import { _ as W } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { C as fe } from "./chunks/controls-group.8357e3fd.js";
-import { E as me } from "./chunks/error-message.d2bdeb80.js";
-import "./assets/index30.css";
-var x = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e))(x || {});
-const X = Symbol("selection card radio input injection key"), pe = {
-  key: 0,
-  class: "b-selection-card__icon",
-  role: "presentation"
-}, ve = ["for", "onClick"], ge = {
-  name: "bento-selection-card"
-}, he = /* @__PURE__ */ K({
-  ...ge,
-  props: {
-    /**
-     * The description of the selection card
-     */
-    description: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Disables the selection card
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Shows the selection card in error state
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * This property should not be used directly.
-     * It will be used by v-model directive on selection card component.
-     *
-     * When handling a single input, use a string or a number.
-     *
-     * When handling multiple inputs, use an array of keys.
-     * These keys exist as a set "value" prop for each input.
-     */
-    modelValue: {
-      type: [Boolean, String, Array],
-      default: null
-    },
-    /**
-     * Sets the selection card to readonly
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The subtitle of the selection card
-     */
-    subtitle: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The title of the selection card
-     */
-    title: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Indicates the value of the input that will be returned when it's checked.
-     */
-    value: {
-      type: [String, Number],
-      required: !0
-    }
-  },
-  emits: ["input", "update:model-value"],
-  setup(e, { emit: v }) {
-    const t = e, I = Q(), c = ue(I), g = G("selection-card-input-id"), b = G("selection-card-description"), R = n(
-      () => t.modelValue
-    ), h = n(
-      () => t.modelValue
-    ), E = n(() => ({
-      "b-selection-card--checked": Y.value
-    })), B = n(() => ({
-      [`b-selection-card--${x.DISABLED}`]: t.disabled,
-      [`b-selection-card--${x.ERROR}`]: t.hasError,
-      [`b-selection-card--${x.READONLY}`]: t.readonly,
-      "b-selection-card--center-aligned": A.value
-    })), d = n(() => ({
-      "b-selection-card__checkbox-container--center-aligned": A.value
-    })), U = n(() => ({
-      "b-selection-card__checkbox-container-text--center-aligned": A.value
-    })), o = n(() => ({
-      "b-selection-card__slot--with-icon": c("icon")
-    })), z = ce({
-      ariaLabel: t.title,
-      label: t.value
-    }), P = n(() => Array.isArray(t.modelValue)), Y = n(() => $.value ? t.value === t.modelValue : P.value ? t.modelValue.some((l) => l === t.value) : t.modelValue), $ = ae(X, S(!1)), A = n(() => !t.subtitle && !t.description), C = S(null), L = S(null), N = S(null), j = (l) => {
-      var f, u, k, F, H, J;
-      if (!t.disabled && !t.readonly) {
-        if (L.value && ((u = (f = L.value) == null ? void 0 : f.$el) != null && u.contains(l.target)) || N.value && ((F = (k = N.value) == null ? void 0 : k.$el) != null && F.contains(l.target)) || C.value && ((J = (H = C.value) == null ? void 0 : H.$el) != null && J.contains(l.target)))
-          return;
-        const ee = Z();
-        D(ee);
-      }
-    }, Z = () => {
-      var f;
-      const l = ((f = C.value) == null ? void 0 : f.$refs.inputRef).checked;
-      if (P.value) {
-        const u = [...t.modelValue], k = u.indexOf(t.value);
-        return k === -1 ? u.push(t.value) : u.splice(k, 1), u;
-      }
-      return $.value ? t.value : !l;
-    }, D = (l) => {
-      !t.disabled && !t.readonly && (v("update:model-value", l), v("input", l));
-    };
-    return (l, f) => (r(), w("div", {
-      class: y(["b-selection-card", a(E)]),
-      onClick: j
-    }, [
-      V("div", {
-        class: y(["b-selection-card__container", a(B)])
-      }, [
-        V("div", {
-          class: y(["b-selection-card__checkbox-container", a(d)])
-        }, [
-          V("div", {
-            class: y(["b-selection-card__checkbox-container-text", a(U)])
-          }, [
-            a(c)("icon") ? (r(), w("div", pe, [
-              p(l.$slots, "icon", {}, void 0, !0)
-            ])) : m("", !0),
-            V("label", {
-              for: a(g),
-              class: "b-selection-card__text",
-              onClick: te(j, ["stop", "prevent"])
-            }, [
-              e.subtitle ? (r(), i(a(_), {
-                key: 0,
-                class: "b-selection-card__description",
-                el: "span",
-                variant: "caption"
-              }, {
-                default: s(() => [
-                  O(T(e.subtitle), 1)
-                ]),
-                _: 1
-              })) : m("", !0),
-              le(a(_), {
-                el: "span",
-                variant: "title"
-              }, {
-                default: s(() => [
-                  O(T(e.title), 1)
-                ]),
-                _: 1
-              }),
-              e.description ? (r(), i(a(_), {
-                key: 1,
-                id: "descriptionId",
-                class: "b-selection-card__description",
-                el: "span",
-                variant: "body"
-              }, {
-                default: s(() => [
-                  O(T(e.description), 1)
-                ]),
-                _: 1
-              })) : m("", !0)
-            ], 8, ve)
-          ], 2),
-          a($) ? (r(), i(a(ye), {
-            key: 0,
-            id: a(g),
-            ref_key: "inputRef",
-            ref: C,
-            "aria-label": a(z),
-            "aria-describedby": e.description ? a(b) : void 0,
-            disabled: e.disabled,
-            "has-error": e.hasError,
-            "aria-readonly": e.readonly ?? void 0,
-            value: e.value,
-            readonly: e.readonly,
-            "model-value": a(R),
-            "onUpdate:modelValue": D
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"])) : (r(), i(a(be), {
-            key: 1,
-            id: a(g),
-            ref_key: "inputRef",
-            ref: C,
-            "aria-label": a(z),
-            "aria-describedby": e.description ? a(b) : void 0,
-            disabled: e.disabled,
-            "has-error": e.hasError,
-            "aria-readonly": e.readonly ?? void 0,
-            value: e.value,
-            readonly: e.readonly,
-            "model-value": a(h),
-            "onUpdate:modelValue": D
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"]))
-        ], 2),
-        a(c)("content") ? (r(), i(a(_), {
-          key: 0,
-          ref_key: "slotRef",
-          ref: L,
-          el: "div",
-          class: y(["b-selection-card__slot", a(o)])
-        }, {
-          default: s(() => [
-            p(l.$slots, "content", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["class"])) : m("", !0),
-        a(c)("dynamicContent") && a(Y) ? (r(), i(a(_), {
-          key: 1,
-          ref_key: "dynamicSlotRef",
-          ref: N,
-          el: "div",
-          class: y(["b-selection-card__slot", a(o)])
-        }, {
-          default: s(() => [
-            p(l.$slots, "dynamicContent", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["class"])) : m("", !0)
-      ], 2)
-    ], 2));
-  }
-});
-const Ce = /* @__PURE__ */ W(he, [["__scopeId", "data-v-cd9d5db4"]]), ke = {}, _e = /* @__PURE__ */ K({
-  ...ke,
-  __name: "selection-card-group",
-  props: {
-    /**
-     * Descriptive supporting text visbile underneath the label.
-     */
-    description: { type: String, default: null },
-    /**
-     * If set to true, renders all cards in the group in a disabled state.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Renders all cards in an error state with an error message.
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.
-     */
-    formId: { type: String, default: null },
-    /**
-     * Shows/hides the group label.
-     */
-    hideLabel: { type: Boolean, default: null },
-    /**
-     * Label of the group. Required for accessibility purposes, even if it's not shown
-     */
-    label: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.
-     * @values horizontal, vertical
-     */
-    layout: {
-      type: String,
-      default: "vertical"
-    },
-    /**
-     * The selection card group's items.
-     */
-    items: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.
-     * Defaults to no value selected.
-     */
-    modelValue: {
-      type: [Array, String, Number],
-      default: null
-    },
-    /**
-     * Indicates the field is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * Indicates the field is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * If set to true, renders all cards in the group in a readonly state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.
-     * @values checkbox, radio
-     */
-    variant: { type: String, default: "checkbox" }
-  },
-  emits: ["input", "update:model-value"],
-  setup(e, { emit: v }) {
-    const t = e, I = Q(), c = (d) => !!I[d], g = n(() => ({
-      "b-selection-card-group__items--horizontal": t.layout === "horizontal"
-    })), b = S(t.modelValue);
-    oe(
-      () => t.modelValue,
-      () => {
-        b.value = t.modelValue;
-      }
-    );
-    const R = G("error"), h = n(() => !t.disabled && !t.readonly && !!t.errorMessage), E = (d) => {
-      b.value = d, v("update:model-value", d), v("input", d);
-    }, B = n(() => t.variant === "radio");
-    return ne(X, B), (d, U) => (r(), i(a(fe), {
-      "aria-describedby": a(h) ? a(R) : null,
-      label: e.label,
-      "hide-label": e.hideLabel,
-      description: e.description,
-      disabled: e.disabled,
-      "tooltip-text": e.tooltipText,
-      readonly: e.readonly,
-      required: e.required,
-      optional: e.optional,
-      class: "b-selection-card-group",
-      "component-name": "selection-card-group"
-    }, {
-      default: s(() => [
-        V("div", {
-          class: y(["b-selection-card-group__items", a(g)])
-        }, [
-          (r(!0), w(re, null, de(e.items, (o) => (r(), i(Ce, ie({
-            key: `selection-card-${o.value}`,
-            class: "b-selection-card-group__item"
-          }, o, {
-            "model-value": b.value,
-            readonly: e.readonly || o.readonly,
-            "has-error": a(h),
-            disabled: e.disabled || o.disabled,
-            "onUpdate:modelValue": E
-          }), se({ _: 2 }, [
-            c("icon") && o.icon ? {
-              name: "icon",
-              fn: s(() => [
-                p(d.$slots, "icon", q(M(o)), void 0, !0)
-              ]),
-              key: "0"
-            } : void 0,
-            c("content") && o.content ? {
-              name: "content",
-              fn: s(() => [
-                p(d.$slots, "content", q(M(o)), void 0, !0)
-              ]),
-              key: "1"
-            } : void 0,
-            c("dynamicContent") && o.dynamicContent ? {
-              name: "dynamicContent",
-              fn: s(() => [
-                p(d.$slots, "dynamicContent", q(M(o)), void 0, !0)
-              ]),
-              key: "2"
-            } : void 0
-          ]), 1040, ["model-value", "readonly", "has-error", "disabled"]))), 128))
-        ], 2),
-        a(h) ? (r(), i(a(me), {
-          key: 0,
-          id: a(R),
-          "error-message": e.errorMessage,
-          class: "b-selection-card-group__error-message"
-        }, null, 8, ["id", "error-message"])) : m("", !0)
-      ]),
-      _: 3
-    }, 8, ["aria-describedby", "label", "hide-label", "description", "disabled", "tooltip-text", "readonly", "required", "optional"]));
-  }
-});
-const Ne = /* @__PURE__ */ W(_e, [["__scopeId", "data-v-8da9dd7f"]]);
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.C-YLePO4.js";
 export {
-  Ce as BentoSelectionCard,
-  Ne as BentoSelectionCardGroup,
-  x as BentoSelectionCardState
+  t as BentoSelectionCard,
+  a as BentoSelectionCardGroup,
+  n as BentoSelectionCardState
 };
 //# sourceMappingURL=selection-card.js.map