@adyen/bento-vue2 1.5.0 → 1.6.0

package/dist/assets/loading-button.css

@@ -1 +1 @@
-@keyframes spin-e209bd4b{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.b-loading-button--primary-loading[data-v-e209bd4b]{background-color:var(--b-loading-button-primary-active-background-color)}.b-loading-button--primary-success[data-v-e209bd4b]{background-color:var(--b-loading-button-primary-success-background-color);color:var(--b-loading-button-primary-success-color)}.b-loading-button--primary-success[data-v-e209bd4b]:hover{background-color:var(--b-loading-button-primary-success-hover-background-color)}.b-loading-button--primary-success[data-v-e209bd4b]:active{background-color:var(--b-loading-button-primary-success-active-background-color)}.b-loading-button--primary-success[data-v-e209bd4b]:disabled{background-color:var(--b-loading-button-primary-success-disabled-background-color);color:var(--b-loading-button-primary-success-disabled-color)}.b-loading-button--secondary-loading[data-v-e209bd4b]{background-color:var(--b-loading-button-secondary-active-background-color);color:var(--b-loading-button-secondary-active-color)}.b-loading-button--secondary-loading[data-v-e209bd4b]:hover:not(:focus){box-shadow:none}.b-loading-button--secondary-success[data-v-e209bd4b]{background-color:var(--b-loading-button-secondary-success-background-color);border-color:var(--b-loading-button-secondary-success-border-color);color:var(--b-loading-button-secondary-success-color)}.b-loading-button--secondary-success[data-v-e209bd4b]:hover{border-color:var(--b-loading-button-secondary-success-hover-border-color);box-shadow:var(--b-loading-button-secondary-success-hover-box-shadow)}.b-loading-button--secondary-success[data-v-e209bd4b]:active{background-color:var(--b-loading-button-secondary-success-active-background-color);border-color:var(--b-loading-button-secondary-success-active-border-color)}.b-loading-button--secondary-success[data-v-e209bd4b]:disabled{background-color:var(--b-loading-button-secondary-success-disabled-background-color);border-color:var(--b-loading-button-secondary-success-disabled-border-color);box-shadow:unset;color:var(--b-loading-button-secondary-success-disabled-color)}.b-loading-button--tertiary-loading[data-v-e209bd4b]{background-color:var(--b-loading-button-tertiary-active-background-color)}.b-loading-button__icon[data-v-e209bd4b]{display:inline-flex}
+@keyframes spin-ebe57d0b{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.b-loading-button--primary-loading[data-v-ebe57d0b]{background-color:var(--b-loading-button-primary-active-background-color)}.b-loading-button--primary-success[data-v-ebe57d0b]{background-color:var(--b-loading-button-primary-success-background-color);color:var(--b-loading-button-primary-success-color)}.b-loading-button--primary-success[data-v-ebe57d0b]:hover{background-color:var(--b-loading-button-primary-success-hover-background-color)}.b-loading-button--primary-success[data-v-ebe57d0b]:active{background-color:var(--b-loading-button-primary-success-active-background-color)}.b-loading-button--primary-success[data-v-ebe57d0b]:disabled{background-color:var(--b-loading-button-primary-success-disabled-background-color);color:var(--b-loading-button-primary-success-disabled-color)}.b-loading-button--secondary-loading[data-v-ebe57d0b]{background-color:var(--b-loading-button-secondary-active-background-color);color:var(--b-loading-button-secondary-active-color)}.b-loading-button--secondary-loading[data-v-ebe57d0b]:hover:not(:focus){box-shadow:none}.b-loading-button--secondary-success[data-v-ebe57d0b]{background-color:var(--b-loading-button-secondary-success-background-color);border-color:var(--b-loading-button-secondary-success-border-color);color:var(--b-loading-button-secondary-success-color)}.b-loading-button--secondary-success[data-v-ebe57d0b]:hover{border-color:var(--b-loading-button-secondary-success-hover-border-color);box-shadow:var(--b-loading-button-secondary-success-hover-box-shadow)}.b-loading-button--secondary-success[data-v-ebe57d0b]:active{background-color:var(--b-loading-button-secondary-success-active-background-color);border-color:var(--b-loading-button-secondary-success-active-border-color)}.b-loading-button--secondary-success[data-v-ebe57d0b]:disabled{background-color:var(--b-loading-button-secondary-success-disabled-background-color);border-color:var(--b-loading-button-secondary-success-disabled-border-color);box-shadow:unset;color:var(--b-loading-button-secondary-success-disabled-color)}.b-loading-button--tertiary-loading[data-v-ebe57d0b]{background-color:var(--b-loading-button-tertiary-active-background-color)}.b-loading-button__icon[data-v-ebe57d0b]{display:inline-flex}

package/dist/avatar-image.js

@@ -1,4 +1,4 @@
-import { A as t, B as e, a as o } from "./chunks/index.660f2f2e.js";
+import { A as t, B as e, a as o } from "./chunks/index.98b6db0e.js";
 export {
   t as AvatarImage,
   e as BentoAvatarImageColor,

package/dist/badge.js

@@ -2,7 +2,7 @@ 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.c1114034.js";
 import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index8.css";
+import "./assets/index5.css";
 var s = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.ATTENTION = "attention", e.WARNING = "warning", e.CRITICAL = "critical", e.SUCCESS = "success", e))(s || {});
 const _ = n({
   name: "adl-badge",

package/dist/button.js

@@ -1,10 +1,10 @@
-import { a as d, B as r } from "./chunks/button.66df5734.js";
-import { b as N } from "./chunks/button.66df5734.js";
+import { a as d, B as r } from "./chunks/button.38099670.js";
+import { b as N } from "./chunks/button.38099670.js";
 import { defineComponent as u, computed as o } from "vue";
-import { B as p } from "./chunks/loading-button.9d18b4f2.js";
-import { a as k } from "./chunks/loading-button.9d18b4f2.js";
+import { B as p } from "./chunks/loading-button.21c48d50.js";
+import { a as k } from "./chunks/loading-button.21c48d50.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index5.css";
+import "./assets/index13.css";
 var c = /* @__PURE__ */ ((e) => (e.BUTTONS_END = "buttons-end", e.FILL_CONTAINER = "fill-container", e.SPACE_BETWEEN = "space-between", e.VERTICAL_STACK = "vertical-stack", e))(c || {}), l = /* @__PURE__ */ ((e) => (e.BUTTONS_START = "buttons-start", e))(l || {});
 const i = { ...c, ...l }, v = u({
   name: "bento-button-actions",

package/dist/card.js

@@ -1,22 +1,23 @@
-import { defineComponent as S, ref as k, watch as A, computed as n } from "vue";
-import { B as L } from "./chunks/index.1645ffcb.js";
-import { a as B, C as E } from "./chunks/chevron-up.674ec2e5.js";
-import { u as T } from "./chunks/use-has-slot.6052d56a.js";
-import { g as I } from "./chunks/unique-id.a2a2b458.js";
-import { u as O } from "./chunks/i18n.155748d6.js";
-import { BentoButtonActions as U, BentoButtonActionsLayout as b } from "./button.js";
-import { n as D } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index6.css";
-var r = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(r || {}), l = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(l || {});
-const H = {
+import { defineComponent as B, ref as h, watch as T, computed as n, onMounted as H } from "vue";
+import { B as I } from "./chunks/index.74da0d41.js";
+import { a as M, C as D } from "./chunks/chevron-up.674ec2e5.js";
+import { u as O } from "./chunks/use-has-slot.6052d56a.js";
+import { g as U } from "./chunks/unique-id.a2a2b458.js";
+import { u as R } from "./chunks/i18n.155748d6.js";
+import { u as z } from "./chunks/use-expandable-content-height.62fc84e5.js";
+import { BentoButtonActions as W, BentoButtonActionsLayout as p } from "./button.js";
+import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index9.css";
+var r = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t))(r || {}), i = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.SMALL = "small", t))(i || {});
+const N = {
   "en-US": {
     showCardContent: "Show card content",
     hideCardContent: "Hide card content"
   }
-}, M = S({
-  i18n: { messages: H },
+}, j = B({
+  i18n: { messages: N },
   name: "bento-card",
-  components: { ChevronUpIcon: B, ChevronDownIcon: E, BentoTypography: L, BentoButtonActions: U },
+  components: { ChevronUpIcon: M, ChevronDownIcon: D, BentoTypography: I, BentoButtonActions: W },
   props: {
     /**
      * Defines the color of card background
@@ -24,15 +25,15 @@ const H = {
     background: {
       type: String,
       default: r.PRIMARY,
-      validator: (e) => Object.values(r).includes(e)
+      validator: (t) => Object.values(r).includes(t)
     },
     /**
      * Defines the title size of the card header
      */
     titleSize: {
       type: String,
-      default: l.DEFAULT,
-      validator: (e) => Object.values(l).includes(e)
+      default: i.DEFAULT,
+      validator: (t) => Object.values(i).includes(t)
     },
     /**
      * The whole content of the card will be expandable in accordion manner
@@ -96,104 +97,107 @@ const H = {
      */
     actionsLayout: {
       type: String,
-      default: b.BUTTONS_END,
-      validator: (e) => Object.values(b).includes(e)
+      default: p.BUTTONS_END,
+      validator: (t) => Object.values(p).includes(t)
     }
   },
   emits: ["click", "expanded"],
-  setup(e, { emit: a, slots: t }) {
-    const { t: s } = O(), o = T(t), u = I("card"), i = k(!e.closed);
-    A(
-      () => e.closed,
-      (d) => {
-        i.value = !d;
+  setup(t, { emit: a, slots: e }) {
+    const { t: s } = R(), o = O(e), _ = h(null), y = U("card"), d = h(!t.closed);
+    T(
+      () => t.closed,
+      (l) => {
+        d.value = !l;
       }
     );
-    const c = n(() => o("default") || o("description") || o("header")), C = n(() => o("default") || o("header")), _ = n(
+    const c = n(() => o("default") || o("description") || o("header")), g = n(() => o("default") || o("header")), u = n(
       () => {
-        var d;
-        return (o("content") || ((d = e.actions) == null ? void 0 : d.length)) && (!e.expandable || e.expandable && i.value);
+        var l;
+        return (o("content") || ((l = t.actions) == null ? void 0 : l.length)) && (!t.expandable || t.expandable && d.value);
       }
-    ), h = n(() => e.expandable && !e.disabled ? 0 : -1), p = n(() => ({
-      [`b-card--${e.background}`]: e.background,
-      "b-card--expandable": e.expandable,
-      "b-card--disabled": e.expandable && e.disabled
-    })), y = n(() => ({
-      "b-card__header--expandable": e.expandable,
-      "b-card__header--without-body": !e.expandable && !_.value
-    })), g = n(() => ({
-      "b-card__toggle--small-text": e.titleSize === l.SMALL
+    ), x = n(() => t.expandable && !t.disabled ? 0 : -1), v = n(() => ({
+      [`b-card--${t.background}`]: t.background,
+      "b-card--expandable": t.expandable,
+      "b-card--disabled": t.expandable && t.disabled
     })), f = n(() => ({
-      "b-card__body--expandable": e.expandable && o("content"),
-      "b-card__body--without-header": !e.expandable && !c.value
-    })), x = n(() => ({
-      "b-card__content--without-header": !e.expandable && !c.value,
-      "b-card__content--expandable": e.expandable
-    })), v = n(() => {
-      const d = !e.expandable && e.actions && !o("content");
+      "b-card__header--expandable": t.expandable,
+      "b-card__header--without-body": !t.expandable && !u.value
+    })), m = n(() => ({
+      "b-card__toggle--small-text": t.titleSize === i.SMALL
+    })), w = n(() => ({
+      "b-card__body--expandable": t.expandable && o("content"),
+      "b-card__body--without-header": !t.expandable && !c.value
+    })), S = n(() => ({
+      "b-card__content--without-header": !t.expandable && !c.value,
+      "b-card__content--expandable": t.expandable
+    })), k = n(() => {
+      const l = !t.expandable && t.actions && !o("content");
       return {
-        "b-card__actions--without-content": d,
-        "b-card__actions--without-content-and-with-header": d && c.value
+        "b-card__actions--without-content": l,
+        "b-card__actions--without-content-and-with-header": l && c.value
       };
-    }), m = n(() => ({
+    }), A = n(() => ({
       "b-card__title-wrapper--truncated": o("header")
-    })), w = n(
+    })), L = n(
       () => ({
         el: "div",
-        variant: e.titleSize === l.DEFAULT ? "title" : "body",
-        strongest: e.titleSize === l.SMALL,
-        wide: e.titleSize === l.SMALL
+        variant: t.titleSize === i.DEFAULT ? "title" : "body",
+        strongest: t.titleSize === i.SMALL,
+        wide: t.titleSize === i.SMALL
       })
-    );
-    return {
+    ), { updateContentHeight: b, contentHeight: C } = z(_, d), E = n(() => C.value ? { "max-height": C.value } : {});
+    return H(() => b()), {
       // Values
-      cardId: u,
-      cardConditionalClasses: p,
-      cardBodyConditionalClasses: f,
-      cardHeaderConditionalClasses: y,
-      cardContentConditionalClasses: x,
-      cardActionsConditionalClasses: v,
-      cardTitleWrapperConditionalClasses: m,
-      cardToggleConditionalClasses: g,
-      showCardBody: _,
-      showContent: i,
-      tabIndex: h,
+      cardId: y,
+      cardConditionalClasses: v,
+      cardBodyConditionalClasses: w,
+      cardHeaderConditionalClasses: f,
+      cardContentConditionalClasses: S,
+      cardActionsConditionalClasses: k,
+      cardTitleWrapperConditionalClasses: A,
+      cardToggleConditionalClasses: m,
+      showCardBody: u,
+      showContent: d,
+      tabIndex: x,
       showHeader: c,
-      showTitleWrapper: C,
-      typography: w,
+      showTitleWrapper: g,
+      typography: L,
+      // Expand animation
+      contentDiv: _,
+      contentMaxHeight: E,
       // Methods
       hasSlot: o,
       onClick: () => {
-        e.disabled || a("click");
+        t.disabled || a("click");
       },
       t: s,
       toggleExpansion: () => {
-        e.disabled || (i.value = !i.value, a("expanded", i.value));
+        t.disabled || (d.value = !d.value, a("expanded", d.value), b());
       }
     };
   }
 });
-var R = function() {
-  var a = this, t = a._self._c;
-  return a._self._setupProxy, t("div", { staticClass: "b-card", class: a.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: a.onClick } }, [a.hasSlot("image") ? t("div", { staticClass: "b-card__image" }, [a._t("image")], 2) : a._e(), a.showHeader ? t("div", { staticClass: "b-card__header", class: a.cardHeaderConditionalClasses, attrs: { tabindex: a.tabIndex, "aria-controls": a.expandable ? a.cardId : null, "aria-expanded": a.expandable ? `${a.showContent}` : null, role: a.expandable ? "button" : null }, on: { click: a.toggleExpansion, keypress: [function(s) {
+var P = function() {
+  var a = this, e = a._self._c;
+  return a._self._setupProxy, e("div", { staticClass: "b-card", class: a.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: a.onClick } }, [a.hasSlot("image") ? e("div", { staticClass: "b-card__image" }, [a._t("image")], 2) : a._e(), a.showHeader ? e("div", { staticClass: "b-card__header", class: a.cardHeaderConditionalClasses, attrs: { tabindex: a.tabIndex, "aria-controls": a.expandable ? a.cardId : null, "aria-expanded": a.expandable ? `${a.showContent}` : null, role: a.expandable ? "button" : null }, on: { click: a.toggleExpansion, keypress: [function(s) {
     return !s.type.indexOf("key") && a._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : a.toggleExpansion.apply(null, arguments);
   }, function(s) {
     return !s.type.indexOf("key") && a._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : a.toggleExpansion.apply(null, arguments);
-  }] } }, [t("div", { staticClass: "b-card__header-wrapper" }, [a.showTitleWrapper ? t("div", { staticClass: "b-card__header-slot-wrapper" }, [t("div", { staticClass: "b-card__title-wrapper", class: a.cardTitleWrapperConditionalClasses }, [a.expandable ? t("div", { staticClass: "b-card__toggle", class: a.cardToggleConditionalClasses }, [a.showContent ? t("chevron-up-icon", { attrs: { "svg-title": a.t("hideCardContent"), "aria-hidden": "true" } }) : t("chevron-down-icon", { attrs: { "svg-title": a.t("showCardContent"), "aria-hidden": "true" } })], 1) : a._e(), a.hasSlot("default") ? t("bento-typography", a._b({ staticClass: "b-card__title" }, "bento-typography", a.typography, !1), [a._t("default")], 2) : a._e()], 1), a.hasSlot("header") ? [a._t("header")] : a._e()], 2) : a._e(), a.hasSlot("description") ? t("bento-typography", { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [a._t("description")], 2) : a._e()], 1)]) : a._e(), a.showCardBody ? t("div", { staticClass: "b-card__body", class: a.cardBodyConditionalClasses, attrs: { id: a.expandable ? a.cardId : null } }, [a.hasSlot("content") ? t("div", { staticClass: "b-card__content", class: a.cardContentConditionalClasses }, [a._t("content")], 2) : a._e(), a.actions ? t("div", { staticClass: "b-card__actions", class: a.cardActionsConditionalClasses }, [t("bento-button-actions", { attrs: { actions: a.actions, layout: a.actionsLayout } })], 1) : a._e()]) : a._e()]);
-}, z = [], W = /* @__PURE__ */ D(
-  M,
-  R,
-  z,
+  }] } }, [e("div", { staticClass: "b-card__header-wrapper" }, [a.showTitleWrapper ? e("div", { staticClass: "b-card__header-slot-wrapper" }, [e("div", { staticClass: "b-card__title-wrapper", class: a.cardTitleWrapperConditionalClasses }, [a.expandable ? e("div", { staticClass: "b-card__toggle", class: a.cardToggleConditionalClasses }, [a.showContent ? e("chevron-up-icon", { attrs: { "svg-title": a.t("hideCardContent"), "aria-hidden": "true" } }) : e("chevron-down-icon", { attrs: { "svg-title": a.t("showCardContent"), "aria-hidden": "true" } })], 1) : a._e(), a.hasSlot("default") ? e("bento-typography", a._b({ staticClass: "b-card__title" }, "bento-typography", a.typography, !1), [a._t("default")], 2) : a._e()], 1), a.hasSlot("header") ? [a._t("header")] : a._e()], 2) : a._e(), a.hasSlot("description") ? e("bento-typography", { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [a._t("description")], 2) : a._e()], 1)]) : a._e(), e("Transition", { attrs: { name: "b-card__animation" } }, [a.showCardBody ? e("div", { style: a.contentMaxHeight }, [e("div", { ref: "contentDiv", staticClass: "b-card__body", class: a.cardBodyConditionalClasses, attrs: { id: a.expandable ? a.cardId : null } }, [a.hasSlot("content") ? e("div", { staticClass: "b-card__content", class: a.cardContentConditionalClasses }, [a._t("content")], 2) : a._e(), a.actions ? e("div", { staticClass: "b-card__actions", class: a.cardActionsConditionalClasses }, [e("bento-button-actions", { attrs: { actions: a.actions, layout: a.actionsLayout } })], 1) : a._e()])]) : a._e()])], 1);
+}, Y = [], q = /* @__PURE__ */ F(
+  j,
+  P,
+  Y,
   !1,
   null,
-  "b99aaeb3",
+  "db41707b",
   null,
   null
 );
-const V = W.exports;
+const na = q.exports;
 export {
-  V as BentoCard,
+  na as BentoCard,
   r as BentoCardBackground,
-  l as BentoCardTitleSize
+  i 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        <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, 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    // 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 | `${BentoCardBackground}`>,\n                default: BentoCardBackground.PRIMARY,\n                validator: (value: BentoCardBackground) => Object.values(BentoCardBackground).includes(value),\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize | `${BentoCardTitleSize}`>,\n                default: BentoCardTitleSize.DEFAULT,\n                validator: (value: BentoCardTitleSize) => Object.values(BentoCardTitleSize).includes(value),\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             * 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 | `${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            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':\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                () =>\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            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        },\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","value","BentoButtonActionsLayout","props","emit","slots","t","useI18n","hasSlot","useHasSlot","cardId","generateUid","showContent","ref","watch","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography"],"mappings":";;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;GCiFZE,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,iBAAAC,GAAA,iBAAAC,GAAA,oBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAV,EAAA;AAAA,MACA,WAAA,CAAAW,MAAA,OAAA,OAAAX,CAAA,EAAA,SAAAW,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAT,EAAA;AAAA,MACA,WAAA,CAAAS,MAAA,OAAA,OAAAT,CAAA,EAAA,SAAAS,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MA0BA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAWA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAD,MAAA,OAAA,OAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,UAAA;AAAA,EACA,MAAAE,GAAA,EAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,EAAA,MAAA,GACAC,IAAAC,EAAA,CAAAV,EAAA,MAAA;AACA,IAAAW;AAAA,MAAA,MAAAX,EAAA;AAAA,MACA,CAAAF,MAAA;AAEA,QAAAW,EAAA,QAAA,CAAAX;AAAA,MAAA;AAAA,IACA;AAEA,UAAAc,IAAAC,EAAA,MAAAR,EAAA,SAAA,KAAAA,EAAA,aAAA,KAAAA,EAAA,QAAA,CAAA,GACAS,IAAAD,EAAA,MAAAR,EAAA,SAAA,KAAAA,EAAA,QAAA,CAAA,GACAU,IAAAF;AAAA,MAAA,MAAA;;AAAA,gBAAAR,EAAA,SAAA,OAAAW,IAAAhB,EAAA,YAAA,gBAAAgB,EAAA,aAAA,CAAAhB,EAAA,cAAAA,EAAA,cAAAS,EAAA;AAAA;AAAA,IAGA,GAEAQ,IAAAJ,EAAA,MAAAb,EAAA,cAAA,CAAAA,EAAA,WAAA,IAAA,EAAA,GAEAkB,IAAAL,EAAA,OAAA;AAAA,MAAA,CAAA,WAAAb,EAAA,YAAA,GAAAA,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,MACA,oBAAAA,EAAA,cAAAA,EAAA;AAAA,IACA,EAAA,GAGAmB,IAAAN,EAAA,OAAA;AAAA,MAAA,8BAAAb,EAAA;AAAA,MACA,gCAAA,CAAAA,EAAA,cAAA,CAAAe,EAAA;AAAA,IACA,EAAA,GAGAK,IAAAP,EAAA,OAAA;AAAA,MAAA,8BAAAb,EAAA,cAAAX,EAAA;AAAA,IACA,EAAA,GAGAgC,IAAAR,EAAA,OAAA;AAAA,MAAA,4BAAAb,EAAA,cAAAK,EAAA,SAAA;AAAA,MACA,gCAAA,CAAAL,EAAA,cAAA,CAAAY,EAAA;AAAA,IACA,EAAA,GAGAU,IAAAT,EAAA,OAAA;AAAA,MAAA,mCAAA,CAAAb,EAAA,cAAA,CAAAY,EAAA;AAAA,MACA,+BAAAZ,EAAA;AAAA,IACA,EAAA,GAGAuB,IAAAV,EAAA,MAAA;AACA,YAAAW,IAAA,CAAAxB,EAAA,cAAAA,EAAA,WAAA,CAAAK,EAAA,SAAA;AAEA,aAAA;AAAA,QAAA,oCAAAmB;AAAA,QACA,oDAAAA,KAAAZ,EAAA;AAAA,MAEA;AAAA,IACA,CAAA,GAGAa,IAAAZ,EAAA,OAAA;AAAA,MAAA,oCAAAR,EAAA,QAAA;AAAA,IACA,EAAA,GAGAqB,IAAAb;AAAA,MAAA,OAAA;AAAA,QAEA,IAAA;AAAA,QACA,SAAAb,EAAA,cAAAX,EAAA,UAAA,UAAA;AAAA,QACA,WAAAW,EAAA,cAAAX,EAAA;AAAA,QACA,MAAAW,EAAA,cAAAX,EAAA;AAAA,MACA;AAAA,IACA;AAgBA,WAAA;AAAA;AAAA,MAAA,QAAAkB;AAAA,MAEA,wBAAAW;AAAA,MACA,4BAAAG;AAAA,MACA,8BAAAF;AAAA,MACA,+BAAAG;AAAA,MACA,+BAAAC;AAAA,MACA,oCAAAE;AAAA,MACA,8BAAAL;AAAA,MACA,cAAAL;AAAA,MACA,aAAAN;AAAA,MACA,UAAAQ;AAAA,MACA,YAAAL;AAAA,MACA,kBAAAE;AAAA,MACA,YAAAY;AAAA;AAAA,MACA,SAAArB;AAAA,MAGA,SAxBA,MAAA;AACA,QAAAL,EAAA,YACAC,EAAA,OAAA;AAAA,MACA;AAAA,MAsBA,GAAAE;AAAA,MACA,iBAjCA,MAAA;AACA,QAAAH,EAAA,aACAS,EAAA,QAAA,CAAAA,EAAA,OACAR,EAAA,YAAAQ,EAAA,KAAA;AAAA,MACA;AAAA,IA8BA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"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\" :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 lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, 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    // 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    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\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 | `${BentoCardBackground}`>,\n                default: BentoCardBackground.PRIMARY,\n                validator: (value: BentoCardBackground) => Object.values(BentoCardBackground).includes(value),\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize | `${BentoCardTitleSize}`>,\n                default: BentoCardTitleSize.DEFAULT,\n                validator: (value: BentoCardTitleSize) => Object.values(BentoCardTitleSize).includes(value),\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             * 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 | `${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            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':\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                () =>\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(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n            onMounted(() => updateContentHeight());\n\n            const toggleExpansion = () => {\n                if (!props.disabled) {\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\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                // Expand animation\n                contentDiv,\n                contentMaxHeight,\n\n                // Methods\n                hasSlot,\n                onClick,\n                t,\n                toggleExpansion,\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","value","BentoButtonActionsLayout","props","emit","slots","t","useI18n","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","watch","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","onMounted"],"mappings":"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"}

package/dist/checkbox.js

@@ -1,17 +1,17 @@
-import { B as b, b as a } from "./chunks/checkbox.b69b8f22.js";
-import { a as N } from "./chunks/checkbox.b69b8f22.js";
-import { defineComponent as h, toRef as f, computed as d, ref as m, watch as _ } from "vue";
+import { B as h, b as a } from "./chunks/checkbox.b8c2e583.js";
+import { a as N } from "./chunks/checkbox.b8c2e583.js";
+import { defineComponent as f, toRef as b, computed as d, ref as m, watch as _ } from "vue";
 import { g } from "./chunks/unique-id.a2a2b458.js";
-import { d as y } from "./chunks/index.1645ffcb.js";
+import { d as y } from "./chunks/index.74da0d41.js";
 import { u as x } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { C as v } from "./chunks/controls-group.a2a2916f.js";
-import { E } from "./chunks/error-message.7a5db7f6.js";
+import { C as v } from "./chunks/controls-group.d75f1d37.js";
+import { E } from "./chunks/error-message.a04e8f9a.js";
 import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index15.css";
+import "./assets/index10.css";
 var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
-const C = h({
+const C = f({
   name: "bento-checkbox-group",
-  components: { BentoCheckbox: b, ControlsGroup: v, ErrorMessage: E },
+  components: { BentoCheckbox: h, ControlsGroup: v, ErrorMessage: E },
   model: { prop: "modelValue" },
   props: {
     /**
@@ -80,7 +80,7 @@ const C = h({
   },
   emits: [a.UPDATE, a.INPUT],
   setup(r, { emit: e }) {
-    const t = g("error"), { isReadOnly: o } = x(f(r, "readonly")), u = d(
+    const t = g("error"), { isReadOnly: o } = x(b(r, "readonly")), u = d(
       () => !r.disabled && !o.value && (!!r.errorMessage || r.hasError)
     ), i = d(
       () => !r.disabled && !o.value && !!r.errorMessage
@@ -88,11 +88,10 @@ const C = h({
       "b-checkbox-group__checkboxes--horizontal": r.variant === s.HORIZONTAL
     })), l = m(r.modelValue);
     _(
-      r.modelValue,
+      () => r.modelValue,
       () => {
         l.value = r.modelValue;
-      },
-      { immediate: !0 }
+      }
     );
     const p = (n) => {
       l.value = n, e(a.UPDATE, n), e(a.INPUT, n);
@@ -129,13 +128,13 @@ var S = function() {
   I,
   !1,
   null,
-  "b9a3d0bb",
+  "35edc089",
   null,
   null
 );
 const O = B.exports;
 export {
-  b as BentoCheckbox,
+  h as BentoCheckbox,
   a as BentoCheckboxEvent,
   O as BentoCheckboxGroup,
   s as BentoCheckboxGroupVariant,

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":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\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            :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                @update:model-value=\"onInput\"\n            >\n                {{ item.label }}\n                <template v-if=\"item.description\" #description>{{ item.description }}</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     * 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: 'bento-checkbox-group',\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 }) {\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            const inputValue = ref(props.modelValue);\n            watch(\n                props.modelValue,\n                () => {\n                    inputValue.value = props.modelValue;\n                },\n                { immediate: true }\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                errorId,\n                isReadOnly,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","inputValue","ref","watch","onInput","deprecate"],"mappings":"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"}
+{"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":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\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            :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                @update:model-value=\"onInput\"\n            >\n                {{ item.label }}\n                <template v-if=\"item.description\" #description>{{ item.description }}</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     * 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: 'bento-checkbox-group',\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 }) {\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            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                errorId,\n                isReadOnly,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","inputValue","ref","watch","onInput","deprecate"],"mappings":"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"}

package/dist/chunks/{base-button.89e9efbd.js → base-button.431fb8cf.js}

@@ -1,5 +1,5 @@
 import { defineComponent as b, computed as r, ref as _ } from "vue";
-import { B as d } from "./index.1645ffcb.js";
+import { B as d } from "./index.74da0d41.js";
 import { u as f } from "./use-has-slot.6052d56a.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-button.css";
@@ -85,4 +85,4 @@ export {
   U as B,
   s as a
 };
-//# sourceMappingURL=base-button.89e9efbd.js.map
+//# sourceMappingURL=base-button.431fb8cf.js.map

package/dist/chunks/{base-button.89e9efbd.js.map → base-button.431fb8cf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.89e9efbd.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.431fb8cf.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}