@adyen/bento-vue3 1.52.0 → 1.53.0

package/dist/chunks/{summary-grid-item-custom.DTCzOBBy.js → summary-grid-item-custom.ACP0RH0N.js}

@@ -1,16 +1,17 @@
-import { defineComponent as T, provide as M, toRef as G, resolveComponent as m, createElementBlock as E, openBlock as i, Fragment as N, renderList as q, createBlock as u, createSlots as O, withCtx as r, renderSlot as f, toRefs as U, inject as Y, ref as Z, computed as v, normalizeStyle as H, normalizeClass as W, createElementVNode as C, createVNode as V, createCommentVNode as $, createTextVNode as S, toDisplayString as g, mergeProps as X } from "vue";
-import { u as k } from "./use-has-slot.B7eQSabc.js";
-import { S as F, a as A } from "./summary-grid.keys.CxTf_FOc.js";
-import { G as J } from "./grid-layout.BTLE3rac.js";
+import { defineComponent as v, provide as D, toRef as q, resolveComponent as m, createElementBlock as _, openBlock as a, Fragment as R, renderList as Y, createBlock as p, createSlots as h, withCtx as o, renderSlot as l, toRefs as Z, inject as H, ref as W, computed as S, normalizeStyle as X, normalizeClass as F, createElementVNode as L, createVNode as B, createCommentVNode as I, createTextVNode as T, toDisplayString as y, mergeProps as J } from "vue";
+import { u as $ } from "./use-has-slot.B7eQSabc.js";
+import { S as K, a as w } from "./summary-grid.keys.CxTf_FOc.js";
+import { G as Q } from "./grid-layout.BTLE3rac.js";
 import { _ as b } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as K } from "./info-icon.L8AexnZg.js";
-import { B as Q, a as D } from "./typography.DN5eC5ch.js";
-import { B as x, a as L } from "./tag.B1hW92hG.js";
-import { C as ee } from "./copy.gmSTAqHY.js";
+import { B as x } from "./dashed-underline.BuCIjMch.js";
+import { B as ee } from "./info-icon.DxOAiUg4.js";
+import { B as te, a as A } from "./typography.DN5eC5ch.js";
+import { B as ne, a as M } from "./tag.DVkBzXMx.js";
+import { C as oe } from "./copy.BYG9aoNO.js";
 import "../assets/summary-grid-item-custom.css";
