@adyen/bento-vue2 1.81.0 → 1.82.0

package/dist/chunks/summary-grid.types.B0w2S_9r.js

@@ -0,0 +1,337 @@
+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 { 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.hlOAxsEn.js";
+import { u as G } from "./index.B6WW_F-J.js";
+import { B as w } from "./dashed-underline.CMdNukpN.js";
+import { B as L } from "./info-icon.iKLaNff6.js";
+import { B as E } from "./tag.7fp_M9Au.js";
+import { C as N } from "./copy.DauzzgJV.js";
+import "../assets/summary-grid.css";
+const A = {}, F = /* @__PURE__ */ d({
+  ...A,
+  __name: "summary-grid",
+  props: {
+    columnWidth: { default: null },
+    slashedZero: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    var u, s;
+    const e = r, o = p(), t = m(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(..._);
+    }
+    k(() => {
+      if (n > 3)
+        throw new Error(
+          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
+        );
+    });
+    const i = () => ({ isSummaryGridLayout: !0 });
+    return h(M, i), h(x, z(e, "slashedZero")), { __sfc: !0, props: e, slots: o, hasSlot: t, numberOfRows: n, registerComponentsInSummaryGrid: i, GridLayout: R };
+  }
+});
+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 [e._t(`cell-${n}-1`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-2`) ? { key: "col-2", fn: function() {
+      return [e._t(`cell-${n}-2`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-3`) ? { key: "col-3", fn: function() {
+      return [e._t(`cell-${n}-3`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-4`) ? { key: "col-4", fn: function() {
+      return [e._t(`cell-${n}-4`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-5`) ? { key: "col-5", fn: function() {
+      return [e._t(`cell-${n}-5`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-6`) ? { key: "col-6", fn: function() {
+      return [e._t(`cell-${n}-6`)];
+    }, proxy: !0 } : null], null, !0) });
+  }), 1);
+}, O = [], V = /* @__PURE__ */ f(
+  F,
+  U,
+  O,
+  !1,
+  null,
+  "397e4d9c"
+);
+const Re = V.exports, Y = {}, Z = /* @__PURE__ */ d({
+  ...Y,
+  __name: "summary-grid-item",
+  props: {
+    copy: { default: void 0 },
+    fitContent: { type: Boolean, default: !1 },
+    infoIconTooltipText: { default: null },
+    size: { default: "small" },
+    title: null,
+    trend: { default: null },
+    trendDirection: { default: "positive" },
+    secondaryTrend: { default: null },
+    secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    itemType: { default: "custom" }
+  },
+  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) => {
+      switch (I) {
+        case "positive":
+          return "green";
+        case "negative":
+          return "red";
+        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(() => ({
+      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 };
+  }
+});
+var j = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "b-summary-grid-item", class: t.conditionalClasses, style: t.computedStyles }, [o("div", { staticClass: "b-summary-grid-item__header" }, [o(t.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { el: "span", variant: "body" } }, [t.withUnderline ? o(t.BentoDashedUnderline, { attrs: { "tooltip-text": e.underlineTooltipText, "popover-size": e.underlinePopoverSize }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "popover-content", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.title) + " ")]) : [e._v(" " + e._s(e.title) + " ")]], 2), o("div", { staticClass: "b-summary-grid-item__title-icons" }, [e.copy ? o(t.Copy, { staticClass: "b-structured-list__icon", attrs: { text: e.copy }, on: { click: function(n) {
+    return e.$emit("copy-click", n);
+  } } }) : 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(
+  Z,
+  j,
+  H,
+  !1,
+  null,
+  "cc6736c0"
+);
+const y = W.exports, J = {}, K = /* @__PURE__ */ d({
+  ...J,
+  __name: "summary-grid-item-amount",
+  props: {
+    copy: { default: void 0 },
+    fitContent: { type: Boolean, default: !1 },
+    infoIconTooltipText: { default: null },
+    size: { default: "small" },
+    title: null,
+    trend: { default: null },
+    trendDirection: { default: "positive" },
+    secondaryTrend: { default: null },
+    secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    label: null,
+    secondaryLabel: { default: null },
+    secondaryMetric: { default: null }
+  },
+  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 };
+  }
+});
+var q = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-amount", attrs: { "item-type": "amount", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, 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(
+  K,
+  q,
+  Q,
+  !1,
+  null,
+  "c060d827"
+);
+const Ge = X.exports, ee = {}, te = /* @__PURE__ */ d({
+  ...ee,
+  __name: "summary-grid-item-numeric",
+  props: {
+    copy: { default: void 0 },
+    fitContent: { type: Boolean, default: !1 },
+    infoIconTooltipText: { default: null },
+    size: { default: "small" },
+    title: null,
+    trend: { default: null },
+    trendDirection: { default: "positive" },
+    secondaryTrend: { default: null },
+    secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    label: null,
+    secondaryMetric: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var ne = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-numeric", attrs: { "item-type": "numeric", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, 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(
+  te,
+  ne,
+  oe,
+  !1,
+  null,
+  null
+);
+const we = re.exports, ie = {
+  i18n: {}
+}, le = /* @__PURE__ */ d({
+  ...ie,
+  __name: "summary-grid-item-percentage",
+  props: {
+    copy: { default: void 0 },
+    fitContent: { type: Boolean, default: !1 },
+    infoIconTooltipText: { default: null },
+    size: { default: "small" },
+    title: null,
+    trend: { default: null },
+    trendDirection: { default: "positive" },
+    secondaryTrend: { default: null },
+    secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    label: null,
+    secondaryMetric: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = r, { locale: o } = G(), t = p(), n = m(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 };
+  }
+});
+var se = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-percentage", attrs: { "item-type": "percentage", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, 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(
+  le,
+  se,
+  ae,
+  !1,
+  null,
+  null
+);
+const Le = ue.exports, ce = {}, de = /* @__PURE__ */ d({
+  ...ce,
+  __name: "summary-grid-item-text",
+  props: {
+    copy: { default: void 0 },
+    fitContent: { type: Boolean, default: !1 },
+    infoIconTooltipText: { default: null },
+    label: null,
+    title: null,
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var pe = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-text", attrs: { "item-type": "text", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, 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(
+  de,
+  pe,
+  me,
+  !1,
+  null,
+  null
+);
+const Ee = fe.exports, _e = {}, ye = /* @__PURE__ */ d({
+  ..._e,
+  __name: "summary-grid-item-custom",
+  props: {
+    copy: { default: void 0 },
+    infoIconTooltipText: { default: null },
+    title: null,
+    fitContent: { type: Boolean, default: !1 },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var ve = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { attrs: { title: e.title, "info-icon-tooltip-text": e.infoIconTooltipText, copy: e.copy, "fit-content": e.fitContent, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, 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(
+  ye,
+  ve,
+  Te,
+  !1,
+  null,
+  null
+);
+const Ne = he.exports;
+var xe = /* @__PURE__ */ ((r) => (r.SMALL = "small", r.MEDIUM = "medium", r.LARGE = "large", r))(xe || {}), ge = /* @__PURE__ */ ((r) => (r.POSITIVE = "positive", r.NEGATIVE = "negative", r.NEUTRAL = "neutral", r))(ge || {});
+export {
+  xe as B,
+  Ge as a,
+  we as b,
+  Le as c,
+  Ee as d,
+  Ne as e,
+  ge as f,
+  Re as s
+};
+//# sourceMappingURL=summary-grid.types.B0w2S_9r.js.map

package/dist/chunks/summary-grid.types.B0w2S_9r.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-grid.types.B0w2S_9r.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';\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 for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the 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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"}

package/dist/chunks/tab.DXE68qVf.js

@@ -0,0 +1,192 @@
+import { defineComponent as A, ref as v, provide as w, watch as g, nextTick as k, computed as f, unref as W, onUnmounted as N, toRefs as X, inject as E } from "vue";
+import { B as Y } from "./typography.hlOAxsEn.js";
+import { g as $ } from "./generate-uid.NJ8tVoha.js";
+import { T as B, a as O, E as j } from "./tabs.keys.B4qGhjp2.js";
+import { F as G } from "./fixed-scroller.CgVOf5VE.js";
+import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/tab.css";
+const S = (s, t) => {
+  const e = s === 0 ? t.length - 1 : s - 1, n = t[e];
+  return n.disabled || n.hidden ? S(e, t) : e;
+}, D = (s, t) => {
+  const e = s === t.length - 1 ? 0 : s + 1, n = t[e];
+  return n.disabled || n.hidden ? D(e, t) : e;
+};
+var C = /* @__PURE__ */ ((s) => (s.ACTIVE_TAB_INDEX = "update:active-tab-index", s))(C || {});
+const J = A({
+  components: {
+    BentoTypography: Y,
+    FixedScroller: G
+  },
+  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: [C.ACTIVE_TAB_INDEX],
+  setup(s, { emit: t }) {
+    const e = v([]), n = v(null), b = v(), l = v(""), i = v(!1);
+    let c;
+    w(B, l);
+    const u = (a) => () => {
+      var r;
+      e.value = (r = e.value) == null ? void 0 : r.filter(({ id: o }) => o !== a);
+    };
+    w(O, ({
+      title: a,
+      disabled: r,
+      withNotificationIndicator: o,
+      counter: _,
+      hidden: I
+    }) => {
+      const h = $("b-tab");
+      return e.value.push({ counter: _, disabled: r, hidden: I, id: h, title: a, withNotificationIndicator: o }), { id: h, unregisterTab: u(h) };
+    });
+    const y = (a) => {
+      if (a.code === "ArrowLeft" || a.code === "ArrowRight") {
+        const r = e.value.find((_) => document.activeElement.id === _.id);
+        let o = e.value.indexOf(r);
+        a.code === "ArrowLeft" ? o = S(o, e.value) : a.code === "ArrowRight" && (o = D(o, e.value)), n.value.children[o].focus();
+      }
+    };
+    g(
+      [() => s.activeTabIndex, e],
+      ([a, r]) => {
+        k(() => {
+          var _;
+          const o = r[a];
+          l.value = o && !o.disabled ? o.id : (_ = e.value.find(({ disabled: I }) => !I)) == null ? void 0 : _.id;
+        });
+      },
+      { immediate: !0 }
+    );
+    const m = (a) => {
+      l.value = a;
+      const r = e.value.findIndex(({ id: o }) => o === l.value);
+      t(C.ACTIVE_TAB_INDEX, r);
+    }, T = (a) => a ? "disabled" : !1, p = f(() => {
+      var a;
+      return (a = s.stickyOptions) != null && a.top ? W(s.stickyOptions.top) : 0;
+    }), K = f(() => s.sticky && p.value > 0 ? !0 : i.value), x = () => {
+      c && (c.disconnect(), c = null), i.value = !1;
+    }, P = (a) => {
+      s.sticky && p.value === 0 && (c = new IntersectionObserver(
+        ([r]) => {
+          i.value = r.intersectionRatio < 1;
+        },
+        { threshold: [1] }
+      ), c.observe(a));
+    };
+    g(
+      [() => s.sticky, b, p],
+      ([a, r]) => {
+        x(), a && r && k(() => P(r));
+      },
+      { immediate: !0 }
+    ), N(() => {
+      x();
+    });
+    const F = f(() => ({
+      "b-tabs__tab-list-wrapper--sticky": s.sticky,
+      "b-tabs__tab-list-wrapper--pinned": K.value
+    })), L = f(
+      () => {
+        var a;
+        return (
+          // 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/
+          s.sticky ? {
+            top: `${(((a = s.stickyOptions) == null ? void 0 : a.top) ?? 0) - 1}px`
+          } : {}
+        );
+      }
+    );
+    return {
+      tabs: e,
+      tablist: n,
+      tablistwrapper: b,
+      activeTabId: l,
+      tablistWrapperConditionalClasses: F,
+      tablistWrapperStyles: L,
+      onKeydownTabsNavigation: y,
+      handleTabChange: m,
+      isDisabled: T
+    };
+  }
+});
+var U = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-tabs" }, [e("div", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", class: t.tablistWrapperConditionalClasses, style: t.tablistWrapperStyles }, [e("fixed-scroller", { attrs: { condensed: "", "extra-padding-top": 2 } }, [e("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({ counter: n, disabled: b, hidden: l, id: i, title: c, withNotificationIndicator: u }) {
+    return e("button", { directives: [{ name: "show", rawName: "v-show", value: !l, expression: "!hidden" }], key: i, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": t.activeTabId === i,
+      "b-tabs__tab--disabled": b
+    }, attrs: { id: i, role: "tab", type: "button", "aria-controls": `${i}-tabpanel`, "aria-hidden": l ? "true" : "false", "aria-selected": t.activeTabId === i ? "true" : "false", tabindex: t.activeTabId === i && !b.value ? null : -1, disabled: t.isDisabled(b) }, on: { click: function(d) {
+      return t.handleTabChange(i);
+    }, keydown: function(d) {
+      return !d.type.indexOf("key") && t._k(d.keyCode, "enter", 13, d.key, "Enter") && t._k(d.keyCode, "space", 32, d.key, [" ", "Spacebar"]) ? null : t.handleTabChange(i);
+    } } }, [e("span", { staticClass: "b-tabs__tab-text" }, [e("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(c) + " ")]), n != null ? e("bento-typography", { staticClass: "b-tabs__tab-counter", class: {
+      "b-tabs__tab-counter--active": t.activeTabId === i
+    }, attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(n) + " ")]) : t._e(), u ? e("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : t._e()], 1), e("span", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === i, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
+  }), 0)])], 1), t._t("default")], 2);
+}, z = [], q = /* @__PURE__ */ R(
+  J,
+  U,
+  z,
+  !1,
+  null,
+  "e742a127"
+);
+const rt = q.exports, H = {
+  name: "bento-tab"
+}, M = /* @__PURE__ */ A({
+  ...H,
+  props: {
+    counter: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    title: null,
+    withNotificationIndicator: { type: Boolean, default: !1 }
+  },
+  setup(s) {
+    const t = s, { counter: e, disabled: n, hidden: b, withNotificationIndicator: l } = X(t), i = v(), c = (p) => {
+      i.value = p;
+    };
+    w(j, c);
+    const u = f(() => i.value ?? t.title), d = E(O), y = E(B), { id: m, unregisterTab: T } = d({
+      counter: e,
+      disabled: n,
+      hidden: b,
+      title: u,
+      withNotificationIndicator: l
+    });
+    return N(() => T()), { __sfc: !0, props: t, counter: e, disabled: n, hidden: b, withNotificationIndicator: l, componentTitle: i, setTitle: c, computedTitle: u, registerTab: d, activeTabId: y, id: m, unregisterTab: T };
+  }
+});
+var Q = function() {
+  var t = this, e = t._self._c, n = t._self._setupProxy;
+  return e("div", { directives: [{ name: "show", rawName: "v-show", value: n.activeTabId === n.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${n.id}-tabpanel`, role: "tabpanel", "aria-labelledby": n.id } }, [n.activeTabId === n.id ? [t._t("default")] : t._e()], 2);
+}, V = [], Z = /* @__PURE__ */ R(
+  M,
+  Q,
+  V,
+  !1,
+  null,
+  "2118a644"
+);
+const ot = Z.exports;
+export {
+  rt as B,
+  ot as a
+};
+//# sourceMappingURL=tab.DXE68qVf.js.map