@adyen/bento-vue2 1.81.0 → 1.82.0

package/dist/chunks/card.BYWF_Zvo.js

@@ -0,0 +1,137 @@
+import { defineComponent as L, useSlots as D, ref as C, watch as h, computed as o } from "vue";
+import { B as H, d as M } from "./typography.hlOAxsEn.js";
+import { C as U } from "./chevron-down.eYtgv5ly.js";
+import { C as O } from "./chevron-up.d8cwIlA_.js";
+import { u as R } from "./use-expandable-content-height.GkjjbmPy.js";
+import { u as z } from "./use-has-slot.C9lQZ6nz.js";
+import { g as W } from "./generate-uid.NJ8tVoha.js";
+import { u as F } from "./index.B6WW_F-J.js";
+import { o as K } from "./resize.Bqks3WUm.js";
+import { B as N } from "./button-actions.types.BptAXjD8.js";
+import { B as P } from "./button-actions.N3D-Bb_x.js";
+import { n as Y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/card.css";
+var y = /* @__PURE__ */ ((s) => (s.PRIMARY = "primary", s.SECONDARY = "secondary", s))(y || {}), c = /* @__PURE__ */ ((s) => (s.DEFAULT = "default", s.SMALL = "small", s))(c || {});
+const j = {
+  "en-US": {
+    hideContent: "Hide content",
+    showContent: "Show content"
+  },
+  "ja-JP": {
+    hideContent: "コンテンツを非表示",
+    showContent: "コンテンツを表示"
+  },
+  "pt-BR": {
+    hideContent: "Ocultar conteúdo",
+    showContent: "Mostrar conteúdo"
+  }
+}, J = {
+  i18n: { messages: j },
+  name: "bento-card"
+}, q = /* @__PURE__ */ L({
+  ...J,
+  props: {
+    actions: { default: null },
+    actionsLayout: { default: N.BUTTONS_END },
+    background: { default: y.PRIMARY },
+    clickable: { type: Boolean, default: !1 },
+    closed: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    expandable: { type: Boolean, default: !1 },
+    titleSize: { default: c.DEFAULT }
+  },
+  emits: ["click", "expanded"],
+  setup(s, { emit: t }) {
+    const e = s, { t: a } = F(), n = D(), l = z(n), i = C(null), f = W("card"), r = C(!e.closed);
+    h(
+      () => e.closed,
+      (d) => {
+        r.value = !d;
+      }
+    );
+    const p = o(() => l("default") || l("description") || l("header")), x = o(() => l("default") || l("header")), _ = o(
+      () => {
+        var d;
+        return (l("content") || ((d = e.actions) == null ? void 0 : d.length)) && (!e.expandable || e.expandable && r.value);
+      }
+    ), g = o(() => e.clickable && !e.disabled ? 0 : -1), m = o(() => e.expandable && !e.disabled ? 0 : -1), v = o(() => ({
+      [`b-card--${e.background}`]: e.background,
+      "b-card--clickable": e.clickable,
+      "b-card--expandable": e.expandable,
+      "b-card--disabled": (e.clickable || e.expandable) && e.disabled
+    })), k = o(() => ({
+      "b-card__header--expandable": e.expandable,
+      "b-card__header--without-body": !e.expandable && !_.value
+    })), w = o(() => ({
+      "b-card__toggle--small-text": e.titleSize === c.SMALL
+    })), B = o(() => ({
+      "b-card__body--expandable": e.expandable && l("content"),
+      "b-card__body--without-header": !e.expandable && !p.value
+    })), S = o(() => ({
+      "b-card__content--without-header": !e.expandable && !p.value,
+      "b-card__content--expandable": e.expandable
+    })), T = o(() => {
+      const d = !e.expandable && e.actions && !l("content");
+      return {
+        "b-card__actions--without-content": d,
+        "b-card__actions--without-content-and-with-header": d && p.value
+      };
+    }), A = o(() => ({
+      "b-card__title-wrapper--truncated": l("header")
+    })), E = o(
+      () => ({
+        el: "div",
+        variant: e.titleSize === c.DEFAULT ? "title" : "body",
+        strongest: e.titleSize === c.SMALL,
+        wide: e.titleSize === c.SMALL
+      })
+    ), { updateContentHeight: u, contentHeight: b } = R(i, r), I = o(
+      () => e.expandable && b.value ? { "max-height": b.value } : {}
+    );
+    return h(
+      () => i.value,
+      () => {
+        let d = null;
+        !d && i.value && (d = K(i.value, () => {
+          i.value && u();
+        }));
+      }
+    ), { __sfc: !0, t: a, slots: n, hasSlot: l, props: e, emit: t, contentDiv: i, cardId: f, showContent: r, showHeader: p, showTitleWrapper: x, showCardBody: _, tabIndex: g, headerTabIndex: m, cardConditionalClasses: v, cardHeaderConditionalClasses: k, cardToggleConditionalClasses: w, cardBodyConditionalClasses: B, cardContentConditionalClasses: S, cardActionsConditionalClasses: T, cardTitleWrapperConditionalClasses: A, typography: E, updateContentHeight: u, contentHeight: b, contentMaxHeight: I, toggleExpansion: () => {
+      !e.disabled && e.expandable && (r.value = !r.value, t("expanded", r.value), u());
+    }, onClick: () => {
+      e.disabled || (t("click"), e.clickable || M(
+        'BentoCard "@click" property',
+        'Use the BentoCard "@click" with the "clickable" property to enable accessible styles.',
+        "2.0.0"
+      ));
+    }, onKeyDown: () => {
+      e.clickable && !e.disabled && t("click");
+    }, BentoTypography: H, BentoButtonActions: P, ChevronDownIcon: U, ChevronUpIcon: O };
+  }
+});
+var G = function() {
+  var t = this, e = t._self._c, a = t._self._setupProxy;
+  return e("div", { staticClass: "b-card", class: a.cardConditionalClasses, attrs: { tabindex: a.tabIndex, "data-testid": "card" }, on: { click: a.onClick, keydown: [function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : a.onKeyDown.apply(null, arguments);
+  }, function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : a.onKeyDown.apply(null, arguments);
+  }] } }, [a.hasSlot("image") ? e("div", { staticClass: "b-card__image" }, [t._t("image")], 2) : t._e(), a.showHeader ? e("div", { staticClass: "b-card__header", class: a.cardHeaderConditionalClasses, attrs: { tabindex: a.headerTabIndex, "aria-controls": t.expandable && a.showCardBody ? a.cardId : null, "aria-expanded": t.expandable ? `${a.showContent}` : null, role: t.expandable ? "button" : null }, on: { click: a.toggleExpansion, keypress: [function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : a.toggleExpansion.apply(null, arguments);
+  }, function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : a.toggleExpansion.apply(null, arguments);
+  }] } }, [e("div", { staticClass: "b-card__header-wrapper" }, [a.showTitleWrapper ? e("div", { staticClass: "b-card__header-slot-wrapper" }, [e("div", { staticClass: "b-card__title-wrapper", class: a.cardTitleWrapperConditionalClasses }, [t.expandable ? e("div", { staticClass: "b-card__toggle", class: a.cardToggleConditionalClasses }, [a.showContent ? e(a.ChevronUpIcon, { attrs: { "svg-title": a.t("hideContent"), "aria-hidden": "true" } }) : e(a.ChevronDownIcon, { attrs: { "svg-title": a.t("showContent"), "aria-hidden": "true" } })], 1) : t._e(), a.hasSlot("default") ? e(a.BentoTypography, t._b({ staticClass: "b-card__title" }, "bento-typography", a.typography, !1), [t._t("default")], 2) : t._e()], 1), a.hasSlot("header") ? [t._t("header")] : t._e()], 2) : t._e(), a.hasSlot("description") ? e(a.BentoTypography, { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [t._t("description")], 2) : t._e()], 1)]) : t._e(), e("Transition", { attrs: { name: "b-card__animation" } }, [a.showCardBody ? e("div", { staticClass: "b-card__wrapper", style: a.contentMaxHeight }, [e("div", { ref: "contentDiv", staticClass: "b-card__body", class: a.cardBodyConditionalClasses, attrs: { id: t.expandable ? a.cardId : null } }, [a.hasSlot("content") ? e("div", { staticClass: "b-card__content", class: a.cardContentConditionalClasses }, [t._t("content")], 2) : t._e(), t.actions ? e("div", { staticClass: "b-card__actions", class: a.cardActionsConditionalClasses }, [e(a.BentoButtonActions, { attrs: { actions: t.actions, layout: t.actionsLayout } })], 1) : t._e()])]) : t._e()])], 1);
+}, Q = [], V = /* @__PURE__ */ Y(
+  q,
+  G,
+  Q,
+  !1,
+  null,
+  "3b2961e0"
+);
+const ue = V.exports;
+export {
+  y as B,
+  c as a,
+  ue as c
+};
+//# sourceMappingURL=card.BYWF_Zvo.js.map

