@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/{summary-grid.types.BcIlkfVO.js → summary-grid.types.B_gUEQ0c.js}

@@ -1,16 +1,16 @@
-import { defineComponent as d, useSlots as p, onMounted as k, provide as h, toRef as z, toRefs as P, inject as B, ref as D, computed as a } from "vue";
-import { u as m } from "./use-has-slot.C9lQZ6nz.js";
+import { defineComponent as c, useSlots as d, onMounted as k, provide as h, toRef as z, toRefs as P, inject as B, ref as D, computed as a } from "vue";
+import { u as p } from "./use-has-slot.C9lQZ6nz.js";
 import { S as M, a as x } from "./summary-grid.keys.Xx-W5a2w.js";
-import { G as R } from "./grid-layout.1aIiz2N_.js";
-import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as g } from "./typography.C8lPlsbD.js";
-import { u as G } from "./index.B6WW_F-J.js";
-import { B as w } from "./dashed-underline.ByPcIHNe.js";
-import { B as L } from "./info-icon.BnLYUTzI.js";
-import { B as E } from "./tag.BAyLm485.js";
-import { C as N } from "./copy.BlyhTDSU.js";
+import { G as R } from "./grid-layout.BeCrjPgT.js";
+import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as g } from "./typography.D1OZJbEa.js";
+import { u as G } from "./index.CPOlyau9.js";
+import { B as w } from "./dashed-underline.CbzCYKrk.js";
+import { B as L } from "./info-icon.BRnbXunj.js";
+import { B as E } from "./tag.BC7FFENr.js";
+import { C as N } from "./copy.CsKQJlen.js";
 import "../assets/summary-grid.css";
