@adyen/bento-vue2 2.0.0-rc.5 → 2.0.0

package/dist/chunks/{action-bar.Br6mamx3.js → action-bar.BsXW7BI2.js}

@@ -1,17 +1,17 @@
-import { defineComponent as D, computed as s, ref as c, toRefs as G, watch as w, provide as j, nextTick as y } from "vue";
-import { B as J } from "./button.CBqJGWy5.js";
-import { B as K } from "./typography.D1OZJbEa.js";
-import { B as q } from "./loading-indicator.PxbRzshH.js";
-import { B as Q } from "./button-actions-with-menu.BBuKZYuH.js";
-import { C as X } from "./cross.szJ_ZUTI.js";
-import { C as Y } from "./checkmark-circle-fill.Ds9Mwqpi.js";
-import { C as Z } from "./cross-circle-fill.D3dEmLeQ.js";
-import { u as H } from "./index.CPOlyau9.js";
-import { b as ee } from "./index.CL3TXc0a.js";
-import { P as ne, B as te } from "./button-actions.CFOxzahr.js";
-import { n as ae } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { defineComponent as q, useSlots as Q, computed as s, ref as c, toRefs as X, watch as k, provide as Y, nextTick as B } from "vue";
+import { B as Z } from "./button.DII5Ifwa.js";
+import { B as H } from "./typography.D1OZJbEa.js";
+import { B as ee } from "./loading-indicator.PxbRzshH.js";
+import { B as ne } from "./button-actions-with-menu.BY394ars.js";
+import { C as te } from "./cross.szJ_ZUTI.js";
+import { C as ae } from "./checkmark-circle-fill.Ds9Mwqpi.js";
+import { C as se } from "./cross-circle-fill.D3dEmLeQ.js";
+import { u as oe } from "./index.CPOlyau9.js";
+import { b as ie } from "./index.CL3TXc0a.js";
+import { P as re, B as ce } from "./button-actions.bkcLUE1G.js";
+import { n as le } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
-const se = {
+const ue = {
   "de-DE": { actionBar: "Aktionsleiste", applying: "Anwenden...", cancel: "Abbrechen", close: "Schließen", retry: "Wiederholen", save: "Speichern", selected: "ausgewählt", somethingWentWrong: "Etwas ist schief gelaufen", success: "Erfolg!", undo: "Rückgängig machen", unsavedChanges: "Ungespeicherte Änderungen | ungespeicherte Änderung | ungespeicherte Änderungen" },
   "en-GB": { actionBar: "Action bar", applying: "Applying...", cancel: "Cancel", close: "Close", retry: "Retry", save: "Save", selected: "selected", somethingWentWrong: "Something went wrong", success: "Success!", undo: "Undo", unsavedChanges: "Unsaved changes | unsaved change | unsaved changes" },
   "en-US": { actionBar: "Action bar", applying: "Applying...", cancel: "Cancel", close: "Close", retry: "Retry", save: "Save", selected: "selected", somethingWentWrong: "Something went wrong", success: "Success!", undo: "Undo", unsavedChanges: "Unsaved changes | unsaved change | unsaved changes" },
@@ -23,10 +23,10 @@ const se = {
   "ja-JP": { actionBar: "アクションバー", applying: "適用中...", cancel: "キャンセル", close: "閉じる", retry: "再試行", save: "保存", selected: "選択済み", somethingWentWrong: "問題が発生しました", success: "成功！", undo: "元に戻す", unsavedChanges: "保存されていない変更 | 保存されていない変更 | 保存されていない変更" },
   "pt-BR": { actionBar: "Barra de ação", applying: "Aplicando...", cancel: "Cancelar", close: "Fechar", retry: "Tentar de novo", save: "Salvar", selected: "selecionado", somethingWentWrong: "Algo deu errado", success: "Sucesso!", undo: "Desfazer", unsavedChanges: "Alterações não salvas | alteração não salva | alterações não salvas" },
   "zh-CN": { actionBar: "操作栏", applying: "申请...", cancel: "取消", close: "关闭", retry: "重试", save: "保存", selected: "已选", somethingWentWrong: "出了点问题", success: "成功！", undo: "撤销", unsavedChanges: "未保存的更改 | 未保存的更改 | 未保存的更改" }
-}, oe = {
-  i18n: { messages: se }
-}, ie = /* @__PURE__ */ D({
-  ...oe,
+}, de = {
+  i18n: { messages: ue }
+}, ve = /* @__PURE__ */ q({
+  ...de,
   __name: "action-bar",
   props: {
     /**
@@ -44,6 +44,13 @@ const se = {
       type: Array,
       default: () => []
     },
+    /**
+     * Determines whether the close button is displayed in the `default` variant.
+     */
+    dismissible: {
+      type: Boolean,
+      default: !0
+    },
     /**
      * How many actions should be visible outside the menu, cannot be more than 4
      */
@@ -68,11 +75,12 @@ const se = {
       default: null
     },
     /**
-     * Label for the selection, e.g. 'selected'/'changed'
+     * Label for the selection in the `default` variant, e.g. 'selected'/'changed'.
+     * Pass `null` to hide it. In the `confirmation` variant, this prop is ignored.
      */
     selectionLabel: {
       type: String,
-      default: null
+      default: void 0
     },
     /**
      * State of the action bar.
@@ -107,7 +115,7 @@ const se = {
   },
   emits: ["close", "cancel", "save", "undo-action", "retry-action", "cancel-action"],
   setup(l, { emit: n }) {
-    const t = l, e = 100, r = 7, B = 500, h = 32, { t: i, tc: E, n: I } = H(), k = s(() => t.selectionLabel ? t.selectionLabel : i("selected")), x = s(() => {
+    const t = l, e = 100, r = 7, A = 500, f = 32, { t: i, tc: S, n: x } = oe(), W = Q(), w = () => !!W.selectionLabel, E = s(() => t.selectionLabel === void 0 ? i("selected") : t.selectionLabel), R = s(() => {
       switch (t.state) {
         case "loading":
           return i("applying");
@@ -118,47 +126,49 @@ const se = {
         default:
           return "";
       }
-    }), m = c(null), u = c(null), f = c(null), g = c(!1), R = s(
+    }), g = c(null), u = c(null), _ = c(null), p = c(!1), T = s(
       () => t.state === "loading" ? "out-in" : void 0
-    ), T = s(
+    ), F = s(
       () => t.state === "loading" || t.state === "success" && !t.showUndoAction
-    ), F = (a) => {
-      t.state === "loading" && (u.value = `${a.offsetWidth}px`, f.value = "100%");
-    }, U = (a) => {
+    ), U = (a) => {
+      t.state === "loading" && (u.value = `${a.offsetWidth}px`, _.value = "100%");
+    }, N = (a) => {
       if (t.state !== "loading")
         return;
       Object.assign(a.style, { width: "auto", maxWidth: "none" });
-      const v = a.offsetWidth;
+      const m = a.offsetWidth;
       Object.assign(a.style, { width: "100%", maxWidth: u.value }), requestAnimationFrame(() => {
-        u.value = `${v}px`;
+        u.value = `${m}px`;
       });
-    }, L = () => {
-      u.value = null, f.value = null, t.state === "fail" && (g.value = !0);
-    }, N = (a) => {
-      a.animationName.startsWith("shake-") && (g.value = !1);
-    }, { extraBottomSpacing: A, visibleActions: W } = G(t), { width: d } = ee(), o = c(null), p = c(null), S = s(() => t.variant === "confirmation");
-    w(
-      () => W.value,
+    }, O = () => {
+      u.value = null, _.value = null, t.state === "fail" && (p.value = !0);
+    }, M = (a) => {
+      a.animationName.startsWith("shake-") && (p.value = !1);
+    }, { extraBottomSpacing: L, visibleActions: I } = X(t), { width: d } = ie(), o = c(null), h = c(null), v = s(() => t.variant === "confirmation"), P = s(
+      () => v.value ? S("unsavedChanges", t.itemCounter) : E.value
+    ), V = s(() => !v.value && t.dismissible !== !1), $ = () => v.value || w() || t.selectionLabel !== null;
+    k(
+      () => I.value,
       (a) => {
-        p.value = a <= 4 ? a : 4, o.value = p.value;
+        h.value = a <= 4 ? a : 4, o.value = h.value;
       },
       { immediate: !0 }
     );
-    const O = s(() => ({
-      "b-action-bar--extra-spacing": A.value,
-      "b-action-bar--confirmation": S.value,
-      "b-action-bar__state-animation--shake": g.value
-    })), M = s(() => ({
+    const z = s(() => ({
+      "b-action-bar--extra-spacing": L.value,
+      "b-action-bar--confirmation": v.value,
+      "b-action-bar__state-animation--shake": p.value
+    })), D = s(() => ({
       [`b-action-bar__container--${t.state}`]: t.state !== "start"
     }));
-    j(ne, r);
-    const V = s(() => {
-      const a = t.actions.map((z) => ({
-        ...z,
+    Y(re, r);
+    const G = s(() => {
+      const a = t.actions.map((K) => ({
+        ...K,
         variant: "secondary"
-      })), v = a.slice(0, o.value).reverse(), b = a.slice(o.value);
-      return [...v, ...b];
-    }), P = s(() => [
+      })), m = a.slice(0, o.value).reverse(), y = a.slice(o.value);
+      return [...m, ...y];
+    }), j = s(() => [
       {
         title: i("save"),
         event: () => n("save")
@@ -168,30 +178,30 @@ const se = {
         variant: "secondary",
         event: () => n("cancel")
       }
-    ]), $ = s(() => t.itemCounter == null || t.itemCounter < 1), _ = async () => {
-      await y(), d.value > m.value.clientWidth + h + e && o.value < p.value && (o.value += 1, _());
+    ]), J = s(() => t.itemCounter == null || t.itemCounter < 1), b = async () => {
+      await B(), d.value > g.value.clientWidth + f + e && o.value < h.value && (o.value += 1, b());
     }, C = async () => {
-      await y(), d.value < m.value.clientWidth + h && o.value > 0 && (o.value -= 1, C());
+      await B(), d.value < g.value.clientWidth + f && o.value > 0 && (o.value -= 1, C());
     };
-    return w(
+    return k(
       () => d.value,
-      async (a, v) => {
-        if (await y(), !m.value)
+      async (a, m) => {
+        if (await B(), !g.value)
           return;
-        const b = a > v;
-        d.value < B ? o.value = 0 : b ? _() : C();
+        const y = a > m;
+        d.value < A ? o.value = 0 : y ? b() : C();
       },
       { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: B, SPACING: h, props: t, emit: n, t: i, tc: E, n: I, label: k, defaultStateLabel: x, actionBar: m, containerMaxWidth: u, containerWidth: f, isShaking: g, stateTransitionMode: R, hideStateActions: T, onBeforeLeave: F, onEnter: U, onAfterEnter: L, onAnimationEnd: N, extraBottomSpacing: A, visibleActions: W, width: d, internalDisplayedActions: o, internalVisibleActions: p, isConfirmationVariant: S, conditionalClasses: O, containerClasses: M, actionsInternal: V, confirmationActions: P, noItemCounter: $, showActions: _, hideActions: C, BentoButton: J, BentoButtonActions: te, BentoTypography: K, BentoLoadingIndicator: q, ButtonActionsWithMenu: Q, CrossIcon: X, CheckmarkCircleFill: Y, CrossCircleFill: Z };
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: A, SPACING: f, props: t, emit: n, t: i, tc: S, n: x, slots: W, hasSelectionLabelSlot: w, label: E, defaultStateLabel: R, actionBar: g, containerMaxWidth: u, containerWidth: _, isShaking: p, stateTransitionMode: T, hideStateActions: F, onBeforeLeave: U, onEnter: N, onAfterEnter: O, onAnimationEnd: M, extraBottomSpacing: L, visibleActions: I, width: d, internalDisplayedActions: o, internalVisibleActions: h, isConfirmationVariant: v, computedSelectionLabel: P, showCloseButton: V, showSelectionLabel: $, conditionalClasses: z, containerClasses: D, actionsInternal: G, confirmationActions: j, noItemCounter: J, showActions: b, hideActions: C, BentoButton: Z, BentoButtonActions: ce, BentoTypography: H, BentoLoadingIndicator: ee, ButtonActionsWithMenu: ne, CrossIcon: te, CheckmarkCircleFill: ae, CrossCircleFill: se };
   }
 });
-var re = function() {
+var me = function() {
   var n = this, t = n._self._c, e = n._self._setupProxy;
-  return t("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [t("section", { staticClass: "b-action-bar", class: e.conditionalClasses, attrs: { "aria-label": e.t("actionBar") }, on: { animationend: e.onAnimationEnd } }, [t("Transition", { attrs: { name: `b-action-bar__state-animation--${n.state}`, mode: e.stateTransitionMode }, on: { "before-leave": e.onBeforeLeave, enter: e.onEnter, "after-enter": e.onAfterEnter } }, [t("div", { key: n.state, ref: "actionBar", staticClass: "b-action-bar__container", class: e.containerClasses, style: { width: e.containerWidth, maxWidth: e.containerMaxWidth } }, [n.state === "start" ? t("div", { staticClass: "b-action-bar__container-inner" }, [e.isConfirmationVariant ? n._e() : t("div", { staticClass: "b-action-bar__close-button" }, [t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": e.t("close") }, on: { click: function(r) {
+  return t("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [t("section", { staticClass: "b-action-bar", class: e.conditionalClasses, attrs: { "aria-label": e.t("actionBar") }, on: { animationend: e.onAnimationEnd } }, [t("Transition", { attrs: { name: `b-action-bar__state-animation--${n.state}`, mode: e.stateTransitionMode }, on: { "before-leave": e.onBeforeLeave, enter: e.onEnter, "after-enter": e.onAfterEnter } }, [t("div", { key: n.state, ref: "actionBar", staticClass: "b-action-bar__container", class: e.containerClasses, style: { width: e.containerWidth, maxWidth: e.containerMaxWidth } }, [n.state === "start" ? t("div", { staticClass: "b-action-bar__container-inner" }, [e.showCloseButton ? t("div", { staticClass: "b-action-bar__close-button" }, [t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": e.t("close") }, on: { click: function(r) {
     return e.emit("close");
   } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
     return [t(e.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1), t(e.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e.isConfirmationVariant && e.noItemCounter ? [n._v(" " + n._s(e.tc("unsavedChanges", 0)) + " ")] : [n._v(" " + n._s(e.n(n.itemCounter)) + " " + n._s(e.isConfirmationVariant ? e.tc("unsavedChanges", n.itemCounter) : e.label) + " ")]], 2), e.isConfirmationVariant ? t(e.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: e.confirmationActions, inverse: "" } }) : t(e.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: e.actionsInternal, "displayed-actions": e.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1) : t("div", { staticClass: "b-action-bar__container-inner" }, [t("div", { staticClass: "b-action-bar__state-icon" }, [n.state === "loading" ? t(e.BentoLoadingIndicator, { attrs: { small: "", inverse: "" } }) : n._e(), n.state === "success" ? t(e.CheckmarkCircleFill, { attrs: { "aria-hidden": !0 } }) : n._e(), n.state === "fail" ? t(e.CrossCircleFill, { attrs: { "aria-hidden": !0 } }) : n._e()], 1), t(e.BentoTypography, { attrs: { stronger: "" } }, [n._t("stateLabel", function() {
+  }, proxy: !0 }], null, !1, 4214210411) })], 1) : n._e(), e.showSelectionLabel() ? t(e.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e.isConfirmationVariant && e.noItemCounter ? [n._v(" " + n._s(e.tc("unsavedChanges", 0)) + " ")] : [!e.isConfirmationVariant && e.hasSelectionLabelSlot() ? n._t("selectionLabel", null, { itemCounter: n.itemCounter, label: e.label }) : [n._v(" " + n._s(e.n(n.itemCounter)) + " " + n._s(e.computedSelectionLabel) + " ")]]], 2) : n._e(), e.isConfirmationVariant ? t(e.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: e.confirmationActions, inverse: "" } }) : t(e.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: e.actionsInternal, "displayed-actions": e.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1) : t("div", { staticClass: "b-action-bar__container-inner" }, [t("div", { staticClass: "b-action-bar__state-icon" }, [n.state === "loading" ? t(e.BentoLoadingIndicator, { attrs: { small: "", inverse: "" } }) : n._e(), n.state === "success" ? t(e.CheckmarkCircleFill, { attrs: { "aria-hidden": !0 } }) : n._e(), n.state === "fail" ? t(e.CrossCircleFill, { attrs: { "aria-hidden": !0 } }) : n._e()], 1), t(e.BentoTypography, { attrs: { stronger: "" } }, [n._t("stateLabel", function() {
     return [n._v(n._s(e.defaultStateLabel))];
   })], 2), e.hideStateActions ? n._e() : t("div", { staticClass: "b-action-bar__state-actions" }, [n.state === "success" && n.showUndoAction ? t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(r) {
     return e.emit("undo-action");
@@ -200,16 +210,16 @@ var re = function() {
   } } }, [n._v(n._s(e.t("retry")))]) : n._e(), n.state === "fail" ? t(e.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(r) {
     return e.emit("cancel-action");
   } } }, [n._v(n._s(e.t("cancel")))]) : n._e()], 1)], 1)])])], 1)]);
-}, ce = [], le = /* @__PURE__ */ ae(
-  ie,
-  re,
-  ce,
+}, ge = [], pe = /* @__PURE__ */ le(
+  ve,
+  me,
+  ge,
   !1,
   null,
-  "b91c5356"
+  "93b90274"
 );
-const Be = le.exports;
+const Le = pe.exports;
 export {
-  Be as B
+  Le as B
 };
-//# sourceMappingURL=action-bar.Br6mamx3.js.map
+//# sourceMappingURL=action-bar.BsXW7BI2.js.map

package/dist/chunks/action-bar.BsXW7BI2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.BsXW7BI2.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"showCloseButton\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n\n                        <bento-typography\n                            v-if=\"showSelectionLabel()\"\n                            el=\"span\"\n                            stronger\n                            class=\"b-action-bar__selection\"\n                        >\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n\n                            <template v-else>\n                                <slot\n                                    v-if=\"!isConfirmationVariant && hasSelectionLabelSlot()\"\n                                    name=\"selectionLabel\"\n                                    :item-counter=\"itemCounter\"\n                                    :label=\"label\"\n                                />\n\n                                <template v-else>\n                                    {{ n(itemCounter) }}\n                                    {{ computedSelectionLabel }}\n                                </template>\n                            </template>\n                        </bento-typography>\n\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import {\n        computed,\n        nextTick,\n        type PropType,\n        provide,\n        ref,\n        toRefs,\n        type TransitionProps,\n        useSlots,\n        watch,\n    } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * Determines whether the close button is displayed in the `default` variant.\n         */\n        dismissible: {\n            type: Boolean,\n            default: true,\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection in the `default` variant, e.g. 'selected'/'changed'.\n         * Pass `null` to hide it. In the `confirmation` variant, this prop is ignored.\n         */\n        selectionLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n\n    const hasSelectionLabelSlot = () => Boolean(slots.selectionLabel);\n\n    const label = computed(() => (props.selectionLabel === undefined ? t('selected') : props.selectionLabel));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n    const computedSelectionLabel = computed(() =>\n        isConfirmationVariant.value ? tc('unsavedChanges', props.itemCounter) : label.value\n    );\n    const showCloseButton = computed(() => !isConfirmationVariant.value && props.dismissible !== false);\n    const showSelectionLabel = () =>\n        isConfirmationVariant.value || hasSelectionLabelSlot() || props.selectionLabel !== null;\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","slots","useSlots","hasSelectionLabelSlot","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","computedSelectionLabel","showCloseButton","showSelectionLabel","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;GA+bIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnTAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA0FA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,GAAA,GACAC,IAAAC,EAAA,GAEAC,IAAA,MAAA,EAAAF,EAAA,gBAEAG,IAAAC,EAAA,MAAAC,EAAA,mBAAA,SAAAT,EAAA,UAAA,IAAAS,EAAA,cAAA,GAEAC,IAAAF,EAAA,MAAA;AACI,cAAAC,EAAA,OAAA;AAAA,QAAqB,KAAA;AAEb,iBAAAT,EAAA,UAAA;AAAA,QAAmB,KAAA;AAEnB,iBAAAA,EAAA,SAAA;AAAA,QAAkB,KAAA;AAElB,iBAAAA,EAAA,oBAAA;AAAA,QAA6B;AAE7B,iBAAA;AAAA,MAAO;AAAA,IACf,CAAA,GAIJW,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,EAAA,GAEAI,IAAAR;AAAA,MAA4B,MAAAC,EAAA,UAAA,YAAA,WAAA;AAAA,IACsB,GAGlDQ,IAAAT;AAAA,MAAyB,MAAAC,EAAA,UAAA,aAAAA,EAAA,UAAA,aAAA,CAAAA,EAAA;AAAA,IACmD,GAG5ES,IAAA,CAAAC,MAAA;AACI,MAAAV,EAAA,UAAA,cAIAI,EAAA,QAAA,GAAAM,EAAA,WAAA,MACAL,EAAA,QAAA;AAAA,IAAuB,GAG3BM,IAAA,CAAAD,MAAA;AACI,UAAAV,EAAA,UAAA;AACI;AAIJ,aAAA,OAAAU,EAAA,OAAA,EAAA,OAAA,QAAA,UAAA,OAAA,CAAA;AACA,YAAAE,IAAAF,EAAA;AAGA,aAAA,OAAAA,EAAA,OAAA,EAAA,OAAA,QAAA,UAAAN,EAAA,MAAA,CAAA,GAEA,sBAAA,MAAA;AACI,QAAAA,EAAA,QAAA,GAAAQ,CAAA;AAAA,MAAqC,CAAA;AAAA,IACxC,GAGLC,IAAA,MAAA;AACI,MAAAT,EAAA,QAAA,MACAC,EAAA,QAAA,MAEAL,EAAA,UAAA,WACIM,EAAA,QAAA;AAAA,IACJ,GAGJQ,IAAA,CAAAC,MAAA;AACI,MAAAA,EAAA,cAAA,WAAA,QAAA,MACIT,EAAA,QAAA;AAAA,IACJ,GAGJ,EAAA,oBAAAU,GAAA,gBAAAC,EAAA,IAAAC,EAAAlB,CAAA,GACA,EAAA,OAAAmB,EAAA,IAAAC,GAAA,GACAC,IAAAlB,EAAA,IAAA,GACAmB,IAAAnB,EAAA,IAAA,GAEAoB,IAAAxB,EAAA,MAAAC,EAAA,YAAA,cAAA,GACAwB,IAAAzB;AAAA,MAA+B,MAAAwB,EAAA,QAAA/B,EAAA,kBAAAQ,EAAA,WAAA,IAAAF,EAAA;AAAA,IACmD,GAElF2B,IAAA1B,EAAA,MAAA,CAAAwB,EAAA,SAAAvB,EAAA,gBAAA,EAAA,GACA0B,IAAA,MAAAH,EAAA,SAAA1B,EAAA,KAAAG,EAAA,mBAAA;AAGA,IAAA2B;AAAA,MAAA,MAAAV,EAAA;AAAA,MACyB,CAAAW,MAAA;AAEjB,QAAAN,EAAA,QAAAM,KAAA,IAAAA,IAAA,GACAP,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAO,IAAA9B,EAAA,OAAA;AAAA,MAA2C,+BAAAiB,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,MACE,wCAAAjB,EAAA;AAAA,IACF,EAAA,GAGtDwB,IAAA/B,EAAA,OAAA;AAAA,MAAyC,CAAA,4BAAAC,EAAA,KAAA,EAAA,GAAAA,EAAA,UAAA;AAAA,IACwB,EAAA;AAIjE,IAAA+B,EAAAC,IAAA5C,CAAA;AAGA,UAAA6C,IAAAlC,EAAA,MAAA;AAEI,YAAAmC,IAAAlC,EAAA,QAAA,IAAA,CAAAmC,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAb,EAAA,KAAA,EAAA,QAAA,GACAgB,IAAAH,EAAA,MAAAb,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAe,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAvC,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAR,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAgD,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAhD,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAgD,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAGJC,IAAAzC,EAAA,MACIC,EAAA,eAAA,QAAAA,EAAA,cAAA,CAAwD,GAI5DyC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAvB,EAAA,QAAAjB,EAAA,MAAA,cAAAZ,IAAAH,KAAAkC,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAoB,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAvB,EAAA,QAAAjB,EAAA,MAAA,cAAAZ,KAAA+B,EAAA,QAAA,MACIA,EAAA,SAAA,GACAsB,EAAA;AAAA,IACJ;AAIJ,WAAAhB;AAAA,MAAA,MAAAR,EAAA;AAAA,MACgB,OAAAyB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAxC,EAAA;AACI;AAEJ,cAAA4C,IAAAF,IAAAC;AACA,QAAA1B,EAAA,QAAA9B,IACIgC,EAAA,QAAA,IAAiCyB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{ai-button.CeT3y12R.js → ai-button.BnFk5CzK.js}

@@ -1,5 +1,5 @@
 import { defineComponent as r, useSlots as c, computed as u, onMounted as d } from "vue";
-import { B as p } from "./button.CBqJGWy5.js";
+import { B as p } from "./button.DII5Ifwa.js";
 import { A as f } from "./artificial-intelligence-ai-filled.BnsciZlb.js";
 import { u as _ } from "./use-has-slot.C9lQZ6nz.js";
 import { p as b } from "./typography.D1OZJbEa.js";
@@ -48,4 +48,4 @@ const F = k.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-button.CeT3y12R.js.map
+//# sourceMappingURL=ai-button.BnFk5CzK.js.map

package/dist/chunks/{ai-button.CeT3y12R.js.map → ai-button.BnFk5CzK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-button.CeT3y12R.js","sources":["../../src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["<template>\n    <div class=\"b-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n        'b-ai-button--inverse': props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AA2EI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,MACN,wBAAAA,EAAA;AAAA,IACD,EAAA,GAGlCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-button.BnFk5CzK.js","sources":["../../src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["<template>\n    <div class=\"b-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n        'b-ai-button--inverse': props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AA2EI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,MACN,wBAAAA,EAAA;AAAA,IACD,EAAA,GAGlCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{ai-tag.DtngkeLj.js → ai-tag.D2Q0xhFK.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, ref as n, watch as f, computed as _ } from "vue";
-import { u as v, c as m, h as I } from "./button-actions.CFOxzahr.js";
+import { u as v, c as m, h as I } from "./button-actions.bkcLUE1G.js";
 import { B as A } from "./typography.D1OZJbEa.js";
 import "./index.Cl4_42j5.js";
 import { u as x } from "./index.CPOlyau9.js";
@@ -72,10 +72,10 @@ var k = function() {
   b,
   !1,
   null,
-  "405c2237"
+  "579b8f12"
 );
 const F = P.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-tag.DtngkeLj.js.map
+//# sourceMappingURL=ai-tag.D2Q0xhFK.js.map

package/dist/chunks/ai-tag.D2Q0xhFK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-tag.D2Q0xhFK.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.DrGpzkQI.js → alert.DJDHwVeR.js}

@@ -1,6 +1,6 @@
 import { getCurrentInstance as u, defineComponent as m, useSlots as y, computed as c, onMounted as w } from "vue";
 import { c as C, a as S, B as b } from "./typography.D1OZJbEa.js";
-import { B as T } from "./button.CBqJGWy5.js";
+import { B as T } from "./button.DII5Ifwa.js";
 import { C as H } from "./cross-small.B9l4YLVX.js";
 /* empty css              */
 import { n as a } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -117,4 +117,4 @@ export {
   n as b,
   i as c
 };
-//# sourceMappingURL=alert.DrGpzkQI.js.map
+//# sourceMappingURL=alert.DJDHwVeR.js.map

package/dist/chunks/{alert.DrGpzkQI.js.map → alert.DJDHwVeR.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.DrGpzkQI.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/warning-filled.vue","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@close-alert` instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.72456 2.45856C6.84306 0.797505 9.35301 0.852915 10.3789 2.62457L15 10.6246C16.0585 12.4537 14.7382 14.7493 12.6201 14.7496H3.37984C1.26177 14.7493 -0.0573711 12.4537 1.00093 10.6246L5.62105 2.62457L5.72456 2.45856ZM8.20991 10.3492C8.02 10.3092 7.80975 10.3298 7.62984 10.4097C7.44993 10.4897 7.28964 10.61 7.17964 10.7798C7.06984 10.9397 7.00984 11.1397 7.00972 11.3394C7.00972 11.6092 7.11997 11.8594 7.29976 12.0494C7.48973 12.2394 7.73976 12.3394 8.00972 12.3394L7.99995 12.3297C8.19979 12.3296 8.38964 12.2696 8.55952 12.1597C8.71947 12.0497 8.84966 11.8895 8.92964 11.7095C9.00952 11.5296 9.03016 11.3293 8.99019 11.1295C8.95014 10.9396 8.85955 10.7596 8.71968 10.6197C8.57975 10.4799 8.39975 10.3792 8.20991 10.3492ZM7.24995 4.57965V9.07965H8.74995V4.57965H7.24995Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","instance","getCurrentInstance","uuid","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;;;;AChBZ,UAAAE,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;ACJA,UAAAA,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmIIG,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAnB,EAAA,GAAA,GAEAoB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAnB,EAAA,GAAA,EAAA,GAAAiB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAjB,EAAA;AAEZ,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAAA,QACe;AAEtB,iBAAAwB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAjB,EAAA,YAAA,WAAA,OAAA,GAEA6B,IAAA,MAAA;AACI,MAAAC,EAAA5B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA6B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.DJDHwVeR.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/warning-filled.vue","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@close-alert` instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.72456 2.45856C6.84306 0.797505 9.35301 0.852915 10.3789 2.62457L15 10.6246C16.0585 12.4537 14.7382 14.7493 12.6201 14.7496H3.37984C1.26177 14.7493 -0.0573711 12.4537 1.00093 10.6246L5.62105 2.62457L5.72456 2.45856ZM8.20991 10.3492C8.02 10.3092 7.80975 10.3298 7.62984 10.4097C7.44993 10.4897 7.28964 10.61 7.17964 10.7798C7.06984 10.9397 7.00984 11.1397 7.00972 11.3394C7.00972 11.6092 7.11997 11.8594 7.29976 12.0494C7.48973 12.2394 7.73976 12.3394 8.00972 12.3394L7.99995 12.3297C8.19979 12.3296 8.38964 12.2696 8.55952 12.1597C8.71947 12.0497 8.84966 11.8895 8.92964 11.7095C9.00952 11.5296 9.03016 11.3293 8.99019 11.1295C8.95014 10.9396 8.85955 10.7596 8.71968 10.6197C8.57975 10.4799 8.39975 10.3792 8.20991 10.3492ZM7.24995 4.57965V9.07965H8.74995V4.57965H7.24995Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","instance","getCurrentInstance","uuid","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;;;;AChBZ,UAAAE,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;ACJA,UAAAA,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmIIG,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAnB,EAAA,GAAA,GAEAoB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAnB,EAAA,GAAA,EAAA,GAAAiB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAjB,EAAA;AAEZ,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAAA,QACe;AAEtB,iBAAAwB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAjB,EAAA,YAAA,WAAA,OAAA,GAEA6B,IAAA,MAAA;AACI,MAAAC,EAAA5B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA6B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{anchor-scroller.DT7QZd5b.js → anchor-scroller.BbvghQxZ.js}

@@ -5,9 +5,9 @@ import { u as C } from "./index.CPOlyau9.js";
 import { g as j } from "./generate-uid.DBWe4g6T.js";
 import { u as k } from "./utils.DWmc2mUI.js";
 import { u as B, s as F, a as R } from "./scroll-to-section.DhW8SFy0.js";
-import { B as w } from "./button.CBqJGWy5.js";
+import { B as w } from "./button.DII5Ifwa.js";
 import { n as b } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { F as N } from "./fixed-scroller.QHqymN36.js";
+import { F as N } from "./fixed-scroller.YC4bZifw.js";
 import "../assets/anchor-scroller.css";
 const O = /* @__PURE__ */ f({
   __name: "anchor-scroller-list",
@@ -81,13 +81,13 @@ const L = E.exports, P = {
       })).filter(
         (o) => !o.disabled && !!o.element
       )
-    ), { top: a, bottom: r } = x(l), d = c(() => i.value.map((o) => o.element)), g = c(() => ({
+    ), { top: a, bottom: r } = x(l), m = c(() => i.value.map((o) => o.element)), g = c(() => ({
       "b-anchor-scroller__navigation--pinned": a.value <= 1
-    })), { activeIndex: m } = R(d, {
+    })), { activeIndex: d } = R(m, {
       default: v(n, "activeIndex"),
       debounce: 200
     }), p = c(() => {
-      const o = i.value[m.value];
+      const o = i.value[d.value];
       return o ? o.originalIndex : 0;
     });
     _(p, (o) => {
@@ -99,7 +99,7 @@ const L = E.exports, P = {
       }
     );
     const I = j("bento-anchor-scroller-label");
-    return { __sfc: !0, t, props: n, emit: e, navigationRef: l, computedItems: s, enabledItems: i, top: a, bottom: r, scrollToTargets: d, navigationConditionalClasses: g, scrollSpyActiveIndex: m, currentActiveIndex: p, navLabelId: I, BentoTypography: T, FixedScroller: N, AnchorScrollerList: L };
+    return { __sfc: !0, t, props: n, emit: e, navigationRef: l, computedItems: s, enabledItems: i, top: a, bottom: r, scrollToTargets: m, navigationConditionalClasses: g, scrollSpyActiveIndex: d, currentActiveIndex: p, navLabelId: I, BentoTypography: T, FixedScroller: N, AnchorScrollerList: L };
   }
 });
 var K = function() {
@@ -111,10 +111,10 @@ var K = function() {
   U,
   !1,
   null,
-  "d6e20408"
+  "ccfe939b"
 );
 const ee = G.exports;
 export {
   ee as a
 };
-//# sourceMappingURL=anchor-scroller.DT7QZd5b.js.map
+//# sourceMappingURL=anchor-scroller.BbvghQxZ.js.map

package/dist/chunks/anchor-scroller.BbvghQxZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-scroller.BbvghQxZ.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"navigationItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"isFocusable(index) ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"onScrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard';\n    import { scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, toRef } from 'vue';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const navigationItems = computed(() => props.items);\n    const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard(navigationItems, {\n        isDisabled: item => item.disabled,\n        initialIndex: toRef(props, 'activeIndex'),\n    });\n\n    const onScrollToSection = (\n        elementRef: AnchorScrollerListProps['items'][number]['elementRef'],\n        disabled?: boolean\n    ) =>\n        scrollToSection(elementRef as ScrollToSectionTarget, {\n            disabled,\n            scrollOffset: props.scrollOffset,\n            warningPrefix: 'bento-anchor-scroller',\n        });\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from '@/composables/use-scroll-spy';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n        debounce: 200,\n    });\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[scrollSpyActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["navigationItems","computed","props","isFocusable","navigationItemRefs","onKeydownNavigation","useSectionNavigationKeyboard","item","toRef","elementRef","disabled","scrollToSection","__default__","messages","useI18n","navigationRef","ref","computedItems","enabledItems","originalIndex","unrefElement","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","scrollSpyActiveIndex","useScrollSpy","currentActiveIndex","candidate","watch","val","emit","printDevelopmentWarning","navLabelId","generateUid"],"mappings":";;;;;;;;;;;;;;;;;;;iBAqCIA,IAAAC,EAAA,MAAAC,EAAA,KAAA,GACA,EAAA,aAAAC,GAAA,oBAAAC,GAAA,qBAAAC,EAAA,IAAAC,EAAAN,GAAA;AAAA,MAA+G,YAAA,CAAAO,MAAAA,EAAA;AAAA,MAClF,cAAAC,EAAAN,GAAA,aAAA;AAAA,IACe,CAAA;wIAG5C,CAAAO,GAAAC,MAAAC,EAAAF,GAAA;AAAA,MAIyD,UAAAC;AAAA,MACjD,cAAAR,EAAA;AAAA,MACoB,eAAA;AAAA,IACL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8FvBU,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;iBAnGA,EAAA,EAAA,IAAAC,EAAA,GASAC,IAAAC,EAAA,IAAA,GAEAC,IAAAhB,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAAK,OAAA,EAAA,GAAAA,EAAA,EAAA,CAAA,GAGAW,IAAAjB;AAAA,MAAqB,MAAAC,EAAA,MAAA,IAAA,CAAAK,GAAAY,OAAA;AAAA,QAEkB,SAAAC,EAAAb,EAAA,UAAA;AAAA,QACU,eAAAY;AAAA,QACrC,UAAAZ,EAAA;AAAA,MACe,EAAA,EAAA;AAAA,QAElB,CAAAA,MAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,MAEgC;AAAA,IACjC,GAGR,EAAA,KAAAc,GAAA,QAAAC,EAAA,IAAAC,EAAAR,CAAA,GAGAS,IAAAvB,EAAA,MAAAiB,EAAA,MAAA,IAAA,CAAAO,MAAAA,EAAA,OAAA,CAAA,GAEAC,IAAAzB,EAAA,OAAA;AAAA,MAAqD,yCAAAoB,EAAA,SAAA;AAAA,IACK,EAAA,GAG1D,EAAA,aAAAM,EAAA,IAAAC,EAAAJ,GAAA;AAAA,MAA4E,SAAAhB,EAAAN,GAAA,aAAA;AAAA,MACrC,UAAA;AAAA,IACzB,CAAA,GAGd2B,IAAA5B,EAAA,MAAA;AACI,YAAA6B,IAAAZ,EAAA,MAAAS,EAAA,KAAA;AAEA,aAAAG,IAAAA,EAAA,gBAAA;AAAA,IAA6C,CAAA;AAGjD,IAAAC,EAAAF,GAAA,CAAAG,MAAA;AACI,MAAA,OAAA,SAAAA,CAAA,KACIC,EAAA,uBAAAD,CAAA;AAAA,IACJ,CAAA,GAGJD;AAAA,MAAA,MAAA7B,EAAA;AAAA,MACgB,CAAA8B,MAAA;AAER,QAAA,OAAA,SAAAA,CAAA,KAAAf,EAAA,MAAAe,CAAA,EAAA,YACIE,EAAA,mEAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAAC,IAAAC,EAAA,6BAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-button.edpjvY15.js → base-button.DOhHyU7x.js}

@@ -1,5 +1,5 @@
 import { defineComponent as C, useAttrs as S, useSlots as g, ref as v, computed as r } from "vue";
-import { B, a as h } from "./link.BzIDMKgE.js";
+import { B, a as h } from "./link.Cls8XShm.js";
 import { B as T } from "./typography.D1OZJbEa.js";
 import { u as L } from "./use-has-slot.C9lQZ6nz.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -98,4 +98,4 @@ export {
   P as B,
   R as a
 };
-//# sourceMappingURL=base-button.edpjvY15.js.map
+//# sourceMappingURL=base-button.DOhHyU7x.js.map

package/dist/chunks/{base-button.edpjvY15.js.map → base-button.DOhHyU7x.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.edpjvY15.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    <component\n        :is=\"componentType\"\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        v-bind=\"componentProps\"\n        @click=\"onClickButton\"\n        @keydown.space.native=\"onSpacebarKeydown\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, type PropType, ref, useAttrs, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { BentoBaseButtonPropClass } from './base-button.types';\n    import { type Booleanish } from '@/types/prop-types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import type { BentoLinkProps } from '@/components/link/link.types';\n\n    const props = defineProps({\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         * Object containing props passed on to the BentoLink component, rendering the element as a link instead of a\n         * button. @see BentoLink documentation for the properties it supports.\n         */\n        link: {\n            type: Object as PropType<BentoLinkProps>,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"click\", \"focus\", \"blur\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const bentoBaseButtonRef = ref(null);\n\n    const componentType = computed(() => {\n        if (props.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return props.disabled ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        props.link === undefined\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the link is disabled, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers, while\n                   * respecting a consumer-provided `role` (e.g. `menuitem`) when present.\n                   */\n                  'aria-disabled': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? ((attrs.role as string) ?? 'link') : undefined,\n              }\n    );\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            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n\n    /**\n     * Anchors are activated by Enter but not Space. When rendered as a link, replicate a native\n     * click on Space so keyboard activation matches the native button variant and the WAI-ARIA\n     * button/menuitem pattern. Native `<button>` handles Space itself, so it is excluded.\n     */\n    const onSpacebarKeydown = (e: KeyboardEvent) => {\n        if (props.link === undefined || props.disabled) {\n            return;\n        }\n\n        e.preventDefault();\n        (e.currentTarget as HTMLElement | null)?.click();\n    };\n\n    const onFocusButton = (e: FocusEvent) => {\n        emit('focus', e);\n    };\n\n    const onBlurButton = (e: FocusEvent) => {\n        emit('blur', e);\n    };\n\n    defineExpose({\n        bentoBaseButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * Renders a native `<button>` by default. When a `link` object is provided, the root element is rendered as a\n     * `BentoLink` (an anchor / router-link) instead, while keeping the same visual structure and styling. A disabled\n     * link is rendered as a `<span>` with the appropriate ARIA attributes.\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: [BaseButtonEvent.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 {\n        name: 'base-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","bentoBaseButtonRef","ref","componentType","computed","props","BentoLink","ariaAttributes","componentProps","BentoLinkVariant","conditionalClasses","onClickButton","emit","onSpacebarKeydown","onFocusButton","onBlurButton","expose"],"mappings":";;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1HAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,SAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAGXC,IAAAH,EAAA,OAAA;AAAA,MAAuC,iBAAAT,EAAA,eAAA,GAAA,SAAA;AAAA,IACe,EAAA,GAGtDa,IAAAJ;AAAA,MAAuB,MAAAC,EAAA,SAAA,SAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAI,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAJ,EAAA,WAAA,SAAA;AAAA,QAOiC,MAAAA,EAAA,WAAAV,EAAA,QAAA,SAAA;AAAA,MACiB;AAAA,IAChE,GAGVe,IAAAN,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAd,EAAA,WAAA,EAAA,GAAAe,EAAA;AAAA,MAC2B,CAAA,kBAAAf,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA;AAAA,IACD,EAAA,GAGrEc,IAAA,CAAA,MAAA;AACI,MAAAN,EAAA,YACI,EAAA,eAAA,GACA,EAAA,gBAAA,KAEAO,EAAA,SAAA,CAAA;AAAA,IACJ,GAQJC,IAAA,CAAA,MAAA;AACI,MAAAR,EAAA,SAAA,UAAAA,EAAA,aAIA,EAAA,eAAA,GACA,EAAA,eAAA,MAAA;AAAA,IAA+C,GAGnDS,IAAA,CAAA,MAAA;AACI,MAAAF,EAAA,SAAA,CAAA;AAAA,IAAe,GAGnBG,IAAA,CAAA,MAAA;AACI,MAAAH,EAAA,QAAA,CAAA;AAAA,IAAc;AAGlB,WAAAI,EAAA;AAAA,MAAa,oBAAAf;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.DOhHyU7x.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    <component\n        :is=\"componentType\"\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        v-bind=\"componentProps\"\n        @click=\"onClickButton\"\n        @keydown.space.native=\"onSpacebarKeydown\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, type PropType, ref, useAttrs, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { BentoBaseButtonPropClass } from './base-button.types';\n    import { type Booleanish } from '@/types/prop-types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import type { BentoLinkProps } from '@/components/link/link.types';\n\n    const props = defineProps({\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         * Object containing props passed on to the BentoLink component, rendering the element as a link instead of a\n         * button. @see BentoLink documentation for the properties it supports.\n         */\n        link: {\n            type: Object as PropType<BentoLinkProps>,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"click\", \"focus\", \"blur\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const bentoBaseButtonRef = ref(null);\n\n    const componentType = computed(() => {\n        if (props.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return props.disabled ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        props.link === undefined\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the link is disabled, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers, while\n                   * respecting a consumer-provided `role` (e.g. `menuitem`) when present.\n                   */\n                  'aria-disabled': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? ((attrs.role as string) ?? 'link') : undefined,\n              }\n    );\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            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n\n    /**\n     * Anchors are activated by Enter but not Space. When rendered as a link, replicate a native\n     * click on Space so keyboard activation matches the native button variant and the WAI-ARIA\n     * button/menuitem pattern. Native `<button>` handles Space itself, so it is excluded.\n     */\n    const onSpacebarKeydown = (e: KeyboardEvent) => {\n        if (props.link === undefined || props.disabled) {\n            return;\n        }\n\n        e.preventDefault();\n        (e.currentTarget as HTMLElement | null)?.click();\n    };\n\n    const onFocusButton = (e: FocusEvent) => {\n        emit('focus', e);\n    };\n\n    const onBlurButton = (e: FocusEvent) => {\n        emit('blur', e);\n    };\n\n    defineExpose({\n        bentoBaseButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * Renders a native `<button>` by default. When a `link` object is provided, the root element is rendered as a\n     * `BentoLink` (an anchor / router-link) instead, while keeping the same visual structure and styling. A disabled\n     * link is rendered as a `<span>` with the appropriate ARIA attributes.\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: [BaseButtonEvent.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 {\n        name: 'base-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","bentoBaseButtonRef","ref","componentType","computed","props","BentoLink","ariaAttributes","componentProps","BentoLinkVariant","conditionalClasses","onClickButton","emit","onSpacebarKeydown","onFocusButton","onBlurButton","expose"],"mappings":";;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1HAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,SAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAGXC,IAAAH,EAAA,OAAA;AAAA,MAAuC,iBAAAT,EAAA,eAAA,GAAA,SAAA;AAAA,IACe,EAAA,GAGtDa,IAAAJ;AAAA,MAAuB,MAAAC,EAAA,SAAA,SAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAI,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAJ,EAAA,WAAA,SAAA;AAAA,QAOiC,MAAAA,EAAA,WAAAV,EAAA,QAAA,SAAA;AAAA,MACiB;AAAA,IAChE,GAGVe,IAAAN,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAd,EAAA,WAAA,EAAA,GAAAe,EAAA;AAAA,MAC2B,CAAA,kBAAAf,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA;AAAA,IACD,EAAA,GAGrEc,IAAA,CAAA,MAAA;AACI,MAAAN,EAAA,YACI,EAAA,eAAA,GACA,EAAA,gBAAA,KAEAO,EAAA,SAAA,CAAA;AAAA,IACJ,GAQJC,IAAA,CAAA,MAAA;AACI,MAAAR,EAAA,SAAA,UAAAA,EAAA,aAIA,EAAA,eAAA,GACA,EAAA,eAAA,MAAA;AAAA,IAA+C,GAGnDS,IAAA,CAAA,MAAA;AACI,MAAAF,EAAA,SAAA,CAAA;AAAA,IAAe,GAGnBG,IAAA,CAAA,MAAA;AACI,MAAAH,EAAA,QAAA,CAAA;AAAA,IAAc;AAGlB,WAAAI,EAAA;AAAA,MAAa,oBAAAf;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;"}