@adyen/bento-vue3 1.85.0 → 1.86.0

package/dist/chunks/{ai-button.PAbhTT01.js → ai-button.XfeGC4-Q.js}

@@ -1,8 +1,8 @@
-import { defineComponent as p, useSlots as f, computed as m, onMounted as b, createElementBlock as _, openBlock as v, normalizeClass as B, createElementVNode as k, createVNode as o, withModifiers as C, withCtx as n, renderSlot as y, unref as A } from "vue";
-import { B as I } from "./button.CSp48LJt.js";
-import { A as S } from "./artificial-intelligence-ai-filled.G_Yr_37U.js";
+import { defineComponent as p, useSlots as f, computed as m, onMounted as b, openBlock as _, createElementBlock as v, normalizeClass as B, createElementVNode as k, createVNode as o, withModifiers as C, withCtx as n, renderSlot as y, unref as A } from "vue";
+import { B as I } from "./button.C6t9_lzm.js";
+import { A as S } from "./artificial-intelligence-ai-filled.AhDHffzT.js";
 import { u as g } from "./use-has-slot.B7eQSabc.js";
-import { p as h } from "./typography.6Oo5TOMP.js";
+import { p as h } from "./typography.B3J6_tYk.js";
 import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/ai-button.css";
 const E = {
@@ -25,7 +25,7 @@ const E = {
     };
     return b(() => {
       r("default") || h("An icon-only button cannot be a AI button");
-    }), (t, e) => (v(), _("div", {
+    }), (t, e) => (_(), v("div", {
       class: B(["b-ai-button", c.value])
     }, [
       e[0] || (e[0] = k("div", { class: "b-ai-button__animation" }, null, -1)),
@@ -54,4 +54,4 @@ const E = {
 export {
   P as a
 };
-//# sourceMappingURL=ai-button.PAbhTT01.js.map
+//# sourceMappingURL=ai-button.XfeGC4-Q.js.map

package/dist/chunks/{ai-button.PAbhTT01.js.map → ai-button.XfeGC4-Q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-button.PAbhTT01.js","sources":["../../../vue2/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 = withDefaults(defineProps<BentoAiButtonProps>(), {\n        link: undefined,\n        type: 'button',\n        condensed: false,\n        disabled: false,\n        inverse: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\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__","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","onClick","e","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AA+EI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;AApDA,UAAAC,IAAAC,GAQAC,IAAAC,GAOAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAT,EAAA;AAAA,IACN,EAAA,GAGnCU,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAT,EAAA,SAAAS,CAAA;AAAA,IAAe;AAGnB,WAAAC,EAAA,MAAA;AACI,MAAAN,EAAA,SAAA,KACIO,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-button.XfeGC4-Q.js","sources":["../../../vue2/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 = withDefaults(defineProps<BentoAiButtonProps>(), {\n        link: undefined,\n        type: 'button',\n        condensed: false,\n        disabled: false,\n        inverse: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\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__","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","onClick","e","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AA+EI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;AApDA,UAAAC,IAAAC,GAQAC,IAAAC,GAOAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAT,EAAA;AAAA,IACN,EAAA,GAGnCU,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAT,EAAA,SAAAS,CAAA;AAAA,IAAe;AAGnB,WAAAC,EAAA,MAAA;AACI,MAAAN,EAAA,SAAA,KACIO,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{ai-tag.CqMBHSfn.js → ai-tag.UlRkq54l.js}

@@ -1,19 +1,27 @@
-import { defineComponent as V, ref as d, watch as w, computed as A, createElementBlock as E, openBlock as p, withKeys as x, createVNode as i, createBlock as v, createCommentVNode as y, unref as e, withCtx as a, createTextVNode as r, toDisplayString as s, createElementVNode as C } from "vue";
-import { u as N, c as D, h as U } from "./button-actions.Dk8xU2cz.js";
-import { B as g } from "./typography.6Oo5TOMP.js";
-import { u as K } from "./index.pdBj0KQU.js";
-import { g as O } from "./generate-uid.NJ8tVoha.js";
-import { A as h } from "./artificial-intelligence-ai-filled.G_Yr_37U.js";
-import { _ as P } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { defineComponent as x, ref as d, watch as E, computed as T, openBlock as p, createElementBlock as V, withKeys as w, createVNode as i, unref as e, withCtx as a, createTextVNode as r, toDisplayString as s, createBlock as v, createElementVNode as C, createCommentVNode as y } from "vue";
+import { u as N, c as D, h as P } from "./button-actions.BH-J7dux.js";
+import { B as g } from "./typography.B3J6_tYk.js";
+import { u as R } from "./index.B875RXHM.js";
+import { g as U } from "./generate-uid.NJ8tVoha.js";
+import { A as I } from "./artificial-intelligence-ai-filled.AhDHffzT.js";
+import { _ as K } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/ai-tag.css";
-const k = {
+const h = {
   "en-US": {
     ai: "AI",
     aiExplained: "AI explained"
+  },
+  "ja-JP": {
+    ai: "AI",
+    aiExplained: "AIについての説明"
+  },
+  "pt-BR": {
+    ai: "IA",
+    aiExplained: "IA explicada"
   }
-}, R = { class: "b-ai-tag__popover-content" }, S = {
-  i18n: { messages: k }
-}, L = /* @__PURE__ */ V({
+}, O = { class: "b-ai-tag__popover-content" }, S = {
+  i18n: { messages: h }
+}, j = /* @__PURE__ */ x({
   ...S,
   __name: "ai-tag",
   props: {
@@ -24,9 +32,9 @@ const k = {
     action: { default: void 0 }
   },
   emits: ["update:toggled"],
-  setup(B, { emit: b }) {
-    const n = B, { t: u } = K({ messages: k }), o = d(n.toggled), f = d(null), c = d(null), m = O("b-ai-tag-popover");
-    w(
+  setup(A, { emit: B }) {
+    const n = A, { t: u } = R({ messages: h }), o = d(n.toggled), f = d(null), c = d(null), m = U("b-ai-tag-popover");
+    E(
       () => n.toggled,
       (t) => {
         o.value = t;
@@ -34,23 +42,23 @@ const k = {
     ), N(f, () => {
       l();
     });
-    const I = A(
+    const k = T(
       () => n.action ? [
         {
           ...n.action,
           variant: "secondary"
         }
       ] : void 0
-    ), T = b, _ = (t) => {
-      o.value = t, T("update:toggled", t);
+    ), b = B, _ = (t) => {
+      o.value = t, b("update:toggled", t);
     }, l = () => {
       o.value && _(!1);
     };
-    return (t, j) => (p(), E("div", {
+    return (t, J) => (p(), V("div", {
       ref_key: "aiTagRef",
       ref: f,
       class: "b-ai-tag",
-      onKeydown: x(l, ["esc"])
+      onKeydown: w(l, ["esc"])
     }, [
       i(e(D), {
         ref_key: "targetElement",
@@ -63,7 +71,7 @@ const k = {
         "onUpdate:toggled": _
       }, {
         iconLeft: a(() => [
-          i(e(h), {
+          i(e(I), {
             class: "b-ai-tag__trigger-icon",
             "aria-hidden": !0
           })
@@ -73,12 +81,12 @@ const k = {
         ]),
         _: 1
       }, 8, ["toggled", "aria-controls"]),
-      c.value ? (p(), v(e(U), {
+      c.value ? (p(), v(e(P), {
         key: 0,
         id: e(m),
         open: o.value,
         "target-element": c.value,
-        actions: I.value,
+        actions: k.value,
         "actions-layout": "fill-container",
         title: e(u)("aiExplained"),
         "trap-all": "",
@@ -88,13 +96,13 @@ const k = {
         onDismiss: l
       }, {
         headerIcon: a(() => [
-          i(e(h), {
+          i(e(I), {
             class: "b-ai-tag__popover-header-icon",
             "aria-hidden": !0
           })
         ]),
         default: a(() => [
-          C("div", R, [
+          C("div", O, [
             t.influencedValue ? (p(), v(e(g), {
               key: 0,
               variant: "title",
@@ -124,8 +132,8 @@ const k = {
       }, 8, ["id", "open", "target-element", "actions", "title", "trap-all-options"])) : y("", !0)
     ], 544));
   }
-}), Q = /* @__PURE__ */ P(L, [["__scopeId", "data-v-18003291"]]);
+}), Q = /* @__PURE__ */ K(j, [["__scopeId", "data-v-18003291"]]);
 export {
   Q as a
 };
-//# sourceMappingURL=ai-tag.CqMBHSfn.js.map
+//# sourceMappingURL=ai-tag.UlRkq54l.js.map

package/dist/chunks/{ai-tag.CqMBHSfn.js.map → ai-tag.UlRkq54l.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.CqMBHSfn.js","sources":["../../../vue2/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 '@/core/utils/ts';\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 = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: 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<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\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","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-tag.UlRkq54l.js","sources":["../../../vue2/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 '@/core/utils/ts';\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 = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: 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<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\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","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.BYcw-u3b.js → alert.CDWtu0Hu.js}

@@ -1,14 +1,14 @@
-import { createElementBlock as f, openBlock as o, mergeProps as L, createCommentVNode as c, createElementVNode as s, toDisplayString as V, defineComponent as N, useSlots as R, computed as r, onMounted as A, normalizeClass as P, createBlock as p, resolveDynamicComponent as D, unref as e, withCtx as _, renderSlot as h, createVNode as F } from "vue";
-import { a as I, c as U, B as y } from "./typography.6Oo5TOMP.js";
-import { B as W } from "./button.CSp48LJt.js";
-import { C as M } from "./cross-small.n1UO5wNB.js";
-import { W as Z } from "./warning-filled.BMGD0G-_.js";
-import { C as q } from "./cross-circle-fill.CYLL7jfC.js";
-import { C as j } from "./checkmark-circle-fill._6-d40ru.js";
+import { openBlock as o, createElementBlock as f, mergeProps as L, toDisplayString as V, createCommentVNode as c, createElementVNode as s, defineComponent as N, useSlots as R, computed as r, onMounted as A, normalizeClass as P, createBlock as p, resolveDynamicComponent as D, unref as e, withCtx as _, renderSlot as h, createVNode as F } from "vue";
+import { c as I, a as U, B as y } from "./typography.B3J6_tYk.js";
+import { B as W } from "./button.C6t9_lzm.js";
+import { C as M } from "./cross-small.Bjq2Gqvh.js";
+import { W as Z } from "./warning-filled.BzyK_mMj.js";
+import { C as q } from "./cross-circle-fill.BWCKKn0E.js";
+import { C as j } from "./checkmark-circle-fill.DugX5fbG.js";
 /* empty css              */
 import { _ as b } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { u as z } from "./use-has-slot.B7eQSabc.js";
-import { u as J } from "./index.pdBj0KQU.js";
+import { u as J } from "./index.B875RXHM.js";
 import "../assets/alert.css";
 var m = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(m || {}), n = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(n || {}), S = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))(S || {});
 let H = 0;
@@ -172,8 +172,8 @@ const x = /* @__PURE__ */ b(O, [["render", X]]), T = {
 }), vt = /* @__PURE__ */ b(nt, [["__scopeId", "data-v-5c5a81b8"]]);
 export {
   vt as B,
-  m as a,
+  S as a,
   n as b,
-  S as c
+  m as c
 };
-//# sourceMappingURL=alert.BYcw-u3b.js.map
+//# sourceMappingURL=alert.CDWtu0Hu.js.map

package/dist/chunks/{alert.BYcw-u3b.js.map → alert.CDWtu0Hu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.BYcw-u3b.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../../vue2/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-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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\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 && !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<{\n        /**\n         * Emits event when the alert is closed. `closeButton` must be `true`\n         */\n        (e: 'close-alert');\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton?: boolean;\n\n            /**\n             * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n             */\n            type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;\n\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant?: BentoAlertVariant | `${BentoAlertVariant}`;\n        }>(),\n        {\n            closeButton: false,\n            type: BentoAlertTypeOption.HIGHLIGHT,\n            variant: BentoAlertVariant.DEFAULT,\n        }\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","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","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;ACdR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAe,aAAA;AAAA,QAAoB,GAAA;AAAA,QAAwyE,aAAA;AAAA;IAFnmF,IAAA,GAAAL,CAAA;AAAA;;QAE6oF,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF9tF,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.CDWtu0Hu.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../../vue2/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-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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\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 && !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<{\n        /**\n         * Emits event when the alert is closed. `closeButton` must be `true`\n         */\n        (e: 'close-alert');\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton?: boolean;\n\n            /**\n             * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n             */\n            type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;\n\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant?: BentoAlertVariant | `${BentoAlertVariant}`;\n        }>(),\n        {\n            closeButton: false,\n            type: BentoAlertTypeOption.HIGHLIGHT,\n            variant: BentoAlertVariant.DEFAULT,\n        }\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","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","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;ACdR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAe,aAAA;AAAA,QAAoB,GAAA;AAAA,QAAwyE,aAAA;AAAA;IAFnmF,IAAA,GAAAL,CAAA;AAAA;;QAE6oF,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF9tF,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.CKIQu3NK.js

@@ -0,0 +1,215 @@
+import { defineComponent as V, ref as k, computed as h, watch as D, openBlock as g, createElementBlock as x, Fragment as K, renderList as L, createVNode as I, withKeys as C, withModifiers as T, normalizeClass as M, withCtx as w, createTextVNode as N, toDisplayString as R, watchEffect as H, toRef as O, createElementVNode as B, unref as b, renderSlot as W, createCommentVNode as j } from "vue";
+import { f as z, d as U, u as J, g as Y, t as A, h as q, w as G } from "./index.CbxHJr39.js";
+import { p as E, B as P } from "./typography.B3J6_tYk.js";
+import { u as Q } from "./index.B875RXHM.js";
+import { g as X } from "./generate-uid.NJ8tVoha.js";
+import { u as y } from "./utils.BzUwtTXc.js";
+import { F as Z } from "./fixed-scroller.i1tmEmst.js";
+import { B as ee } from "./button.C6t9_lzm.js";
+import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/anchor-scroller.css";
+const te = /* @__PURE__ */ V({
+  __name: "anchor-scroller-list",
+  props: {
+    activeIndex: { default: void 0 },
+    items: {},
+    scrollOffset: { default: void 0 }
+  },
+  setup(m) {
+    const s = m, c = k([]), r = h(
+      () => s.items.map((t, a) => ({ disabled: t.disabled, originalIndex: a })).filter(({ disabled: t }) => !t).map(({ originalIndex: t }) => t)
+    ), {
+      state: d,
+      next: f,
+      prev: u
+    } = z(r, {
+      initialValue: s.activeIndex ?? r.value[0]
+    });
+    D(d, async (t) => {
+      const a = c.value[t], n = y(a);
+      n && typeof n.focus == "function" && n.focus();
+    });
+    const l = (t, a) => {
+      if (a)
+        return;
+      const n = y(t);
+      if (!n) {
+        E("[bento-anchor-scroller] element ref not found");
+        return;
+      }
+      if (!n.style.scrollMarginTop && s.scrollOffset) {
+        const o = window.getComputedStyle(n).scrollMarginTop;
+        (o === "0px" || o === "") && (n.style.scrollMarginTop = `${s.scrollOffset}px`);
+      }
+      n.hasAttribute("tabindex") || n.setAttribute("tabindex", "-1"), n.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      }), n.focus({ preventScroll: !0 });
+    }, v = (t) => {
+      switch (t.key) {
+        case "ArrowRight":
+          t.preventDefault(), f();
+          break;
+        case "ArrowLeft":
+          t.preventDefault(), u();
+          break;
+        case "Home":
+          t.preventDefault(), d.value = 0;
+          break;
+        case "End":
+          t.preventDefault(), d.value = r.value.length - 1;
+          break;
+      }
+    };
+    return (t, a) => (g(), x("ul", {
+      class: "b-anchor-scroller-list",
+      onKeydown: v
+    }, [
+      (g(!0), x(K, null, L(t.items, ({ title: n, disabled: o, elementRef: p }, i) => (g(), x("li", {
+        key: i,
+        class: "b-anchor-scroller-list__item"
+      }, [
+        I(ee, {
+          ref_for: !0,
+          ref_key: "listItemRefs",
+          ref: c,
+          "aria-current": t.activeIndex === i ? "location" : null,
+          class: M(["b-anchor-scroller-list__item-button", {
+            "b-anchor-scroller-list__item-button--active": t.activeIndex === i,
+            "b-anchor-scroller-list__item-button--disabled": o
+          }]),
+          "aria-disabled": o,
+          tabindex: t.activeIndex === i ? null : "-1",
+          variant: "tertiary-with-background",
+          onClick: (e) => l(p, o),
+          onKeydown: [
+            C(T((e) => l(p, o), ["prevent"]), ["space", "native"]),
+            C(T((e) => l(p, o), ["prevent"]), ["enter", "native"])
+          ]
+        }, {
+          default: w(() => [
+            N(R(n), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-current", "class", "aria-disabled", "tabindex", "onClick", "onKeydown"])
+      ]))), 128))
+    ], 32));
+  }
+}), ne = /* @__PURE__ */ $(te, [["__scopeId", "data-v-03d99bd8"]]), F = {
+  "en-US": {
+    jumpTo: "Jump to"
+  }
+}, oe = (m, s) => {
+  var u;
+  const c = k(((u = s.default) == null ? void 0 : u.value) ?? -1), { y: r } = U(), { height: d } = J(), f = () => {
+    const l = A(m), v = d.value, t = v / 2;
+    let a = -1, n = 0;
+    for (let o = 0; o < l.length; o++) {
+      const i = l[o];
+      if (!i)
+        continue;
+      const e = i.getBoundingClientRect();
+      if (e.top > t)
+        continue;
+      const _ = Math.min(e.bottom, v) - Math.max(e.top, 0);
+      if (_ <= 0)
+        continue;
+      const S = _ / e.height;
+      S > n && (n = S, a = o);
+    }
+    a !== -1 && c.value !== a && (c.value = a);
+  };
+  return Y([r, d], f, { throttle: 100, trailing: !0 }), H(() => {
+    A(m).length && f();
+  }), {
+    activeIndex: c
+  };
+}, ae = {
+  key: 0,
+  class: "b-anchor-scroller"
+}, re = ["aria-labelledby"], ie = { class: "b-anchor-scroller__navigation-panel" }, le = {
+  i18n: { messages: F },
+  name: "bento-anchor-scroller"
+}, se = /* @__PURE__ */ V({
+  ...le,
+  props: {
+    activeIndex: { default: void 0 },
+    items: {}
+  },
+  emits: ["update:active-index"],
+  setup(m, { emit: s }) {
+    const { t: c } = Q({ messages: F }), r = m, d = s, f = k(null), u = h(() => r.items.map((e) => ({ ...e }))), l = h(
+      () => r.items.map((e, _) => ({
+        element: y(e.elementRef),
+        originalIndex: _,
+        disabled: e.disabled
+      })).filter(
+        (e) => !e.disabled && !!e.element
+      )
+    ), v = h(() => l.value.map((e) => e.element)), t = h(() => ({
+      "b-anchor-scroller__navigation--pinned": o.value <= 1
+    })), a = h(() => {
+      const e = l.value[n.value];
+      return e ? e.originalIndex : 0;
+    }), { activeIndex: n } = oe(v, {
+      default: O(r, "activeIndex")
+    }), { top: o, bottom: p } = q(f);
+    G(
+      a,
+      (e) => {
+        Number.isFinite(e) && d("update:active-index", e);
+      },
+      {
+        debounce: 250
+        // ensure that if you are scrolling through multiple sections quickly, it fires only once.
+      }
+    ), D(
+      () => r.activeIndex,
+      (e) => {
+        Number.isFinite(e) && u.value[e].disabled && E("[bento-anchor-scroller] activeIndex should not be a disabled item");
+      }
+    );
+    const i = X("bento-anchor-scroller-label");
+    return (e, _) => u.value.length ? (g(), x("div", ae, [
+      B("nav", {
+        ref_key: "navigationRef",
+        ref: f,
+        class: M(["b-anchor-scroller__navigation", t.value]),
+        "aria-labelledby": b(i)
+      }, [
+        I(b(Z), {
+          condensed: "",
+          centered: ""
+        }, {
+          default: w(() => [
+            B("div", ie, [
+              I(P, {
+                id: b(i),
+                el: "span",
+                class: "b-anchor-scroller__navigation-panel-label",
+                stronger: ""
+              }, {
+                default: w(() => [
+                  N(R(b(c)("jumpTo")), 1)
+                ]),
+                _: 1
+              }, 8, ["id"]),
+              I(b(ne), {
+                items: u.value,
+                "active-index": a.value,
+                "scroll-offset": b(p)
+              }, null, 8, ["items", "active-index", "scroll-offset"])
+            ])
+          ]),
+          _: 1
+        })
+      ], 10, re),
+      W(e.$slots, "default", {}, void 0, !0)
+    ])) : j("", !0);
+  }
+}), _e = /* @__PURE__ */ $(se, [["__scopeId", "data-v-4628dbb5"]]);
+export {
+  _e as a
+};
+//# sourceMappingURL=anchor-scroller.CKIQu3NK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-scroller.CKIQu3NK.js","sources":["../../../vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../../vue2/src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../../vue2/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=\"listItemRefs\"\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=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(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 { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = withDefaults(defineProps<AnchorScrollerListProps>(), {\n        activeIndex: undefined,\n        scrollOffset: undefined,\n    });\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\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, watchDebounced } 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 '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\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 = withDefaults(defineProps<BentoAnchorScrollerProps>(), {\n        activeIndex: undefined,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when the active index is changed\n         */\n        (e: 'update:active-index', value: number): void;\n    }>();\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    // 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 currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[relativeActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    watchDebounced(\n        currentActiveIndex,\n        val => {\n            if (Number.isFinite(val)) {\n                emit('update:active-index', val);\n            }\n        },\n        {\n            debounce: 250, // ensure that if you are scrolling through multiple sections quickly, it fires only once.\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":["props","__props","listItemRefs","ref","listIndices","computed","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","scrollToSection","elementRef","printDevelopmentWarning","currentScrollMargin","onKeydownNavigation","e","useScrollSpy","items","options","activeIndex","_a","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","t","useI18n","emit","__emit","navigationRef","computedItems","enabledItems","scrollToTargets","c","navigationConditionalClasses","top","currentActiveIndex","candidate","relativeActiveIndex","toRef","bottom","useElementBounding","watchDebounced","val","navLabelId","generateUid"],"mappings":"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"}

package/dist/chunks/{arrow-left.DoP6zFsY.js → arrow-left.C6UiqO-c.js}

@@ -1,5 +1,5 @@
 /* empty css              */
-import { createElementBlock as o, openBlock as r, mergeProps as i, createCommentVNode as n, createElementVNode as l, toDisplayString as a } from "vue";
+import { openBlock as o, createElementBlock as r, mergeProps as i, toDisplayString as n, createCommentVNode as l, createElementVNode as a } from "vue";
 import { _ as p } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 let s = 0;
 const m = {
@@ -8,15 +8,15 @@ const m = {
   }
 }, c = { key: 0 };
 function d(t, e, f, g, u, L) {
-  return r(), o("svg", i({ role: "img" }, t.$attrs, {
+  return o(), r("svg", i({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    t.$attrs["svg-title"] ? (r(), o("title", c, a(t.$attrs["svg-title"]), 1)) : n("", !0),
-    e[0] || (e[0] = l("path", {
+    t.$attrs["svg-title"] ? (o(), r("title", c, n(t.$attrs["svg-title"]), 1)) : l("", !0),
+    e[0] || (e[0] = a("path", {
       fill: "#001222",
       d: "M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z"
     }, null, -1))
@@ -26,4 +26,4 @@ const _ = /* @__PURE__ */ p(m, [["render", d]]);
 export {
   _ as A
 };
-//# sourceMappingURL=arrow-left.DoP6zFsY.js.map
+//# sourceMappingURL=arrow-left.C6UiqO-c.js.map

package/dist/chunks/{arrow-left.DoP6zFsY.js.map → arrow-left.C6UiqO-c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"arrow-left.DoP6zFsY.js","sources":["../../../ui-assets/icons-16/dist/vue/arrow-left.vue"],"sourcesContent":["\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=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main","_openBlock","_createElementBlock","_mergeProps","_ctx","_hoisted_1","_createCommentVNode","_createElementVNode"],"mappings":";;;AAOI,IAAIA,IAAO;AAEX,MAAKC,IAAU;AAAA,EACX,eAAe;AACX,SAAK,OAAOD,EAAK,SAAQ,GACzBA,KAAQ;AAAA,EACZ;SAbR,KAAA,EAAA;;AAEI,SAAAE,EAAA,GAAAC,EAAuY,OAAvYC,EAAuY,EAAlY,MAAK,MAAK,GAASC,EAAA,QAAM;AAAA,IAAE,OAAM;AAAA,IAAqB,OAAM;AAAA,IAA6B,OAAM;AAAA,IAAK,QAAO;AAAA,IAAK,MAAK;AAAA;IAAoBA,EAAA,OAAM,WAAA,UAAnBF,EAAmE,SAFxMG,KAE0KD,EAAA,OAAM,WAAA,CAAA,GAAA,CAAA,KAFhLE,EAAA,IAAA,EAAA;AAAA,oBAEwMC,EAA6L,QAAA;AAAA,MAAvL,MAAK;AAAA,MAAU,GAAE;AAAA;;;;"}
+{"version":3,"file":"arrow-left.C6UiqO-c.js","sources":["../../../ui-assets/icons-16/dist/vue/arrow-left.vue"],"sourcesContent":["\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=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main","_openBlock","_createElementBlock","_mergeProps","_ctx","_hoisted_1","_createCommentVNode","_createElementVNode"],"mappings":";;;AAOI,IAAIA,IAAO;AAEX,MAAKC,IAAU;AAAA,EACX,eAAe;AACX,SAAK,OAAOD,EAAK,SAAQ,GACzBA,KAAQ;AAAA,EACZ;SAbR,KAAA,EAAA;;AAEI,SAAAE,EAAA,GAAAC,EAAuY,OAAvYC,EAAuY,EAAlY,MAAK,MAAK,GAASC,EAAA,QAAM;AAAA,IAAE,OAAM;AAAA,IAAqB,OAAM;AAAA,IAA6B,OAAM;AAAA,IAAK,QAAO;AAAA,IAAK,MAAK;AAAA;IAAoBA,EAAA,OAAM,WAAA,UAAnBF,EAAmE,SAFxMG,KAE0KD,EAAA,OAAM,WAAA,CAAA,GAAA,CAAA,KAFhLE,EAAA,IAAA,EAAA;AAAA,oBAEwMC,EAA6L,QAAA;AAAA,MAAvL,MAAK;AAAA,MAAU,GAAE;AAAA;;;;"}