@adyen/bento-vue3 1.62.0 → 1.63.0

package/dist/internal.js

@@ -1,16 +1,16 @@
-import { a as e, b as r, C as t, c as s, d as p } from "./chunks/calendar.DW8Uy3b_.js";
+import { a as e, b as r, C as t, c as s, d as p } from "./chunks/calendar.CLpwW_-k.js";
 import { C as n, a as l } from "./chunks/copy.BFMgEWBq.js";
 import { C as f } from "./chunks/controls-group.D32ggMrj.js";
 import { B as I, b as m, a as E, D as T } from "./chunks/dialog-page.C80HOigq.js";
 import { E as d, F as N } from "./chunks/error-message.C9YtK-P0.js";
-import { F as O } from "./chunks/fixed-scroller.Cmi0TpjZ.js";
+import { F as O } from "./chunks/fixed-scroller.D5nAPPbo.js";
 import { G as A, a as L } from "./chunks/grid-layout.BTLE3rac.js";
 import { I as c } from "./chunks/info-icon-with-popover.Duk1tj5G.js";
-import { b, c as g, u as y } from "./chunks/use-cached-selected-values.CUi4XfMa.js";
-import { L as F } from "./chunks/listbox-option-tag.WzftYVP_.js";
+import { b, c as g, u as y } from "./chunks/use-cached-selected-values.swt0cdsA.js";
+import { L as F } from "./chunks/listbox-option-tag.0fIXV0Bs.js";
 import { B as M } from "./chunks/teleport.CfGWjxe2.js";
 import { T as h } from "./chunks/tooltip.D2o0d8Xf.js";
