@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/avatar-image.js

@@ -1,4 +1,4 @@
-import { A as t, B as e, a as o } from "./chunks/index.7eefc59c.js";
+import { A as t, a as e, B as o } from "./chunks/avatar-image.DhlR-7Yg.js";
 export {
   t as AvatarImage,
   e as BentoAvatarImageColor,

package/dist/badge.js

@@ -1,10 +1,10 @@
-import { defineComponent as n, computed as r } from "vue";
-import { u as o } from "./chunks/aria-label.ac9651a5.js";
-import { g as c } from "./chunks/get-slot-text.99c3d860.js";
-import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index.css";
-var s = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.ATTENTION = "attention", e.WARNING = "warning", e.CRITICAL = "critical", e.SUCCESS = "success", e))(s || {});
-const _ = n({
+import { defineComponent as o, computed as n } from "vue";
+import { u as l } from "./chunks/aria-label.CaUURpnB.js";
+import { g as i } from "./chunks/get-slot-text.Cgn-E48s.js";
+import { n as c } from "./chunks/_plugin-vue2_normalizer.CeySl7Fu.js";
+import "./assets/badge.css";
+var s = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.ATTENTION = "attention", t.WARNING = "warning", t.CRITICAL = "critical", t.SUCCESS = "success", t))(s || {});
+const d = o({
   name: "adl-badge",
   props: {
     /**
@@ -14,7 +14,7 @@ const _ = n({
     variant: {
       type: String,
       default: s.DEFAULT,
-      validator: (e) => Object.values(s).includes(e)
+      validator: (t) => Object.values(s).includes(t)
     },
     /**
      * For testing purposes you can decide which testId your adl-badge instance will have
@@ -24,36 +24,34 @@ const _ = n({
       default: "adl-badge"
     }
   },
-  setup(e, { slots: t }) {
-    const a = o({
-      label: c(t)("default"),
+  setup(t, { slots: e }) {
+    const a = l({
+      label: i(e)("default"),
       defaultFallback: "badge"
-    }), l = r(() => ({
-      [`adl2-badge--${e.variant}`]: !0
+    }), r = n(() => ({
+      [`adl2-badge--${t.variant}`]: !0
     }));
     return {
       // Values
       ariaLabel: a,
-      conditionalClasses: l
+      conditionalClasses: r
     };
   }
 });
-var d = function() {
-  var t = this, a = t._self._c;
-  return t._self._setupProxy, a("div", { staticClass: "adl2-badge", class: t.conditionalClasses, attrs: { "aria-label": t.ariaLabel, role: "status", "data-testid": t.testId } }, [t.$slots.icon ? t._t("icon") : t._e(), t._t("default")], 2);
-}, u = [], p = /* @__PURE__ */ i(
-  _,
+var u = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "adl2-badge", class: e.conditionalClasses, attrs: { "aria-label": e.ariaLabel, role: "status", "data-testid": e.testId } }, [e.$slots.icon ? e._t("icon") : e._e(), e._t("default")], 2);
+}, _ = [], f = /* @__PURE__ */ c(
   d,
   u,
+  _,
   !1,
   null,
-  "5636e22c",
-  null,
-  null
+  "5636e22c"
 );
-const g = p.exports;
+const C = f.exports;
 export {
-  g as AdlBadge,
+  C as AdlBadge,
   s as AdlBadgeVariant
 };
 //# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../src/components/badge/badge.types.ts","../src/components/badge/badge.vue"],"sourcesContent":["export enum AdlBadgeVariant {\n    DEFAULT = 'default',\n    ATTENTION = 'attention',\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    SUCCESS = 'success',\n}\n","<template>\n    <div class=\"adl2-badge\" :class=\"conditionalClasses\" :aria-label=\"ariaLabel\" role=\"status\" :data-testid=\"testId\">\n        <slot v-if=\"$slots.icon\" name=\"icon\"></slot>\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { AdlBadgeVariant } from './badge.types';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'adl-badge',\n        props: {\n            /**\n             * Types of flavour of Badge\n             * @values default, attention, warning, critical, success\n             */\n            variant: {\n                type: String as PropType<AdlBadgeVariant>,\n                default: AdlBadgeVariant.DEFAULT,\n                validator: (value: AdlBadgeVariant) => Object.values(AdlBadgeVariant).includes(value),\n            },\n            /**\n             * For testing purposes you can decide which testId your adl-badge instance will have\n             */\n            testId: {\n                type: String,\n                default: 'adl-badge',\n            },\n        },\n        setup(props, { slots }) {\n            const ariaLabel = useAriaLabel({\n                label: getSlotText(slots)('default'),\n                defaultFallback: 'badge',\n            });\n\n            const conditionalClasses = computed((): { [x: string]: boolean } => ({\n                [`adl2-badge--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                ariaLabel,\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./badge.scss\" />\n"],"names":["AdlBadgeVariant","AdlBadgeVariant2","_sfc_main","defineComponent","value","props","slots","ariaLabel","useAriaLabel","getSlotText","conditionalClasses","computed"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACaZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA;AAAA,MAAA,OAAAC,EAAAH,CAAA,EAAA,SAAA;AAAA,MACA,iBAAA;AAAA,IACA,CAAA,GAGAI,IAAAC,EAAA,OAAA;AAAA,MAAA,CAAA,eAAAN,EAAA,SAAA,GAAA;AAAA,IACA,EAAA;AAGA,WAAA;AAAA;AAAA,MAAA,WAAAE;AAAA,MAEA,oBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"badge.js","sources":["../src/components/badge/badge.types.ts","../src/components/badge/badge.vue"],"sourcesContent":["export enum AdlBadgeVariant {\n    DEFAULT = 'default',\n    ATTENTION = 'attention',\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    SUCCESS = 'success',\n}\n","<template>\n    <div class=\"adl2-badge\" :class=\"conditionalClasses\" :aria-label=\"ariaLabel\" role=\"status\" :data-testid=\"testId\">\n        <slot v-if=\"$slots.icon\" name=\"icon\"></slot>\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { AdlBadgeVariant } from './badge.types';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'adl-badge',\n        props: {\n            /**\n             * Types of flavour of Badge\n             * @values default, attention, warning, critical, success\n             */\n            variant: {\n                type: String as PropType<AdlBadgeVariant>,\n                default: AdlBadgeVariant.DEFAULT,\n                validator: (value: AdlBadgeVariant) => Object.values(AdlBadgeVariant).includes(value),\n            },\n            /**\n             * For testing purposes you can decide which testId your adl-badge instance will have\n             */\n            testId: {\n                type: String,\n                default: 'adl-badge',\n            },\n        },\n        setup(props, { slots }) {\n            const ariaLabel = useAriaLabel({\n                label: getSlotText(slots)('default'),\n                defaultFallback: 'badge',\n            });\n\n            const conditionalClasses = computed((): { [x: string]: boolean } => ({\n                [`adl2-badge--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                ariaLabel,\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./badge.scss\" />\n"],"names":["AdlBadgeVariant","AdlBadgeVariant2","_sfc_main","defineComponent","value","props","slots","ariaLabel","useAriaLabel","getSlotText","conditionalClasses","computed"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACaZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA;AAAA,MAAA,OAAAC,EAAAH,CAAA,EAAA,SAAA;AAAA,MACA,iBAAA;AAAA,IACA,CAAA,GAGAI,IAAAC,EAAA,OAAA;AAAA,MAAA,CAAA,eAAAN,EAAA,OAAA,EAAA,GAAA;AAAA,IACA,EAAA;AAGA,WAAA;AAAA;AAAA,MAAA,WAAAE;AAAA,MAEA,oBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/button.js

@@ -1,97 +1,17 @@
-import { a } from "./chunks/button.9d6435ae.js";
-import { b as P, B as S } from "./chunks/button.9d6435ae.js";
-import { B as K, c as $, a as h, b as w } from "./chunks/button-actions.81db18e8.js";
-import { B as E, a as F } from "./chunks/loading-button.eafc9e1b.js";
-import { defineComponent as c, computed as u, useSlots as i } from "vue";
-import "./chunks/index.4c062058.js";
-import { n as p } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index6.css";
-const _ = {}, g = /* @__PURE__ */ c({
-  ..._,
-  __name: "toggle-button",
-  props: {
-    /**
-     * Reduces sizing of button
-     */
-    condensed: {
-      type: a.props.condensed.type,
-      default: !1
-    },
-    /**
-     * Disables button functonality
-     */
-    disabled: {
-      type: a.props.disabled.type,
-      default: !1
-    },
-    /**
-     * Sets color set to inverse
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Types of flavour of Button
-     * @values primary, secondary, tertiary
-     */
-    variant: {
-      type: a.props.variant.type,
-      default: "primary",
-      validator: a.props.variant.validator
-    },
-    /**
-     * The state of the button whether it is toggled or not.
-     */
-    toggled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["click", "update:toggled"],
-  setup(r, { emit: t }) {
-    const e = r, o = u(
-      () => e.variant === "tertiary" ? "tertiary-with-background" : e.variant
-    ), s = u(() => ({
-      ["b-toggle-button--condensed"]: e == null ? void 0 : e.condensed,
-      [`b-toggle-button--${o.value}-toggled`]: e.toggled,
-      ["b-toggle-button--inverse"]: e.inverse
-    })), n = (l) => {
-      l.stopPropagation(), e != null && e.disabled || (t("click", l), t("update:toggled", !e.toggled));
-    }, d = i();
-    return { __sfc: !0, props: e, emit: t, computedVariant: o, conditionalClasses: s, onClick: n, slots: d, getSlotKeyIfVue3: (l) => ({}), BentoButton: a };
-  }
-});
-var f = function() {
-  var t = this, e = t._self._c, o = t._self._setupProxy;
-  return e(o.BentoButton, t._b({ staticClass: "b-toggle-button", class: o.conditionalClasses, attrs: { "aria-expanded": `${t.toggled}`, condensed: t.condensed, disabled: t.disabled, inverse: t.inverse, variant: o.computedVariant }, on: { "!click": function(s) {
-    return s.stopPropagation(), o.onClick.apply(null, arguments);
-  } }, scopedSlots: t._u([t._l(o.slots, function(s, n) {
-    return { key: n, fn: function() {
-      return [t._t(n, null, null, o.getSlotKeyIfVue3(n))];
-    }, proxy: !0 };
-  })], null, !0) }, "bento-button", t.$attrs, !1));
-}, B = [], m = /* @__PURE__ */ p(
-  g,
-  f,
-  B,
-  !1,
-  null,
-  "da4cca72",
-  null,
-  null
-);
-const k = m.exports;
+import { B as n, b as B, a } from "./chunks/button.DhAUh5JA.js";
+import { B as s, c as u, a as r, b as i } from "./chunks/button-actions.Bg9ey0p6.js";
+import { B as p, a as x } from "./chunks/loading-button.CoF1IhEU.js";
+import { B as d } from "./chunks/toggle-button.2U-vbQhk.js";
 export {
-  a as BentoButton,
-  K as BentoButtonActions,
-  $ as BentoButtonActionsLayout,
-  h as BentoButtonActionsLayoutBasic,
-  w as BentoButtonActionsLayoutExtended,
-  P as BentoButtonPropClass,
-  S as BentoButtonVariant,
-  E as BentoLoadingButton,
-  F as BentoLoadingButtonState,
-  k as BentoToggleButton
+  n as BentoButton,
+  s as BentoButtonActions,
+  u as BentoButtonActionsLayout,
+  r as BentoButtonActionsLayoutBasic,
+  i as BentoButtonActionsLayoutExtended,
+  B as BentoButtonPropClass,
+  a as BentoButtonVariant,
+  p as BentoLoadingButton,
+  x as BentoLoadingButtonState,
+  d as BentoToggleButton
 };
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../src/components/button/components/toggle-button/toggle-button.vue"],"sourcesContent":["<template>\n    <bento-button\n        class=\"b-toggle-button\"\n        v-bind=\"$attrs\"\n        :aria-expanded=\"`${toggled}`\"\n        :condensed=\"condensed\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        :variant=\"computedVariant\"\n        @click.capture.stop=\"onClick\"\n    >\n        <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]>\n            <slot :name=\"innerSlot\" v-bind=\"getSlotKeyIfVue3(innerSlot)\" />\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import BentoButton from '@/components/button/button.vue';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import { isVue3 } from 'vue-demi';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n\n        /**\n         * The state of the button whether it is toggled or not.\n         */\n        toggled: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n\n        /**\n         * Update the toggle state when the button has been clicked.\n         */\n        (e: 'update:toggled', newToggleState: boolean): void;\n    }>();\n\n    const computedVariant = computed(\n        () => (props.variant === 'tertiary' ? 'tertiary-with-background' : props.variant) as BentoButtonVariant\n    );\n\n    const conditionalClasses = computed(() => ({\n        [`b-toggle-button--condensed`]: props?.condensed,\n        [`b-toggle-button--${computedVariant.value}-toggled`]: props.toggled,\n        [`b-toggle-button--inverse`]: props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n        if (!props?.disabled) {\n            emit('click', e);\n            emit('update:toggled', !props.toggled);\n        }\n    };\n\n    const slots = useSlots();\n    // If we don't provide a key to `slot` in vue 3, we will get type errors\n    const getSlotKeyIfVue3 = (slotName: string | number) => (isVue3 ? { key: slotName } : {});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Toggle button is used to switch between two states (example: menu shown, menu hidden).\n     * It functions as a regular button but retains its state to indicate whether the associated menu or element is active or inactive.\n     *\n     * @example\n     * import { BentoToggleButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToggleButton },\n     *     template: `\n     *          <bento-toggle-button state=\"toggled\" variant=\"secondary\">\n     *              Button that can be toggled\n     *          </bento-toggle-button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle-button.scss\" />\n"],"names":["__default__","computedVariant","computed","props","conditionalClasses","onClick","e","emit","slots","useSlots","slotName"],"mappings":";;;;;;;;AAyHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzCAC,IAAAC;AAAA,MAAwB,MAAAC,EAAA,YAAA,aAAA,6BAAAA,EAAA;AAAA,IACqD,GAG7EC,IAAAF,EAAA,OAAA;AAAA,MAA2C,CAAA,4BAAA,GAAAC,KAAA,gBAAAA,EAAA;AAAA,MACA,CAAA,oBAAAF,EAAA,eAAA,GAAAE,EAAA;AAAA,MACsB,CAAA,0BAAA,GAAAA,EAAA;AAAA,IACzB,EAAA,GAGxCE,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GACAH,KAAA,QAAAA,EAAA,aACII,EAAA,SAAAD,CAAA,GACAC,EAAA,kBAAA,CAAAJ,EAAA,OAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA;8HAEA,CAAAC,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/card.js

@@ -1,117 +1,7 @@
-import { defineComponent as T, useSlots as I, ref as C, watch as h, computed as n } from "vue";
-import { B as H } from "./chunks/index.dd30e538.js";
-import { C as D, a as M } from "./chunks/chevron-up.81185563.js";
-import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import { u as z } from "./chunks/use-has-slot.fbeb19ec.js";
-import { g as R } from "./chunks/unique-id.a2a2b458.js";
-import { u as O } from "./chunks/i18n.eb5b985b.js";
-import { o as W } from "./chunks/resize.a041304d.js";
-import { c as F, B as N } from "./chunks/button-actions.81db18e8.js";
-import { n as P } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index7.css";
-var f = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o))(f || {}), c = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.SMALL = "small", o))(c || {});
-const Y = {
-  "en-US": {
-    showCardContent: "Show card content",
-    hideCardContent: "Hide card content"
-  }
-}, j = {
-  i18n: { messages: Y },
-  name: "bento-card"
-}, q = /* @__PURE__ */ T({
-  ...j,
-  props: {
-    actions: { default: null },
-    actionsLayout: { default: F.BUTTONS_END },
-    background: { default: f.PRIMARY },
-    closed: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    expandable: { type: Boolean, default: !1 },
-    titleSize: { default: c.DEFAULT }
-  },
-  emits: ["click", "expanded"],
-  setup(o, { emit: t }) {
-    const a = o, { t: e } = O(), s = I(), d = z(s), i = C(null), x = R("card"), r = C(!a.closed);
-    h(
-      () => a.closed,
-      (l) => {
-        r.value = !l;
-      }
-    );
-    const p = n(() => d("default") || d("description") || d("header")), y = n(() => d("default") || d("header")), b = n(
-      () => {
-        var l;
-        return (d("content") || ((l = a.actions) == null ? void 0 : l.length)) && (!a.expandable || a.expandable && r.value);
-      }
-    ), g = n(() => a.expandable && !a.disabled ? 0 : -1), v = n(() => ({
-      [`b-card--${a.background}`]: a.background,
-      "b-card--expandable": a.expandable,
-      "b-card--disabled": a.expandable && a.disabled
-    })), m = n(() => ({
-      "b-card__header--expandable": a.expandable,
-      "b-card__header--without-body": !a.expandable && !b.value
-    })), w = n(() => ({
-      "b-card__toggle--small-text": a.titleSize === c.SMALL
-    })), S = n(() => ({
-      "b-card__body--expandable": a.expandable && d("content"),
-      "b-card__body--without-header": !a.expandable && !p.value
-    })), k = n(() => ({
-      "b-card__content--without-header": !a.expandable && !p.value,
-      "b-card__content--expandable": a.expandable
-    })), B = n(() => {
-      const l = !a.expandable && a.actions && !d("content");
-      return {
-        "b-card__actions--without-content": l,
-        "b-card__actions--without-content-and-with-header": l && p.value
-      };
-    }), A = n(() => ({
-      "b-card__title-wrapper--truncated": d("header")
-    })), E = n(
-      () => ({
-        el: "div",
-        variant: a.titleSize === c.DEFAULT ? "title" : "body",
-        strongest: a.titleSize === c.SMALL,
-        wide: a.titleSize === c.SMALL
-      })
-    ), { updateContentHeight: _, contentHeight: u } = U(i, r), L = n(
-      () => a.expandable && u.value ? { "max-height": u.value } : {}
-    );
-    return h(
-      () => i.value,
-      () => {
-        let l = null;
-        !l && i.value && (l = W(i.value, () => {
-          i.value && _();
-        }));
-      }
-    ), { __sfc: !0, t: e, slots: s, hasSlot: d, props: a, emit: t, contentDiv: i, cardId: x, showContent: r, showHeader: p, showTitleWrapper: y, showCardBody: b, tabIndex: g, cardConditionalClasses: v, cardHeaderConditionalClasses: m, cardToggleConditionalClasses: w, cardBodyConditionalClasses: S, cardContentConditionalClasses: k, cardActionsConditionalClasses: B, cardTitleWrapperConditionalClasses: A, typography: E, updateContentHeight: _, contentHeight: u, contentMaxHeight: L, toggleExpansion: () => {
-      !a.disabled && a.expandable && (r.value = !r.value, t("expanded", r.value), _());
-    }, onClick: () => {
-      a.disabled || t("click");
-    }, BentoTypography: H, BentoButtonActions: N, ChevronDownIcon: D, ChevronUpIcon: M };
-  }
-});
-var G = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { staticClass: "b-card", class: e.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: e.onClick } }, [e.hasSlot("image") ? a("div", { staticClass: "b-card__image" }, [t._t("image")], 2) : t._e(), e.showHeader ? a("div", { staticClass: "b-card__header", class: e.cardHeaderConditionalClasses, attrs: { tabindex: e.tabIndex, "aria-controls": t.expandable ? e.cardId : null, "aria-expanded": t.expandable ? `${e.showContent}` : null, role: t.expandable ? "button" : null }, on: { click: e.toggleExpansion, keypress: [function(s) {
-    return !s.type.indexOf("key") && t._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.toggleExpansion.apply(null, arguments);
-  }, function(s) {
-    return !s.type.indexOf("key") && t._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : e.toggleExpansion.apply(null, arguments);
-  }] } }, [a("div", { staticClass: "b-card__header-wrapper" }, [e.showTitleWrapper ? a("div", { staticClass: "b-card__header-slot-wrapper" }, [a("div", { staticClass: "b-card__title-wrapper", class: e.cardTitleWrapperConditionalClasses }, [t.expandable ? a("div", { staticClass: "b-card__toggle", class: e.cardToggleConditionalClasses }, [e.showContent ? a(e.ChevronUpIcon, { attrs: { "svg-title": e.t("hideCardContent"), "aria-hidden": "true" } }) : a(e.ChevronDownIcon, { attrs: { "svg-title": e.t("showCardContent"), "aria-hidden": "true" } })], 1) : t._e(), e.hasSlot("default") ? a(e.BentoTypography, t._b({ staticClass: "b-card__title" }, "bento-typography", e.typography, !1), [t._t("default")], 2) : t._e()], 1), e.hasSlot("header") ? [t._t("header")] : t._e()], 2) : t._e(), e.hasSlot("description") ? a(e.BentoTypography, { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [t._t("description")], 2) : t._e()], 1)]) : t._e(), a("Transition", { attrs: { name: "b-card__animation" } }, [e.showCardBody ? a("div", { staticClass: "b-card__wrapper", style: e.contentMaxHeight }, [a("div", { ref: "contentDiv", staticClass: "b-card__body", class: e.cardBodyConditionalClasses, attrs: { id: t.expandable ? e.cardId : null } }, [e.hasSlot("content") ? a("div", { staticClass: "b-card__content", class: e.cardContentConditionalClasses }, [t._t("content")], 2) : t._e(), t.actions ? a("div", { staticClass: "b-card__actions", class: e.cardActionsConditionalClasses }, [a(e.BentoButtonActions, { attrs: { actions: t.actions, layout: t.actionsLayout } })], 1) : t._e()])]) : t._e()])], 1);
-}, J = [], K = /* @__PURE__ */ P(
-  q,
-  G,
-  J,
-  !1,
-  null,
-  "d9419ec6",
-  null,
-  null
-);
-const la = K.exports;
+import { c as o, B as r, a as t } from "./chunks/card.70Xvba2C.js";
 export {
-  la as BentoCard,
-  f as BentoCardBackground,
-  c as BentoCardTitleSize
+  o as BentoCard,
+  r as BentoCardBackground,
+  t as BentoCardTitleSize
 };
 //# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.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 class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\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=\"tabIndex\"\n            :aria-controls=\"expandable ? 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('hideCardContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" 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, 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 '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions?: BentoButtonActionsList;\n\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n            /**\n             * Defines the color of card background\n             */\n            background?: BentoCardBackground | `${BentoCardBackground}`;\n\n            /**\n             * Sets the expandable card in a closed state\n             */\n            closed?: boolean;\n\n            /**\n             * Disables the expandable card\n             */\n            disabled?: boolean;\n\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable?: boolean;\n\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;\n        }>(),\n        {\n            actions: null,\n            actionsLayout: BentoButtonActionsLayout.BUTTONS_END,\n            background: BentoCardBackground.PRIMARY,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            titleSize: BentoCardTitleSize.DEFAULT,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'click');\n        (e: 'expanded', isExpanded: boolean);\n    }>();\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.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': 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    };\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","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/checkbox.js