package/dist/chunks/card.BYWF_Zvo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.BYWF_Zvo.js","sources":["../../src/components/card/card.types.ts","../../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div\n        class=\"b-card\"\n        :class=\"cardConditionalClasses\"\n        :tabindex=\"tabIndex\"\n        data-testid=\"card\"\n        @click=\"onClick\"\n        @keydown.enter=\"onKeyDown\"\n        @keydown.space=\"onKeyDown\"\n    >\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"headerTabIndex\"\n            :aria-controls=\"expandable && showCardBody ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  clickable: { type: Boolean, default: false },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.clickable && !props.disabled ? 0 : -1));\n    const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--clickable': props.clickable,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': (props.clickable || props.expandable) && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            }) as InstanceType<typeof BentoTypography>['$props']\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n\n            if (!props.clickable) {\n                deprecate(\n                    'BentoCard \"@click\" property',\n                    `Use the BentoCard \"@click\" with the \"clickable\" property to enable accessible styles.`,\n                    '2.0.0'\n                );\n            }\n        }\n    };\n\n    const onKeyDown = () => {\n        if (props.clickable && !props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","headerTabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit","deprecate"],"mappings":"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"}

package/dist/chunks/checkbox-group.CIIa-cYP.js

@@ -0,0 +1,142 @@
+import { defineComponent as y, useSlots as v, toRef as x, computed as l, watch as f, ref as E, onMounted as C } from "vue";
+import { B as k } from "./checkbox.CiWvdg8S.js";
+import { g as S } from "./generate-uid.NJ8tVoha.js";
+import { d as M } from "./typography.hlOAxsEn.js";
+import { u as B } from "./use-form-layout-loading.CWbjZiwP.js";
+import { u as w } from "./form-field.D_2g7vaP.js";
+import { E as V } from "./field-label.DHGAa4cq.js";
+import { C as G } from "./controls-group.GchVWe7h.js";
+import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/checkbox-group.css";
+var n = /* @__PURE__ */ ((a) => (a.HORIZONTAL = "horizontal", a.VERTICAL = "vertical", a))(n || {});
+const h = "bento-checkbox-group", O = {
+  name: h,
+  model: { prop: "modelValue" }
+}, L = /* @__PURE__ */ y({
+  ...O,
+  props: {
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
+    description: { type: String, default: null },
+    /**
+     * If set to true, renders all checkboxes in the group in a disabled state.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Renders all checkboxes in an error state with an error message.
+     */
+    errorMessage: { type: String, default: null },
+    /**
+     * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
+     */
+    formId: { type: String, default: null },
+    /**
+     * If set to true, renders all checkboxes in the group in an error state.
+     *
+     * @deprecated Use "errorMessage" prop instead
+     */
+    hasError: { type: Boolean, default: !1 },
+    /**
+     * Shows/hides the group label.
+     */
+    hideLabel: { type: Boolean, default: null },
+    /**
+     * The checkbox group's items.
+     */
+    items: { type: Array, required: !0 },
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.
+     * Defaults to no value selected.
+     */
+    modelValue: { type: Array, default: () => [] },
+    /**
+     * Indicates the field is optional.
+     */
+    optional: { type: Boolean, default: !1 },
+    /**
+     * If set to true, renders all checkboxes in the group in a readonly state.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * Indicates the field is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Tooltip message.
+     */
+    tooltipText: { type: String, default: null },
+    /**
+     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+     */
+    variant: {
+      type: String,
+      default: n.VERTICAL,
+      validator: (a) => Object.values(n).includes(a)
+    }
+  },
+  emits: ["update:model-value", "input"],
+  setup(a, { emit: e }) {
+    const o = a, r = v(), t = S("error"), { isReadOnly: u } = B(x(o, "readonly")), { emitValue: i } = w(e), m = l(
+      () => !o.disabled && !u.value && (!!o.errorMessage || o.hasError)
+    ), b = l(() => !o.disabled && !u.value && !!o.errorMessage), _ = l(() => ({
+      "b-checkbox-group__checkboxes--horizontal": o.variant === n.HORIZONTAL
+    })), p = (s) => !!r[s], c = l(() => p("content") && o.variant !== "vertical");
+    f(
+      c,
+      (s) => {
+        if (s)
+          throw new Error("The content slot is only available for the vertical checkbox group layout");
+      },
+      { immediate: !0 }
+    );
+    const d = E(o.modelValue);
+    f(
+      () => o.modelValue,
+      () => {
+        d.value = o.modelValue;
+      }
+    );
+    const g = (s) => {
+      d.value = s, i(s);
+    };
+    return C(() => {
+      o.hasError && M(
+        'BentoCheckboxGroup "hasError" property',
+        `Use the BentoCheckboxGroup "errorMessage" property instead to indicate that there is a modifier error.
+            Having the field as "undefined" will hide/remove the error.
+            <bento-checkbox-group errorMessage="Error message text" />`,
+        "2.0.0"
+      );
+    }), { __sfc: !0, COMPONENT_NAME: h, props: o, emit: e, slots: r, errorId: t, isReadOnly: u, emitValue: i, shouldShowGroupError: m, shouldShowGroupErrorMessage: b, conditionalClasses: _, hasContentSlot: p, shouldShowSlotsError: c, inputValue: d, onModelValueUpdate: g, ControlsGroup: G, ErrorMessage: V, BentoCheckbox: k };
+  }
+});
+var R = function() {
+  var e = this, o = e._self._c, r = e._self._setupProxy;
+  return o("div", { staticClass: "b-checkbox-group" }, [o(r.ControlsGroup, { staticClass: "b-checkbox-group__checkboxes", class: r.conditionalClasses, attrs: { "aria-describedby": r.shouldShowGroupErrorMessage ? r.errorId : "", "component-name": "bento-checkbox-group", description: e.description, disabled: e.disabled, form: e.formId, "hide-label": e.hideLabel, label: e.label, optional: e.optional, required: e.required, "tooltip-text": e.tooltipText } }, e._l(e.items, function(t) {
+    return o(r.BentoCheckbox, { key: t.value, attrs: { "model-value": r.inputValue, value: t.value, disabled: e.disabled || t.disabled, "has-error": r.shouldShowGroupError || t.hasError, "error-message": r.shouldShowGroupError ? null : t.errorMessage, readonly: r.isReadOnly || t.readonly, tag: t.tag }, on: { "update:model-value": r.onModelValueUpdate }, scopedSlots: e._u([{ key: "default", fn: function() {
+      return [e._v(e._s(t.label))];
+    }, proxy: !0 }, t.description ? { key: "description", fn: function() {
+      return [e._v(e._s(t.description))];
+    }, proxy: !0 } : null, r.hasContentSlot("content") ? { key: "content", fn: function() {
+      return [e._t("content", null, null, t)];
+    }, proxy: !0 } : null], null, !0) });
+  }), 1), r.shouldShowGroupErrorMessage ? o(r.ErrorMessage, { staticClass: "b-checkbox-group__error-message", attrs: { id: r.errorId, "error-message": e.errorMessage } }) : e._e()], 1);
+}, T = [], A = /* @__PURE__ */ I(
+  L,
+  R,
+  T,
+  !1,
+  null,
+  "27db5d32"
+);
+const D = A.exports;
+export {
+  D as B,
+  n as a
+};
+//# sourceMappingURL=checkbox-group.CIIa-cYP.js.map