-const A = {}, F = /* @__PURE__ */ d({
+const A = {}, F = /* @__PURE__ */ c({
   ...A,
   __name: "summary-grid",
   props: {
@@ -18,15 +18,11 @@ const A = {}, F = /* @__PURE__ */ d({
     slashedZero: { type: Boolean, default: !1 }
   },
   setup(r) {
-    var u, s;
-    const e = r, o = p(), t = m(o);
+    const e = r, o = d(), t = p(o);
     let n = 1;
     if (o) {
-      const _ = (s = (u = Object.keys(o)) == null ? void 0 : u.filter((c) => c.includes("cell-"))) == null ? void 0 : s.map((c) => {
-        var l;
-        return parseInt((l = c.split("-")) == null ? void 0 : l[1], 10);
-      });
-      n = Math.max(..._);
+      const u = Object.keys(o)?.filter((l) => l.includes("cell-"))?.map((l) => parseInt(l.split("-")?.[1], 10));
+      n = Math.max(...u);
     }
     k(() => {
       if (n > 3)
@@ -41,8 +37,7 @@ const A = {}, F = /* @__PURE__ */ d({
 var U = function() {
   var e = this, o = e._self._c, t = e._self._setupProxy;
   return o("div", { staticClass: "b-summary-grid" }, e._l(t.numberOfRows, function(n) {
-    var i;
-    return o(t.GridLayout, { key: `summary-grid-row-${n}`, attrs: { "data-testid": `summary-grid-row-${n}`, "column-width": (i = e.columnWidth) == null ? void 0 : i[`row${n}`] }, scopedSlots: e._u([t.hasSlot(`cell-${n}-1`) ? { key: "col-1", fn: function() {
+    return o(t.GridLayout, { key: `summary-grid-row-${n}`, attrs: { "data-testid": `summary-grid-row-${n}`, "column-width": e.columnWidth?.[`row${n}`] }, scopedSlots: e._u([t.hasSlot(`cell-${n}-1`) ? { key: "col-1", fn: function() {
       return [e._t(`cell-${n}-1`)];
     }, proxy: !0 } : null, t.hasSlot(`cell-${n}-2`) ? { key: "col-2", fn: function() {
       return [e._t(`cell-${n}-2`)];
@@ -56,7 +51,7 @@ var U = function() {
       return [e._t(`cell-${n}-6`)];
     }, proxy: !0 } : null], null, !0) });
   }), 1);
-}, O = [], V = /* @__PURE__ */ f(
+}, O = [], V = /* @__PURE__ */ m(
   F,
   U,
   O,
@@ -64,7 +59,7 @@ var U = function() {
   null,
   "4d0cd503"
 );
-const Re = V.exports, Y = {}, Z = /* @__PURE__ */ d({
+const Re = V.exports, Y = {}, Z = /* @__PURE__ */ c({
   ...Y,
   __name: "summary-grid-item",
   props: {
@@ -83,7 +78,7 @@ const Re = V.exports, Y = {}, Z = /* @__PURE__ */ d({
   },
   emits: ["copy-click", "info-icon-mouseenter"],
   setup(r) {
-    const e = r, { trendDirection: o, secondaryTrendDirection: t, itemType: n, size: i } = P(e), u = B(x, D(!1)), s = (I) => {
+    const e = r, { trendDirection: o, secondaryTrendDirection: t, itemType: n, size: i } = P(e), u = B(x, D(!1)), l = (I) => {
       switch (I) {
         case "positive":
           return "green";
@@ -92,13 +87,13 @@ const Re = V.exports, Y = {}, Z = /* @__PURE__ */ d({
         default:
           return "blue";
       }
-    }, _ = a(() => s(o.value)), c = a(() => s(t.value)), l = a(() => i.value === "small" ? "body" : n.value !== "text" ? "title" : null), S = a(() => ({
+    }, _ = a(() => l(o.value)), y = a(() => l(t.value)), s = a(() => i.value === "small" ? "body" : n.value !== "text" ? "title" : null), S = a(() => ({
       medium: i.value === "large",
       strongest: i.value === "small",
       wide: i.value === "small",
-      variant: l.value
-    })), $ = a(() => e.fitContent ? { width: "fit-content" } : {}), b = a(() => ({ "b-summary-grid-item--slashed-zero": u.value })), v = p(), T = m(v), C = a(() => e.underlineTooltipText || T("dashed-underline"));
-    return { __sfc: !0, props: e, trendDirection: o, secondaryTrendDirection: t, itemType: n, size: i, hasSlashedZero: u, tagVariantColor: s, trendVariant: _, secondaryTrendVariant: c, typographyContentElement: l, typographyProps: S, computedStyles: $, conditionalClasses: b, slots: v, hasSlot: T, withUnderline: C, BentoDashedUnderline: w, BentoInfoIcon: L, BentoTypography: g, BentoTag: E, Copy: N };
+      variant: s.value
+    })), $ = a(() => e.fitContent ? { width: "fit-content" } : {}), b = a(() => ({ "b-summary-grid-item--slashed-zero": u.value })), v = d(), T = p(v), C = a(() => e.underlineTooltipText || T("dashed-underline"));
+    return { __sfc: !0, props: e, trendDirection: o, secondaryTrendDirection: t, itemType: n, size: i, hasSlashedZero: u, tagVariantColor: l, trendVariant: _, secondaryTrendVariant: y, typographyContentElement: s, typographyProps: S, computedStyles: $, conditionalClasses: b, slots: v, hasSlot: T, withUnderline: C, BentoDashedUnderline: w, BentoInfoIcon: L, BentoTypography: g, BentoTag: E, Copy: N };
   }
 });
 var j = function() {
@@ -110,7 +105,7 @@ var j = function() {
   } } }) : e._e(), e.infoIconTooltipText ? o(t.BentoInfoIcon, { staticClass: "b-summary-grid-item__title-tooltip", attrs: { "tooltip-text": e.infoIconTooltipText, "tooltip-position": "top" }, on: { mouseenter: function(n) {
     return e.$emit("info-icon-mouseenter", n);
   } } }) : e._e()], 1)], 1), o(t.BentoTypography, e._b({ staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-content-typography", el: "span" } }, "bento-typography", t.typographyProps, !1), [e._t("default"), e.trend && t.itemType !== "text" ? o(t.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.trendVariant, label: e.trend } }) : e._e()], 2), t.hasSlot("secondary") ? o(t.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-secondary-metric-typography", el: "span", variant: "caption", stronger: "" } }, [e._t("secondary"), e.secondaryTrend ? o(t.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.secondaryTrendVariant, label: e.secondaryTrend } }) : e._e()], 2) : e._e()], 1);
-}, H = [], W = /* @__PURE__ */ f(
+}, H = [], W = /* @__PURE__ */ m(
   Z,
   j,
   H,
@@ -118,7 +113,7 @@ var j = function() {
   null,
   "cc6736c0"
 );
-const y = W.exports, J = {}, K = /* @__PURE__ */ d({
+const f = W.exports, J = {}, K = /* @__PURE__ */ c({
   ...J,
   __name: "summary-grid-item-amount",
   props: {
@@ -139,8 +134,8 @@ const y = W.exports, J = {}, K = /* @__PURE__ */ d({
   },
   emits: ["copy-click", "info-icon-mouseenter"],
   setup(r) {
-    const e = p(), o = m(e);
-    return { __sfc: !0, slots: e, hasSlot: o, BentoTypography: g, SummaryGridItem: y };
+    const e = d(), o = p(e);
+    return { __sfc: !0, slots: e, hasSlot: o, BentoTypography: g, SummaryGridItem: f };
   }
 });
 var q = function() {
@@ -154,7 +149,7 @@ var q = function() {
   }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
     return [e._v(" " + e._s(e.secondaryMetric) + " ")];
   }, proxy: !0 } : null], null, !0) }, [o("div", { staticClass: "b-summary-grid-item-amount__content" }, [o("div", [e._v(e._s(e.label))]), e.secondaryLabel ? o(t.BentoTypography, { staticClass: "b-summary-grid-item-amount__secondary-label", attrs: { variant: "caption" } }, [e._v(e._s(e.secondaryLabel))]) : e._e()], 1)]);
-}, Q = [], X = /* @__PURE__ */ f(
+}, Q = [], X = /* @__PURE__ */ m(
   K,
   q,
   Q,
@@ -162,7 +157,7 @@ var q = function() {
   null,
   "c060d827"
 );
-const Ge = X.exports, ee = {}, te = /* @__PURE__ */ d({
+const Ge = X.exports, ee = {}, te = /* @__PURE__ */ c({
   ...ee,
   __name: "summary-grid-item-numeric",
   props: {
@@ -182,8 +177,8 @@ const Ge = X.exports, ee = {}, te = /* @__PURE__ */ d({
   },
   emits: ["copy-click", "info-icon-mouseenter"],
   setup(r) {
-    const e = p(), o = m(e);
-    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+    const e = d(), o = p(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: f };
   }
 });
 var ne = function() {
@@ -197,7 +192,7 @@ var ne = function() {
   }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
     return [e._v(" " + e._s(e.secondaryMetric) + " ")];
   }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
-}, oe = [], re = /* @__PURE__ */ f(
+}, oe = [], re = /* @__PURE__ */ m(
   te,
   ne,
   oe,
@@ -207,7 +202,7 @@ var ne = function() {
 );
 const we = re.exports, ie = {
   i18n: {}
-}, le = /* @__PURE__ */ d({
+}, le = /* @__PURE__ */ c({
   ...ie,
   __name: "summary-grid-item-percentage",
   props: {
@@ -227,11 +222,11 @@ const we = re.exports, ie = {
   },
   emits: ["copy-click", "info-icon-mouseenter"],
   setup(r) {
-    const e = r, { locale: o } = G(), t = p(), n = m(t), i = {
+    const e = r, { locale: o } = G(), t = d(), n = p(t), i = {
       style: "percent",
       maximumFractionDigits: 2
-    }, u = (l) => l != null && l !== "" && !isNaN(Number(l)), s = (l) => l && u(l) ? new Intl.NumberFormat(o.value, i).format(Number(l) / 100) : l, _ = a(() => s(e.label)), c = a(() => s(e.secondaryMetric));
-    return { __sfc: !0, locale: o, props: e, slots: t, hasSlot: n, percentageArgs: i, isNumeric: u, convertToPercentIfNumber: s, computedLabelPercentage: _, computedSecondaryMetricPercentage: c, SummaryGridItem: y };
+    }, u = (s) => s != null && s !== "" && !isNaN(Number(s)), l = (s) => s && u(s) ? new Intl.NumberFormat(o.value, i).format(Number(s) / 100) : s, _ = a(() => l(e.label)), y = a(() => l(e.secondaryMetric));
+    return { __sfc: !0, locale: o, props: e, slots: t, hasSlot: n, percentageArgs: i, isNumeric: u, convertToPercentIfNumber: l, computedLabelPercentage: _, computedSecondaryMetricPercentage: y, SummaryGridItem: f };
   }
 });
 var se = function() {
@@ -245,7 +240,7 @@ var se = function() {
   }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
     return [e._v(" " + e._s(t.computedSecondaryMetricPercentage) + " ")];
   }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(t.computedLabelPercentage) + " ")]);
-}, ae = [], ue = /* @__PURE__ */ f(
+}, ae = [], ue = /* @__PURE__ */ m(
   le,
   se,
   ae,
@@ -253,7 +248,7 @@ var se = function() {
   null,
   null
 );
-const Le = ue.exports, ce = {}, de = /* @__PURE__ */ d({
+const Le = ue.exports, ce = {}, de = /* @__PURE__ */ c({
   ...ce,
   __name: "summary-grid-item-text",
   props: {
@@ -267,8 +262,8 @@ const Le = ue.exports, ce = {}, de = /* @__PURE__ */ d({
   },
   emits: ["copy-click", "info-icon-mouseenter"],
   setup(r) {
-    const e = p(), o = m(e);
-    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+    const e = d(), o = p(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: f };
   }
 });
 var pe = function() {
@@ -280,7 +275,7 @@ var pe = function() {
   } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
     return [e._t("dashed-underline")];
   }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
-}, me = [], fe = /* @__PURE__ */ f(
+}, me = [], fe = /* @__PURE__ */ m(
   de,
   pe,
   me,
@@ -288,7 +283,7 @@ var pe = function() {
   null,
   null
 );
-const Ee = fe.exports, _e = {}, ye = /* @__PURE__ */ d({
+const Ee = fe.exports, _e = {}, ye = /* @__PURE__ */ c({
   ..._e,
   __name: "summary-grid-item-custom",
   props: {
@@ -301,8 +296,8 @@ const Ee = fe.exports, _e = {}, ye = /* @__PURE__ */ d({
   },
   emits: ["copy-click", "info-icon-mouseenter"],
   setup(r) {
-    const e = p(), o = m(e);
-    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+    const e = d(), o = p(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: f };
   }
 });
 var ve = function() {
@@ -314,7 +309,7 @@ var ve = function() {
   } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
     return [e._t("dashed-underline")];
   }, proxy: !0 } : null], null, !0) }, [e._t("default")], 2);
-}, Te = [], he = /* @__PURE__ */ f(
+}, Te = [], he = /* @__PURE__ */ m(
   ye,
   ve,
   Te,
@@ -334,4 +329,4 @@ export {
   ge as f,
   Re as s
 };
-//# sourceMappingURL=summary-grid.types.BcIlkfVO.js.map
+//# sourceMappingURL=summary-grid.types.B_gUEQ0c.js.map

package/dist/chunks/{summary-grid.types.BcIlkfVO.js.map → summary-grid.types.B_gUEQ0c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"summary-grid.types.BcIlkfVO.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal/grid-layout';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" @click=\"$emit('copy-click', $event)\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                    @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <bento-typography\n                v-if=\"secondaryLabel\"\n                variant=\"caption\"\n                class=\"b-summary-grid-item-amount__secondary-label\"\n                >{{ secondaryLabel }}</bento-typography\n            >\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ computedLabelPercentage }}\n        <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n    import type { NumberFormatOptions } from 'vue-i18n';\n\n    const { locale } = useI18n();\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const percentageArgs: NumberFormatOptions = {\n        style: 'percent',\n        maximumFractionDigits: 2,\n    };\n\n    const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value));\n    const convertToPercentIfNumber = (value: string | number) => {\n        if (value && isNumeric(value)) {\n            return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n        }\n        return value;\n    };\n\n    const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n    const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: {},\n    };\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}
+{"version":3,"file":"summary-grid.types.B_gUEQ0c.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal/grid-layout';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" @click=\"$emit('copy-click', $event)\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                    @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <bento-typography\n                v-if=\"secondaryLabel\"\n                variant=\"caption\"\n                class=\"b-summary-grid-item-amount__secondary-label\"\n                >{{ secondaryLabel }}</bento-typography\n            >\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ computedLabelPercentage }}\n        <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n    import type { NumberFormatOptions } from 'vue-i18n';\n\n    const { locale } = useI18n();\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const percentageArgs: NumberFormatOptions = {\n        style: 'percent',\n        maximumFractionDigits: 2,\n    };\n\n    const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value));\n    const convertToPercentIfNumber = (value: string | number) => {\n        if (value && isNumeric(value)) {\n            return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n        }\n        return value;\n    };\n\n    const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n    const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: {},\n    };\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}

package/dist/chunks/tab.DFk4K9cq.js

@@ -0,0 +1,229 @@
+import { defineComponent as B, ref as f, provide as I, watch as E, nextTick as x, computed as m, unref as $, onUnmounted as N, toRefs as j, inject as k } from "vue";
+import { B as G } from "./typography.D1OZJbEa.js";
+import { B as J } from "./tag.BC7FFENr.js";
+import { C as U } from "./cross-circle-fill.DTDtgLMf.js";
+import { u as z } from "./index.CPOlyau9.js";
+import { g as M } from "./generate-uid.DBWe4g6T.js";
+import { T as A, a as R, E as q } from "./tabs.keys.B4qGhjp2.js";
+import { F as H } from "./fixed-scroller.oObE3f7m.js";
+import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/tab.css";
+const S = (r, e) => {
+  const a = r === 0 ? e.length - 1 : r - 1, t = e[a];
+  return t.disabled || t.hidden ? S(a, e) : a;
+}, F = (r, e) => {
+  const a = r === e.length - 1 ? 0 : r + 1, t = e[a];
+  return t.disabled || t.hidden ? F(a, e) : a;
+}, Q = {
+  "de-DE": { errorCount: "Fehler | Fehler" },
+  "en-GB": { errorCount: "error | errors" },
+  "en-US": { errorCount: "error | errors" },
+  "es-419": { errorCount: "error | errores" },
+  "es-ES": { errorCount: "error | errores" },
+  "es-MX": { errorCount: "error | errores" },
+  "fr-FR": { errorCount: "erreur | erreurs" },
+  "it-IT": { errorCount: "errore | errori" },
+  "ja-JP": { errorCount: "エラー | エラー" },
+  "pt-BR": { errorCount: "erro | erros" },
+  "zh-CN": { errorCount: "错误 | 错误" }
+};
+var g = /* @__PURE__ */ ((r) => (r.ACTIVE_TAB_INDEX = "update:active-tab-index", r))(g || {});
+const V = B({
+  i18n: { messages: Q },
+  components: {
+    BentoTag: J,
+    BentoTypography: G,
+    CrossCircleFillIcon: U,
+    FixedScroller: H
+  },
+  props: {
+    /**
+     * Sets the active tab by its index (0 being the first tab item).
+     */
+    activeTabIndex: { type: Number, default: 0 },
+    /*
+     * Renders the tab with a sticky positioning.
+     */
+    sticky: { type: Boolean, default: !1 },
+    /**
+     * Additional configurable options for tabs rendered with a sticky positioning.
+     * It must be an object of type {@see BentoStickyTabsOption}
+     * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.
+     */
+    stickyOptions: { type: Object, default: null }
+  },
+  emits: [g.ACTIVE_TAB_INDEX],
+  setup(r, { emit: e }) {
+    const { tc: a } = z(), t = f([]), u = f(null), b = f(), l = f(""), s = f(!1);
+    let c;
+    I(A, l);
+    const _ = (n) => () => {
+      t.value = t.value?.filter(({ id: o }) => o !== n);
+    };
+    I(R, ({
+      title: n,
+      disabled: o,
+      errorCounter: i,
+      withNotificationIndicator: T,
+      counter: L,
+      hidden: W,
+      setElementRef: Y
+    }) => {
+      const h = M("b-tab");
+      return t.value.push({
+        counter: L,
+        disabled: o,
+        errorCounter: i,
+        hidden: W,
+        id: h,
+        title: n,
+        withNotificationIndicator: T,
+        setElementRef: Y
+      }), { id: h, unregisterTab: _(h) };
+    });
+    const d = (n) => {
+      if (n.code === "ArrowLeft" || n.code === "ArrowRight") {
+        const o = t.value.find((T) => document.activeElement.id === T.id);
+        let i = t.value.indexOf(o);
+        n.code === "ArrowLeft" ? i = S(i, t.value) : n.code === "ArrowRight" && (i = F(i, t.value)), u.value.children[i].focus();
+      }
+    };
+    E(
+      [() => r.activeTabIndex, t],
+      ([n, o]) => {
+        x(() => {
+          const i = o[n];
+          l.value = i && !i.disabled ? i.id : t.value.find(({ disabled: T }) => !T)?.id;
+        });
+      },
+      { immediate: !0 }
+    );
+    const C = (n) => {
+      l.value = n;
+      const o = t.value.findIndex(({ id: i }) => i === l.value);
+      e(g.ACTIVE_TAB_INDEX, o);
+    }, y = (n) => n ? "disabled" : !1, v = m(() => r.stickyOptions?.top ? $(r.stickyOptions.top) : 0), D = m(() => r.sticky && v.value > 0 ? !0 : s.value), w = () => {
+      c && (c.disconnect(), c = null), s.value = !1;
+    }, P = (n) => {
+      r.sticky && v.value === 0 && (c = new IntersectionObserver(
+        ([o]) => {
+          s.value = o.intersectionRatio < 1;
+        },
+        { threshold: [1] }
+      ), c.observe(n));
+    };
+    E(
+      [() => r.sticky, b, v],
+      ([n, o]) => {
+        w(), n && o && x(() => P(o));
+      },
+      { immediate: !0 }
+    ), N(() => {
+      w();
+    });
+    const K = m(() => ({
+      "b-tabs__tab-list-wrapper--sticky": r.sticky,
+      "b-tabs__tab-list-wrapper--pinned": D.value
+    })), X = m(
+      () => (
+        // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.
+        // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
+        r.sticky ? {
+          top: `${(r.stickyOptions?.top ?? 0) - 1}px`
+        } : {}
+      )
+    );
+    return {
+      tc: a,
+      tabs: t,
+      tablist: u,
+      tablistwrapper: b,
+      activeTabId: l,
+      tablistWrapperConditionalClasses: K,
+      tablistWrapperStyles: X,
+      onKeydownTabsNavigation: d,
+      handleTabChange: C,
+      isDisabled: y
+    };
+  }
+});
+var Z = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-tabs" }, [a("div", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", class: e.tablistWrapperConditionalClasses, style: e.tablistWrapperStyles }, [a("fixed-scroller", { attrs: { condensed: "", "extra-padding-top": 2 } }, [a("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: e.onKeydownTabsNavigation } }, e._l(e.tabs, function({
+    counter: t,
+    disabled: u,
+    errorCounter: b,
+    hidden: l,
+    id: s,
+    title: c,
+    withNotificationIndicator: _,
+    setElementRef: p
+  }) {
+    return a("button", { directives: [{ name: "show", rawName: "v-show", value: !l, expression: "!hidden" }], key: s, ref: p, refInFor: !0, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": e.activeTabId === s,
+      "b-tabs__tab--disabled": u
+    }, attrs: { id: s, role: "tab", type: "button", "aria-controls": `${s}-tabpanel`, "aria-hidden": l ? "true" : "false", "aria-selected": e.activeTabId === s ? "true" : "false", tabindex: e.activeTabId === s && !u.value ? null : -1, disabled: e.isDisabled(u) }, on: { click: function(d) {
+      return e.handleTabChange(s);
+    }, keydown: function(d) {
+      return !d.type.indexOf("key") && e._k(d.keyCode, "enter", 13, d.key, "Enter") && e._k(d.keyCode, "space", 32, d.key, [" ", "Spacebar"]) ? null : e.handleTabChange(s);
+    } } }, [a("span", { staticClass: "b-tabs__tab-text" }, [a("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(c) + " ")]), t != null ? a("bento-typography", { staticClass: "b-tabs__tab-counter", class: {
+      "b-tabs__tab-counter--active": e.activeTabId === s
+    }, attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(t) + " ")]) : e._e(), b != null ? a("bento-tag", { staticClass: "b-tabs__tab-error-counter", attrs: { variant: "red" }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [a("cross-circle-fill-icon", { attrs: { "aria-hidden": "true" } })];
+    }, proxy: !0 }], null, !0) }, [a("span", [e._v(e._s(b))]), a("span", { staticClass: "b-tabs__visually-hidden" }, [e._v(e._s(e.tc("errorCount", b)))])]) : e._e(), _ ? a("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : e._e()], 1), a("span", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === s, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
+  }), 0)])], 1), e._t("default")], 2);
+}, ee = [], te = /* @__PURE__ */ O(
+  V,
+  Z,
+  ee,
+  !1,
+  null,
+  "c941b744"
+);
+const ve = te.exports, ae = {
+  name: "bento-tab"
+}, re = /* @__PURE__ */ B({
+  ...ae,
+  props: {
+    counter: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    errorCounter: { default: null },
+    hidden: { type: Boolean, default: !1 },
+    title: null,
+    withNotificationIndicator: { type: Boolean, default: !1 },
+    setElementRef: { type: Function, default: void 0 }
+  },
+  setup(r) {
+    const e = r, { counter: a, disabled: t, errorCounter: u, hidden: b, withNotificationIndicator: l } = j(e), s = f(), c = (v) => {
+      s.value = v;
+    };
+    I(q, c);
+    const _ = m(() => s.value ?? e.title), p = k(R), d = k(A), { id: C, unregisterTab: y } = p({
+      counter: a,
+      disabled: t,
+      errorCounter: u,
+      hidden: b,
+      title: _,
+      withNotificationIndicator: l,
+      setElementRef: e.setElementRef
+    });
+    return N(() => y()), { __sfc: !0, props: e, counter: a, disabled: t, errorCounter: u, hidden: b, withNotificationIndicator: l, componentTitle: s, setTitle: c, computedTitle: _, registerTab: p, activeTabId: d, id: C, unregisterTab: y };
+  }
+});
+var se = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("div", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === t.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${t.id}-tabpanel`, role: "tabpanel", "aria-labelledby": t.id } }, [t.activeTabId === t.id ? [e._t("default")] : e._e()], 2);
+}, ne = [], oe = /* @__PURE__ */ O(
+  re,
+  se,
+  ne,
+  !1,
+  null,
+  "95343e8e"
+);
+const Te = oe.exports;
+export {
+  Te as B,
+  ve as a
+};
+//# sourceMappingURL=tab.DFk4K9cq.js.map