@adyen/bento-vue2 1.89.2 → 1.91.0

package/dist/chunks/{ai-button.CR_ePQRR.js.map → ai-button.7L9bANlk.js.map}

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

package/dist/chunks/ai-tag.AyG2UWCB.js

@@ -0,0 +1,110 @@
+import { defineComponent as u, ref as n, watch as f, computed as _ } from "vue";
+import { u as v, c as m, h as I } from "./button-actions.Bdbu0bvt.js";
+import { B as A } from "./typography.C8lPlsbD.js";
+import "./index.Cl4_42j5.js";
+import { u as x } from "./index.B6WW_F-J.js";
+import { g as y } from "./generate-uid.NJ8tVoha.js";
+import { A as E } from "./artificial-intelligence-ai-filled.C6TMsiHK.js";
+import { n as B } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/ai-tag.css";
+const h = {
+  "de-DE": {
+    ai: "KI",
+    aiExplained: "KI erklärt"
+  },
+  "en-GB": {
+    ai: "AI",
+    aiExplained: "AI explained"
+  },
+  "en-US": {
+    ai: "AI",
+    aiExplained: "AI explained"
+  },
+  "es-ES": {
+    ai: "IA",
+    aiExplained: "IA explicada"
+  },
+  "es-MX": {
+    ai: "AI",
+    aiExplained: "IA explicada"
+  },
+  "fr-FR": {
+    ai: "IA",
+    aiExplained: "L'IA expliquée"
+  },
+  "it-IT": {
+    ai: "AI",
+    aiExplained: "L'AI spiegata"
+  },
+  "ja-JP": {
+    ai: "AI",
+    aiExplained: "AIについての説明"
+  },
+  "pt-BR": {
+    ai: "IA",
+    aiExplained: "IA explicada"
+  },
+  "zh-CN": {
+    ai: "人工智能",
+    aiExplained: "AI 解释"
+  }
+}, C = {
+  i18n: { messages: h }
+}, T = /* @__PURE__ */ u({
+  ...C,
+  __name: "ai-tag",
+  props: {
+    title: null,
+    description: null,
+    influencedValue: { default: void 0 },
+    toggled: { type: Boolean, default: !1 },
+    action: { default: void 0 }
+  },
+  emits: ["update:toggled"],
+  setup(l, { emit: e }) {
+    const a = l, { t } = x(), o = n(a.toggled), r = n(null), c = n(null), d = y("b-ai-tag-popover");
+    f(
+      () => a.toggled,
+      (i) => {
+        o.value = i;
+      }
+    ), v(r, () => {
+      p();
+    });
+    const g = _(
+      () => a.action ? [
+        {
+          ...a.action,
+          variant: "secondary"
+        }
+      ] : void 0
+    ), s = (i) => {
+      o.value = i, e("update:toggled", i);
+    }, p = () => {
+      o.value && s(!1);
+    };
+    return { __sfc: !0, props: a, t, toggled: o, aiTagRef: r, targetElement: c, popoverId: d, popoverActions: g, emit: e, onToggle: s, closePopover: p, BentoPopover: I, BentoToggleButton: m, BentoTypography: A, ArtificialIntelligenceAiIcon: E };
+  }
+});
+var k = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("div", { ref: "aiTagRef", staticClass: "b-ai-tag", on: { keydown: function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : t.closePopover.apply(null, arguments);
+  } } }, [a(t.BentoToggleButton, { ref: "targetElement", staticClass: "b-ai-tag__trigger", attrs: { toggled: t.toggled, "aria-controls": t.popoverId, variant: "secondary", condensed: "" }, on: { "update:toggled": t.onToggle }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [a(t.ArtificialIntelligenceAiIcon, { staticClass: "b-ai-tag__trigger-icon", attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }]) }, [e._v(" " + e._s(t.t("ai")) + " ")]), t.targetElement ? a(t.BentoPopover, { attrs: { id: t.popoverId, open: t.toggled, "target-element": t.targetElement, actions: t.popoverActions, "actions-layout": "fill-container", title: t.t("aiExplained"), "trap-all": "", "trap-all-options": { onDeactivate: t.closePopover, allowOutsideClick: !0 }, "fixed-positioning": "", "overflow-visible": "" }, on: { dismiss: t.closePopover }, scopedSlots: e._u([{ key: "headerIcon", fn: function() {
+    return [a(t.ArtificialIntelligenceAiIcon, { staticClass: "b-ai-tag__popover-header-icon", attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 430358887) }, [a("div", { staticClass: "b-ai-tag__popover-content" }, [e.influencedValue ? a(t.BentoTypography, { staticClass: "b-ai-tag__influenced-value", attrs: { variant: "title", medium: "" } }, [e._v(" " + e._s(e.influencedValue) + " ")]) : e._e(), a(t.BentoTypography, { attrs: { variant: "title" } }, [e._v(" " + e._s(e.title) + " ")]), a(t.BentoTypography, [e._v(" " + e._s(e.description) + " ")])], 1)]) : e._e()], 1);
+}, b = [], P = /* @__PURE__ */ B(
+  T,
+  k,
+  b,
+  !1,
+  null,
+  "405c2237"
+);
+const F = P.exports;
+export {
+  F as a
+};
+//# sourceMappingURL=ai-tag.AyG2UWCB.js.map

package/dist/chunks/{ai-tag.Cjf38mjR.js.map → ai-tag.AyG2UWCB.js.map}

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

package/dist/chunks/alert.CXRb-Smf.js

@@ -0,0 +1,160 @@
+import { defineComponent as v, useSlots as y, computed as c, onMounted as b } from "vue";
+import { c as l, a as S, B as T } from "./typography.C8lPlsbD.js";
+import { B as w } from "./button.C9b2AC9w.js";
+import { C as H } from "./cross-small.CoQUe8SS.js";
+import { W as L } from "./warning-filled.CbJ1pcB2.js";
+import { C as B } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as E } from "./checkmark-circle-fill.BttTCjrM.js";
+/* empty css              */
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { u as G } from "./index.B6WW_F-J.js";
+import "../assets/alert.css";
+var i = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(i || {}), n = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(n || {}), d = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(d || {});
+let C = 0;
+const F = {
+  beforeCreate() {
+    this.uuid = C.toString(), C += 1;
+  }
+};
+var V = function() {
+  var s = this, t = s._self._c;
+  return t("svg", s._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", s.$attrs, !1), [s.$attrs["svg-title"] ? t("title", [s._v(s._s(s.$attrs["svg-title"]))]) : s._e(), t("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + s.uuid + ")" } }, [t("path", { attrs: { 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" } })]), t("defs", [t("clipPath", { attrs: { id: "uia-ui-assets/icons-16-info_filled__a" + s.uuid } }, [t("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
+}, $ = [], x = /* @__PURE__ */ u(
+  F,
+  V,
+  $,
+  !1,
+  null,
+  null
+);
+const A = x.exports, P = {
+  "de-DE": {
+    close: "Schließen",
+    criticalIcon: "Kritisches Symbol",
+    highlightIcon: "Symbol hervorheben",
+    successIcon: "Erfolgssymbol",
+    warningIcon: "Warnungssymbol"
+  },
+  "en-GB": {
+    close: "Close",
+    criticalIcon: "Critical icon",
+    highlightIcon: "Highlight icon",
+    successIcon: "Success icon",
+    warningIcon: "Warning icon"
+  },
+  "en-US": {
+    close: "Close",
+    criticalIcon: "Critical icon",
+    highlightIcon: "Highlight icon",
+    successIcon: "Success icon",
+    warningIcon: "Warning icon"
+  },
+  "es-ES": {
+    close: "Cerrar",
+    criticalIcon: "Icono de error crítico",
+    highlightIcon: "Icono de resaltado",
+    successIcon: "Icono de éxito",
+    warningIcon: "Icono de advertencia"
+  },
+  "es-MX": {
+    close: "Cerrar",
+    criticalIcon: "Icono crítico",
+    highlightIcon: "Icono de resaltado",
+    successIcon: "Icono de éxito",
+    warningIcon: "Icono de advertencia"
+  },
+  "fr-FR": {
+    close: "Fermer",
+    criticalIcon: "Icône critique",
+    highlightIcon: "Icône de surbrillance",
+    successIcon: "Icône de réussite",
+    warningIcon: "Icône d'avertissement"
+  },
+  "it-IT": {
+    close: "Chiudi",
+    criticalIcon: "Icona critica",
+    highlightIcon: "Icona di evidenziazione",
+    successIcon: "Icona del successo",
+    warningIcon: "Icona di avviso"
+  },
+  "ja-JP": {
+    close: "閉じる",
+    criticalIcon: "重大アイコン",
+    highlightIcon: "ハイライトアイコン",
+    successIcon: "成功アイコン",
+    warningIcon: "警告アイコン"
+  },
+  "pt-BR": {
+    close: "Fechar",
+    criticalIcon: "Ícone crítico",
+    highlightIcon: "Ícone de destaque",
+    successIcon: "Ícone de sucesso",
+    warningIcon: "Ícone de aviso"
+  },
+  "zh-CN": {
+    close: "关闭",
+    criticalIcon: "关键图标",
+    highlightIcon: "高亮图标",
+    successIcon: "成功图标",
+    warningIcon: "警告图标"
+  }
+}, W = {
+  i18n: { messages: P },
+  name: "bento-alert"
+}, N = /* @__PURE__ */ v({
+  ...W,
+  props: {
+    closeButton: { type: Boolean, default: !1 },
+    type: { default: n.HIGHLIGHT },
+    variant: { default: i.DEFAULT }
+  },
+  emits: ["close-alert"],
+  setup(e, { emit: s }) {
+    const t = e, o = y(), I = R(o), { t: r } = G(), a = c(() => t.variant === i.TIP), h = c(() => ({
+      [`b-alert--${t.type}`]: t.type,
+      [`b-alert--${i.TIP}`]: a.value
+    })), p = c(() => r(`${t.type}Icon`)), _ = c(() => {
+      switch (t.type) {
+        case n.CRITICAL:
+          return B;
+        case n.SUCCESS:
+          return E;
+        case n.WARNING:
+          return L;
+        case n.HIGHLIGHT:
+        default:
+          return A;
+      }
+    }), g = c(() => ({
+      el: S.DIV,
+      variant: a.value ? l.CAPTION : l.BODY,
+      wide: !0
+    })), f = c(() => t.type === n.HIGHLIGHT ? "status" : "alert"), m = () => {
+      s(d.CLOSE_ALERT);
+    };
+    return b(() => {
+      if (!o.default && !o.description)
+        throw new Error("Alert Component requires a title or a description");
+    }), { __sfc: !0, slots: o, hasSlot: I, emit: s, props: t, t: r, isTipVariant: a, alertConditionalClasses: h, iconSvgTitle: p, iconComponent: _, descriptionTypography: g, computedRole: f, onCloseButtonClick: m, BentoTypography: T, BentoButton: w, CrossSmall: H };
+  }
+});
+var k = function() {
+  var s = this, t = s._self._c, o = s._self._setupProxy;
+  return t("div", { staticClass: "b-alert", attrs: { role: o.computedRole } }, [t("div", { staticClass: "b-alert__inner-container", class: o.alertConditionalClasses }, [t("div", { staticClass: "b-alert__icon" }, [t(o.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": o.iconSvgTitle } })], 1), t("div", { staticClass: "b-alert__content" }, [o.hasSlot("default") && !o.isTipVariant ? t(o.BentoTypography, { staticClass: "b-alert__title", attrs: { el: "div", variant: "body", strongest: "", wide: "" } }, [s._t("default")], 2) : s._e(), o.hasSlot("description") ? t(o.BentoTypography, s._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", o.descriptionTypography, !1), [s._t("description")], 2) : s._e(), o.hasSlot("actions") && !o.isTipVariant ? t("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [s._t("actions")], 2) : s._e()], 1), s.closeButton && !o.isTipVariant ? t(o.BentoButton, { staticClass: "b-alert__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: o.onCloseButtonClick } }, [t(o.CrossSmall, { attrs: { "svg-title": o.t("close") } })], 1) : s._e()], 1)]);
+}, D = [], M = /* @__PURE__ */ u(
+  N,
+  k,
+  D,
+  !1,
+  null,
+  "2c793db1"
+);
+const tt = M.exports;
+export {
+  tt as B,
+  d as a,
+  n as b,
+  i as c
+};
+//# sourceMappingURL=alert.CXRb-Smf.js.map

package/dist/chunks/{alert.QVQ6Zjbm.js.map → alert.CXRb-Smf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.QVQ6Zjbm.js","sources":["../../src/components/alert/alert.types.ts","../../../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-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([\"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","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GC8HIE,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;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.CXRb-Smf.js","sources":["../../src/components/alert/alert.types.ts","../../../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-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([\"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","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,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;;;;;;;;;;;;;;;"}

package/dist/chunks/{anchor-scroller.CjJ26PJS.js → anchor-scroller.DWaykZQj.js}

@@ -1,14 +1,14 @@
-import { defineComponent as w, ref as x, computed as m, watch as h, watchEffect as S, toRef as T } from "vue";
-import { f as A, d as B, u as R, g as D, t as y, h as F, r as L } from "./index.CwzYJHw2.js";
-import { p as k, B as M } from "./typography.C8lPlsbD.js";
-import { u as O } from "./index.B6WW_F-J.js";
-import { g as j } from "./generate-uid.NJ8tVoha.js";
+import { defineComponent as T, ref as x, computed as m, watch as h, watchEffect as C, toRef as k } from "vue";
+import { f as j, d as B, u as A, g as R, t as y, h as D, r as F } from "./index.CwzYJHw2.js";
+import { p as S, B as E } from "./typography.C8lPlsbD.js";
+import { u as L } from "./index.B6WW_F-J.js";
+import { g as M } from "./generate-uid.NJ8tVoha.js";
 import { u as g } from "./utils.BzUwtTXc.js";
-import { B as E } from "./button.DxhJNOtr.js";
-import { n as C } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { F as N } from "./fixed-scroller.MerESbd_.js";
+import { B as N } from "./button.C9b2AC9w.js";
+import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { F as O } from "./fixed-scroller.DR2E_No4.js";
 import "../assets/anchor-scroller.css";
-const H = /* @__PURE__ */ w({
+const V = /* @__PURE__ */ T({
   __name: "anchor-scroller-list",
   props: {
     activeIndex: { default: void 0 },
@@ -22,7 +22,7 @@ const H = /* @__PURE__ */ w({
       state: c,
       next: i,
       prev: l
-    } = A(t, {
+    } = j(t, {
       initialValue: e.activeIndex ?? t.value[0]
     });
     return h(c, async (r) => {
@@ -33,7 +33,7 @@ const H = /* @__PURE__ */ w({
         return;
       const a = g(r);
       if (!a) {
-        k("[bento-anchor-scroller] element ref not found");
+        S("[bento-anchor-scroller] element ref not found");
         return;
       }
       if (!a.style.scrollMarginTop && e.scrollOffset) {
@@ -60,10 +60,10 @@ const H = /* @__PURE__ */ w({
           r.preventDefault(), c.value = t.value.length - 1;
           break;
       }
-    }, BentoButton: E };
+    }, BentoButton: N };
   }
 });
-var V = function() {
+var z = function() {
   var e = this, n = e._self._c, t = e._self._setupProxy;
   return n("ul", { staticClass: "b-anchor-scroller-list", on: { keydown: t.onKeydownNavigation } }, e._l(e.items, function({ title: c, disabled: i, elementRef: l }, d) {
     return n("li", { key: d, staticClass: "b-anchor-scroller-list__item" }, [n(t.BentoButton, { ref: "listItemRefs", refInFor: !0, staticClass: "b-anchor-scroller-list__item-button", class: {
@@ -77,21 +77,48 @@ var V = function() {
       return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.preventDefault(), t.scrollToSection(l, i));
     }] } }, [e._v(" " + e._s(c) + " ")])], 1);
   }), 0);
-}, K = [], P = /* @__PURE__ */ C(
-  H,
+}, H = [], P = /* @__PURE__ */ w(
   V,
-  K,
+  z,
+  H,
   !1,
   null,
   "5668c5f7"
 );
-const W = P.exports, z = {
-  "en-US": { jumpTo: "Jump to" },
-  "ja-JP": { jumpTo: "移動先" },
-  "pt-BR": { jumpTo: "Ir para" }
-}, J = (p, e) => {
+const J = P.exports, K = {
+  "de-DE": {
+    jumpTo: "Springe zu"
+  },
+  "en-GB": {
+    jumpTo: "Jump to"
+  },
+  "en-US": {
+    jumpTo: "Jump to"
+  },
+  "es-ES": {
+    jumpTo: "Saltar a"
+  },
+  "es-MX": {
+    jumpTo: "Saltar a"
+  },
+  "fr-FR": {
+    jumpTo: "Passer à"
+  },
+  "it-IT": {
+    jumpTo: "Vai a"
+  },
+  "ja-JP": {
+    jumpTo: "移動先"
+  },
+  "pt-BR": {
+    jumpTo: "Ir para"
+  },
+  "zh-CN": {
+    jumpTo: "跳转到"
+  }
+}, W = (p, e) => {
   var l;
-  const n = x(((l = e.default) == null ? void 0 : l.value) ?? -1), { y: t } = B(), { height: c } = R(), i = () => {
+  const n = x(((l = e.default) == null ? void 0 : l.value) ?? -1), { y: t } = B(), { height: c } = A(), i = () => {
     const d = y(p), s = c.value, r = s / 2;
     let u = -1, a = 0;
     for (let f = 0; f < d.length; f++) {
@@ -109,15 +136,15 @@ const W = P.exports, z = {
     }
     u !== -1 && n.value !== u && (n.value = u);
   };
-  return D([t, c], i, { throttle: 100, trailing: !0 }), S(() => {
+  return R([t, c], i, { throttle: 100, trailing: !0 }), C(() => {
     y(p).length && i();
   }), {
     activeIndex: n
   };
 }, U = {
-  i18n: { messages: z },
+  i18n: { messages: K },
   name: "bento-anchor-scroller"
-}, Y = /* @__PURE__ */ w({
+}, G = /* @__PURE__ */ T({
   ...U,
   props: {
     activeIndex: { default: void 0 },
@@ -125,7 +152,7 @@ const W = P.exports, z = {
   },
   emits: ["update:active-index"],
   setup(p, { emit: e }) {
-    const n = p, { t } = O(), c = x(null), i = m(() => n.items.map((o) => ({ ...o }))), l = m(
+    const n = p, { t } = L(), c = x(null), i = m(() => n.items.map((o) => ({ ...o }))), l = m(
       () => n.items.map((o, _) => ({
         element: g(o.elementRef),
         originalIndex: _,
@@ -133,11 +160,11 @@ const W = P.exports, z = {
       })).filter(
         (o) => !o.disabled && !!o.element
       )
-    ), { top: d, bottom: s } = F(c), r = m(() => l.value.map((o) => o.element)), u = m(() => ({
+    ), { top: d, bottom: s } = D(c), r = m(() => l.value.map((o) => o.element)), u = m(() => ({
       "b-anchor-scroller__navigation--pinned": d.value <= 1
-    })), { activeIndex: a } = J(r, {
-      default: T(n, "activeIndex")
-    }), f = L(a, 200), b = m(() => {
+    })), { activeIndex: a } = W(r, {
+      default: k(n, "activeIndex")
+    }), f = F(a, 200), b = m(() => {
       const o = l.value[f.value];
       return o ? o.originalIndex : 0;
     });
@@ -146,26 +173,26 @@ const W = P.exports, z = {
     }), h(
       () => n.activeIndex,
       (o) => {
-        Number.isFinite(o) && i.value[o].disabled && k("[bento-anchor-scroller] activeIndex should not be a disabled item");
+        Number.isFinite(o) && i.value[o].disabled && S("[bento-anchor-scroller] activeIndex should not be a disabled item");
       }
     );
-    const v = j("bento-anchor-scroller-label");
-    return { __sfc: !0, t, props: n, emit: e, navigationRef: c, computedItems: i, enabledItems: l, top: d, bottom: s, scrollToTargets: r, navigationConditionalClasses: u, relativeActiveIndex: a, debouncedActiveIndex: f, currentActiveIndex: b, navLabelId: v, BentoTypography: M, FixedScroller: N, AnchorScrollerList: W };
+    const v = M("bento-anchor-scroller-label");
+    return { __sfc: !0, t, props: n, emit: e, navigationRef: c, computedItems: i, enabledItems: l, top: d, bottom: s, scrollToTargets: r, navigationConditionalClasses: u, relativeActiveIndex: a, debouncedActiveIndex: f, currentActiveIndex: b, navLabelId: v, BentoTypography: E, FixedScroller: O, AnchorScrollerList: J };
   }
 });
-var q = function() {
+var X = function() {
   var e = this, n = e._self._c, t = e._self._setupProxy;
   return t.computedItems.length ? n("div", { staticClass: "b-anchor-scroller" }, [n("nav", { ref: "navigationRef", staticClass: "b-anchor-scroller__navigation", class: t.navigationConditionalClasses, attrs: { "aria-labelledby": t.navLabelId } }, [n(t.FixedScroller, { attrs: { condensed: "", centered: "" } }, [n("div", { staticClass: "b-anchor-scroller__navigation-panel" }, [n(t.BentoTypography, { staticClass: "b-anchor-scroller__navigation-panel-label", attrs: { id: t.navLabelId, el: "span", stronger: "" } }, [e._v(" " + e._s(t.t("jumpTo")) + " ")]), n(t.AnchorScrollerList, { attrs: { items: t.computedItems, "active-index": t.currentActiveIndex, "scroll-offset": t.bottom } })], 1)])], 1), e._t("default")], 2) : e._e();
-}, G = [], Q = /* @__PURE__ */ C(
-  Y,
-  q,
+}, Y = [], q = /* @__PURE__ */ w(
   G,
+  X,
+  Y,
   !1,
   null,
   "ae16e25c"
 );
-const se = Q.exports;
+const se = q.exports;
 export {
   se as a
 };
-//# sourceMappingURL=anchor-scroller.CjJ26PJS.js.map
+//# sourceMappingURL=anchor-scroller.DWaykZQj.js.map