@@ -1,158 +1,11 @@
-import { B as y, a as l } from "./chunks/checkbox.bfed007c.js";
-import { C as D } from "./chunks/checkbox-input.1c3cc8ed.js";
-import { defineComponent as g, toRef as v, computed as n, watch as c, ref as x } from "vue";
-import { g as E } from "./chunks/unique-id.a2a2b458.js";
-import { d as k } from "./chunks/index.dd30e538.js";
-import { u as C } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { C as S } from "./chunks/controls-group.4fb50009.js";
-import { E as M } from "./chunks/error-message.31ec12b7.js";
-import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index8.css";
-var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
-const p = "bento-checkbox-group", T = g({
-  name: p,
-  components: { BentoCheckbox: y, ControlsGroup: S, ErrorMessage: M },
-  model: { prop: "modelValue" },
-  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: s.VERTICAL,
-      validator: (r) => Object.values(s).includes(r)
-    }
-  },
-  emits: [l.UPDATE, l.INPUT],
-  setup(r, { emit: e, slots: a }) {
-    const o = E("error"), { isReadOnly: u } = C(v(r, "readonly")), h = n(
-      () => !r.disabled && !u.value && (!!r.errorMessage || r.hasError)
-    ), f = n(
-      () => !r.disabled && !u.value && !!r.errorMessage
-    ), b = n(() => ({
-      "b-checkbox-group__checkboxes--horizontal": r.variant === s.HORIZONTAL
-    })), i = (t) => !!a[t], _ = n(() => i("content") && r.variant !== "vertical");
-    c(
-      _,
-      (t) => {
-        if (t)
-          throw new Error("The content slot is only available for the vertical checkbox group layout");
-      },
-      { immediate: !0 }
-    );
-    const d = x(r.modelValue);
-    c(
-      () => r.modelValue,
-      () => {
-        d.value = r.modelValue;
-      }
-    );
-    const m = (t) => {
-      d.value = t, e(l.UPDATE, t), e(l.INPUT, t);
-    };
-    return r.hasError && k(
-      '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"
-    ), {
-      // Values
-      COMPONENT_NAME: p,
-      errorId: o,
-      isReadOnly: u,
-      shouldShowGroupError: h,
-      shouldShowGroupErrorMessage: f,
-      conditionalClasses: b,
-      inputValue: d,
-      hasContentSlot: i,
-      // Methods
-      onInput: m
-    };
-  }
-});
-var B = function() {
-  var e = this, a = e._self._c;
-  return e._self._setupProxy, a("div", { staticClass: "b-checkbox-group" }, [a("controls-group", { staticClass: "b-checkbox-group__checkboxes", class: e.conditionalClasses, attrs: { "aria-describedby": e.shouldShowGroupErrorMessage ? e.errorId : "", "component-name": e.COMPONENT_NAME, 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(o) {
-    return a("bento-checkbox", { key: o.value, attrs: { "model-value": e.inputValue, value: o.value, disabled: e.disabled || o.disabled, "has-error": e.shouldShowGroupError || o.hasError, "error-message": e.shouldShowGroupError ? null : o.errorMessage, readonly: e.isReadOnly || o.readonly, tag: o.tag }, on: { "update:model-value": e.onInput }, scopedSlots: e._u([{ key: "default", fn: function() {
-      return [e._v(e._s(o.label))];
-    }, proxy: !0 }, o.description ? { key: "description", fn: function() {
-      return [e._v(e._s(o.description))];
-    }, proxy: !0 } : null, e.hasContentSlot("content") ? { key: "content", fn: function() {
-      return [e._t("content", null, null, o)];
-    }, proxy: !0 } : null], null, !0) });
-  }), 1), e.shouldShowGroupErrorMessage ? a("error-message", { staticClass: "b-checkbox-group__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e()], 1);
-}, w = [], G = /* @__PURE__ */ I(
-  T,
-  B,
-  w,
-  !1,
-  null,
-  "9e93a4d5",
-  null,
-  null
-);
-const q = G.exports;
+import { B as t, a } from "./chunks/checkbox.Bi2RDBEZ.js";
+import { C as x } from "./chunks/checkbox-input.DwDwI2BD.js";
+import { c as B, B as c } from "./chunks/checkbox-group.B-KdeRXC.js";
 export {
-  y as BentoCheckbox,
-  l as BentoCheckboxEvent,
-  q as BentoCheckboxGroup,
-  s as BentoCheckboxGroupVariant,
-  D as BentoCheckboxState
+  t as BentoCheckbox,
+  a as BentoCheckboxEvent,
+  B as BentoCheckboxGroup,
+  c as BentoCheckboxGroupVariant,
+  x as BentoCheckboxState
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import type { BentoCheckboxTag } from '@/components/checkbox';\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\ninterface 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","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            :component-name=\"COMPONENT_NAME\"\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=\"onInput\"\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 lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { BentoCheckboxEvent } from '../../checkbox.types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    /**\n     * The name of the component to be used in the Vue devtools and console warnings.\n     */\n    const COMPONENT_NAME = 'bento-checkbox-group';\n\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 defineComponent({\n        name: COMPONENT_NAME,\n        components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n        model: { prop: 'modelValue' },\n        props: {\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<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) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { emit, slots }) {\n            const errorId = generateUid('error');\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !isReadOnly.value && !!props.errorMessage\n            );\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 => !!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 onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n                emit(BentoCheckboxEvent.INPUT, value);\n            };\n\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            return {\n                // Values\n                COMPONENT_NAME,\n                errorId,\n                isReadOnly,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n                hasContentSlot,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","slots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onInput","deprecate"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}