package/dist/chunks/checkbox-group.CIIa-cYP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.CIIa-cYP.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import { type FormFieldEmits } from '../../../../types/form-field';\nimport type { BentoCheckboxTag } from '../../checkbox.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n\nexport type BentoCheckboxGroupEmits = FormFieldEmits<any>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            component-name=\"bento-checkbox-group\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onModelValueUpdate\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, type PropType, ref, toRef, useSlots, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import {\n        type BentoCheckboxGroupEmits,\n        type BentoCheckboxGroupItems,\n        BentoCheckboxGroupVariant,\n    } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all checkboxes in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in an error state.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The checkbox group's items.\n         */\n        items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: { type: Array as PropType<Array<number | string | null>>, default: () => [] },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n         */\n        variant: {\n            type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n            default: BentoCheckboxGroupVariant.VERTICAL,\n            validator: (value: BentoCheckboxGroupVariant) => Object.values(BentoCheckboxGroupVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const slots = useSlots();\n\n    const errorId = generateUid('error');\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const shouldShowGroupError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n    );\n    const shouldShowGroupErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n    const conditionalClasses = computed(() => ({\n        'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n    }));\n\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for\n    // vue3 named scoped slots\n    const hasContentSlot = (name: string) => !!slots[name];\n    const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n    watch(\n        shouldShowSlotsError,\n        newValue => {\n            if (newValue) {\n                throw new Error('The content slot is only available for the vertical checkbox group layout');\n            }\n        },\n        { immediate: true }\n    );\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    const onModelValueUpdate = (value: any) => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    onMounted(() => {\n        if (props.hasError) {\n            deprecate(\n                'BentoCheckboxGroup \"hasError\" property',\n                `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                '2.0.0'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    const COMPONENT_NAME = 'bento-checkbox-group';\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default {\n        name: COMPONENT_NAME,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","__default__","slots","useSlots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","props","emitValue","useFormFieldEmits","emit","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onModelValueUpdate","value","onMounted","deprecate"],"mappings":";;;;;;;;;;AAMY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACgMR,MAAAE,IAAA,wBAoBAC,IAAA;AAAA,EAAe,MAAAD;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjFAE,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,GACA,EAAA,YAAAC,EAAA,IAAAC,EAAAC,EAAAC,GAAA,UAAA,CAAA,GACA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC;AAAA,MAA6B,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,UAAA,CAAA,CAAAG,EAAA,gBAAAA,EAAA;AAAA,IACoD,GAEjFM,IAAAD,EAAA,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,SAAA,CAAA,CAAAG,EAAA,YAAA,GAEAO,IAAAF,EAAA,OAAA;AAAA,MAA2C,4CAAAL,EAAA,YAAAX,EAAA;AAAA,IACiD,EAAA,GAM5FmB,IAAA,CAAAC,MAAA,CAAA,CAAAhB,EAAAgB,CAAA,GACAC,IAAAL,EAAA,MAAAG,EAAA,SAAA,KAAAR,EAAA,YAAA,UAAA;AAEA,IAAAW;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,2EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAC,IAAAC,EAAAd,EAAA,UAAA;AACA,IAAAW;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,MAAA;AAER,QAAAa,EAAA,QAAAb,EAAA;AAAA,MAAyB;AAAA,IAC7B;AAGJ,UAAAe,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,QAAAG,GACAf,EAAAe,CAAA;AAAA,IAAe;AAGnB,WAAAC,EAAA,MAAA;AACI,MAAAjB,EAAA,YACIkB;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/checkbox-input.B0NsfSNR.js

@@ -0,0 +1,117 @@
+import { defineComponent as E, ref as D, computed as l, useAttrs as g, toRefs as I } from "vue";
+import { C as s, N as R, a as _ } from "./minus-small.DJacLGTw.js";
+import { C as S } from "./checkmark-small.DVDtD4HQ.js";
+import "./index.Cl4_42j5.js";
+import { n as A } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/checkbox-input.css";
+const B = {
+  name: "checkbox-input",
+  inheritAttrs: !1
+}, L = /* @__PURE__ */ E({
+  ...B,
+  props: {
+    /**
+     * The aria label associated to the input checkbox.
+     */
+    ariaLabel: { type: String, default: "" },
+    /**
+     * An additional string that serves as description for the input checkbox (useful if the component shows a description).
+     */
+    ariaDescribedby: { type: String, default: "" },
+    /**
+     * Setting this property to true will disable the checkbox in your form.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Setting this property to true will show the checkbox in error state.
+     */
+    hasError: { type: Boolean, default: !1 },
+    /**
+     * Sets the id of the checkbox. Required for accessibility purposes
+     */
+    id: { type: String, default: null },
+    /**
+     * The :indeterminate CSS pseudo-class represents any form element
+     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
+     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
+     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
+     * This property lets you control the input.indeterminate native property.
+     */
+    indeterminate: { type: Boolean, default: !1 },
+    /**
+     * When handling a single checkbox with a singular state, use a boolean.
+     *
+     * When handling multiple checkboxes, use an array of keys.
+     * These keys exist as a set "value" prop for each checkbox.
+     */
+    modelValue: {
+      type: [Boolean, Array],
+      default: !1
+    },
+    /**
+     * Setting this property to true will set the checkbox to read only state.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * The value of the component. The DOM API casts this to a string.
+     * The browser uses "on" as the default value.
+     *
+     * In the case of multiple checkboxes this value is used as a unique key.
+     */
+    value: { type: [String, Number], default: null }
+  },
+  emits: ["update:model-value"],
+  setup(f, { emit: t }) {
+    const a = f, e = D(null), n = l(() => g()), { disabled: i, indeterminate: h, modelValue: o, readonly: b, value: c } = I(a), m = l(() => ({
+      [`b-checkbox-input--${s.DISABLED}`]: a.disabled,
+      [`b-checkbox-input--${s.READONLY}`]: a.readonly
+    })), C = l(() => ({
+      [`b-checkbox-input__outline--${s.UNCHECKED}`]: !p.value && !a.indeterminate,
+      [`b-checkbox-input__outline--${s.ERROR}`]: a.hasError,
+      [`b-checkbox-input__outline--${s.READONLY}`]: a.readonly
+    })), d = l(() => Array.isArray(o.value)), p = l(() => d.value ? o.value.some((r) => r === c.value) : o.value), y = l(
+      () => a.indeterminate ? "mixed" : `${!!p.value}`
+    ), v = l(
+      () => a.hasError && !a.disabled && !a.readonly
+    );
+    return { __sfc: !0, props: a, emit: t, inputRef: e, attrs: n, disabled: i, indeterminate: h, modelValue: o, readonly: b, value: c, conditionalClasses: m, outlineConditionalClasses: C, isCheckboxGroup: d, isChecked: p, ariaChecked: y, ariaInvalid: v, onClick: (r) => {
+      if (b.value) {
+        r.preventDefault();
+        return;
+      }
+    }, onChange: (r) => {
+      if (i.value)
+        return;
+      const x = r.target.checked;
+      if (d.value) {
+        const u = [...o.value], k = u.indexOf(c.value);
+        k === -1 ? u.push(c.value) : u.splice(k, 1), t(_.UPDATE, u);
+      } else
+        t(_.UPDATE, x);
+    }, CheckmarkSmallIcon: S, MinusSmallIcon: R };
+  }
+});
+var N = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-checkbox-input", class: e.conditionalClasses }, [e.indeterminate ? a(e.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.isChecked ? a(e.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : t._e(), a("input", t._b({ ref: "inputRef", staticClass: "b-checkbox-input__outline", class: e.outlineConditionalClasses, attrs: { id: t.id, type: "checkbox", "aria-label": t.ariaLabel, "aria-checked": e.ariaChecked, "aria-describedby": t.ariaDescribedby, "aria-invalid": e.ariaInvalid, disabled: e.disabled, "aria-readonly": e.readonly }, domProps: { checked: e.isChecked, indeterminate: e.indeterminate, value: e.value }, on: { click: e.onClick, change: e.onChange, keydown: [function(n) {
+    var i;
+    if (!n.type.indexOf("key") && t._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"])) return null;
+    n.preventDefault(), (i = e.inputRef) == null || i.click();
+  }, function(n) {
+    var i;
+    if (!n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter")) return null;
+    n.preventDefault(), (i = e.inputRef) == null || i.click();
+  }] } }, "input", e.attrs, !1))], 1);
+}, O = [], P = /* @__PURE__ */ A(
+  L,
+  N,
+  O,
+  !1,
+  null,
+  "f3fd11b3"
+);
+const F = P.exports;
+export {
+  F as C
+};
+//# sourceMappingURL=checkbox-input.B0NsfSNR.js.map

