@adyen/bento-vue3 1.1.0 → 1.2.0

package/dist/summary-grid.js

@@ -1,16 +1,16 @@
-import { defineComponent as _, resolveComponent as f, openBlock as r, createElementBlock as E, Fragment as D, renderList as R, createBlock as p, createSlots as A, withCtx as o, renderSlot as y, toRefs as w, computed as T, normalizeStyle as z, createElementVNode as h, createVNode as P, createTextVNode as S, toDisplayString as g, createCommentVNode as b, mergeProps as U } from "vue";
-import { u as L } from "./chunks/use-has-slot.068222e6.js";
-import { G as q } from "./chunks/grid-layout.a30855ff.js";
-import { _ as v } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { BentoInfoIcon as X } from "./info-icon.js";
-import { B as j, b as B, a as W } from "./chunks/index.92f7d550.js";
-import { BentoTag as Y, BentoTagVariant as M } from "./tag.js";
+import { defineComponent as S, resolveComponent as f, openBlock as i, createElementBlock as E, Fragment as D, renderList as R, createBlock as p, createSlots as O, withCtx as r, renderSlot as y, toRefs as j, computed as T, normalizeStyle as w, createElementVNode as h, createVNode as M, createTextVNode as v, toDisplayString as g, createCommentVNode as $, mergeProps as z } from "vue";
+import { u as P } from "./chunks/use-has-slot.068222e6.js";
+import { G as U } from "./chunks/grid-layout.a30855ff.js";
+import { _ as b } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { BentoInfoIcon as q } from "./info-icon.js";
+import { B as X, b as A, a as W } from "./chunks/index.ebf5f6cf.js";
+import { BentoTag as Y, BentoTagVariant as B } from "./tag.js";
 import { PopperContainerPosition as F } from "./popper-container.js";
-import { C as H } from "./chunks/copy.012e43f2.js";
+import { C as H } from "./chunks/copy.1ce0203e.js";
 import "./assets/index26.css";
