@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../vue2/src/components/badge/badge.types.ts","../../vue2/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        inheritAttrs: false,\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","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"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;ACaR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,cAAA;AAAA,EACQ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACP,SAAA;AAAA,MAKM,MAAA;AAAA,MACC,SAAAH,EAAA;AAAA,MACmB,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAA+B,OAAAC,EAAAH,CAAA,EAAA,SAAA;AAAA,MACQ,iBAAA;AAAA,IAClB,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAAqE,CAAA,eAAAN,EAAA,SAAA,GAAA;AAAA,IAC/B,EAAA;AAGtC,WAAA;AAAA;AAAA,MAAO,WAAAE;AAAA,MAEH,oBAAAG;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;AAjDU,SAAAE,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAA2C,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAqB,OAAAC,EAAA,CAAA,cAAAR,EAAA,kBAAA,CAAA;AAAA,IAAe,cAAAA,EAAA;AAAA,IAAe,MAAA;AAAA;EAC7E,GAAA;AAAA;;;;;"}
+{"version":3,"file":"badge.js","sources":["../../vue2/src/components/badge/badge.types.ts","../../vue2/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","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"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;ACaR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACC,SAAA;AAAA,MAKM,MAAA;AAAA,MACC,SAAAH,EAAA;AAAA,MACmB,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAA+B,OAAAC,EAAAH,CAAA,EAAA,SAAA;AAAA,MACQ,iBAAA;AAAA,IAClB,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAAqE,CAAA,eAAAN,EAAA,SAAA,GAAA;AAAA,IAC/B,EAAA;AAGtC,WAAA;AAAA;AAAA,MAAO,WAAAE;AAAA,MAEH,oBAAAG;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;AAhDU,SAAAE,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAA2C,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAqB,OAAAC,EAAA,CAAA,cAAAR,EAAA,kBAAA,CAAA;AAAA,IAAe,cAAAA,EAAA;AAAA,IAAe,MAAA;AAAA;EAC7E,GAAA;AAAA;;;;;"}

package/dist/button.js

@@ -1,6 +1,6 @@
-import { B as n, b as a, a as B } from "./chunks/button.51be5335.js";
-import { B as e, c as u, a as i, b as r } from "./chunks/button-actions.1dcbde15.js";
-import { B as L, a as d } from "./chunks/loading-button.75ae5144.js";
+import { B as n, b as a, a as B } from "./chunks/button.4ccc3a72.js";
+import { B as e, c as u, a as i, b as r } from "./chunks/button-actions.59449cda.js";
+import { B as L, a as d } from "./chunks/loading-button.5b8db3dc.js";
 export {
   n as BentoButton,
   e as BentoButtonActions,

package/dist/card.js

@@ -1,37 +1,36 @@
-import { defineComponent as O, ref as R, computed as a, resolveComponent as C, openBlock as o, createElementBlock as s, normalizeClass as i, withKeys as k, createElementVNode as B, createBlock as y, createCommentVNode as l, mergeProps as W, withCtx as S, renderSlot as g, createVNode as Y } from "vue";
-import { B as F, c as E, a as _ } from "./chunks/index.1d501e31.js";
-import { a as P, C as K } from "./chunks/chevron-up.cc78e526.js";
-import { h as d } from "./chunks/hasSlot.dceac207.js";
-import { g as j } from "./chunks/unique-id.a2a2b458.js";
-import { u as q } from "./chunks/i18n.3619d46c.js";
-import { B as x, c as T } from "./chunks/button-actions.1dcbde15.js";
-import { _ as G } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { defineComponent as M, ref as z, computed as a, resolveComponent as h, openBlock as o, createElementBlock as r, normalizeClass as i, withKeys as w, createElementVNode as k, createBlock as y, createCommentVNode as s, mergeProps as O, withCtx as B, renderSlot as g, createVNode as R } from "vue";
+import { B as W, a as S, b as v } from "./chunks/index.92f7d550.js";
+import { a as Y, C as F } from "./chunks/chevron-down.69bedf14.js";
+import { u as P } from "./chunks/use-has-slot.068222e6.js";
+import { g as K } from "./chunks/unique-id.a2a2b458.js";
+import { u as j } from "./chunks/i18n.6c402773.js";
+import { B as x, c as E } from "./chunks/button-actions.59449cda.js";
+import { _ as q } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import "./assets/index24.css";
-var L = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(L || {}), b = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(b || {});
-const A = {
+var A = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(A || {}), u = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(u || {});
+const T = {
   "en-US": {
     showCardContent: "Show card content",
     hideCardContent: "Hide card content"
   }
-}, J = O({
-  i18n: { messages: A },
+}, G = M({
+  i18n: { messages: T },
   name: "bento-card",
-  components: { ChevronUpIcon: P, ChevronDownIcon: K, BentoTypography: F, BentoButtonActions: x },
-  inheritAttrs: !1,
+  components: { ChevronUpIcon: Y, ChevronDownIcon: F, BentoTypography: W, BentoButtonActions: x },
   props: {
     /**
      * Defines the color of card background
      */
     background: {
       type: String,
-      default: L.PRIMARY
+      default: A.PRIMARY
     },
     /**
      * Defines the title size of the card header
      */
     titleSize: {
       type: String,
-      default: b.DEFAULT
+      default: u.DEFAULT
     },
     /**
      * The whole content of the card will be expandable in accordion manner
@@ -95,174 +94,172 @@ const A = {
      */
     actionsLayout: {
       type: String,
-      default: T.BUTTONS_END,
-      validator: (e) => Object.values(T).includes(e)
+      default: E.BUTTONS_END,
+      validator: (e) => Object.values(E).includes(e)
     }
   },
   emits: ["click", "expanded"],
-  setup(e, { emit: n, slots: t }) {
-    const { t: f } = q({ messages: A }), w = j("card"), c = R(!e.closed), u = a(
-      () => d(t)("default") || d(t)("description") || d(t)("header")
-    ), v = a(() => d(t)("default") || d(t)("header")), p = a(
+  setup(e, { emit: n, slots: m }) {
+    const { t: f } = j({ messages: T }), t = P(m), _ = K("card"), l = z(!e.closed), c = a(() => t("default") || t("description") || t("header")), p = a(() => t("default") || t("header")), C = a(
       () => {
-        var h;
-        return (d(t)("content") || ((h = e.actions) == null ? void 0 : h.length)) && (!e.expandable || e.expandable && c.value);
+        var b;
+        return (t("content") || ((b = e.actions) == null ? void 0 : b.length)) && (!e.expandable || e.expandable && l.value);
       }
-    ), m = a(() => e.expandable && !e.disabled ? 0 : -1), r = a(() => ({
+    ), d = a(() => e.expandable && !e.disabled ? 0 : -1), L = a(() => ({
       [`b-card--${e.background}`]: e.background,
       "b-card--expandable": e.expandable,
       "b-card--disabled": e.expandable && e.disabled
     })), I = a(() => ({
       "b-card__header--expandable": e.expandable,
-      "b-card__header--without-body": !e.expandable && !p.value
+      "b-card__header--without-body": !e.expandable && !C.value
     })), D = a(() => ({
-      "b-card__toggle--small-text": e.titleSize === b.SMALL
+      "b-card__toggle--small-text": e.titleSize === u.SMALL
     })), $ = a(() => ({
-      "b-card__body--expandable": e.expandable && d(t)("content"),
-      "b-card__body--without-header": !e.expandable && !u.value
-    })), U = a(() => ({
-      "b-card__content--without-header": !e.expandable && !u.value,
+      "b-card__body--expandable": e.expandable && t("content"),
+      "b-card__body--without-header": !e.expandable && !c.value
+    })), N = a(() => ({
+      "b-card__content--without-header": !e.expandable && !c.value,
       "b-card__content--expandable": e.expandable
-    })), N = a(() => {
-      const h = !e.expandable && e.actions && !d(t)("content");
+    })), U = a(() => {
+      const b = !e.expandable && e.actions && !t("content");
       return {
-        "b-card__actions--without-content": h,
-        "b-card__actions--without-content-and-with-header": h && u.value
+        "b-card__actions--without-content": b,
+        "b-card__actions--without-content-and-with-header": b && c.value
       };
     }), V = a(() => ({
-      "b-card__title-wrapper--truncated": d(t)("header")
-    })), M = a(() => ({
-      el: E.DIV,
-      variant: e.titleSize === b.DEFAULT ? _.TITLE : _.BODY,
-      strongest: e.titleSize === b.SMALL,
-      wide: e.titleSize === b.SMALL
-    })), z = () => {
-      e.disabled || (c.value = !c.value, n("expanded", c.value));
-    }, H = () => {
-      e.disabled || n("click");
-    };
+      "b-card__title-wrapper--truncated": t("header")
+    })), H = a(() => ({
+      el: S.DIV,
+      variant: e.titleSize === u.DEFAULT ? v.TITLE : v.BODY,
+      strongest: e.titleSize === u.SMALL,
+      wide: e.titleSize === u.SMALL
+    }));
     return {
       // Values
-      cardId: w,
-      cardConditionalClasses: r,
+      cardId: _,
+      cardConditionalClasses: L,
       cardBodyConditionalClasses: $,
       cardHeaderConditionalClasses: I,
-      cardContentConditionalClasses: U,
-      cardActionsConditionalClasses: N,
+      cardContentConditionalClasses: N,
+      cardActionsConditionalClasses: U,
       cardTitleWrapperConditionalClasses: V,
       cardToggleConditionalClasses: D,
-      showCardBody: p,
-      showContent: c,
-      tabIndex: m,
-      showHeader: u,
-      showTitleWrapper: v,
-      typography: M,
+      showCardBody: C,
+      showContent: l,
+      tabIndex: d,
+      showHeader: c,
+      showTitleWrapper: p,
+      typography: H,
       // Methods
-      hasSlot: d(t),
-      onClick: H,
+      hasSlot: t,
+      onClick: () => {
+        e.disabled || n("click");
+      },
       t: f,
-      toggleExpansion: z,
+      toggleExpansion: () => {
+        e.disabled || (l.value = !l.value, n("expanded", l.value));
+      },
       // Enums
-      BentoTypographyVariant: _,
-      BentoTypographyElement: E
+      BentoTypographyVariant: v,
+      BentoTypographyElement: S
     };
   }
 });
-const Q = ["tabindex", "aria-controls", "aria-expanded", "role"], X = { class: "b-card__header-wrapper" }, Z = {
+const J = ["tabindex", "aria-controls", "aria-expanded", "role"], Q = { class: "b-card__header-wrapper" }, X = {
   key: 0,
   class: "b-card__header-slot-wrapper"
-}, ee = ["id"];
-function ae(e, n, t, f, w, c) {
-  const u = C("chevron-up-icon"), v = C("chevron-down-icon"), p = C("bento-typography"), m = C("bento-button-actions");
-  return o(), s("div", {
+}, Z = ["id"];
+function ee(e, n, m, f, t, _) {
+  const l = h("chevron-up-icon"), c = h("chevron-down-icon"), p = h("bento-typography"), C = h("bento-button-actions");
+  return o(), r("div", {
     class: i(["b-card", e.cardConditionalClasses]),
     "data-testid": "card",
-    onClick: n[3] || (n[3] = (...r) => e.onClick && e.onClick(...r))
+    onClick: n[3] || (n[3] = (...d) => e.onClick && e.onClick(...d))
   }, [
-    e.showHeader ? (o(), s("div", {
+    e.showHeader ? (o(), r("div", {
       key: 0,
       class: i(["b-card__header", e.cardHeaderConditionalClasses]),
       tabindex: e.tabIndex,
       "aria-controls": e.expandable ? e.cardId : null,
       "aria-expanded": e.expandable ? `${e.showContent}` : null,
       role: e.expandable ? "button" : null,
-      onClick: n[0] || (n[0] = (...r) => e.toggleExpansion && e.toggleExpansion(...r)),
+      onClick: n[0] || (n[0] = (...d) => e.toggleExpansion && e.toggleExpansion(...d)),
       onKeypress: [
-        n[1] || (n[1] = k((...r) => e.toggleExpansion && e.toggleExpansion(...r), ["enter"])),
-        n[2] || (n[2] = k((...r) => e.toggleExpansion && e.toggleExpansion(...r), ["space"]))
+        n[1] || (n[1] = w((...d) => e.toggleExpansion && e.toggleExpansion(...d), ["enter"])),
+        n[2] || (n[2] = w((...d) => e.toggleExpansion && e.toggleExpansion(...d), ["space"]))
       ]
     }, [
-      B("div", X, [
-        e.showTitleWrapper ? (o(), s("div", Z, [
-          B("div", {
+      k("div", Q, [
+        e.showTitleWrapper ? (o(), r("div", X, [
+          k("div", {
             class: i(["b-card__title-wrapper", e.cardTitleWrapperConditionalClasses])
           }, [
-            e.expandable ? (o(), s("div", {
+            e.expandable ? (o(), r("div", {
               key: 0,
               class: i(["b-card__toggle", e.cardToggleConditionalClasses])
             }, [
-              e.showContent ? (o(), y(u, {
+              e.showContent ? (o(), y(l, {
                 key: 0,
                 "svg-title": e.t("hideCardContent"),
                 "aria-hidden": "true"
-              }, null, 8, ["svg-title"])) : (o(), y(v, {
+              }, null, 8, ["svg-title"])) : (o(), y(c, {
                 key: 1,
                 "svg-title": e.t("showCardContent"),
                 "aria-hidden": "true"
               }, null, 8, ["svg-title"]))
-            ], 2)) : l("", !0),
-            e.hasSlot("default") ? (o(), y(p, W({
+            ], 2)) : s("", !0),
+            e.hasSlot("default") ? (o(), y(p, O({
               key: 1,
               class: "b-card__title"
             }, e.typography), {
-              default: S(() => [
+              default: B(() => [
                 g(e.$slots, "default", {}, void 0, !0)
               ]),
               _: 3
-            }, 16)) : l("", !0)
+            }, 16)) : s("", !0)
           ], 2),
-          e.hasSlot("header") ? g(e.$slots, "header", { key: 0 }, void 0, !0) : l("", !0)
-        ])) : l("", !0),
+          e.hasSlot("header") ? g(e.$slots, "header", { key: 0 }, void 0, !0) : s("", !0)
+        ])) : s("", !0),
         e.hasSlot("description") ? (o(), y(p, {
           key: 1,
           class: "b-card__description",
           el: e.BentoTypographyElement.DIV,
           variant: e.BentoTypographyVariant.BODY
         }, {
-          default: S(() => [
+          default: B(() => [
             g(e.$slots, "description", {}, void 0, !0)
           ]),
           _: 3
-        }, 8, ["el", "variant"])) : l("", !0)
+        }, 8, ["el", "variant"])) : s("", !0)
       ])
-    ], 42, Q)) : l("", !0),
-    e.showCardBody ? (o(), s("div", {
+    ], 42, J)) : s("", !0),
+    e.showCardBody ? (o(), r("div", {
       key: 1,
       id: e.expandable ? e.cardId : null,
       class: i(["b-card__body", e.cardBodyConditionalClasses])
     }, [
-      e.hasSlot("content") ? (o(), s("div", {
+      e.hasSlot("content") ? (o(), r("div", {
         key: 0,
         class: i(["b-card__content", e.cardContentConditionalClasses])
       }, [
         g(e.$slots, "content", {}, void 0, !0)
-      ], 2)) : l("", !0),
-      e.actions ? (o(), s("div", {
+      ], 2)) : s("", !0),
+      e.actions ? (o(), r("div", {
         key: 1,
         class: i(["b-card__actions", e.cardActionsConditionalClasses])
       }, [
-        Y(m, {
+        R(C, {
           actions: e.actions,
           layout: e.actionsLayout
         }, null, 8, ["actions", "layout"])
-      ], 2)) : l("", !0)
-    ], 10, ee)) : l("", !0)
+      ], 2)) : s("", !0)
+    ], 10, Z)) : s("", !0)
   ], 2);
 }
-const ce = /* @__PURE__ */ G(J, [["render", ae], ["__scopeId", "data-v-4a36ece2"]]);
+const ue = /* @__PURE__ */ q(G, [["render", ee], ["__scopeId", "data-v-ce254f5a"]]);
 export {
-  ce as BentoCard,
-  L as BentoCardBackground,
-  b as BentoCardTitleSize
+  ue as BentoCard,
+  A as BentoCardBackground,
+  u as BentoCardTitleSize
 };
 //# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../vue2/src/components/card/card.types.ts","../../vue2/src/components/card/card.vue"],"sourcesContent":["export enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\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\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\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-card__description\"\n                    :el=\"BentoTypographyElement.DIV\"\n                    :variant=\"BentoTypographyVariant.BODY\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <div\n            v-if=\"showCardBody\"\n            :id=\"expandable ? cardId : null\"\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</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n\n    // Components\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } 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    // Utils\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\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 defineComponent({\n        i18n: { messages },\n        name: 'bento-card',\n        components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Defines the color of card background\n             */\n            background: {\n                type: String as PropType<BentoCardBackground>,\n                default: BentoCardBackground.PRIMARY,\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize>,\n                default: BentoCardTitleSize.DEFAULT,\n            },\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Initially sets the expandable card in a closed state\n             */\n            closed: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Disables the expandable card\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\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: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\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: {\n                type: String as PropType<BentoButtonActionsLayout>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n            },\n        },\n        emits: ['click', 'expanded'],\n        setup(props, { emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const cardId = generateUid('card');\n            const showContent = ref(!props.closed);\n            const showHeader = computed(\n                () => hasSlot(slots)('default') || hasSlot(slots)('description') || hasSlot(slots)('header')\n            );\n            const showTitleWrapper = computed(() => hasSlot(slots)('default') || hasSlot(slots)('header'));\n            const showCardBody = computed(\n                () =>\n                    (hasSlot(slots)('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(slots)('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(slots)('content');\n\n                return {\n                    'b-card__actions--without-content': isNotExpandableWithoutContent,\n                    'b-card__actions--without-content-and-with-header':\n                        isNotExpandableWithoutContent && showHeader.value,\n                };\n            });\n\n            const cardTitleWrapperConditionalClasses = computed(() => ({\n                'b-card__title-wrapper--truncated': hasSlot(slots)('header'),\n            }));\n\n            const typography = computed(() => ({\n                el: BentoTypographyElement.DIV,\n                variant:\n                    props.titleSize === BentoCardTitleSize.DEFAULT\n                        ? BentoTypographyVariant.TITLE\n                        : BentoTypographyVariant.BODY,\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            }));\n\n            const toggleExpansion = () => {\n                if (!props.disabled) {\n                    showContent.value = !showContent.value;\n                    emit('expanded', showContent.value);\n                }\n            };\n\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('click');\n                }\n            };\n\n            return {\n                // Values\n                cardId,\n                cardConditionalClasses,\n                cardBodyConditionalClasses,\n                cardHeaderConditionalClasses,\n                cardContentConditionalClasses,\n                cardActionsConditionalClasses,\n                cardTitleWrapperConditionalClasses,\n                cardToggleConditionalClasses,\n                showCardBody,\n                showContent,\n                tabIndex,\n                showHeader,\n                showTitleWrapper,\n                typography,\n\n                // Methods\n                hasSlot: hasSlot(slots),\n                onClick,\n                t,\n                toggleExpansion,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","messages","ChevronUp","ChevronDown","BentoTypography","BentoButtonActions","BentoButtonActionsLayout","value","props","emit","slots","t","useI18n","cardId","generateUid","showContent","ref","showHeader","computed","hasSlot","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","BentoTypographyElement","BentoTypographyVariant","toggleExpansion","onClick","openBlock","createElementBlock","normalizeClass","_ctx","_cache","args","createElementVNode","_hoisted_2","_hoisted_3","createBlock","_component_chevron_up_icon","_component_chevron_down_icon","createCommentVNode","_component_bento_typography","mergeProps","withCtx","renderSlot","_hoisted_1"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":["../../vue2/src/components/card/card.types.ts","../../vue2/src/components/card/card.vue"],"sourcesContent":["export enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\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\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\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-card__description\"\n                    :el=\"BentoTypographyElement.DIV\"\n                    :variant=\"BentoTypographyVariant.BODY\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <div\n            v-if=\"showCardBody\"\n            :id=\"expandable ? cardId : null\"\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</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n\n    // Components\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } 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    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\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 defineComponent({\n        i18n: { messages },\n        name: 'bento-card',\n        components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n        props: {\n            /**\n             * Defines the color of card background\n             */\n            background: {\n                type: String as PropType<BentoCardBackground>,\n                default: BentoCardBackground.PRIMARY,\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize>,\n                default: BentoCardTitleSize.DEFAULT,\n            },\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Initially sets the expandable card in a closed state\n             */\n            closed: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Disables the expandable card\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\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: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\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: {\n                type: String as PropType<BentoButtonActionsLayout>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n            },\n        },\n        emits: ['click', 'expanded'],\n        setup(props, { emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n\n            const cardId = generateUid('card');\n            const showContent = ref(!props.closed);\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':\n                        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                el: BentoTypographyElement.DIV,\n                variant:\n                    props.titleSize === BentoCardTitleSize.DEFAULT\n                        ? BentoTypographyVariant.TITLE\n                        : BentoTypographyVariant.BODY,\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            }));\n\n            const toggleExpansion = () => {\n                if (!props.disabled) {\n                    showContent.value = !showContent.value;\n                    emit('expanded', showContent.value);\n                }\n            };\n\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('click');\n                }\n            };\n\n            return {\n                // Values\n                cardId,\n                cardConditionalClasses,\n                cardBodyConditionalClasses,\n                cardHeaderConditionalClasses,\n                cardContentConditionalClasses,\n                cardActionsConditionalClasses,\n                cardTitleWrapperConditionalClasses,\n                cardToggleConditionalClasses,\n                showCardBody,\n                showContent,\n                tabIndex,\n                showHeader,\n                showTitleWrapper,\n                typography,\n\n                // Methods\n                hasSlot,\n                onClick,\n                t,\n                toggleExpansion,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","messages","ChevronUpIcon","ChevronDownIcon","BentoTypography","BentoButtonActions","BentoButtonActionsLayout","value","props","emit","slots","t","useI18n","hasSlot","useHasSlot","cardId","generateUid","showContent","ref","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","BentoTypographyElement","BentoTypographyVariant","openBlock","createElementBlock","normalizeClass","_ctx","_cache","args","createElementVNode","_hoisted_2","_hoisted_3","createBlock","_component_chevron_up_icon","_component_chevron_down_icon","createCommentVNode","_component_bento_typography","mergeProps","withCtx","renderSlot","_hoisted_1"],"mappings":"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"}

package/dist/checkbox.js

@@ -1,17 +1,16 @@
-import { B as k, b as h } from "./chunks/checkbox.7e9349cf.js";
-import { a as J } from "./chunks/checkbox.7e9349cf.js";
-import { defineComponent as E, computed as n, toRef as v, resolveComponent as d, openBlock as s, createElementBlock as f, createVNode as C, normalizeClass as S, withCtx as u, Fragment as B, renderList as I, createBlock as g, createSlots as G, createTextVNode as y, toDisplayString as _, createCommentVNode as M } from "vue";
+import { B as k, b as m } from "./chunks/checkbox.39fa87c7.js";
+import { a as J } from "./chunks/checkbox.39fa87c7.js";
+import { defineComponent as v, computed as n, toRef as E, resolveComponent as d, openBlock as s, createElementBlock as g, createVNode as C, normalizeClass as S, withCtx as u, Fragment as B, renderList as I, createBlock as f, createSlots as G, createTextVNode as y, toDisplayString as _, createCommentVNode as M } from "vue";
 import { g as V } from "./chunks/unique-id.a2a2b458.js";
-import { d as A } from "./chunks/index.1d501e31.js";
-import { C as w } from "./chunks/controls-group.9951ebac.js";
-import { E as x } from "./chunks/error-message.f9c2a4be.js";
+import { d as x } from "./chunks/index.92f7d550.js";
+import { C as w } from "./chunks/controls-group.0126679a.js";
+import { E as A } from "./chunks/error-message.a65a9abf.js";
 import { _ as T } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index13.css";
-var l = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e))(l || {});
-const L = E({
+import "./assets/index12.css";
+var t = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e))(t || {});
+const U = v({
   name: "bento-checkbox-group",
-  components: { BentoCheckbox: k, ControlsGroup: w, ErrorMessage: x },
-  inheritAttrs: !1,
+  components: { BentoCheckbox: k, ControlsGroup: w, ErrorMessage: A },
   props: {
     /**
      * The checkbox group's items.
@@ -33,8 +32,8 @@ const L = E({
      */
     variant: {
       type: String,
-      default: l.VERTICAL,
-      validator: (e) => Object.values(l).includes(e)
+      default: t.VERTICAL,
+      validator: (e) => Object.values(t).includes(e)
     },
     /**
      * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
@@ -58,7 +57,9 @@ const L = E({
       default: !1
     },
     /**
-     * @deprecated If set to true, renders all checkboxes in the group in an error state.
+     * If set to true, renders all checkboxes in the group in an error state.
+     *
+     * @deprecated Use "errorMessage" prop instead
      */
     hasError: {
       type: Boolean,
@@ -76,38 +77,40 @@ const L = E({
      */
     label: { type: String, required: !0 }
   },
-  emits: [h.UPDATE],
+  emits: [m.UPDATE],
   setup(e, { emit: c }) {
     const i = V("error"), p = n(
       () => !e.disabled && !e.readonly && (!!e.errorMessage || e.hasError)
     ), b = n(
       () => !e.disabled && !e.readonly && !!e.errorMessage
-    ), m = n(() => ({
-      "b-checkbox-group__checkboxes--horizontal": e.variant === l.HORIZONTAL
-    })), o = v(e, "modelValue"), t = (a) => {
-      o.value = a, c(h.UPDATE, a);
+    ), h = n(() => ({
+      "b-checkbox-group__checkboxes--horizontal": e.variant === t.HORIZONTAL
+    })), o = E(e, "modelValue"), l = (a) => {
+      o.value = a, c(m.UPDATE, a);
     };
-    return e.hasError && A(
-      "BentoCheckboxGroup hasError modifier",
-      "BentoCheckboxGroup hasError modifier has been deprecated. Please use the errorMessage modifier.",
+    return e.hasError && x(
+      '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
       errorId: i,
       shouldShowGroupError: p,
       shouldShowGroupErrorMessage: b,
-      conditionalClasses: m,
+      conditionalClasses: h,
       inputValue: o,
       // Methods
-      onInput: t
+      onInput: l
     };
   }
 });
-const N = { class: "b-checkbox-group" };
-function O(e, c, i, p, b, m) {
-  const o = d("bento-checkbox"), t = d("controls-group"), a = d("error-message");
-  return s(), f("div", N, [
-    C(t, {
+const L = { class: "b-checkbox-group" };
+function N(e, c, i, p, b, h) {
+  const o = d("bento-checkbox"), l = d("controls-group"), a = d("error-message");
+  return s(), g("div", L, [
+    C(l, {
       class: S(["b-checkbox-group__checkboxes", e.conditionalClasses]),
       form: e.formId,
       disabled: e.disabled,
@@ -115,7 +118,7 @@ function O(e, c, i, p, b, m) {
       "aria-describedby": e.shouldShowGroupErrorMessage ? e.errorId : ""
     }, {
       default: u(() => [
-        (s(!0), f(B, null, I(e.items, (r) => (s(), g(o, {
+        (s(!0), g(B, null, I(e.items, (r) => (s(), f(o, {
           key: r.value,
           "model-value": e.inputValue,
           value: r.value,
@@ -141,7 +144,7 @@ function O(e, c, i, p, b, m) {
       ]),
       _: 1
     }, 8, ["class", "form", "disabled", "label", "aria-describedby"]),
-    e.shouldShowGroupErrorMessage ? (s(), g(a, {
+    e.shouldShowGroupErrorMessage ? (s(), f(a, {
       key: 0,
       id: e.errorId,
       "error-message": e.errorMessage,
@@ -149,12 +152,12 @@ function O(e, c, i, p, b, m) {
     }, null, 8, ["id", "error-message"])) : M("", !0)
   ]);
 }
-const H = /* @__PURE__ */ T(L, [["render", O], ["__scopeId", "data-v-b9978fd2"]]);
+const P = /* @__PURE__ */ T(U, [["render", N], ["__scopeId", "data-v-569b98c3"]]);
 export {
   k as BentoCheckbox,
-  h as BentoCheckboxEvent,
-  H as BentoCheckboxGroup,
-  l as BentoCheckboxGroupVariant,
+  m as BentoCheckboxEvent,
+  P as BentoCheckboxGroup,
+  t as BentoCheckboxGroupVariant,
   J as BentoCheckboxState
 };
 //# sourceMappingURL=checkbox.js.map