package/dist/chunks/checkbox-input.B0NsfSNR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-input.B0NsfSNR.js","sources":["../../src/components/internal/checkbox-input/checkbox-input.vue"],"sourcesContent":["<template>\n    <div class=\"b-checkbox-input\" :class=\"conditionalClasses\">\n        <!-- Don't change order because it matters for CSS. Icons first -->\n        <minus-small-icon v-if=\"indeterminate\" class=\"b-checkbox-input__icon\" svg-title=\"\" aria-hidden=\"true\" />\n        <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox-input__icon\" svg-title=\"\" aria-hidden=\"true\" />\n        <input\n            :id=\"id\"\n            ref=\"inputRef\"\n            v-bind=\"attrs\"\n            type=\"checkbox\"\n            class=\"b-checkbox-input__outline\"\n            :class=\"outlineConditionalClasses\"\n            :aria-label=\"ariaLabel\"\n            :aria-checked=\"ariaChecked\"\n            :aria-describedby=\"ariaDescribedby\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :indeterminate.prop=\"indeterminate\"\n            :value=\"value\"\n            :aria-readonly=\"readonly\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n            @keydown.space.prevent=\"inputRef?.click()\"\n            @keydown.enter.prevent=\"inputRef?.click()\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type HTMLAttributes, type PropType, ref, toRefs, useAttrs } from 'vue';\n    import {\n        CheckboxInputEvent,\n        type CheckboxInputGroupItems,\n        CheckboxInputState,\n        type CheckboxInputType,\n        type MultiCheckboxInputType,\n    } from '@/internal/checkbox-input/checkbox-input.types';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n    import { isVue3 } from 'vue-demi';\n\n    const props = defineProps({\n        /**\n         * The aria label associated to the input checkbox.\n         */\n        ariaLabel: { type: String, default: '' },\n\n        /**\n         * An additional string that serves as description for the input checkbox (useful if the component shows a description).\n         */\n        ariaDescribedby: { type: String, default: '' },\n\n        /**\n         * Setting this property to true will disable the checkbox in your form.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will show the checkbox in error state.\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Sets the id of the checkbox. Required for accessibility purposes\n         */\n        id: { type: String, default: null },\n\n        /**\n         * The :indeterminate CSS pseudo-class represents any form element\n         * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n         * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n         * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n         * This property lets you control the input.indeterminate native property.\n         */\n        indeterminate: { type: Boolean, default: false },\n\n        /**\n         * When handling a single checkbox with a singular state, use a boolean.\n         *\n         * When handling multiple checkboxes, use an array of keys.\n         * These keys exist as a set \"value\" prop for each checkbox.\n         */\n        modelValue: {\n            type: [Boolean, Array] as PropType<CheckboxInputType | CheckboxInputGroupItems>,\n            default: false,\n        },\n\n        /**\n         * Setting this property to true will set the checkbox to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The value of the component. The DOM API casts this to a string.\n         * The browser uses \"on\" as the default value.\n         *\n         * In the case of multiple checkboxes this value is used as a unique key.\n         */\n        value: { type: [String, Number], default: null },\n    });\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const inputRef = ref<HTMLInputElement | null>(null);\n\n    // filter out style classes because in vue3 they are also part of attrs\n    const attrs = computed(() => {\n        if (isVue3) {\n            const { class: _class, style: _style, ...rest } = useAttrs();\n            return rest;\n        } else {\n            return useAttrs();\n        }\n    });\n\n    const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n    const conditionalClasses = computed(() => ({\n        [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled,\n        [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const outlineConditionalClasses = computed(() => ({\n        [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate,\n        [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError,\n        [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n\n    const isChecked = computed(() => {\n        if (!isCheckboxGroup.value) {\n            return modelValue.value as boolean;\n        }\n\n        return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value);\n    });\n\n    // ARIA fields\n    const ariaChecked = computed<HTMLAttributes['aria-checked']>(() =>\n        props.indeterminate ? 'mixed' : `${!!isChecked.value}`\n    );\n    const ariaInvalid = computed<HTMLAttributes['aria-invalid']>(\n        () => props.hasError && !props.disabled && !props.readonly\n    );\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (readonly.value) {\n            event.preventDefault();\n            return;\n        }\n    };\n    const onChange = (event: Event) => {\n        if (disabled.value) {\n            return;\n        }\n\n        const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)];\n            const index = newCheckedList.indexOf(value.value);\n\n            if (index === -1) {\n                newCheckedList.push(value.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            emit(CheckboxInputEvent.UPDATE, newCheckedList);\n        } else {\n            emit(CheckboxInputEvent.UPDATE, newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component that renders a checkbox input (without label)\n     *\n     * @example\n     * import { BentoCheckboxInput } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckboxInput },\n     *     template: `\n     *      <label for=\"checkbox-id\">Your label</label>\n     *      <span id=\"description-id\">Description</span>\n     *      <bento-checkbox-input id=\"checkbox-id\" aria=label=\"Your label\" aria-describedby=\"description-id\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'checkbox-input',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-input.scss\" />\n"],"names":["__default__","inputRef","ref","attrs","computed","useAttrs","disabled","indeterminate","modelValue","readonly","value","toRefs","props","conditionalClasses","CheckboxInputState","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaChecked","ariaInvalid","event","newValue","newCheckedList","index","emit","CheckboxInputEvent"],"mappings":";;;;;;AAiMI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5FAC,IAAAC,EAAA,IAAA,GAGAC,IAAAC,EAAA,MAKQC,EAAA,CACJ,GAGJ,EAAA,UAAAC,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAU,EAAA,QAAA,EAAA,GAAAF,EAAA;AAAA,MACqB,CAAA,qBAAAE,EAAA,QAAA,EAAA,GAAAF,EAAA;AAAA,IACA,EAAA,GAGhEG,IAAAX,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAU,EAAA,SAAA,EAAA,GAAA,CAAAE,EAAA,SAAA,CAAAJ,EAAA;AAAA,MAC6C,CAAA,8BAAAE,EAAA,KAAA,EAAA,GAAAF,EAAA;AAAA,MACzB,CAAA,8BAAAE,EAAA,QAAA,EAAA,GAAAF,EAAA;AAAA,IACG,EAAA,GAGzEK,IAAAb,EAAA,MAAA,MAAA,QAAAI,EAAA,KAAA,CAAA,GAEAQ,IAAAZ,EAAA,MACIa,EAAA,QAIAT,EAAA,MAAA,KAAA,CAAAU,MAAAA,MAAAR,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAIzFW,IAAAf;AAAA,MAAoB,MAAAQ,EAAA,gBAAA,UAAA,GAAA,CAAA,CAAAI,EAAA,KAAA;AAAA,IACoC,GAExDI,IAAAhB;AAAA,MAAoB,MAAAQ,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA;AAAA,IACkC;uQAItD,CAAAS,MAAA;AACI,UAAAZ,EAAA,OAAA;AACI,QAAAY,EAAA,eAAA;AACA;AAAA,MAAA;AAAA,IACJ,aAEJ,CAAAA,MAAA;AACI,UAAAf,EAAA;AACI;AAGJ,YAAAgB,IAAAD,EAAA,OAAA;AAEA,UAAAJ,EAAA,OAAA;AACI,cAAAM,IAAA,CAAA,GAAAf,EAAA,KAAA,GACAgB,IAAAD,EAAA,QAAAb,EAAA,KAAA;AAEA,QAAAc,MAAA,KACID,EAAA,KAAAb,EAAA,KAAA,IAEAa,EAAA,OAAAC,GAAA,CAAA,GAEJC,EAAAC,EAAA,QAAAH,CAAA;AAAA,MAA8C;AAE9C,QAAAE,EAAAC,EAAA,QAAAJ,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;"}