-const te = T({
+const re = v({
   name: "bento-summary-grid",
-  components: { GridLayout: J },
+  components: { GridLayout: Q },
   props: {
     /**
      * Sets the responsive columns widths values for 1 of the 3 rows.
@@ -24,74 +25,74 @@ const te = T({
      */
     slashedZero: { type: Boolean, default: !1 }
   },
-  setup(e, { slots: a }) {
-    var c, s;
-    let d = 1;
-    if (a) {
-      const n = (s = (c = Object.keys(a)) == null ? void 0 : c.filter((t) => t.includes("cell-"))) == null ? void 0 : s.map((t) => {
-        var y;
-        return parseInt((y = t.split("-")) == null ? void 0 : y[1], 10);
+  setup(e, { slots: n }) {
+    var c, d;
+    let u = 1;
+    if (n) {
+      const i = (d = (c = Object.keys(n)) == null ? void 0 : c.filter((t) => t.includes("cell-"))) == null ? void 0 : d.map((t) => {
+        var g;
+        return parseInt((g = t.split("-")) == null ? void 0 : g[1], 10);
       });
-      if (d = Math.max(...n), d > 3)
+      if (u = Math.max(...i), u > 3)
         throw new Error(
           "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
         );
     }
-    return M(F, () => ({ isSummaryGridLayout: !0 })), M(A, G(e, "slashedZero")), {
-      hasSlot: k(a),
-      numberOfRows: d
+    return D(K, () => ({ isSummaryGridLayout: !0 })), D(w, q(e, "slashedZero")), {
+      hasSlot: $(n),
+      numberOfRows: u
     };
   }
-}), ne = { class: "b-summary-grid" };
-function oe(e, a, d, p, c, s) {
-  const n = m("grid-layout");
-  return i(), E("div", ne, [
-    (i(!0), E(N, null, q(e.numberOfRows, (t) => {
-      var y;
-      return i(), u(n, {
+}), ie = { class: "b-summary-grid" };
+function ae(e, n, u, f, c, d) {
+  const i = m("grid-layout");
+  return a(), _("div", ie, [
+    (a(!0), _(R, null, Y(e.numberOfRows, (t) => {
+      var g;
+      return a(), p(i, {
         key: `summary-grid-row-${t}`,
         "data-testid": `summary-grid-row-${t}`,
-        "column-width": (y = e.columnWidth) == null ? void 0 : y[`row${t}`]
-      }, O({ _: 2 }, [
+        "column-width": (g = e.columnWidth) == null ? void 0 : g[`row${t}`]
+      }, h({ _: 2 }, [
         e.hasSlot(`cell-${t}-1`) ? {
           name: "col-1",
-          fn: r(() => [
-            f(e.$slots, `cell-${t}-1`, {}, void 0, !0)
+          fn: o(() => [
+            l(e.$slots, `cell-${t}-1`, {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.hasSlot(`cell-${t}-2`) ? {
           name: "col-2",
-          fn: r(() => [
-            f(e.$slots, `cell-${t}-2`, {}, void 0, !0)
+          fn: o(() => [
+            l(e.$slots, `cell-${t}-2`, {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.hasSlot(`cell-${t}-3`) ? {
           name: "col-3",
-          fn: r(() => [
-            f(e.$slots, `cell-${t}-3`, {}, void 0, !0)
+          fn: o(() => [
+            l(e.$slots, `cell-${t}-3`, {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.hasSlot(`cell-${t}-4`) ? {
           name: "col-4",
-          fn: r(() => [
-            f(e.$slots, `cell-${t}-4`, {}, void 0, !0)
+          fn: o(() => [
+            l(e.$slots, `cell-${t}-4`, {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.hasSlot(`cell-${t}-5`) ? {
           name: "col-5",
-          fn: r(() => [
-            f(e.$slots, `cell-${t}-5`, {}, void 0, !0)
+          fn: o(() => [
+            l(e.$slots, `cell-${t}-5`, {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.hasSlot(`cell-${t}-6`) ? {
           name: "col-6",
-          fn: r(() => [
-            f(e.$slots, `cell-${t}-6`, {}, void 0, !0)
+          fn: o(() => [
+            l(e.$slots, `cell-${t}-6`, {}, void 0, !0)
           ]),
           key: "5"
         } : void 0
@@ -99,11 +100,11 @@ function oe(e, a, d, p, c, s) {
     }), 128))
   ]);
 }
-const Me = /* @__PURE__ */ b(te, [["render", oe], ["__scopeId", "data-v-0a9985aa"]]);
-var l = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(l || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), h = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(h || {});
-const re = T({
+const Be = /* @__PURE__ */ b(re, [["render", ae], ["__scopeId", "data-v-0a9985aa"]]);
+var s = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(s || {}), r = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(r || {}), O = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(O || {});
+const le = v({
   name: "summary-grid-item",
-  components: { BentoInfoIcon: K, BentoTypography: Q, BentoTag: x, Copy: ee },
+  components: { BentoDashedUnderline: x, BentoInfoIcon: ee, BentoTypography: te, BentoTag: ne, Copy: oe },
   props: {
     /**
      * Text to copy to the clipboard
@@ -115,8 +116,8 @@ const re = T({
     // TODO add text truncation for SummaryGridItemType.TEXT
     itemType: {
       type: String,
-      default: h.CUSTOM,
-      validator: (e) => Object.values(h).includes(e)
+      default: O.CUSTOM,
+      validator: (e) => Object.values(O).includes(e)
     },
     /**
      * Text showed in the info-icon tooltip on hover
@@ -137,8 +138,8 @@ const re = T({
     // TODO implement logic for Large size
     size: {
       type: String,
-      default: l.SMALL,
-      validator: (e) => Object.values(l).includes(e)
+      default: s.SMALL,
+      validator: (e) => Object.values(s).includes(e)
     },
     /**
      * Shows colored trend label next to text content
@@ -152,8 +153,8 @@ const re = T({
      */
     trendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Shows colored trend tag next to secondary metric value
@@ -167,89 +168,112 @@ const re = T({
      */
     secondaryTrendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
-    }
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
+    },
+    /**
+     * Text showed in a dashed-underline title tooltip on hover
+     */
+    underlineTooltipText: { type: String, default: null }
   },
-  setup(e, { slots: a }) {
-    const { trendDirection: d, secondaryTrendDirection: p, itemType: c, size: s } = U(e), n = Y(A, Z(!1)), t = (P) => {
-      switch (P) {
-        case o.POSITIVE:
-          return L.GREEN;
-        case o.NEGATIVE:
-          return L.RED;
+  setup(e, { slots: n }) {
+    const { trendDirection: u, secondaryTrendDirection: f, itemType: c, size: d } = Z(e), i = H(w, W(!1)), t = (U) => {
+      switch (U) {
+        case r.POSITIVE:
+          return M.GREEN;
+        case r.NEGATIVE:
+          return M.RED;
         default:
-          return L.BLUE;
+          return M.BLUE;
       }
-    }, y = v(() => t(d.value)), I = v(() => t(p.value)), B = v(() => s.value === l.SMALL ? D.BODY : c.value !== h.TEXT ? D.TITLE : null), R = v(() => ({
-      medium: s.value === l.LARGE,
-      strongest: s.value === l.SMALL,
-      wide: s.value === l.SMALL,
-      variant: B.value
-    })), j = v(() => e.fitContent ? { width: "fit-content" } : {}), w = v(() => ({ "b-summary-grid-item--slashed-zero": n.value })), z = v(() => ({
+    }, g = S(() => t(u.value)), k = S(() => t(f.value)), C = S(() => d.value === s.SMALL ? A.BODY : c.value !== O.TEXT ? A.TITLE : null), j = S(() => ({
+      medium: d.value === s.LARGE,
+      strongest: d.value === s.SMALL,
+      wide: d.value === s.SMALL,
+      variant: C.value
+    })), z = S(() => e.fitContent ? { width: "fit-content" } : {}), P = S(() => ({ "b-summary-grid-item--slashed-zero": i.value })), G = S(() => ({
       [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
-    }));
+    })), V = $(n), N = S(() => e.underlineTooltipText || V("dashed-underline"));
     return {
       // Values
-      trendVariant: y,
-      secondaryTrendVariant: I,
-      typographyProps: R,
+      trendVariant: g,
+      secondaryTrendVariant: k,
+      typographyProps: j,
+      withUnderline: N,
       // Styles
-      conditionalClasses: w,
-      computedStyles: j,
-      summaryBarItemTrendConditionalClasses: z,
+      conditionalClasses: P,
+      computedStyles: z,
+      summaryBarItemTrendConditionalClasses: G,
       // Utils
-      hasSlot: k(a)
+      hasSlot: V
     };
   }
-}), ie = { class: "b-summary-grid-item__header" }, ae = { class: "b-summary-grid-item__title-icons" };
-function se(e, a, d, p, c, s) {
-  const n = m("bento-typography"), t = m("copy"), y = m("bento-info-icon"), I = m("bento-tag");
-  return i(), E("div", {
-    class: W(["b-summary-grid-item", e.conditionalClasses]),
-    style: H(e.computedStyles)
+}), de = { class: "b-summary-grid-item__header" }, se = { class: "b-summary-grid-item__title-icons" };
+function ue(e, n, u, f, c, d) {
+  const i = m("bento-dashed-underline"), t = m("bento-typography"), g = m("copy"), k = m("bento-info-icon"), C = m("bento-tag");
+  return a(), _("div", {
+    class: F(["b-summary-grid-item", e.conditionalClasses]),
+    style: X(e.computedStyles)
   }, [
-    C("div", ie, [
-      V(n, {
+    L("div", de, [
+      B(t, {
         class: "b-summary-grid-item__title",
         el: "span",
         variant: "body"
       }, {
-        default: r(() => [
-          S(g(e.title), 1)
+        default: o(() => [
+          e.withUnderline ? (a(), p(i, {
+            key: 0,
+            "tooltip-text": e.underlineTooltipText
+          }, h({
+            default: o(() => [
+              T(y(e.title) + " ", 1)
+            ]),
+            _: 2
+          }, [
+            e.hasSlot("dashed-underline") ? {
+              name: "popover-content",
+              fn: o(() => [
+                l(e.$slots, "dashed-underline", {}, void 0, !0)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["tooltip-text"])) : (a(), _(R, { key: 1 }, [
+            T(y(e.title), 1)
+          ], 64))
         ]),
-        _: 1
+        _: 3
       }),
-      C("div", ae, [
-        e.copy ? (i(), u(t, {
+      L("div", se, [
+        e.copy ? (a(), p(g, {
           key: 0,
           class: "b-structured-list__icon",
           text: e.copy
-        }, null, 8, ["text"])) : $("", !0),
-        e.infoIconTooltipText ? (i(), u(y, {
+        }, null, 8, ["text"])) : I("", !0),
+        e.infoIconTooltipText ? (a(), p(k, {
           key: 1,
           "tooltip-text": e.infoIconTooltipText,
           "tooltip-position": "top",
           class: "b-summary-grid-item__title-tooltip"
-        }, null, 8, ["tooltip-text"])) : $("", !0)
+        }, null, 8, ["tooltip-text"])) : I("", !0)
       ])
     ]),
-    V(n, X({
+    B(t, J({
       "data-testid": "summary-grid-item-content-typography",
       class: "b-summary-grid-item__title"
     }, e.typographyProps, { el: "span" }), {
-      default: r(() => [
-        f(e.$slots, "default", {}, void 0, !0),
-        e.trend && e.itemType !== "text" ? (i(), u(I, {
+      default: o(() => [
+        l(e.$slots, "default", {}, void 0, !0),
+        e.trend && e.itemType !== "text" ? (a(), p(C, {
           key: 0,
           variant: e.trendVariant,
           label: e.trend,
           class: "b-summary-grid-item__content-trend"
-        }, null, 8, ["variant", "label"])) : $("", !0)
+        }, null, 8, ["variant", "label"])) : I("", !0)
       ]),
       _: 3
     }, 16),
-    e.hasSlot("secondary") ? (i(), u(n, {
+    e.hasSlot("secondary") ? (a(), p(t, {
       key: 0,
       class: "b-summary-grid-item__title",
       "data-testid": "summary-grid-item-secondary-metric-typography",
@@ -257,22 +281,22 @@ function se(e, a, d, p, c, s) {
       variant: "caption",
       stronger: ""
     }, {
-      default: r(() => [
-        f(e.$slots, "secondary", {}, void 0, !0),
-        e.secondaryTrend ? (i(), u(I, {
+      default: o(() => [
+        l(e.$slots, "secondary", {}, void 0, !0),
+        e.secondaryTrend ? (a(), p(C, {
           key: 0,
           variant: e.secondaryTrendVariant,
           label: e.secondaryTrend,
           class: "b-summary-grid-item__content-trend"
-        }, null, 8, ["variant", "label"])) : $("", !0)
+        }, null, 8, ["variant", "label"])) : I("", !0)
       ]),
       _: 3
-    })) : $("", !0)
+    })) : I("", !0)
   ], 6);
 }
-const _ = /* @__PURE__ */ b(re, [["render", se], ["__scopeId", "data-v-09325bfd"]]), le = T({
+const E = /* @__PURE__ */ b(le, [["render", ue], ["__scopeId", "data-v-67400fc8"]]), pe = v({
   name: "bento-summary-grid-item-amount",
-  components: { SummaryGridItem: _ },
+  components: { SummaryGridItem: E },
   props: {
     /**
      * Text to copy to the clipboard
@@ -332,8 +356,8 @@ const _ = /* @__PURE__ */ b(re, [["render", se], ["__scopeId", "data-v-09325bfd"
      */
     trendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -347,25 +371,32 @@ const _ = /* @__PURE__ */ b(re, [["render", se], ["__scopeId", "data-v-09325bfd"
      */
     secondaryTrendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Defines the size of the `summary-grid-item` text content
      */
     size: {
       type: String,
-      default: l.SMALL,
-      validator: (e) => Object.values(l).includes(e)
-    }
+      default: s.SMALL,
+      validator: (e) => Object.values(s).includes(e)
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    underlineTooltipText: { type: String, default: null }
+  },
+  setup(e, { slots: n }) {
+    return { hasSlot: $(n) };
   }
-}), de = { class: "b-summary-grid-item-amount__content" }, ce = {
+}), ce = { class: "b-summary-grid-item-amount__content" }, me = {
   key: 0,
   class: "b-summary-grid-item-amount__secondary-label"
 };
-function ue(e, a, d, p, c, s) {
-  const n = m("summary-grid-item");
-  return i(), u(n, {
+function ye(e, n, u, f, c, d) {
+  const i = m("summary-grid-item");
+  return a(), p(i, {
     "item-type": "amount",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -376,28 +407,36 @@ function ue(e, a, d, p, c, s) {
     "trend-direction": e.trendDirection,
     "secondary-trend": e.secondaryTrend,
     "secondary-trend-direction": e.secondaryTrendDirection,
+    "underline-tooltip-text": e.underlineTooltipText,
     class: "b-summary-grid-item-amount"
-  }, O({
-    default: r(() => [
-      C("div", de, [
-        C("div", null, g(e.label), 1),
-        e.secondaryLabel ? (i(), E("div", ce, g(e.secondaryLabel), 1)) : $("", !0)
+  }, h({
+    default: o(() => [
+      L("div", ce, [
+        L("div", null, y(e.label), 1),
+        e.secondaryLabel ? (a(), _("div", me, y(e.secondaryLabel), 1)) : I("", !0)
       ])
     ]),
     _: 2
   }, [
+    e.hasSlot("dashed-underline") ? {
+      name: "dashed-underline",
+      fn: o(() => [
+        l(e.$slots, "dashed-underline", {}, void 0, !0)
+      ]),
+      key: "0"
+    } : void 0,
     e.secondaryMetric ? {
       name: "secondary",
-      fn: r(() => [
-        S(g(e.secondaryMetric), 1)
+      fn: o(() => [
+        T(y(e.secondaryMetric), 1)
       ]),
-      key: "0"
+      key: "1"
     } : void 0
-  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-tooltip-text"]);
 }
-const Ve = /* @__PURE__ */ b(le, [["render", ue], ["__scopeId", "data-v-fd1debe6"]]), me = T({
+const Ae = /* @__PURE__ */ b(pe, [["render", ye], ["__scopeId", "data-v-f4b5a860"]]), fe = v({
   name: "bento-summary-grid-item-numeric",
-  components: { SummaryGridItem: _ },
+  components: { SummaryGridItem: E },
   props: {
     /**
      * Text to copy to the clipboard
@@ -450,8 +489,8 @@ const Ve = /* @__PURE__ */ b(le, [["render", ue], ["__scopeId", "data-v-fd1debe6
      */
     trendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -465,22 +504,29 @@ const Ve = /* @__PURE__ */ b(le, [["render", ue], ["__scopeId", "data-v-fd1debe6
      */
     secondaryTrendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Defines the size of the `summary-grid-item` text content
      */
     size: {
       type: String,
-      default: l.SMALL,
-      validator: (e) => Object.values(l).includes(e)
-    }
+      default: s.SMALL,
+      validator: (e) => Object.values(s).includes(e)
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    underlineTooltipText: { type: String, default: null }
+  },
+  setup(e, { slots: n }) {
+    return { hasSlot: $(n) };
   }
 });
-function pe(e, a, d, p, c, s) {
-  const n = m("summary-grid-item");
-  return i(), u(n, {
+function ge(e, n, u, f, c, d) {
+  const i = m("summary-grid-item");
+  return a(), p(i, {
     "item-type": "numeric",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -491,25 +537,33 @@ function pe(e, a, d, p, c, s) {
     "trend-direction": e.trendDirection,
     "secondary-trend": e.secondaryTrend,
     "secondary-trend-direction": e.secondaryTrendDirection,
+    "underline-tooltip-text": e.underlineTooltipText,
     class: "b-summary-grid-item-numeric"
-  }, O({
-    default: r(() => [
-      S(g(e.label) + " ", 1)
+  }, h({
+    default: o(() => [
+      T(" " + y(e.label) + " ", 1)
     ]),
     _: 2
   }, [
+    e.hasSlot("dashed-underline") ? {
+      name: "dashed-underline",
+      fn: o(() => [
+        l(e.$slots, "dashed-underline")
+      ]),
+      key: "0"
+    } : void 0,
     e.secondaryMetric ? {
       name: "secondary",
-      fn: r(() => [
-        S(g(e.secondaryMetric), 1)
+      fn: o(() => [
+        T(y(e.secondaryMetric), 1)
       ]),
-      key: "0"
+      key: "1"
     } : void 0
-  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-tooltip-text"]);
 }
-const De = /* @__PURE__ */ b(me, [["render", pe]]), ye = T({
+const Re = /* @__PURE__ */ b(fe, [["render", ge]]), Se = v({
   name: "bento-summary-grid-item-percentage",
-  components: { SummaryGridItem: _ },
+  components: { SummaryGridItem: E },
   props: {
     /**
      * Amount to be shown as the main value
@@ -562,8 +616,8 @@ const De = /* @__PURE__ */ b(me, [["render", pe]]), ye = T({
      */
     trendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -577,22 +631,29 @@ const De = /* @__PURE__ */ b(me, [["render", pe]]), ye = T({
      */
     secondaryTrendDirection: {
       type: String,
-      default: o.POSITIVE,
-      validator: (e) => Object.values(o).includes(e)
+      default: r.POSITIVE,
+      validator: (e) => Object.values(r).includes(e)
     },
     /**
      * Defines the size of the `summary-grid-item` text content
      */
     size: {
       type: String,
-      default: l.SMALL,
-      validator: (e) => Object.values(l).includes(e)
-    }
+      default: s.SMALL,
+      validator: (e) => Object.values(s).includes(e)
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    underlineTooltipText: { type: String, default: null }
+  },
+  setup(e, { slots: n }) {
+    return { hasSlot: $(n) };
   }
 });
-function fe(e, a, d, p, c, s) {
-  const n = m("summary-grid-item");
-  return i(), u(n, {
+function Te(e, n, u, f, c, d) {
+  const i = m("summary-grid-item");
+  return a(), p(i, {
     "item-type": "percentage",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -603,25 +664,33 @@ function fe(e, a, d, p, c, s) {
     "trend-direction": e.trendDirection,
     "secondary-trend": e.secondaryTrend,
     "secondary-trend-direction": e.secondaryTrendDirection,
+    "underline-tooltip-text": e.underlineTooltipText,
     class: "b-summary-grid-item-percentage"
-  }, O({
-    default: r(() => [
-      S(g(e.label) + "% ", 1)
+  }, h({
+    default: o(() => [
+      T(" " + y(e.label) + "% ", 1)
     ]),
     _: 2
   }, [
+    e.hasSlot("dashed-underline") ? {
+      name: "dashed-underline",
+      fn: o(() => [
+        l(e.$slots, "dashed-underline")
+      ]),
+      key: "0"
+    } : void 0,
     e.secondaryMetric ? {
       name: "secondary",
-      fn: r(() => [
-        S(g(e.secondaryMetric) + "% ", 1)
+      fn: o(() => [
+        T(y(e.secondaryMetric) + "% ", 1)
       ]),
-      key: "0"
+      key: "1"
     } : void 0
-  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-tooltip-text"]);
 }
-const ke = /* @__PURE__ */ b(ye, [["render", fe]]), ge = T({
+const we = /* @__PURE__ */ b(Se, [["render", Te]]), ve = v({
   name: "bento-summary-grid-item-text",
-  components: { SummaryGridItem: _ },
+  components: { SummaryGridItem: E },
   props: {
     /**
      * Text to copy to the clipboard
@@ -654,28 +723,44 @@ const ke = /* @__PURE__ */ b(ye, [["render", fe]]), ge = T({
     fitContent: {
       type: Boolean,
       default: !1
-    }
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    underlineTooltipText: { type: String, default: null }
+  },
+  setup(e, { slots: n }) {
+    return { hasSlot: $(n) };
   }
 });
-function ve(e, a, d, p, c, s) {
-  const n = m("summary-grid-item");
-  return i(), u(n, {
+function he(e, n, u, f, c, d) {
+  const i = m("summary-grid-item");
+  return a(), p(i, {
     "item-type": "text",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
     copy: e.copy,
     "fit-content": e.fitContent,
+    "underline-tooltip-text": e.underlineTooltipText,
     class: "b-summary-grid-item-text"
-  }, {
-    default: r(() => [
-      S(g(e.label), 1)
+  }, h({
+    default: o(() => [
+      T(" " + y(e.label), 1)
     ]),
-    _: 1
-  }, 8, ["info-icon-tooltip-text", "title", "copy", "fit-content"]);
+    _: 2
+  }, [
+    e.hasSlot("dashed-underline") ? {
+      name: "dashed-underline",
+      fn: o(() => [
+        l(e.$slots, "dashed-underline")
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "underline-tooltip-text"]);
 }
-const Ae = /* @__PURE__ */ b(ge, [["render", ve]]), Se = T({
+const je = /* @__PURE__ */ b(ve, [["render", he]]), $e = v({
   name: "bento-summary-grid-item-custom",
-  components: { SummaryGridItem: _ },
+  components: { SummaryGridItem: E },
   props: {
     /**
      * Text to copy to the clipboard
@@ -692,34 +777,50 @@ const Ae = /* @__PURE__ */ b(ge, [["render", ve]]), Se = T({
     /**
      * The width of `summary-grid-item` fits its content
      */
-    fitContent: { type: Boolean, default: !1 }
+    fitContent: { type: Boolean, default: !1 },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    underlineTooltipText: { type: String, default: null }
   },
-  emits: ["copy-to-clipboard"]
+  emits: ["copy-to-clipboard"],
+  setup(e, { slots: n }) {
+    return { hasSlot: $(n) };
+  }
 });
-function Te(e, a, d, p, c, s) {
-  const n = m("summary-grid-item");
-  return i(), u(n, {
+function be(e, n, u, f, c, d) {
+  const i = m("summary-grid-item");
+  return a(), p(i, {
     title: e.title,
     "info-icon-tooltip-text": e.infoIconTooltipText,
     copy: e.copy,
     "fit-content": e.fitContent,
-    onCopyToClipoard: a[0] || (a[0] = (t) => e.$emit("copy-to-clipboard"))
-  }, {
-    default: r(() => [
-      f(e.$slots, "default")
+    "underline-tooltip-text": e.underlineTooltipText,
+    onCopyToClipoard: n[0] || (n[0] = (t) => e.$emit("copy-to-clipboard"))
+  }, h({
+    default: o(() => [
+      l(e.$slots, "default")
     ]),
-    _: 3
-  }, 8, ["title", "info-icon-tooltip-text", "copy", "fit-content"]);
+    _: 2
+  }, [
+    e.hasSlot("dashed-underline") ? {
+      name: "dashed-underline",
+      fn: o(() => [
+        l(e.$slots, "dashed-underline")
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["title", "info-icon-tooltip-text", "copy", "fit-content", "underline-tooltip-text"]);
 }
-const Be = /* @__PURE__ */ b(Se, [["render", Te]]);
+const ze = /* @__PURE__ */ b($e, [["render", be]]);
 export {
-  l as B,
-  Ve as a,
-  De as b,
-  ke as c,
-  Ae as d,
-  Be as e,
-  o as f,
-  Me as s
+  s as B,
+  Ae as a,
+  Re as b,
+  we as c,
+  je as d,
+  ze as e,
+  r as f,
+  Be as s
 };
-//# sourceMappingURL=summary-grid-item-custom.DTCzOBBy.js.map
+//# sourceMappingURL=summary-grid-item-custom.ACP0RH0N.js.map