@adyen/bento-vue2 1.34.0 → 1.35.1

package/dist/chunks/{action-bar.CsRmYQ-k.js → action-bar.CCVKS1xo.js}

@@ -1,12 +1,12 @@
-import { defineComponent as x, computed as c, ref as b, toRefs as O, watch as g, provide as V, nextTick as B } from "vue";
-import { B as P } from "./button.79klAcOK.js";
+import { defineComponent as x, computed as c, ref as b, toRefs as O, watch as g, provide as P, nextTick as B } from "vue";
+import { B as V } from "./button.79klAcOK.js";
 import { B as R } from "./typography.CqQaHXhq.js";
-import { B as F } from "./button-actions-with-menu.B6Nb6Ohu.js";
+import { B as F } from "./button-actions-with-menu.Bl82u6yP.js";
 import { C as W } from "./cross.CsUPDmaA.js";
 import { u as L } from "./i18n.BQkEbtPM.js";
 import { u as k } from "./index.iCshT3Hx.js";
-import { P as M } from "./popover.UmNw_M-C.js";
-import { B as U } from "./button-actions.BQHr68sA.js";
+import { P as M } from "./popover.BDaf6hmW.js";
+import { B as U } from "./button-actions.DN4eIQes.js";
 import { n as z } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
 const D = {
@@ -17,10 +17,24 @@ const D = {
     save: "Save",
     selected: "selected",
     unsavedChanges: "unsaved change | unsaved changes"
+  },
+  "pt-BR": {
+    cancel: "Cancelar",
+    close: "Fechar",
+    save: "Salvar",
+    selected: "selecionados",
+    unsavedChanges: "alteração não salva | alterações não salvas"
+  },
+  "ja-JP": {
+    cancel: "キャンセル",
+    close: "閉じる",
+    save: "保存",
+    selected: "選択済み",
+    unsavedChanges: "未保存の変更"
   }
 }, G = {
   i18n: { messages: D }
-}, K = /* @__PURE__ */ x({
+}, J = /* @__PURE__ */ x({
   ...G,
   __name: "action-bar",
   props: {
@@ -45,7 +59,7 @@ const D = {
     visibleActions: {
       type: Number,
       default: 4,
-      validator: (s) => s > 0 && s <= 4
+      validator: (o) => o > 0 && o <= 4
     },
     /**
      * Use when there are sticky elements at the bottom, like sticky pagination
@@ -78,12 +92,12 @@ const D = {
     }
   },
   emits: ["close", "cancel", "save"],
-  setup(s, { emit: a }) {
-    const n = s, t = 100, m = 7, C = 500, v = 32, { t: r, tc: S } = L(), E = c(() => n.selectionLabel ? n.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: A } = O(n), { width: i } = k(), e = b(null), u = b(null), h = c(() => n.variant === "confirmation");
+  setup(o, { emit: e }) {
+    const a = o, t = 100, v = 7, C = 500, m = 32, { t: r, tc: S } = L(), E = c(() => a.selectionLabel ? a.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: A } = O(a), { width: i } = k(), n = b(null), u = b(null), h = c(() => a.variant === "confirmation");
     g(
       () => A.value,
-      (o) => {
-        u.value = o <= 4 ? o : 4, e.value = u.value;
+      (s) => {
+        u.value = s <= 4 ? s : 4, n.value = u.value;
       },
       { immediate: !0 }
     );
@@ -91,57 +105,57 @@ const D = {
       "b-action-bar--extra-spacing": y.value,
       "b-action-bar--confirmation": h.value
     }));
-    V(M, m);
+    P(M, v);
     const T = c(() => {
-      const o = n.actions.map((w) => ({
+      const s = a.actions.map((w) => ({
         ...w,
         variant: "secondary"
-      })), f = o.slice(0, e.value).reverse(), d = o.slice(e.value);
-      return [...f, ...d];
+      })), _ = s.slice(0, n.value).reverse(), f = s.slice(n.value);
+      return [..._, ...f];
     }), N = c(() => [
       {
         title: r("save"),
-        event: () => a("save")
+        event: () => e("save")
       },
       {
         title: r("cancel"),
         variant: "secondary",
-        event: () => a("cancel")
+        event: () => e("cancel")
       }
-    ]), p = async () => {
-      await B(), i.value > l.value.clientWidth + v + t && e.value < u.value && (e.value += 1, p());
-    }, _ = async () => {
-      await B(), i.value < l.value.clientWidth + v && e.value > 0 && (e.value -= 1, _());
+    ]), d = async () => {
+      await B(), i.value > l.value.clientWidth + m + t && n.value < u.value && (n.value += 1, d());
+    }, p = async () => {
+      await B(), i.value < l.value.clientWidth + m && n.value > 0 && (n.value -= 1, p());
     };
     return g(
       () => i.value,
-      async (o, f) => {
+      async (s, _) => {
         if (await B(), !l.value)
           return;
-        const d = o > f;
-        i.value < C ? e.value = 0 : d ? p() : _();
+        const f = s > _;
+        i.value < C ? n.value = 0 : f ? d() : p();
       },
       { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: m, RESPONSIVE_BREAKPOINT: C, SPACING: v, props: n, emit: a, t: r, tc: S, label: E, actionBar: l, extraBottomSpacing: y, visibleActions: A, width: i, internalDisplayedActions: e, internalVisibleActions: u, isConfirmationVariant: h, conditionalClasses: I, actionsInternal: T, confirmationActions: N, showActions: p, hideActions: _, BentoButton: P, BentoButtonActions: U, BentoTypography: R, ButtonActionsWithMenu: F, CrossIcon: W };
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: v, RESPONSIVE_BREAKPOINT: C, SPACING: m, props: a, emit: e, t: r, tc: S, label: E, actionBar: l, extraBottomSpacing: y, visibleActions: A, width: i, internalDisplayedActions: n, internalVisibleActions: u, isConfirmationVariant: h, conditionalClasses: I, actionsInternal: T, confirmationActions: N, showActions: d, hideActions: p, BentoButton: V, BentoButtonActions: U, BentoTypography: R, ButtonActionsWithMenu: F, CrossIcon: W };
   }
 });
-var q = function() {
-  var a = this, n = a._self._c, t = a._self._setupProxy;
-  return n("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [n("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [n("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? a._e() : n("div", { staticClass: "b-action-bar__close-button" }, [n(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(m) {
+var K = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [a("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [a("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? e._e() : a("div", { staticClass: "b-action-bar__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(v) {
     return t.emit("close");
-  } }, scopedSlots: a._u([{ key: "iconLeft", fn: function() {
-    return [n(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1), n(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [a._v(" " + a._s(a.itemCounter) + " " + a._s(t.isConfirmationVariant ? t.tc("unsavedChanges", a.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? n(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : n(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", inverse: "" } })], 1)])]);
-}, J = [], Y = /* @__PURE__ */ z(
-  K,
-  q,
+  } }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 4214210411) })], 1), a(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e._v(" " + e._s(e.itemCounter) + " " + e._s(t.isConfirmationVariant ? t.tc("unsavedChanges", e.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? a(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : a(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", inverse: "" } })], 1)])]);
+}, j = [], q = /* @__PURE__ */ z(
   J,
+  K,
+  j,
   !1,
   null,
   "be92816e"
 );
-const ot = Y.exports;
+const st = q.exports;
 export {
-  ot as B
+  st as B
 };
-//# sourceMappingURL=action-bar.CsRmYQ-k.js.map
+//# sourceMappingURL=action-bar.CCVKS1xo.js.map

package/dist/chunks/{action-bar.CsRmYQ-k.js.map → action-bar.CCVKS1xo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.CsRmYQ-k.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" 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                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\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                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { 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\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         * 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         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\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\"]);\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\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\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    }));\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    // 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","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;GA8OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.CCVKS1xo.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" 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                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\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                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { 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\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         * 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         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\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\"]);\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\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\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    }));\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    // 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","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.DtT7BRdr.js → alert.CVsckdGC.js}

@@ -4,10 +4,10 @@ import { B as H } from "./button.79klAcOK.js";
 import { C as B } from "./cross-small.BLUwtRB-.js";
 import { W as w } from "./warning-filled.CLKRzGMT.js";
 import { C as L } from "./cross-circle-fill.CnYH4R_h.js";
-import { C as E } from "./checkmark-circle-fill.DVl6QSwm.js";
+import { C as R } from "./checkmark-circle-fill.DVl6QSwm.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { u as G } from "./use-has-slot.C9lQZ6nz.js";
-import { u as R } from "./i18n.BQkEbtPM.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { u as G } from "./i18n.BQkEbtPM.js";
 import "../assets/alert.css";
 var n = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(n || {}), o = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(o || {}), u = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(u || {});
 let _ = 0;
@@ -27,19 +27,25 @@ var $ = function() {
   null,
   null
 );
-const k = P.exports, x = {
+const F = P.exports, k = {
   "en-US": {
     highlightIcon: "Highlight icon",
     successIcon: "Success icon",
     criticalIcon: "Critical icon",
     warningIcon: "Warning icon",
     close: "Close"
+  },
+  "pt-BR": {
+    close: "Fechar"
+  },
+  "ja-JP": {
+    close: "閉じる"
   }
-}, F = {
-  i18n: { messages: x },
+}, x = {
+  i18n: { messages: k },
   name: "bento-alert"
 }, N = /* @__PURE__ */ I({
-  ...F,
+  ...x,
   props: {
     closeButton: { type: Boolean, default: !1 },
     type: { default: o.HIGHLIGHT },
@@ -47,7 +53,7 @@ const k = P.exports, x = {
   },
   emits: ["close-alert"],
   setup(e, { emit: s }) {
-    const t = e, a = y(), C = G(a), { t: l } = R(), i = r(() => t.variant === n.TIP), d = r(() => ({
+    const t = e, a = y(), C = E(a), { t: l } = G(), i = r(() => t.variant === n.TIP), d = r(() => ({
       [`b-alert--${t.type}`]: t.type,
       [`b-alert--${n.TIP}`]: i.value
     })), f = r(() => l(`${t.type}Icon`)), m = r(() => {
@@ -55,12 +61,12 @@ const k = P.exports, x = {
         case o.CRITICAL:
           return L;
         case o.SUCCESS:
-          return E;
+          return R;
         case o.WARNING:
           return w;
         case o.HIGHLIGHT:
         default:
-          return k;
+          return F;
       }
     }), h = r(() => ({
       el: S.DIV,
@@ -93,4 +99,4 @@ export {
   o as b,
   u as c
 };
-//# sourceMappingURL=alert.DtT7BRdr.js.map
+//# sourceMappingURL=alert.CVsckdGC.js.map

package/dist/chunks/{alert.DtT7BRdr.js.map → alert.CVsckdGC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.DtT7BRdr.js","sources":["../../src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.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><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\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 && !isTipVariant\"\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","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkIcon","WarningIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;GCgIIE,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,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;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,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
+{"version":3,"file":"alert.CVsckdGC.js","sources":["../../src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.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><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\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 && !isTipVariant\"\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","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkIcon","WarningIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCgIIE,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,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;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,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{avatar.0ffdL8i0.js → avatar.qcWk9clF.js}

@@ -3,7 +3,7 @@ import { B as p } from "./typography.CqQaHXhq.js";
 import "./index.Cl4_42j5.js";
 import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/avatar.css";
-const f = (t) => {
+const d = (t) => {
   const a = b(t);
   return n(() => a.value ? a.value.trim().charAt(0).toUpperCase() : null);
 };
@@ -18,7 +18,7 @@ const L = {}, y = /* @__PURE__ */ _({
     variant: { default: o.LARGE }
   },
   setup(t) {
-    const a = t, { username: r } = m(a), e = f(r), c = n(() => ({
+    const a = t, { username: r } = m(a), e = d(r), c = n(() => ({
       [`b-avatar-image--${o.SMALL}`]: a.variant === o.SMALL,
       [`b-avatar-image--${a.color}`]: a.color
     }));
@@ -27,14 +27,14 @@ const L = {}, y = /* @__PURE__ */ _({
 });
 var g = function() {
   var a = this, r = a._self._c, e = a._self._setupProxy;
-  return r("div", { staticClass: "b-avatar-image", class: e.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "avatar" } }, [a.src ? r("img", { staticClass: "b-avatar-image__image", attrs: { src: a.src, alt: "Profile picture", "data-testid": "avatar-content" } }) : r("div", { staticClass: "b-avatar-image__default", attrs: { "data-testid": "avatar-content" } }, [r(e.BentoTypography, { attrs: { el: "span", variant: "body", strongest: "" } }, [a._v(" " + a._s(e.initials) + " ")])], 1)]);
+  return r("div", { staticClass: "b-avatar-image", class: e.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "avatar" } }, [a.src ? r("img", { staticClass: "b-avatar-image__image", attrs: { src: a.src, alt: "", "data-testid": "avatar-content" } }) : r("div", { staticClass: "b-avatar-image__default", attrs: { "data-testid": "avatar-content" } }, [r(e.BentoTypography, { attrs: { el: "span", variant: "body", strongest: "" } }, [a._v(" " + a._s(e.initials) + " ")])], 1)]);
 }, C = [], E = /* @__PURE__ */ v(
   y,
   g,
   C,
   !1,
   null,
-  "aa0b2027"
+  "7cac2ac2"
 );
 const h = E.exports, A = {
   name: "bento-avatar"
@@ -46,11 +46,11 @@ const h = E.exports, A = {
     username: null
   },
   setup(t) {
-    const a = t, { username: r } = m(a), e = n(() => a.iconOnly ? a.username : null), c = n(() => a.src ? null : a.username), u = f(r), l = n(() => u.value ? u.value.charCodeAt(0) - 65 : null), d = n(() => {
+    const a = t, { username: r } = m(a), e = n(() => a.iconOnly ? a.username : null), c = n(() => a.src ? null : a.username), u = d(r), l = n(() => u.value ? u.value.charCodeAt(0) - 65 : null), f = n(() => {
       const i = 26 / Object.keys(s).length;
       return l.value <= i ? s.YELLOW : l.value <= i * 2 ? s.BLUE : l.value <= i * 3 ? s.GREEN : s.RED;
     });
-    return { __sfc: !0, props: a, username: r, computedAriaLabel: e, computedUsername: c, initials: u, charCode: l, avatarColor: d, AvatarImage: h, BentoAvatarImageVariant: o, BentoTypography: p };
+    return { __sfc: !0, props: a, username: r, computedAriaLabel: e, computedUsername: c, initials: u, charCode: l, avatarColor: f, AvatarImage: h, BentoAvatarImageVariant: o, BentoTypography: p };
   }
 });
 var R = function() {
@@ -64,8 +64,8 @@ var R = function() {
   null,
   "2be0bf91"
 );
-const T = B.exports;
+const W = B.exports;
 export {
-  T as B
+  W as B
 };
-//# sourceMappingURL=avatar.0ffdL8i0.js.map
+//# sourceMappingURL=avatar.qcWk9clF.js.map

package/dist/chunks/avatar.qcWk9clF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.qcWk9clF.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.zHjXVjwU.js → base-modal.BaHkDH5f.js}

@@ -1,12 +1,12 @@
-import { defineComponent as T, useSlots as q, ref as u, computed as l, inject as Q, watch as w, nextTick as X, onUnmounted as Z, useAttrs as V, onMounted as tt, provide as D, toRefs as et } from "vue";
+import { defineComponent as T, useSlots as Y, ref as u, computed as l, inject as Q, watch as w, nextTick as X, onUnmounted as Z, useAttrs as V, onMounted as tt, provide as D, toRefs as et } from "vue";
 import { B as at } from "./button.79klAcOK.js";
 import { B as ot } from "./focus-trap.DSkLNO_i.js";
-import { u as J } from "./use-has-slot.C9lQZ6nz.js";
+import { u as q } from "./use-has-slot.C9lQZ6nz.js";
 import { u as nt } from "./i18n.BQkEbtPM.js";
 import { M as st } from "./base-modal.keys.C2PQXcE2.js";
 import { g as lt } from "./unique-id.XFfoKuc2.js";
 import { B as it } from "./typography.CqQaHXhq.js";
-import { F as rt } from "./footer-actions.CwHY2-Ap.js";
+import { F as rt } from "./footer-actions.CxxS87iQ.js";
 import { D as ut, B as ct, b as dt, a as mt } from "./dialog-page.bmDDYmn9.js";
 import { o as pt } from "./resize.Bqks3WUm.js";
 import { G as ft, a as gt } from "./grid-layout.HvTAa4to.js";
@@ -19,6 +19,12 @@ const bt = {
   "en-US": {
     ariaLabelFallback: "modal",
     close: "Close"
+  },
+  "pt-BR": {
+    close: "Fechar"
+  },
+  "ja-JP": {
+    close: "閉じる"
   }
 }, j = Symbol("modal config data injection key"), Lt = T({}), St = /* @__PURE__ */ T({
   ...Lt,
@@ -97,7 +103,7 @@ const bt = {
     }
   },
   setup(a) {
-    const e = a, o = 26, t = q(), n = J(t), c = u(null), O = l(() => ({
+    const e = a, o = 26, t = Y(), n = q(t), c = u(null), O = l(() => ({
       "b-modal-page--custom-padding": e.customPadding
     })), I = l(() => {
       var r;
@@ -271,7 +277,7 @@ const It = Ot.exports, Bt = T({
   },
   emits: ["update:active-page", "close-modal"],
   setup(a, { expose: e, emit: o }) {
-    const t = a, n = 500, { t: c } = nt(), O = q(), I = V(), R = J(O), d = u(null), f = u(!1), g = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = u(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? c("ariaLabelFallback")), b = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
+    const t = a, n = 500, { t: c } = nt(), O = Y(), I = V(), R = q(O), d = u(null), f = u(!1), g = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = u(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? c("ariaLabelFallback")), b = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
       d.value.showModal();
     }, p = () => {
       o("close-modal");
@@ -311,10 +317,10 @@ const It = Ot.exports, Bt = T({
     const { activePage: v, isOpen: S, size: z } = et(t), U = u(ct.TRANSITION_LEVEL_DEEPER), P = u([]), y = u([]), $ = (s) => o("update:active-page", s), H = (s) => () => {
       var C;
       P.value = (C = P.value) == null ? void 0 : C.filter((N) => N !== s);
-    }, K = (s) => (s && P.value.push(s), { unregisterPage: H(s) }), Y = u(""), M = u(!1);
+    }, J = (s) => (s && P.value.push(s), { unregisterPage: H(s) }), K = u(""), M = u(!1);
     return D(j, {
       activePage: v,
-      height: Y,
+      height: K,
       isAnimationActive: M,
       pageCustomPadding: m,
       showCloseButton: _,
@@ -326,7 +332,7 @@ const It = Ot.exports, Bt = T({
       pages: P,
       previousPages: y,
       updatePage: $
-    }), D(mt, K), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: f, modalId: g, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: b, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: L, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: K, height: Y, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: vt, BentoModalPage: It, CrossIcon: _t };
+    }), D(mt, J), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: f, modalId: g, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: b, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: L, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: J, height: K, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: vt, BentoModalPage: It, CrossIcon: _t };
   }
 });
 var Dt = function() {
@@ -364,4 +370,4 @@ export {
   At as g,
   Qt as h
 };
-//# sourceMappingURL=base-modal.zHjXVjwU.js.map
+//# sourceMappingURL=base-modal.BaHkDH5f.js.map