-const J = _({
+const J = S({
   name: "bento-summary-grid",
-  components: { GridLayout: q },
+  components: { GridLayout: U },
   props: {
     /**
      * Sets the responsive columns widths values for 1 of the 3 rows.
@@ -20,74 +20,74 @@ const J = _({
       default: null
     }
   },
-  setup(e, { slots: a }) {
-    var m, i;
-    let d = 1;
-    if (a) {
-      const s = (i = (m = Object.keys(a)) == null ? void 0 : m.filter((n) => n.includes("cell-"))) == null ? void 0 : i.map((n) => {
+  setup(e, { slots: s }) {
+    var m, a;
+    let c = 1;
+    if (s) {
+      const l = (a = (m = Object.keys(s)) == null ? void 0 : m.filter((n) => n.includes("cell-"))) == null ? void 0 : a.map((n) => {
         var t;
         return parseInt((t = n.split("-")) == null ? void 0 : t[1], 10);
       });
-      if (d = Math.max(...s), d > 3)
+      if (c = Math.max(...l), c > 3)
         throw new Error(
           "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
         );
     }
     return {
-      hasSlot: L(a),
-      numberOfRows: d
+      hasSlot: P(s),
+      numberOfRows: c
     };
   }
 });
 const K = { class: "b-summary-grid" };
-function Q(e, a, d, m, i, s) {
+function Q(e, s, c, m, a, l) {
   const n = f("grid-layout");
-  return r(), E("div", K, [
-    (r(!0), E(D, null, R(e.numberOfRows, (t) => {
-      var $;
-      return r(), p(n, {
+  return i(), E("div", K, [
+    (i(!0), E(D, null, R(e.numberOfRows, (t) => {
+      var _;
+      return i(), p(n, {
         key: `summary-grid-row-${t}`,
         "data-testid": `summary-grid-row-${t}`,
-        "column-width": ($ = e.columnWidth) == null ? void 0 : $[`row${t}`]
-      }, A({ _: 2 }, [
+        "column-width": (_ = e.columnWidth) == null ? void 0 : _[`row${t}`]
+      }, O({ _: 2 }, [
         e.hasSlot(`cell-${t}-1`) ? {
           name: "col-1",
-          fn: o(() => [
+          fn: r(() => [
             y(e.$slots, `cell-${t}-1`, {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.hasSlot(`cell-${t}-2`) ? {
           name: "col-2",
-          fn: o(() => [
+          fn: r(() => [
             y(e.$slots, `cell-${t}-2`, {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.hasSlot(`cell-${t}-3`) ? {
           name: "col-3",
-          fn: o(() => [
+          fn: r(() => [
             y(e.$slots, `cell-${t}-3`, {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.hasSlot(`cell-${t}-4`) ? {
           name: "col-4",
-          fn: o(() => [
+          fn: r(() => [
             y(e.$slots, `cell-${t}-4`, {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.hasSlot(`cell-${t}-5`) ? {
           name: "col-5",
-          fn: o(() => [
+          fn: r(() => [
             y(e.$slots, `cell-${t}-5`, {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.hasSlot(`cell-${t}-6`) ? {
           name: "col-6",
-          fn: o(() => [
+          fn: r(() => [
             y(e.$slots, `cell-${t}-6`, {}, void 0, !0)
           ]),
           key: "5"
@@ -96,11 +96,11 @@ function Q(e, a, d, m, i, s) {
     }), 128))
   ]);
 }
-const Ee = /* @__PURE__ */ v(J, [["render", Q], ["__scopeId", "data-v-1b4c3b84"]]);
-var c = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(c || {}), u = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(u || {}), l = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(l || {});
-const Z = _({
+const Ee = /* @__PURE__ */ b(J, [["render", Q], ["__scopeId", "data-v-1b4c3b84"]]);
+var d = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(d || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), u = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(u || {});
+const Z = S({
   name: "summary-grid-item",
-  components: { BentoInfoIcon: X, BentoTypography: j, BentoTag: Y, Copy: H },
+  components: { BentoInfoIcon: q, BentoTypography: X, BentoTag: Y, Copy: H },
   props: {
     /**
      * Text to copy to the clipboard
@@ -112,7 +112,8 @@ const Z = _({
     // TODO add text truncation for SummaryGridItemType.TEXT
     itemType: {
       type: String,
-      default: l.CUSTOM
+      default: u.CUSTOM,
+      validator: (e) => Object.values(u).includes(e)
     },
     /**
      * Text showed in the info-icon tooltip on hover
@@ -133,7 +134,8 @@ const Z = _({
     // TODO implement logic for Large size
     size: {
       type: String,
-      default: c.SMALL
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
     },
     /**
      * Shows colored trend label next to text content
@@ -147,7 +149,8 @@ const Z = _({
      */
     trendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Shows colored trend tag next to secondary metric value
@@ -161,54 +164,55 @@ const Z = _({
      */
     secondaryTrendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     }
   },
-  setup(e, { slots: a }) {
-    const { trendDirection: d, secondaryTrendDirection: m, itemType: i, size: s } = w(e), n = (k) => {
+  setup(e, { slots: s }) {
+    const { trendDirection: c, secondaryTrendDirection: m, itemType: a, size: l } = j(e), n = (k) => {
       switch (k) {
-        case u.POSITIVE:
-          return M.GREEN;
-        case u.NEGATIVE:
-          return M.RED;
+        case o.POSITIVE:
+          return B.GREEN;
+        case o.NEGATIVE:
+          return B.RED;
         default:
-          return M.BLUE;
+          return B.BLUE;
       }
-    }, t = T(() => n(d.value)), $ = T(() => n(m.value)), I = T(
-      () => i.value === l.TEXT || i.value === l.PERCENTAGE || i.value === l.AMOUNT || i.value === l.NUMERIC
-    ), V = T(() => {
+    }, t = T(() => n(c.value)), _ = T(() => n(m.value)), I = T(
+      () => a.value === u.TEXT || a.value === u.PERCENTAGE || a.value === u.AMOUNT || a.value === u.NUMERIC
+    ), L = T(() => {
       if (I.value) {
-        if (s.value === c.SMALL)
-          return B.BODY;
-        if (i.value !== l.TEXT)
-          return B.TITLE;
+        if (l.value === d.SMALL)
+          return A.BODY;
+        if (a.value !== u.TEXT)
+          return A.TITLE;
       }
       return null;
-    }), G = T(() => ({
-      medium: s.value === c.LARGE,
-      strongest: s.value === c.SMALL,
-      wide: s.value === c.SMALL,
-      variant: V.value
-    })), N = T(() => e.fitContent ? { width: "fit-content" } : {}), O = T(() => ({
+    }), V = T(() => ({
+      medium: l.value === d.LARGE,
+      strongest: l.value === d.SMALL,
+      wide: l.value === d.SMALL,
+      variant: L.value
+    })), G = T(() => e.fitContent ? { width: "fit-content" } : {}), N = T(() => ({
       [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
     }));
     return {
       // Values
       trendVariant: t,
-      secondaryTrendVariant: $,
+      secondaryTrendVariant: _,
       isContentTypographyApplied: I,
-      typographyProps: G,
+      typographyProps: V,
       // Styles
-      computedStyles: N,
-      summaryBarItemTrendConditionalClasses: O,
+      computedStyles: G,
+      summaryBarItemTrendConditionalClasses: N,
       // Enums
       BentoTypographyElement: W,
-      BentoTypographyVariant: B,
-      SummaryGridItemType: l,
-      BentoSummaryGridItemSize: c,
+      BentoTypographyVariant: A,
+      SummaryGridItemType: u,
+      BentoSummaryGridItemSize: d,
       PopperContainerPosition: F,
       // Utils
-      hasSlot: L(a)
+      hasSlot: P(s)
     };
   }
 });
@@ -216,80 +220,80 @@ const x = { class: "b-summary-grid-item__header" }, ee = { class: "b-summary-gri
   key: 0,
   class: "b-summary-grid-item__content--secondary"
 };
-function oe(e, a, d, m, i, s) {
-  const n = f("bento-typography"), t = f("copy"), $ = f("bento-info-icon"), I = f("bento-tag");
-  return r(), E("div", {
+function oe(e, s, c, m, a, l) {
+  const n = f("bento-typography"), t = f("copy"), _ = f("bento-info-icon"), I = f("bento-tag");
+  return i(), E("div", {
     class: "b-summary-grid-item",
-    style: z(e.computedStyles)
+    style: w(e.computedStyles)
   }, [
     h("div", x, [
-      P(n, {
+      M(n, {
         class: "b-summary-grid-item__title",
         el: e.BentoTypographyElement.SPAN,
         variant: e.BentoTypographyVariant.BODY
       }, {
-        default: o(() => [
-          S(g(e.title), 1)
+        default: r(() => [
+          v(g(e.title), 1)
         ]),
         _: 1
       }, 8, ["el", "variant"]),
       h("div", ee, [
-        e.copy ? (r(), p(t, {
+        e.copy ? (i(), p(t, {
           key: 0,
           class: "b-structured-list__icon",
           text: e.copy
-        }, null, 8, ["text"])) : b("", !0),
-        e.infoIconTooltipText ? (r(), p($, {
+        }, null, 8, ["text"])) : $("", !0),
+        e.infoIconTooltipText ? (i(), p(_, {
           key: 1,
           "tooltip-text": e.infoIconTooltipText,
           "tooltip-position": e.PopperContainerPosition.TOP,
           class: "b-summary-grid-item__title-tooltip"
-        }, null, 8, ["tooltip-text", "tooltip-position"])) : b("", !0)
+        }, null, 8, ["tooltip-text", "tooltip-position"])) : $("", !0)
       ])
     ]),
     h("div", te, [
-      e.isContentTypographyApplied ? (r(), p(n, U({
+      e.isContentTypographyApplied ? (i(), p(n, z({
         key: 0,
         "data-testid": "summary-grid-item-content-typography",
         class: "b-summary-grid-item__title"
       }, e.typographyProps, {
         el: e.BentoTypographyElement.SPAN
       }), {
-        default: o(() => [
+        default: r(() => [
           y(e.$slots, "default", {}, void 0, !0),
-          e.trend && e.itemType !== e.SummaryGridItemType.TEXT ? (r(), p(I, {
+          e.trend && e.itemType !== e.SummaryGridItemType.TEXT ? (i(), p(I, {
             key: 0,
             variant: e.trendVariant,
             label: e.trend,
             class: "b-summary-grid-item__content-trend"
-          }, null, 8, ["variant", "label"])) : b("", !0)
+          }, null, 8, ["variant", "label"])) : $("", !0)
         ]),
         _: 3
       }, 16, ["el"])) : y(e.$slots, "default", { key: 1 }, void 0, !0)
     ]),
-    e.hasSlot("secondary") ? (r(), E("div", ne, [
-      P(n, {
+    e.hasSlot("secondary") ? (i(), E("div", ne, [
+      M(n, {
         class: "b-summary-grid-item__title",
         "data-testid": "summary-grid-item-secondary-metric-typography",
         el: e.BentoTypographyElement.SPAN,
         variant: e.BentoTypographyVariant.CAPTION,
         stronger: ""
       }, {
-        default: o(() => [
+        default: r(() => [
           y(e.$slots, "secondary", {}, void 0, !0),
-          e.secondaryTrend ? (r(), p(I, {
+          e.secondaryTrend ? (i(), p(I, {
             key: 0,
             variant: e.secondaryTrendVariant,
             label: e.secondaryTrend,
             class: "b-summary-grid-item__content-trend"
-          }, null, 8, ["variant", "label"])) : b("", !0)
+          }, null, 8, ["variant", "label"])) : $("", !0)
         ]),
         _: 3
       }, 8, ["el", "variant"])
-    ])) : b("", !0)
+    ])) : $("", !0)
   ], 4);
 }
-const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-1455e248"]]), re = _({
+const C = /* @__PURE__ */ b(Z, [["render", oe], ["__scopeId", "data-v-ed63ec1f"]]), re = S({
   name: "bento-summary-grid-item-amount",
   components: { SummaryGridItem: C },
   props: {
@@ -351,7 +355,8 @@ const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-1455e248"]
      */
     trendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -365,20 +370,22 @@ const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-1455e248"]
      */
     secondaryTrendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Defines the size of the `summary-grid-item` text content
      */
     size: {
       type: String,
-      default: c.SMALL
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
     }
   },
   setup() {
     return {
       // Enums
-      SummaryGridItemType: l
+      SummaryGridItemType: u
     };
   }
 });
@@ -386,9 +393,9 @@ const ie = { class: "b-summary-grid-item-amount__content" }, ae = {
   key: 0,
   class: "b-summary-grid-item-amount__secondary-label"
 };
-function se(e, a, d, m, i, s) {
+function se(e, s, c, m, a, l) {
   const n = f("summary-grid-item");
-  return r(), p(n, {
+  return i(), p(n, {
     "item-type": e.SummaryGridItemType.AMOUNT,
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -400,25 +407,25 @@ function se(e, a, d, m, i, s) {
     "secondary-trend": e.secondaryTrend,
     "secondary-trend-direction": e.secondaryTrendDirection,
     class: "b-summary-grid-item-amount"
-  }, A({
-    default: o(() => [
+  }, O({
+    default: r(() => [
       h("div", ie, [
         h("div", null, g(e.label), 1),
-        e.secondaryLabel ? (r(), E("div", ae, g(e.secondaryLabel), 1)) : b("", !0)
+        e.secondaryLabel ? (i(), E("div", ae, g(e.secondaryLabel), 1)) : $("", !0)
       ])
     ]),
     _: 2
   }, [
     e.secondaryMetric ? {
       name: "secondary",
-      fn: o(() => [
-        S(g(e.secondaryMetric), 1)
+      fn: r(() => [
+        v(g(e.secondaryMetric), 1)
       ]),
       key: "0"
     } : void 0
   ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-8dbd1cf8"]]), de = _({
+const Ce = /* @__PURE__ */ b(re, [["render", se], ["__scopeId", "data-v-b7d11d13"]]), de = S({
   name: "bento-summary-grid-item-numeric",
   components: { SummaryGridItem: C },
   props: {
@@ -473,7 +480,8 @@ const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-8dbd1cf8
      */
     trendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -487,26 +495,28 @@ const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-8dbd1cf8
      */
     secondaryTrendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Defines the size of the `summary-grid-item` text content
      */
     size: {
       type: String,
-      default: c.SMALL
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
     }
   },
   setup() {
     return {
       // Enums
-      SummaryGridItemType: l
+      SummaryGridItemType: u
     };
   }
 });
-function le(e, a, d, m, i, s) {
+function le(e, s, c, m, a, l) {
   const n = f("summary-grid-item");
-  return r(), p(n, {
+  return i(), p(n, {
     "item-type": e.SummaryGridItemType.NUMERIC,
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -518,22 +528,22 @@ function le(e, a, d, m, i, s) {
     "secondary-trend": e.secondaryTrend,
     "secondary-trend-direction": e.secondaryTrendDirection,
     class: "b-summary-grid-item-numeric"
-  }, A({
-    default: o(() => [
-      S(g(e.label) + " ", 1)
+  }, O({
+    default: r(() => [
+      v(g(e.label) + " ", 1)
     ]),
     _: 2
   }, [
     e.secondaryMetric ? {
       name: "secondary",
-      fn: o(() => [
-        S(g(e.secondaryMetric), 1)
+      fn: r(() => [
+        v(g(e.secondaryMetric), 1)
       ]),
       key: "0"
     } : void 0
   ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Ae = /* @__PURE__ */ v(de, [["render", le]]), me = _({
+const Oe = /* @__PURE__ */ b(de, [["render", le]]), ue = S({
   name: "bento-summary-grid-item-percentage",
   components: { SummaryGridItem: C },
   props: {
@@ -588,7 +598,8 @@ const Ae = /* @__PURE__ */ v(de, [["render", le]]), me = _({
      */
     trendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -602,26 +613,28 @@ const Ae = /* @__PURE__ */ v(de, [["render", le]]), me = _({
      */
     secondaryTrendDirection: {
       type: String,
-      default: u.POSITIVE
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
     },
     /**
      * Defines the size of the `summary-grid-item` text content
      */
     size: {
       type: String,
-      default: c.SMALL
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
     }
   },
   setup() {
     return {
       // Enums
-      SummaryGridItemType: l
+      SummaryGridItemType: u
     };
   }
 });
-function pe(e, a, d, m, i, s) {
+function ce(e, s, c, m, a, l) {
   const n = f("summary-grid-item");
-  return r(), p(n, {
+  return i(), p(n, {
     "item-type": e.SummaryGridItemType.PERCENTAGE,
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -633,22 +646,22 @@ function pe(e, a, d, m, i, s) {
     "secondary-trend": e.secondaryTrend,
     "secondary-trend-direction": e.secondaryTrendDirection,
     class: "b-summary-grid-item-percentage"
-  }, A({
-    default: o(() => [
-      S(g(e.label) + "% ", 1)
+  }, O({
+    default: r(() => [
+      v(g(e.label) + "% ", 1)
     ]),
     _: 2
   }, [
     e.secondaryMetric ? {
       name: "secondary",
-      fn: o(() => [
-        S(g(e.secondaryMetric) + "% ", 1)
+      fn: r(() => [
+        v(g(e.secondaryMetric) + "% ", 1)
       ]),
       key: "0"
     } : void 0
   ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Be = /* @__PURE__ */ v(me, [["render", pe]]), ue = _({
+const Ae = /* @__PURE__ */ b(ue, [["render", ce]]), me = S({
   name: "bento-summary-grid-item-text",
   components: { SummaryGridItem: C },
   props: {
@@ -688,13 +701,13 @@ const Be = /* @__PURE__ */ v(me, [["render", pe]]), ue = _({
   setup() {
     return {
       // Enums
-      SummaryGridItemType: l
+      SummaryGridItemType: u
     };
   }
 });
-function ye(e, a, d, m, i, s) {
+function pe(e, s, c, m, a, l) {
   const n = f("summary-grid-item");
-  return r(), p(n, {
+  return i(), p(n, {
     "item-type": e.SummaryGridItemType.TEXT,
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
@@ -702,13 +715,13 @@ function ye(e, a, d, m, i, s) {
     "fit-content": e.fitContent,
     class: "b-summary-grid-item-text"
   }, {
-    default: o(() => [
-      S(g(e.label), 1)
+    default: r(() => [
+      v(g(e.label), 1)
     ]),
     _: 1
   }, 8, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content"]);
 }
-const Me = /* @__PURE__ */ v(ue, [["render", ye]]), ce = _({
+const Be = /* @__PURE__ */ b(me, [["render", pe]]), ye = S({
   name: "bento-summary-grid-item-custom",
   components: { SummaryGridItem: C },
   props: {
@@ -731,30 +744,30 @@ const Me = /* @__PURE__ */ v(ue, [["render", ye]]), ce = _({
   },
   emits: ["copy-to-clipboard"]
 });
-function fe(e, a, d, m, i, s) {
+function fe(e, s, c, m, a, l) {
   const n = f("summary-grid-item");
-  return r(), p(n, {
+  return i(), p(n, {
     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"))
+    onCopyToClipoard: s[0] || (s[0] = (t) => e.$emit("copy-to-clipboard"))
   }, {
-    default: o(() => [
+    default: r(() => [
       y(e.$slots, "default")
     ]),
     _: 3
   }, 8, ["title", "info-icon-tooltip-text", "copy", "fit-content"]);
 }
-const Pe = /* @__PURE__ */ v(ce, [["render", fe]]);
+const Me = /* @__PURE__ */ b(ye, [["render", fe]]);
 export {
   Ee as BentoSummaryGrid,
   Ce as BentoSummaryGridItemAmount,
-  Pe as BentoSummaryGridItemCustom,
-  Ae as BentoSummaryGridItemNumeric,
-  Be as BentoSummaryGridItemPercentage,
-  c as BentoSummaryGridItemSize,
-  Me as BentoSummaryGridItemText,
-  u as BentoSummaryGridItemTrendDirection
+  Me as BentoSummaryGridItemCustom,
+  Oe as BentoSummaryGridItemNumeric,
+  Ae as BentoSummaryGridItemPercentage,
+  d as BentoSummaryGridItemSize,
+  Be as BentoSummaryGridItemText,
+  o as BentoSummaryGridItemTrendDirection
 };
 //# sourceMappingURL=summary-grid.js.map