@adyen/bento-vue2 1.0.0 → 1.1.0

package/dist/card.js

@@ -1,37 +1,36 @@
-import { defineComponent as L, ref as E, computed as n } from "vue";
-import { B as I, c as b, a as i } from "./chunks/index.3aedb3dd.js";
-import { a as D, C as U } from "./chunks/chevron-up.5b117675.js";
-import { h as o } from "./chunks/hasSlot.dceac207.js";
-import { g as O } from "./chunks/unique-id.a2a2b458.js";
-import { u as M } from "./chunks/i18n.36074534.js";
-import { B as R, c as u } from "./chunks/button-actions.c87eaee6.js";
-import { n as z } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index27.css";
-var p = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(p || {}), s = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(s || {});
-const C = {
+import { defineComponent as k, ref as T, computed as n } from "vue";
+import { B as A, a as u, b as c } from "./chunks/index.e1fcc9e0.js";
+import { a as E, C as L } from "./chunks/chevron-down.b851a6da.js";
+import { u as I } from "./chunks/use-has-slot.068222e6.js";
+import { g as D } from "./chunks/unique-id.a2a2b458.js";
+import { u as O } from "./chunks/i18n.155748d6.js";
+import { B as U, c as b } from "./chunks/button-actions.03751d96.js";
+import { n as H } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index11.css";
+var C = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(C || {}), d = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(d || {});
+const M = {
   "en-US": {
     showCardContent: "Show card content",
     hideCardContent: "Hide card content"
   }
-}, H = L({
-  i18n: { messages: C },
+}, R = k({
+  i18n: { messages: M },
   name: "bento-card",
-  components: { ChevronUpIcon: D, ChevronDownIcon: U, BentoTypography: I, BentoButtonActions: R },
-  inheritAttrs: !1,
+  components: { ChevronUpIcon: E, ChevronDownIcon: L, BentoTypography: A, BentoButtonActions: U },
   props: {
     /**
      * Defines the color of card background
      */
     background: {
       type: String,
-      default: p.PRIMARY
+      default: C.PRIMARY
     },
     /**
      * Defines the title size of the card header
      */
     titleSize: {
       type: String,
-      default: s.DEFAULT
+      default: d.DEFAULT
     },
     /**
      * The whole content of the card will be expandable in accordion manner
@@ -95,100 +94,98 @@ const C = {
      */
     actionsLayout: {
       type: String,
-      default: u.BUTTONS_END,
-      validator: (e) => Object.values(u).includes(e)
+      default: b.BUTTONS_END,
+      validator: (e) => Object.values(b).includes(e)
     }
   },
   emits: ["click", "expanded"],
   setup(e, { emit: a, slots: t }) {
-    const { t: d } = M({ messages: C }), h = O("card"), l = E(!e.closed), c = n(
-      () => o(t)("default") || o(t)("description") || o(t)("header")
-    ), y = n(() => o(t)("default") || o(t)("header")), _ = n(
+    const { t: s } = O(), o = I(t), p = D("card"), l = T(!e.closed), i = n(() => o("default") || o("description") || o("header")), h = n(() => o("default") || o("header")), _ = n(
       () => {
         var r;
-        return (o(t)("content") || ((r = e.actions) == null ? void 0 : r.length)) && (!e.expandable || e.expandable && l.value);
+        return (o("content") || ((r = e.actions) == null ? void 0 : r.length)) && (!e.expandable || e.expandable && l.value);
       }
-    ), f = n(() => e.expandable && !e.disabled ? 0 : -1), g = n(() => ({
+    ), y = n(() => e.expandable && !e.disabled ? 0 : -1), g = n(() => ({
       [`b-card--${e.background}`]: e.background,
       "b-card--expandable": e.expandable,
       "b-card--disabled": e.expandable && e.disabled
-    })), x = n(() => ({
+    })), f = n(() => ({
       "b-card__header--expandable": e.expandable,
       "b-card__header--without-body": !e.expandable && !_.value
+    })), x = n(() => ({
+      "b-card__toggle--small-text": e.titleSize === d.SMALL
     })), m = n(() => ({
-      "b-card__toggle--small-text": e.titleSize === s.SMALL
+      "b-card__body--expandable": e.expandable && o("content"),
+      "b-card__body--without-header": !e.expandable && !i.value
     })), v = n(() => ({
-      "b-card__body--expandable": e.expandable && o(t)("content"),
-      "b-card__body--without-header": !e.expandable && !c.value
-    })), w = n(() => ({
-      "b-card__content--without-header": !e.expandable && !c.value,
+      "b-card__content--without-header": !e.expandable && !i.value,
       "b-card__content--expandable": e.expandable
-    })), S = n(() => {
-      const r = !e.expandable && e.actions && !o(t)("content");
+    })), w = n(() => {
+      const r = !e.expandable && e.actions && !o("content");
       return {
         "b-card__actions--without-content": r,
-        "b-card__actions--without-content-and-with-header": r && c.value
+        "b-card__actions--without-content-and-with-header": r && i.value
       };
-    }), B = n(() => ({
-      "b-card__title-wrapper--truncated": o(t)("header")
-    })), k = n(() => ({
-      el: b.DIV,
-      variant: e.titleSize === s.DEFAULT ? i.TITLE : i.BODY,
-      strongest: e.titleSize === s.SMALL,
-      wide: e.titleSize === s.SMALL
-    })), T = () => {
-      e.disabled || (l.value = !l.value, a("expanded", l.value));
-    }, A = () => {
-      e.disabled || a("click");
-    };
+    }), S = n(() => ({
+      "b-card__title-wrapper--truncated": o("header")
+    })), B = n(() => ({
+      el: u.DIV,
+      variant: e.titleSize === d.DEFAULT ? c.TITLE : c.BODY,
+      strongest: e.titleSize === d.SMALL,
+      wide: e.titleSize === d.SMALL
+    }));
     return {
       // Values
-      cardId: h,
+      cardId: p,
       cardConditionalClasses: g,
-      cardBodyConditionalClasses: v,
-      cardHeaderConditionalClasses: x,
-      cardContentConditionalClasses: w,
-      cardActionsConditionalClasses: S,
-      cardTitleWrapperConditionalClasses: B,
-      cardToggleConditionalClasses: m,
+      cardBodyConditionalClasses: m,
+      cardHeaderConditionalClasses: f,
+      cardContentConditionalClasses: v,
+      cardActionsConditionalClasses: w,
+      cardTitleWrapperConditionalClasses: S,
+      cardToggleConditionalClasses: x,
       showCardBody: _,
       showContent: l,
-      tabIndex: f,
-      showHeader: c,
-      showTitleWrapper: y,
-      typography: k,
+      tabIndex: y,
+      showHeader: i,
+      showTitleWrapper: h,
+      typography: B,
       // Methods
-      hasSlot: o(t),
-      onClick: A,
-      t: d,
-      toggleExpansion: T,
+      hasSlot: o,
+      onClick: () => {
+        e.disabled || a("click");
+      },
+      t: s,
+      toggleExpansion: () => {
+        e.disabled || (l.value = !l.value, a("expanded", l.value));
+      },
       // Enums
-      BentoTypographyVariant: i,
-      BentoTypographyElement: b
+      BentoTypographyVariant: c,
+      BentoTypographyElement: u
     };
   }
 });
-var W = function() {
+var z = 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.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(d) {
-    return !d.type.indexOf("key") && a._k(d.keyCode, "enter", 13, d.key, "Enter") ? null : a.toggleExpansion.apply(null, arguments);
-  }, function(d) {
-    return !d.type.indexOf("key") && a._k(d.keyCode, "space", 32, d.key, [" ", "Spacebar"]) ? null : a.toggleExpansion.apply(null, arguments);
+  return a._self._setupProxy, t("div", { staticClass: "b-card", class: a.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: a.onClick } }, [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) {
+    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: a.BentoTypographyElement.DIV, variant: a.BentoTypographyVariant.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()]);
-}, Y = [], F = /* @__PURE__ */ z(
-  H,
+}, W = [], Y = /* @__PURE__ */ H(
+  R,
+  z,
   W,
-  Y,
   !1,
   null,
-  "bf6cc517",
+  "84564884",
   null,
   null
 );
-const Q = F.exports;
+const X = Y.exports;
 export {
-  Q as BentoCard,
-  p as BentoCardBackground,
-  s as BentoCardTitleSize
+  X as BentoCard,
+  C as BentoCardBackground,
+  d 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":["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"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":["../src/components/card/card.types.ts","../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"],"mappings":"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"}

package/dist/checkbox.js

@@ -1,17 +1,16 @@
-import { B as p, b as d } from "./chunks/checkbox.e8292504.js";
-import { a as V } from "./chunks/checkbox.e8292504.js";
-import { defineComponent as h, computed as t, toRef as _ } from "vue";
-import { g as b } from "./chunks/unique-id.a2a2b458.js";
-import { d as f } from "./chunks/index.3aedb3dd.js";
-import { C as m } from "./chunks/controls-group.53569fbb.js";
-import { E as g } from "./chunks/error-message.05450d5d.js";
+import { B as p, b as d } from "./chunks/checkbox.27fae2af.js";
+import { a as V } from "./chunks/checkbox.27fae2af.js";
+import { defineComponent as h, computed as t, toRef as b } from "vue";
+import { g as _ } from "./chunks/unique-id.a2a2b458.js";
+import { d as f } from "./chunks/index.e1fcc9e0.js";
+import { C as m } from "./chunks/controls-group.e4745546.js";
+import { E as g } from "./chunks/error-message.4269d92b.js";
 import { n as y } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index31.css";
+import "./assets/index12.css";
 var a = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(a || {});
 const v = h({
   name: "bento-checkbox-group",
   components: { BentoCheckbox: p, ControlsGroup: m, ErrorMessage: g },
-  inheritAttrs: !1,
   props: {
     /**
      * The checkbox group's items.
@@ -58,7 +57,9 @@ const v = h({
       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,
@@ -78,18 +79,20 @@ const v = h({
   },
   emits: [d.UPDATE],
   setup(r, { emit: e }) {
-    const s = b("error"), o = t(
+    const s = _("error"), o = t(
       () => !r.disabled && !r.readonly && (!!r.errorMessage || r.hasError)
     ), u = t(
       () => !r.disabled && !r.readonly && !!r.errorMessage
     ), c = t(() => ({
       "b-checkbox-group__checkboxes--horizontal": r.variant === a.HORIZONTAL
-    })), l = _(r, "modelValue"), i = (n) => {
+    })), l = b(r, "modelValue"), i = (n) => {
       l.value = n, e(d.UPDATE, n);
     };
     return r.hasError && f(
-      "BentoCheckboxGroup hasError modifier",
-      "BentoCheckboxGroup hasError modifier has been deprecated. Please use the errorMessage modifier.",
+      '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
@@ -116,7 +119,7 @@ var x = function() {
   E,
   !1,
   null,
-  "97ceeae3",
+  "ebe9e43e",
   null,
   null
 );

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":["export 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            :class=\"conditionalClasses\"\n            :form=\"formId\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\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=\"readonly || 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, toRef } 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\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        inheritAttrs: false,\n        props: {\n            /**\n             * The checkbox group's items.\n             */\n            items: {\n                type: Array as PropType<BentoCheckboxGroupItems>,\n                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: {\n                type: Array<number | string | null>,\n                default: () => [],\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>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\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: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a readonly state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * @deprecated If set to true, renders all checkboxes in the group in an error state.\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders all checkboxes in an error state with an error message.\n             */\n            errorMessage: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n        },\n        emits: [BentoCheckboxEvent.UPDATE],\n        setup(props, { emit }) {\n            const errorId = generateUid('error');\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !props.readonly && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !props.readonly && !!props.errorMessage\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n            const inputValue = toRef(props, 'modelValue');\n\n            const onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n            };\n\n            if (props.hasError) {\n                deprecate(\n                    'BentoCheckboxGroup hasError modifier',\n                    'BentoCheckboxGroup hasError modifier has been deprecated. Please use the errorMessage modifier.',\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Values\n                errorId,\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","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","inputValue","toRef","onInput","deprecate"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;AC+DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,eAAAC,GAAA,cAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IAEA;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,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,IACA,cAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAC,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA,GAEAC,IAAAC;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,aAAA,CAAA,CAAAA,EAAA,gBAAAA,EAAA;AAAA,IACA,GAEAM,IAAAD;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,IACA,GAGAO,IAAAF,EAAA,OAAA;AAAA,MAAA,4CAAAL,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAEAiB,IAAAC,EAAAT,GAAA,YAAA,GAEAU,IAAA,CAAAZ,MAAA;AACA,MAAAU,EAAA,QAAAV,GACAG,EAAAF,EAAA,QAAAD,CAAA;AAAA,IAAA;AAGA,WAAAE,EAAA,YACAW;AAAA,MAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA,GAIA;AAAA;AAAA,MAAA,SAAAT;AAAA,MAEA,sBAAAE;AAAA,MACA,6BAAAE;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAC;AAAA;AAAA,MACA,SAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"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":["export 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            :class=\"conditionalClasses\"\n            :form=\"formId\"\n            :disabled=\"disabled\"\n            :label=\"label\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\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=\"readonly || 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, toRef } 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\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        props: {\n            /**\n             * The checkbox group's items.\n             */\n            items: {\n                type: Array as PropType<BentoCheckboxGroupItems>,\n                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: {\n                type: Array<number | string | null>,\n                default: () => [],\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>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\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: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a readonly state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\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: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders all checkboxes in an error state with an error message.\n             */\n            errorMessage: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n        },\n        emits: [BentoCheckboxEvent.UPDATE],\n        setup(props, { emit }) {\n            const errorId = generateUid('error');\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !props.readonly && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !props.readonly && !!props.errorMessage\n            );\n\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n            const inputValue = toRef(props, 'modelValue');\n\n            const onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, 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                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","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","inputValue","toRef","onInput","deprecate"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;AC+DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,eAAAC,GAAA,cAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IAEA;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,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAC,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA,GAEAC,IAAAC;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,aAAA,CAAA,CAAAA,EAAA,gBAAAA,EAAA;AAAA,IACA,GAEAM,IAAAD;AAAA,MAAA,MAAA,CAAAL,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,IACA,GAGAO,IAAAF,EAAA,OAAA;AAAA,MAAA,4CAAAL,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAEAiB,IAAAC,EAAAT,GAAA,YAAA,GAEAU,IAAA,CAAAZ,MAAA;AACA,MAAAU,EAAA,QAAAV,GACAG,EAAAF,EAAA,QAAAD,CAAA;AAAA,IAAA;AAGA,WAAAE,EAAA,YACAW;AAAA,MAAA;AAAA,MACA;AAAA;AAAA;AAAA,MACA;AAAA,IAGA,GAIA;AAAA;AAAA,MAAA,SAAAT;AAAA,MAEA,sBAAAE;AAAA,MACA,6BAAAE;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAC;AAAA;AAAA,MACA,SAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-button.23c7948c.js → base-button.e7630a1d.js}

@@ -1,12 +1,12 @@
-import { defineComponent as b, computed as i, ref as d } from "vue";
-import { B as p, c as u, a as f } from "./index.3aedb3dd.js";
-import { h as C } from "./hasSlot.dceac207.js";
+import { defineComponent as b, computed as i, ref as p } from "vue";
+import { B as u, a as d, b as f } from "./index.e1fcc9e0.js";
+import { u as C } from "./use-has-slot.068222e6.js";
 import { n as y } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-button.css";
 var s = /* @__PURE__ */ ((a) => (a.DESTRUCTIVE = "critical", a.ICON_ONLY = "icon-only", a))(s || {}), n = /* @__PURE__ */ ((a) => (a.BLUR = "blur", a.CLICK = "click", a.FOCUS = "focus", a.KEYDOWN_ESC = "keydown.esc", a))(n || {});
 const m = b({
   name: "base-button",
-  components: { BentoTypography: p },
+  components: { BentoTypography: u },
   props: {
     /**
      * Disables button functionality
@@ -43,13 +43,13 @@ const m = b({
       return {
         "aria-expanded": (o = r["aria-expanded"]) == null ? void 0 : o.toString()
       };
-    }), c = d(null), _ = i(() => ({
+    }), c = p(null), _ = i(() => ({
       [`b-base-button--${s.DESTRUCTIVE}`]: a.critical,
       [`b-base-button--${s.ICON_ONLY}`]: !t.default
     }));
     return {
       // Enums
-      BentoTypographyElement: u,
+      BentoTypographyElement: d,
       BentoTypographyVariant: f,
       // Values
       ariaAttributes: l,
@@ -73,7 +73,7 @@ var h = function() {
   g,
   !1,
   null,
-  "4adac72b",
+  "f1ba2191",
   null,
   null
 );
@@ -82,4 +82,4 @@ export {
   x as B,
   n as a
 };
-//# sourceMappingURL=base-button.23c7948c.js.map
+//# sourceMappingURL=base-button.e7630a1d.js.map

package/dist/chunks/base-button.e7630a1d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.e7630a1d.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    >\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\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-base-button__label\"\n        >\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, BentoTypographyElement, BentoTypographyVariant } 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                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\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","BentoTypographyElement","BentoTypographyVariant","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;AC4DZ,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;AASA,WAAA;AAAA;AAAA,MAAA,wBAAAS;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbA,CAAAG,MAAA;AACA,QAAAZ,EAAA,YACAE,EAAAP,EAAA,OAAAiB,CAAA;AAAA,MACA;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions.c87eaee6.js → button-actions.03751d96.js}

@@ -1,12 +1,11 @@
 import { defineComponent as u, computed as a } from "vue";
-import { B as d, a as o } from "./button.98f2271d.js";
+import { B as d, a as o } from "./button.f64585fc.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/button-actions.css";
 var c = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(c || {}), l = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(l || {});
-const i = { ...c, ...l }, b = u({
+const i = { ...c, ...l }, v = u({
   name: "bento-button-actions",
   components: { BentoButton: d },
-  inheritAttrs: !1,
   props: {
     /**
      * List of actions that will be used to render the buttons.
@@ -78,7 +77,7 @@ const i = { ...c, ...l }, b = u({
     };
   }
 });
-var v = function() {
+var b = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", { staticClass: "b-button-actions" }, [s("div", { staticClass: "b-button-actions__container-wrapper", class: e.conditionalClasses, attrs: { role: "group" } }, e._l(e.reversedActionsList, function(n, r) {
     return s("div", { key: r, staticClass: "b-button-actions__button-wrapper" }, [s("bento-button", { attrs: { critical: n.critical, disabled: n.disabled, variant: n.variant || e.generateButtonVariantByIndex(r) }, on: { click: n.event }, scopedSlots: e._u([n.icon ? { key: "iconLeft", fn: function() {
@@ -86,20 +85,20 @@ var v = function() {
     }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(n.title) + " ")])], 1);
   }), 0)]);
 }, f = [], m = /* @__PURE__ */ p(
-  b,
   v,
+  b,
   f,
   !1,
   null,
-  "e7b6b23b",
+  "41916e0b",
   null,
   null
 );
-const y = m.exports;
+const A = m.exports;
 export {
-  y as B,
+  A as B,
   c as a,
   l as b,
   i as c
 };
-//# sourceMappingURL=button-actions.c87eaee6.js.map
+//# sourceMappingURL=button-actions.03751d96.js.map

package/dist/chunks/button-actions.03751d96.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions.03751d96.js","sources":["../../src/components/button/components/button-actions/button-actions.types.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonVariant } from '@/components/button';\n\nexport interface BentoButtonActionObject {\n    title: string;\n    event: (event: Event) => void;\n    icon?: VueNodeElement;\n    disabled?: boolean;\n    variant?: BentoButtonVariant;\n    critical?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\n\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-button\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    @click=\"button.event\"\n                >\n                    <template v-if=\"button.icon\" #iconLeft>\n                        <component :is=\"button.icon\" :svg-title=\"button.title\"></component>\n                    </template>\n                    {{ button.title }}\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n\n    export default defineComponent({\n        name: 'bento-button-actions',\n        components: { BentoButton },\n        props: {\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` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `disabled` (optional): Disables the action.\n             *\n             * `variant` (optional): Sets button's variant background color.\n             *\n             * `critical` (optional): Sets button red border adn color.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: BentoButtonVariant.PRIMARY,\n             *   critical: true\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                required: true,\n            },\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            layout: {\n                type: String as PropType<BentoButtonActionsLayout>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (layout: BentoButtonActionsLayout) =>\n                    Object.values(BentoButtonActionsLayout).includes(layout),\n            },\n        },\n        setup(props) {\n            const reversedActionsList = computed(() => props.actions.slice().reverse());\n            const generateButtonVariantByIndex = actionIndex => {\n                const lastActionIndex = props.actions.length - 1;\n                return actionIndex === lastActionIndex ? BentoButtonVariant.PRIMARY : BentoButtonVariant.SECONDARY;\n            };\n\n            const conditionalClasses = computed(() => ({\n                [`b-button-actions--${props.layout}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                reversedActionsList,\n\n                // Methods\n                generateButtonVariantByIndex,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","_sfc_main","defineComponent","BentoButton","layout","props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","BentoButtonVariant"],"mappings":";;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAIL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCCPG,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,EAAA;AAAA,EACA,OAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAmCA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAYA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAEA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAAF,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAG,IAAA,CAAAC,MAAA;AACA,YAAAC,IAAAL,EAAA,QAAA,SAAA;AACA,aAAAI,MAAAC,IAAAC,EAAA,UAAAA,EAAA;AAAA,IAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBAJAJ,EAAA,OAAA;AAAA,QAAA,CAAA,qBAAAF,EAAA,QAAA,GAAA;AAAA,MACA,EAAA;AAAA,MAKA,qBAAAC;AAAA;AAAA,MACA,8BAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button.98f2271d.js → button.f64585fc.js}

@@ -1,14 +1,13 @@
 import { defineComponent as f, computed as o } from "vue";
-import { B as p, c as y, a as m } from "./index.3aedb3dd.js";
-import { h as v } from "./hasSlot.dceac207.js";
-import { BentoLink as g, BentoLinkVariant as h } from "../link.js";
-import { n as S } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as p, a as y, b as m } from "./index.e1fcc9e0.js";
+import { u as v } from "./use-has-slot.068222e6.js";
+import { BentoLink as g, BentoLinkVariant as S } from "../link.js";
+import { n as h } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/button.css";
 var s = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.TERTIARY = "tertiary", t))(s || {}), i = /* @__PURE__ */ ((t) => (t.CONDENSED = "condensed", t.DESTRUCTIVE = "critical", t.DISABLED = "disabled", t.ICON_ONLY = "icon-only", t))(i || {});
 const C = f({
   name: "bento-button",
   components: { BentoTypography: p },
-  inheritAttrs: !1,
   props: {
     /**
      * Disables button functionality
@@ -69,7 +68,7 @@ const C = f({
         ...c.value,
         disabled: t.disabled,
         type: t.type
-      } : { ...t.link, disableTypography: !0, variant: h.DEFAULT }
+      } : { ...t.link, disableTypography: !0, variant: S.DEFAULT }
     ), b = o(() => ({
       [`b-button--${t.variant}${t.critical ? `-${i.DESTRUCTIVE}` : ""}`]: !0
     })), _ = o(
@@ -102,13 +101,13 @@ var E = function() {
   return n._self._setupProxy, e(n.componentType, n._b({ tag: "component", staticClass: "b-button", class: n.conditionalClasses, on: { "!click": function(l) {
     return n.onClickButton.apply(null, arguments);
   } } }, "component", n.componentProps, !1), [n.hasSlot("iconLeft") ? e("span", { staticClass: "b-button__icon-left", attrs: { "data-testid": "icon-button-left" } }, [n._t("iconLeft")], 2) : n._e(), n.hasSlot("default") ? e("bento-typography", { staticClass: "b-button__label", attrs: { el: n.BentoTypographyElement.SPAN, variant: n.BentoTypographyVariant.BODY, stronger: "" } }, [n._t("default")], 2) : n._e(), n.hasSlot("iconRight") ? e("span", { staticClass: "b-button__icon-right", attrs: { "data-testid": "icon-button-right" } }, [n._t("iconRight")], 2) : n._e()], 1);
-}, T = [], D = /* @__PURE__ */ S(
+}, T = [], D = /* @__PURE__ */ h(
   C,
   E,
   T,
   !1,
   null,
-  "cb874f98",
+  "9b484955",
   null,
   null
 );
@@ -118,4 +117,4 @@ export {
   s as a,
   i as b
 };
-//# sourceMappingURL=button.98f2271d.js.map
+//# sourceMappingURL=button.f64585fc.js.map