-import { B as J } from "./chunks/button-actions-with-menu.DhqEdBBQ.js";
+import { B as J } from "./chunks/button-actions-with-menu.BS4gewjn.js";
 import { f as R } from "./chunks/button-actions.D1pXI1AJ.js";
 export {
   R as BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY,

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/menu.DOKYXlFy.js";
+import { B as o, a as t } from "./chunks/menu.CCDxWQPw.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/pagination.js

@@ -1,4 +1,4 @@
-import { B as n } from "./chunks/pagination.B_d4N-RQ.js";
+import { B as n } from "./chunks/pagination.BKyr5hq_.js";
 export {
   n as BentoPagination
 };

package/dist/rich-text-editor.js

@@ -1,4 +1,4 @@
-import { r as t } from "./chunks/rich-text-editor.CnoXCpHV.js";
+import { r as t } from "./chunks/rich-text-editor.BK2zdyOm.js";
 export {
   t as BentoRichTextEditor
 };

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.BeOwzjq4.js";
-import { u as o } from "./chunks/dropdown.OG72_pRK.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.DgOHq0ns.js";
+import { u as o } from "./chunks/dropdown.BPQS22Kl.js";
 export {
   r as BentoSearchBar,
   t as BentoSearchBarEvent,

package/dist/secondary-nav.js

@@ -1,4 +1,4 @@
-import { s as e } from "./chunks/secondary-nav.GRqyqoMi.js";
+import { s as e } from "./chunks/secondary-nav.BHpoi5U4.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/selection-card.js

@@ -1,4 +1,4 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.0tHKJZ1M.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.-8bXRhOW.js";
 export {
   t as BentoSelectionCard,
   a as BentoSelectionCardGroup,

package/dist/styles/bento-dark.css

@@ -1764,11 +1764,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/bento-light.css

@@ -1762,11 +1762,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/bento.css

@@ -1762,11 +1762,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/legacy.css

@@ -1647,12 +1647,16 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-border-color: var(--b-color-grey-10);
   --b-card-secondary-background-color: var(--b-color-grey-10);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/styles/styleguide.css

@@ -1817,11 +1817,15 @@
   --b-card-animation-easing: var(--b-animation-easing-standard);
   --b-card-animation-duration: var(--b-animation-duration-moderate);
   --b-card-title-wrapper-gap: var(--b-spacer-070);
+  --b-card-secondary-clickable-active-background-color: var(--b-color-background-secondary-active);
+  --b-card-secondary-clickable-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-focus-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-header-active-background-color: var(--b-color-background-secondary-active);
   --b-card-secondary-header-hover-background-color: var(--b-color-background-secondary-hover);
   --b-card-secondary-hover-background-color: var(--b-color-background-tertiary);
   --b-card-secondary-background-color: var(--b-color-background-secondary);
+  --b-card-clickable-active-background-color: var(--b-color-background-primary-active);
+  --b-card-clickable-hover-background-color: var(--b-color-background-primary-hover);
   --b-card-disabled-color: var(--b-color-label-disabled);
   --b-card-disabled-background-color: var(--b-color-background-secondary);
   --b-card-expandable-header-padding-bottom: var(--b-spacer-060);

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { B as e, a as s } from "./chunks/tabs.CkDHEdGa.js";
+import { B as e, a as s } from "./chunks/tabs.Cq1fdzVh.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.20XC06Eu.js";
+import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.BlSsK0Rr.js";
 export {
   t as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.62.0",
+  "version": "1.63.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.62.0",
+  "version": "1.63.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -45,7 +45,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.62.0"
+    "@adyen/bento-design-tokens": "1.63.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",
@@ -109,7 +109,7 @@
     "storybook": "8.6.4",
     "tsc-alias": "1.8.11",
     "typescript": "5.6.3",
-    "vite": "5.4.19",
+    "vite": "5.4.20",
     "vite-plugin-css-injected-by-js": "2.4.0",
     "vite-plugin-dynamic-import": "1.5.0",
     "vite-plugin-static-copy": "0.15.0",
@@ -122,9 +122,9 @@
     "vue-style-loader": "4.1.3",
     "vue-tsc": "1.0.24",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.4.0",
-    "@adyen/ui-assets-icons-16": "6.4.0",
-    "@adyen/ui-assets-payment-method-icons": "9.3.0"
+    "@adyen/bento-tailwind": "0.4.1",
+    "@adyen/ui-assets-icons-16": "6.4.1",
+    "@adyen/ui-assets-payment-method-icons": "9.3.1"
   },
   "scripts": {
     "build": "pnpm run build:prod",

package/dist/chunks/card.CxeuIcpZ.js

@@ -1,213 +0,0 @@
-import { defineComponent as K, useSlots as j, ref as S, watch as B, computed as n, createElementBlock as i, openBlock as d, normalizeClass as c, createCommentVNode as s, createVNode as L, unref as o, renderSlot as b, withKeys as A, createElementVNode as m, createBlock as _, mergeProps as J, withCtx as f, Transition as q, normalizeStyle as G } from "vue";
-import { B as E } from "./typography.DN5eC5ch.js";
-import { C as Q, a as X } from "./chevron-up.MAa3Ksgd.js";
-import { u as Z } from "./use-expandable-content-height.GkjjbmPy.js";
-import { u as ee } from "./use-has-slot.B7eQSabc.js";
-import { g as ae } from "./generate-uid.NJ8tVoha.js";
-import { u as te } from "./i18n.B6g5VX0q.js";
-import { o as oe } from "./resize.Bqks3WUm.js";
-import { c as ne, B as de } from "./button-actions.D1pXI1AJ.js";
-import { _ as se } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/card.css";
-var T = /* @__PURE__ */ ((l) => (l.PRIMARY = "primary", l.SECONDARY = "secondary", l))(T || {}), p = /* @__PURE__ */ ((l) => (l.DEFAULT = "default", l.SMALL = "small", l))(p || {});
-const D = {
-  "en-US": {
-    hideContent: "Hide content",
-    showContent: "Show content"
-  },
-  "ja-JP": {
-    hideContent: "コンテンツを非表示",
-    showContent: "コンテンツを表示"
-  },
-  "pt-BR": {
-    hideContent: "Ocultar conteúdo",
-    showContent: "Mostrar conteúdo"
-  }
-}, le = {
-  key: 0,
-  class: "b-card__image"
-}, re = ["tabindex", "aria-controls", "aria-expanded", "role"], ie = { class: "b-card__header-wrapper" }, ce = {
-  key: 0,
-  class: "b-card__header-slot-wrapper"
-}, ue = ["id"], pe = {
-  i18n: { messages: D },
-  name: "bento-card"
-}, be = /* @__PURE__ */ K({
-  ...pe,
-  props: {
-    actions: { default: null },
-    actionsLayout: { default: ne.BUTTONS_END },
-    background: { default: T.PRIMARY },
-    closed: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    expandable: { type: Boolean, default: !1 },
-    titleSize: { default: p.DEFAULT }
-  },
-  emits: ["click", "expanded"],
-  setup(l, { emit: H }) {
-    const { t: y } = te({ messages: D }), I = j(), t = ee(I), e = l, C = H, u = S(null), g = ae("card"), r = S(!e.closed);
-    B(
-      () => e.closed,
-      (a) => {
-        r.value = !a;
-      }
-    );
-    const v = n(() => t("default") || t("description") || t("header")), M = n(() => t("default") || t("header")), x = n(
-      () => {
-        var a;
-        return (t("content") || ((a = e.actions) == null ? void 0 : a.length)) && (!e.expandable || e.expandable && r.value);
-      }
-    ), z = n(() => e.expandable && !e.disabled ? 0 : -1), N = n(() => ({
-      [`b-card--${e.background}`]: e.background,
-      "b-card--expandable": e.expandable,
-      "b-card--disabled": e.expandable && e.disabled
-    })), U = n(() => ({
-      "b-card__header--expandable": e.expandable,
-      "b-card__header--without-body": !e.expandable && !x.value
-    })), $ = n(() => ({
-      "b-card__toggle--small-text": e.titleSize === p.SMALL
-    })), R = n(() => ({
-      "b-card__body--expandable": e.expandable && t("content"),
-      "b-card__body--without-header": !e.expandable && !v.value
-    })), O = n(() => ({
-      "b-card__content--without-header": !e.expandable && !v.value,
-      "b-card__content--expandable": e.expandable
-    })), P = n(() => {
-      const a = !e.expandable && e.actions && !t("content");
-      return {
-        "b-card__actions--without-content": a,
-        "b-card__actions--without-content-and-with-header": a && v.value
-      };
-    }), F = n(() => ({
-      "b-card__title-wrapper--truncated": t("header")
-    })), V = n(
-      () => ({
-        el: "div",
-        variant: e.titleSize === p.DEFAULT ? "title" : "body",
-        strongest: e.titleSize === p.SMALL,
-        wide: e.titleSize === p.SMALL
-      })
-    ), { updateContentHeight: w, contentHeight: k } = Z(u, r), W = n(
-      () => e.expandable && k.value ? { "max-height": k.value } : {}
-    );
-    B(
-      () => u.value,
-      () => {
-        let a = null;
-        !a && u.value && (a = oe(u.value, () => {
-          u.value && w();
-        }));
-      }
-    );
-    const h = () => {
-      !e.disabled && e.expandable && (r.value = !r.value, C("expanded", r.value), w());
-    }, Y = () => {
-      e.disabled || C("click");
-    };
-    return (a, ve) => (d(), i("div", {
-      class: c(["b-card", N.value]),
-      "data-testid": "card",
-      onClick: Y
-    }, [
-      o(t)("image") ? (d(), i("div", le, [
-        b(a.$slots, "image", {}, void 0, !0)
-      ])) : s("", !0),
-      v.value ? (d(), i("div", {
-        key: 1,
-        class: c(["b-card__header", U.value]),
-        tabindex: z.value,
-        "aria-controls": a.expandable ? o(g) : null,
-        "aria-expanded": a.expandable ? `${r.value}` : null,
-        role: a.expandable ? "button" : null,
-        onClick: h,
-        onKeypress: [
-          A(h, ["enter"]),
-          A(h, ["space"])
-        ]
-      }, [
-        m("div", ie, [
-          M.value ? (d(), i("div", ce, [
-            m("div", {
-              class: c(["b-card__title-wrapper", F.value])
-            }, [
-              a.expandable ? (d(), i("div", {
-                key: 0,
-                class: c(["b-card__toggle", $.value])
-              }, [
-                r.value ? (d(), _(o(Q), {
-                  key: 0,
-                  "svg-title": o(y)("hideContent"),
-                  "aria-hidden": "true"
-                }, null, 8, ["svg-title"])) : (d(), _(o(X), {
-                  key: 1,
-                  "svg-title": o(y)("showContent"),
-                  "aria-hidden": "true"
-                }, null, 8, ["svg-title"]))
-              ], 2)) : s("", !0),
-              o(t)("default") ? (d(), _(o(E), J({
-                key: 1,
-                class: "b-card__title"
-              }, V.value), {
-                default: f(() => [
-                  b(a.$slots, "default", {}, void 0, !0)
-                ]),
-                _: 3
-              }, 16)) : s("", !0)
-            ], 2),
-            o(t)("header") ? b(a.$slots, "header", { key: 0 }, void 0, !0) : s("", !0)
-          ])) : s("", !0),
-          o(t)("description") ? (d(), _(o(E), {
-            key: 1,
-            class: "b-card__description",
-            el: "div",
-            variant: "body"
-          }, {
-            default: f(() => [
-              b(a.$slots, "description", {}, void 0, !0)
-            ]),
-            _: 3
-          })) : s("", !0)
-        ])
-      ], 42, re)) : s("", !0),
-      L(q, { name: "b-card__animation" }, {
-        default: f(() => [
-          x.value ? (d(), i("div", {
-            key: 0,
-            class: "b-card__wrapper",
-            style: G(W.value)
-          }, [
-            m("div", {
-              id: a.expandable ? o(g) : null,
-              ref_key: "contentDiv",
-              ref: u,
-              class: c(["b-card__body", R.value])
-            }, [
-              o(t)("content") ? (d(), i("div", {
-                key: 0,
-                class: c(["b-card__content", O.value])
-              }, [
-                b(a.$slots, "content", {}, void 0, !0)
-              ], 2)) : s("", !0),
-              a.actions ? (d(), i("div", {
-                key: 1,
-                class: c(["b-card__actions", P.value])
-              }, [
-                L(o(de), {
-                  actions: a.actions,
-                  layout: a.actionsLayout
-                }, null, 8, ["actions", "layout"])
-              ], 2)) : s("", !0)
-            ], 10, ue)
-          ], 4)) : s("", !0)
-        ]),
-        _: 3
-      })
-    ], 2));
-  }
-}), Se = /* @__PURE__ */ se(be, [["__scopeId", "data-v-518b98d9"]]);
-export {
-  T as B,
-  p as a,
-  Se as c
-};
-//# sourceMappingURL=card.CxeuIcpZ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"card.CxeuIcpZ.js","sources":["../../../vue2/src/components/card/card.types.ts","../../../vue2/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('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions?: BentoButtonActionsList;\n\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n            /**\n             * Defines the color of card background\n             */\n            background?: BentoCardBackground | `${BentoCardBackground}`;\n\n            /**\n             * Sets the expandable card in a closed state\n             */\n            closed?: boolean;\n\n            /**\n             * Disables the expandable card\n             */\n            disabled?: boolean;\n\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable?: boolean;\n\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;\n        }>(),\n        {\n            actions: null,\n            actionsLayout: BentoButtonActionsLayout.BUTTONS_END,\n            background: BentoCardBackground.PRIMARY,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            titleSize: BentoCardTitleSize.DEFAULT,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'click');\n        (e: 'expanded', isExpanded: boolean);\n    }>();\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/card/card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","props","__props","emit","__emit","contentDiv","ref","cardId","generateUid","showContent","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","toggleExpansion","onClick"],"mappings":"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"}

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

@@ -1,168 +0,0 @@
-import { createElementBlock as m, openBlock as u, mergeProps as A, createCommentVNode as R, createElementVNode as w, toDisplayString as H, defineComponent as I, ref as K, computed as r, useAttrs as P, toRefs as T, normalizeClass as Y, createBlock as C, unref as s, withKeys as $, withModifiers as D } from "vue";
-import { C as M } from "./checkmark-small.x-gmK2Dt.js";
-/* empty css              */
-import { _ as B } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/checkbox-input.css";
-var o = /* @__PURE__ */ ((e) => (e.UNCHECKED = "unchecked", e.DISABLED = "disabled", e.ERROR = "error", e.READONLY = "readonly", e))(o || {}), h = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(h || {});
-let x = 0;
-const z = {
-  beforeCreate() {
-    this.uuid = x.toString(), x += 1;
-  }
-}, G = { key: 0 };
-function Z(e, d, t, b, c, y) {
-  return u(), m("svg", A({ role: "img" }, e.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (u(), m("title", G, H(e.$attrs["svg-title"]), 1)) : R("", !0),
-    d[0] || (d[0] = w("path", {
-      fill: "#001222",
-      d: "M4.25 7.25H11.75V8.75H4.25V7.25Z"
-    }, null, -1))
-  ], 16);
-}
-const j = /* @__PURE__ */ B(z, [["render", Z]]), q = ["id", "aria-label", "aria-checked", "aria-describedby", "aria-invalid", "checked", "disabled", ".indeterminate", "value", "aria-readonly"], F = {
-  name: "checkbox-input",
-  inheritAttrs: !1
-}, J = /* @__PURE__ */ I({
-  ...F,
-  props: {
-    /**
-     * The aria label associated to the input checkbox.
-     */
-    ariaLabel: { type: String, default: "" },
-    /**
-     * An additional string that serves as description for the input checkbox (useful if the component shows a description).
-     */
-    ariaDescribedby: { type: String, default: "" },
-    /**
-     * Setting this property to true will disable the checkbox in your form.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Setting this property to true will show the checkbox in error state.
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * Sets the id of the checkbox. Required for accessibility purposes
-     */
-    id: { type: String, default: null },
-    /**
-     * The :indeterminate CSS pseudo-class represents any form element
-     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
-     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
-     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
-     * This property lets you control the input.indeterminate native property.
-     */
-    indeterminate: { type: Boolean, default: !1 },
-    /**
-     * When handling a single checkbox with a singular state, use a boolean.
-     *
-     * When handling multiple checkboxes, use an array of keys.
-     * These keys exist as a set "value" prop for each checkbox.
-     */
-    modelValue: {
-      type: [Boolean, Array],
-      default: !1
-    },
-    /**
-     * Setting this property to true will set the checkbox to read only state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The value of the component. The DOM API casts this to a string.
-     * The browser uses "on" as the default value.
-     *
-     * In the case of multiple checkboxes this value is used as a unique key.
-     */
-    value: { type: [String, Number], default: null }
-  },
-  emits: ["update:model-value"],
-  setup(e, { emit: d }) {
-    const t = e, b = d, c = K(null), y = r(() => {
-      {
-        const { class: i, style: n, ...a } = P();
-        return a;
-      }
-    }), { disabled: k, indeterminate: _, modelValue: p, readonly: E, value: v } = T(t), N = r(() => ({
-      [`b-checkbox-input--${o.DISABLED}`]: t.disabled,
-      [`b-checkbox-input--${o.READONLY}`]: t.readonly
-    })), L = r(() => ({
-      [`b-checkbox-input__outline--${o.UNCHECKED}`]: !f.value && !t.indeterminate,
-      [`b-checkbox-input__outline--${o.ERROR}`]: t.hasError,
-      [`b-checkbox-input__outline--${o.READONLY}`]: t.readonly
-    })), g = r(() => Array.isArray(p.value)), f = r(() => g.value ? p.value.some((i) => i === v.value) : p.value), V = r(
-      () => t.indeterminate ? "mixed" : `${!!f.value}`
-    ), O = r(
-      () => t.hasError && !t.disabled && !t.readonly
-    ), S = (i) => {
-      if (E.value) {
-        i.preventDefault();
-        return;
-      }
-    }, U = (i) => {
-      if (k.value)
-        return;
-      const n = i.target.checked;
-      if (g.value) {
-        const a = [...p.value], l = a.indexOf(v.value);
-        l === -1 ? a.push(v.value) : a.splice(l, 1), b(h.UPDATE, a);
-      } else
-        b(h.UPDATE, n);
-    };
-    return (i, n) => (u(), m("div", {
-      class: Y(["b-checkbox-input", N.value])
-    }, [
-      s(_) ? (u(), C(s(j), {
-        key: 0,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : f.value ? (u(), C(s(M), {
-        key: 1,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : R("", !0),
-      w("input", A({
-        id: e.id,
-        ref_key: "inputRef",
-        ref: c
-      }, y.value, {
-        type: "checkbox",
-        class: ["b-checkbox-input__outline", L.value],
-        "aria-label": e.ariaLabel,
-        "aria-checked": V.value,
-        "aria-describedby": e.ariaDescribedby,
-        "aria-invalid": O.value,
-        checked: f.value,
-        disabled: s(k),
-        ".indeterminate": s(_),
-        value: s(v),
-        "aria-readonly": s(E),
-        onClick: S,
-        onChange: U,
-        onKeydown: [
-          n[0] || (n[0] = $(D((a) => {
-            var l;
-            return (l = c.value) == null ? void 0 : l.click();
-          }, ["prevent"]), ["space"])),
-          n[1] || (n[1] = $(D((a) => {
-            var l;
-            return (l = c.value) == null ? void 0 : l.click();
-          }, ["prevent"]), ["enter"]))
-        ]
-      }), null, 48, q)
-    ], 2));
-  }
-}), te = /* @__PURE__ */ B(J, [["__scopeId", "data-v-7781bcee"]]);
-export {
-  o as C,
-  j as N,
-  te as a
-};
-//# sourceMappingURL=checkbox-input.BhAIj6Cq.js.map