@kong-ui-public/analytics-metric-provider 5.0.10 → 5.1.0

package/dist/vitals-metric-provider.es.js

@@ -1,10 +1,10 @@
-import { ref as pe, watchEffect as Fe, computed as g, getCurrentInstance as He, reactive as Be, onMounted as $e, onUnmounted as Pe, watch as Ke, isReadonly as Ze, toRefs as Ue, defineComponent as k, inject as Te, toRef as Ge, provide as je, renderSlot as ke, resolveComponent as qe, openBlock as p, createElementBlock as m, createElementVNode as I, normalizeClass as G, unref as w, createCommentVNode as x, createBlock as N, resolveDynamicComponent as q, withCtx as A, createTextVNode as Ye, toDisplayString as R, createVNode as Y, normalizeStyle as V, Fragment as Se, renderList as Xe, mergeProps as Qe, pushScopeId as L, popScopeId as M, normalizeProps as We, guardReactiveProps as Je } from "vue";
+import { ref as pe, watchEffect as Fe, computed as g, getCurrentInstance as He, reactive as Be, onMounted as $e, onUnmounted as Pe, watch as Ke, isReadonly as Ze, toRefs as Ue, defineComponent as k, inject as xe, toRef as Ge, provide as je, renderSlot as ke, resolveComponent as qe, openBlock as p, createElementBlock as y, createElementVNode as I, normalizeClass as G, unref as w, createCommentVNode as N, createBlock as T, resolveDynamicComponent as z, withCtx as V, createTextVNode as Ye, toDisplayString as R, createVNode as Y, normalizeStyle as A, Fragment as Se, renderList as Xe, mergeProps as Qe, pushScopeId as L, popScopeId as M, normalizeProps as We, guardReactiveProps as Je } from "vue";
 import { TimePeriods as re, TimeframeKeys as te, queryableExploreDimensions as er, DeltaQueryTime as rr, UnaryQueryTime as tr } from "@kong-ui-public/analytics-utilities";
 import { createI18n as ir, i18nTComponent as nr } from "@kong-ui-public/i18n";
 import { useAnalyticsConfigStore as ar, SEVEN_DAYS_MS as or } from "@kong-ui-public/analytics-config-store";
-const sr = {
+const lr = {
   notAvailable: "N/A"
-}, ur = {
+}, sr = {
   short: {
     traffic: "Requests",
     errorRate: "Error Rate",
@@ -15,7 +15,7 @@ const sr = {
     errorRate: "Average Error Rate",
     latency: "P99 Latency"
   }
-}, lr = {
+}, ur = {
   custom: "vs previous {numDays, plural, =1 {day} other {# days}}",
   "15m": "vs previous 15 minutes",
   "1h": "vs previous hour",
@@ -31,9 +31,9 @@ const sr = {
   previous_month: "vs previous time period",
   previous_quarter: "vs previous quarter"
 }, dr = {
-  general: sr,
-  metricCard: ur,
-  trendRange: lr
+  general: lr,
+  metricCard: sr,
+  trendRange: ur
 };
 function cr() {
   const e = ir("en-us", dr);
@@ -87,31 +87,31 @@ function gr(e = pe({}), r, t, a = vr) {
     swrvState: ze
   };
 }
-const B = Symbol("default"), ue = "status_code_grouped", _e = (e, r, t, a, n) => {
+const B = Symbol("default"), se = "status_code_grouped", _e = (e, r, t, a, n) => {
   e[r][t] || (e[r][t] = {}), e[r][t][a] = n;
 };
-function mr(e, r) {
-  var c;
-  const t = ((c = e.meta.metric_names) == null ? void 0 : c[0]) || "", a = e.meta.start_ms, n = Object.keys(e.meta.display || {}), i = !!n.find((f) => f === ue), u = n.find((f) => f !== ue);
+function yr(e, r) {
+  var f;
+  const t = ((f = e.meta.metric_names) == null ? void 0 : f[0]) || "", a = e.meta.start_ms, n = Object.keys(e.meta.display || {}), i = !!n.find((c) => c === se), s = n.find((c) => c !== se);
   return n.length > 2 || n.length > 1 && !i ? (console.error("Don't know how to work with provided dimensions:", n), {
     previous: { [B]: { [B]: 0 } },
     current: { [B]: { [B]: 0 } }
-  }) : e.data.reduce((f, o) => {
-    const s = o.event[t], l = u ? o.event[u] : B, d = i ? o.event[ue] : B;
-    return new Date(o.timestamp).getTime() === a && r ? _e(f, "previous", l, d, s) : _e(f, "current", l, d, s), f;
+  }) : e.data.reduce((c, o) => {
+    const l = o.event[t], u = s ? o.event[s] : B, d = i ? o.event[se] : B;
+    return new Date(o.timestamp).getTime() === a && r ? _e(c, "previous", u, d, l) : _e(c, "current", u, d, l), c;
   }, {
     previous: {},
     current: {}
   });
 }
-function yr(e) {
+function mr(e) {
   e.queryReady === void 0 && (e.queryReady = g(() => !0));
   const { i18n: r } = K.useI18n(), t = g(() => {
-    var l, d;
+    var u, d;
     return {
       metrics: e.metrics,
       dimensions: [
-        ...(l = e.dimensions) != null && l.length ? [...e.dimensions] : [],
+        ...(u = e.dimensions) != null && u.length ? [...e.dimensions] : [],
         ...e.withTrend.value ? ["time"] : []
       ],
       granularity: e.withTrend.value ? "trend" : void 0,
@@ -119,12 +119,12 @@ function yr(e) {
       time_range: e.timeframe.value.v4Query(e.tz.value)
     };
   }), a = g(() => {
-    var d, v, b, y;
+    var d, v, b, m;
     if (!((d = e.queryReady) != null && d.value) || e.featureFlags && !e.featureFlags.every((h) => h))
       return null;
-    const l = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
-    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(b = e.dimensions) == null ? void 0 : b.join("-")}-${(y = e.metrics) == null ? void 0 : y.join("-")}-${l}`;
-  }), { response: n, error: i, isValidating: u } = K.useRequest(
+    const u = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
+    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(b = e.dimensions) == null ? void 0 : b.join("-")}-${(m = e.metrics) == null ? void 0 : m.join("-")}-${u}`;
+  }), { response: n, error: i, isValidating: s } = K.useRequest(
     () => a.value,
     () => e.queryFn(t.value, e.abortController ?? new AbortController()),
     {
@@ -132,31 +132,31 @@ function yr(e) {
       revalidateOnFocus: !1,
       errorRetryCount: fr
     }
-  ), { state: c, swrvState: f } = gr(n, i, u), o = g(() => {
-    var l, d, v, b, y, h, T;
-    return !((d = (l = n.value) == null ? void 0 : l.data) != null && d.length) || !((b = (v = n.value) == null ? void 0 : v.meta) != null && b.display) || !((T = (h = (y = n.value) == null ? void 0 : y.meta) == null ? void 0 : h.metric_names) != null && T.length) ? { current: {}, previous: {} } : mr(n.value, e.withTrend.value);
-  }), s = g(() => {
-    var l, d, v;
+  ), { state: f, swrvState: c } = gr(n, i, s), o = g(() => {
+    var u, d, v, b, m, h, x;
+    return !((d = (u = n.value) == null ? void 0 : u.data) != null && d.length) || !((b = (v = n.value) == null ? void 0 : v.meta) != null && b.display) || !((x = (h = (m = n.value) == null ? void 0 : m.meta) == null ? void 0 : h.metric_names) != null && x.length) ? { current: {}, previous: {} } : yr(n.value, e.withTrend.value);
+  }), l = g(() => {
+    var u, d, v;
     if (e.timeframe.value.key === "custom") {
-      if (!((d = (l = n.value) == null ? void 0 : l.meta) != null && d.start_ms))
+      if (!((d = (u = n.value) == null ? void 0 : u.meta) != null && d.start_ms))
         return "";
-      const { start_ms: b, end_ms: y } = n.value.meta;
-      let h = (y - b) / (1e3 * 60 * 60 * 24);
+      const { start_ms: b, end_ms: m } = n.value.meta;
+      let h = (m - b) / (1e3 * 60 * 60 * 24);
       return e.withTrend.value && (h /= 2), r.t("trendRange.custom", { numDays: Math.round(h) });
     } else
       return e.withTrend.value ? r.t(`trendRange.${e.timeframe.value.key}`) : r.t(`trendRange.${(v = re.get(te.ONE_DAY)) == null ? void 0 : v.key}`);
   });
   return {
-    isLoading: g(() => f.PENDING === c.value),
-    hasError: g(() => f.ERROR === c.value),
+    isLoading: g(() => c.PENDING === f.value),
+    hasError: g(() => c.ERROR === f.value),
     raw: n,
     mapped: o,
-    trendRange: s
+    trendRange: l
   };
 }
-const j = (e, r, t = B, a) => (a ?? [B]).reduce((i, u) => {
-  const c = e[r][t];
-  return c ? i + (c[u] || 0) : i;
+const j = (e, r, t = B, a) => (a ?? [B]).reduce((i, s) => {
+  const f = e[r][t];
+  return f ? i + (f[s] || 0) : i;
 }, 0);
 function hr(e) {
   const {
@@ -165,42 +165,42 @@ function hr(e) {
     description: a,
     record: n,
     hasError: i,
-    increaseIsBad: u,
-    formatValueFn: c,
-    trendRange: f
+    increaseIsBad: s,
+    formatValueFn: f,
+    trendRange: c
   } = e;
   return g(() => {
-    let o = 0, s = 0;
+    let o = 0, l = 0;
     if (n != null && n.value)
       try {
-        o = j(n.value, "current", e.lookupKey, e.sumGroupedValues), s = j(n.value, "previous", e.lookupKey, e.sumGroupedValues);
-      } catch (l) {
+        o = j(n.value, "current", e.lookupKey, e.sumGroupedValues), l = j(n.value, "previous", e.lookupKey, e.sumGroupedValues);
+      } catch (u) {
         console.error(
           "Metric card data doesn't have the expected structure:",
-          l
+          u
         );
       }
     return {
       cardType: r,
       hasError: i.value,
       currentValue: o,
-      previousValue: s,
+      previousValue: l,
       title: t.value,
       description: a,
-      increaseIsBad: !!u,
+      increaseIsBad: !!s,
       // Coerce undefined to false
-      formatValueFn: c,
-      trendRange: f == null ? void 0 : f.value
+      formatValueFn: f,
+      trendRange: c == null ? void 0 : c.value
     };
   });
 }
-var le = /* @__PURE__ */ new WeakMap(), Re = 0;
+var ue = /* @__PURE__ */ new WeakMap(), Re = 0;
 function Cr(e) {
   if (!e.length)
     return "";
   for (var r = "arg", t = 0; t < e.length; ++t) {
     var a = void 0;
-    e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? a = '"' + e[t] + '"' : a = String(e[t]) : le.has(e[t]) ? a = le.get(e[t]) : (a = Re, le.set(e[t], Re++)), r += "@" + a;
+    e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? a = '"' + e[t] + '"' : a = String(e[t]) : ue.has(e[t]) ? a = ue.get(e[t]) : (a = Re, ue.set(e[t], Re++)), r += "@" + a;
   }
   return r;
 }
@@ -225,17 +225,17 @@ var ve = (
       var t = this.serializeKey(r);
       return this.items.get(t);
     }, e.prototype.set = function(r, t, a) {
-      var n = this.serializeKey(r), i = a || this.ttl, u = Date.now(), c = {
+      var n = this.serializeKey(r), i = a || this.ttl, s = Date.now(), f = {
         data: t,
-        createdAt: u,
-        expiresAt: i ? u + i : 1 / 0
+        createdAt: s,
+        expiresAt: i ? s + i : 1 / 0
       };
-      this.dispatchExpire(i, c, n), this.items.set(n, c);
+      this.dispatchExpire(i, f, n), this.items.set(n, f);
     }, e.prototype.dispatchExpire = function(r, t, a) {
       var n = this;
       r && setTimeout(function() {
-        var i = Date.now(), u = i >= t.expiresAt;
-        u && n.delete(a);
+        var i = Date.now(), s = i >= t.expiresAt;
+        s && n.delete(a);
       }, r);
     }, e.prototype.delete = function(r) {
       this.items.delete(r);
@@ -269,27 +269,27 @@ var O = function() {
   }, O.apply(this, arguments);
 }, Z = function(e, r, t, a) {
   function n(i) {
-    return i instanceof t ? i : new t(function(u) {
-      u(i);
+    return i instanceof t ? i : new t(function(s) {
+      s(i);
     });
   }
-  return new (t || (t = Promise))(function(i, u) {
-    function c(s) {
+  return new (t || (t = Promise))(function(i, s) {
+    function f(l) {
       try {
-        o(a.next(s));
-      } catch (l) {
-        u(l);
+        o(a.next(l));
+      } catch (u) {
+        s(u);
       }
     }
-    function f(s) {
+    function c(l) {
       try {
-        o(a.throw(s));
-      } catch (l) {
-        u(l);
+        o(a.throw(l));
+      } catch (u) {
+        s(u);
       }
     }
-    function o(s) {
-      s.done ? i(s.value) : n(s.value).then(c, f);
+    function o(l) {
+      l.done ? i(l.value) : n(l.value).then(f, c);
     }
     o((a = a.apply(e, r || [])).next());
   });
@@ -298,16 +298,16 @@ var O = function() {
     if (i[0] & 1)
       throw i[1];
     return i[1];
-  }, trys: [], ops: [] }, a, n, i, u;
-  return u = { next: c(0), throw: c(1), return: c(2) }, typeof Symbol == "function" && (u[Symbol.iterator] = function() {
+  }, trys: [], ops: [] }, a, n, i, s;
+  return s = { next: f(0), throw: f(1), return: f(2) }, typeof Symbol == "function" && (s[Symbol.iterator] = function() {
     return this;
-  }), u;
-  function c(o) {
-    return function(s) {
-      return f([o, s]);
+  }), s;
+  function f(o) {
+    return function(l) {
+      return c([o, l]);
     };
   }
-  function f(o) {
+  function c(o) {
     if (a)
       throw new TypeError("Generator is already executing.");
     for (; t; )
@@ -348,8 +348,8 @@ var O = function() {
             continue;
         }
         o = r.call(e, t);
-      } catch (s) {
-        o = [6, s], n = 0;
+      } catch (l) {
+        o = [6, l], n = 0;
       } finally {
         a = i = 0;
       }
@@ -361,18 +361,18 @@ var O = function() {
   var t = typeof Symbol == "function" && e[Symbol.iterator];
   if (!t)
     return e;
-  var a = t.call(e), n, i = [], u;
+  var a = t.call(e), n, i = [], s;
   try {
     for (; (r === void 0 || r-- > 0) && !(n = a.next()).done; )
       i.push(n.value);
-  } catch (c) {
-    u = { error: c };
+  } catch (f) {
+    s = { error: f };
   } finally {
     try {
       n && !n.done && (t = a.return) && t.call(a);
     } finally {
-      if (u)
-        throw u.error;
+      if (s)
+        throw s.error;
     }
   }
   return i;
@@ -381,8 +381,8 @@ var O = function() {
     for (var a = 0, n = r.length, i; a < n; a++)
       (i || !(a in r)) && (i || (i = Array.prototype.slice.call(r, 0, a)), i[a] = r[a]);
   return e.concat(i || Array.prototype.slice.call(r));
-}, Ae = new ve(), ie = new ve(), ce = new ve(), Ve = {
-  cache: Ae,
+}, Ve = new ve(), ie = new ve(), ce = new ve(), Ae = {
+  cache: Ve,
   refreshInterval: 0,
   ttl: 0,
   serverTTL: 1e3,
@@ -396,7 +396,7 @@ var O = function() {
   isOnline: de.isOnline,
   isDocumentVisible: de.isDocumentVisible
 };
-function Er(e, r, t) {
+function Tr(e, r, t) {
   var a = ie.get(e);
   if (a)
     a.data.push(r);
@@ -405,7 +405,7 @@ function Er(e, r, t) {
     ie.set(e, [r], t > 0 ? t + n : t);
   }
 }
-function Ir(e, r, t) {
+function Er(e, r, t) {
   if (t.isDocumentVisible() && !(t.errorRetryCount !== void 0 && r > t.errorRetryCount)) {
     var a = Math.min(r || 0, t.errorRetryCount), n = a * t.errorRetryInterval;
     setTimeout(function() {
@@ -414,51 +414,51 @@ function Ir(e, r, t) {
   }
 }
 var Ne = function(e, r, t, a) {
-  return t === void 0 && (t = Ae), a === void 0 && (a = Ve.ttl), Z(void 0, void 0, void 0, function() {
-    var n, i, u, c, f, o, s;
-    return U(this, function(l) {
-      switch (l.label) {
+  return t === void 0 && (t = Ve), a === void 0 && (a = Ae.ttl), Z(void 0, void 0, void 0, function() {
+    var n, i, s, f, c, o, l;
+    return U(this, function(u) {
+      switch (u.label) {
         case 0:
-          if (!Tr(r))
+          if (!xr(r))
             return [3, 5];
-          l.label = 1;
+          u.label = 1;
         case 1:
-          return l.trys.push([1, 3, , 4]), [4, r];
+          return u.trys.push([1, 3, , 4]), [4, r];
         case 2:
-          return n = l.sent(), [3, 4];
+          return n = u.sent(), [3, 4];
         case 3:
-          return c = l.sent(), i = c, [3, 4];
+          return f = u.sent(), i = f, [3, 4];
         case 4:
           return [3, 6];
         case 5:
-          n = r, l.label = 6;
+          n = r, u.label = 6;
         case 6:
-          if (u = !1, f = { data: n, error: i, isValidating: u }, typeof n < "u")
+          if (s = !1, c = { data: n, error: i, isValidating: s }, typeof n < "u")
             try {
-              t.set(e, f, a);
+              t.set(e, c, a);
             } catch (d) {
               console.error("swrv(mutate): failed to set cache", d);
             }
-          return o = ie.get(e), o && o.data.length && (s = o.data.filter(function(d) {
+          return o = ie.get(e), o && o.data.length && (l = o.data.filter(function(d) {
             return d.key === e;
-          }), s.forEach(function(d, v) {
-            typeof f.data < "u" && (d.data = f.data), d.error = f.error, d.isValidating = f.isValidating;
-            var b = v === s.length - 1;
-            b || delete s[v];
-          }), s = s.filter(Boolean)), [2, f];
+          }), l.forEach(function(d, v) {
+            typeof c.data < "u" && (d.data = c.data), d.error = c.error, d.isValidating = c.isValidating;
+            var b = v === l.length - 1;
+            b || delete l[v];
+          }), l = l.filter(Boolean)), [2, c];
       }
     });
   });
 };
-function xr() {
+function Ir() {
   for (var e = this, r = [], t = 0; t < arguments.length; t++)
     r[t] = arguments[t];
-  var a, n, i = O({}, Ve), u = !1, c = !1, f = He(), o = (f == null ? void 0 : f.proxy) || f;
+  var a, n, i = O({}, Ae), s = !1, f = !1, c = He(), o = (c == null ? void 0 : c.proxy) || c;
   if (!o)
     return console.error("Could not get current instance, check to make sure that `useSwrv` is declared in the top level of the setup function."), null;
-  var s = (o == null ? void 0 : o.$isServer) || !1;
+  var l = (o == null ? void 0 : o.$isServer) || !1;
   r.length >= 1 && (a = r[0]), r.length >= 2 && (n = r[1]), r.length > 2 && (i = O(O({}, i), r[2]));
-  var l = s ? i.serverTTL : i.ttl, d = typeof a == "function" ? a : pe(a);
+  var u = l ? i.serverTTL : i.ttl, d = typeof a == "function" ? a : pe(a);
   typeof n > "u" && (n = i.fetcher);
   var v = null;
   v || (v = Be({
@@ -469,31 +469,31 @@ function xr() {
   }));
   var b = function(S, C) {
     return Z(e, void 0, void 0, function() {
-      var H, E, $, X, ne, ye, ae, he = this;
+      var H, E, $, X, ne, me, ae, he = this;
       return U(this, function(oe) {
         switch (oe.label) {
           case 0:
             return H = v.data === void 0, E = d.value, E ? ($ = i.cache.get(E), X = $ && $.data, v.isValidating = !0, X && (v.data = X.data, v.error = X.error), ne = S || n, !ne || !i.isDocumentVisible() && !H || (C == null ? void 0 : C.forceRevalidate) !== void 0 && !(C != null && C.forceRevalidate) ? (v.isValidating = !1, [
               2
               /*return*/
-            ]) : $ && (ye = !!(Date.now() - $.createdAt >= i.dedupingInterval || C != null && C.forceRevalidate), !ye) ? (v.isValidating = !1, [
+            ]) : $ && (me = !!(Date.now() - $.createdAt >= i.dedupingInterval || C != null && C.forceRevalidate), !me) ? (v.isValidating = !1, [
               2
               /*return*/
             ]) : (ae = function() {
               return Z(he, void 0, void 0, function() {
-                var P, Ce, se, be;
+                var P, Ce, le, be;
                 return U(this, function(W) {
                   switch (W.label) {
                     case 0:
-                      return P = ce.get(E), P ? [3, 2] : (Ce = Array.isArray(E) ? E : [E], se = ne.apply(void 0, Nr([], Rr(Ce), !1)), ce.set(E, se, i.dedupingInterval), [4, Ne(E, se, i.cache, l)]);
+                      return P = ce.get(E), P ? [3, 2] : (Ce = Array.isArray(E) ? E : [E], le = ne.apply(void 0, Nr([], Rr(Ce), !1)), ce.set(E, le, i.dedupingInterval), [4, Ne(E, le, i.cache, u)]);
                     case 1:
                       return W.sent(), [3, 4];
                     case 2:
-                      return [4, Ne(E, P.data, i.cache, l)];
+                      return [4, Ne(E, P.data, i.cache, u)];
                     case 3:
                       W.sent(), W.label = 4;
                     case 4:
-                      return v.isValidating = !1, ce.delete(E), v.error !== void 0 && (be = !u && i.shouldRetryOnError && (C ? C.shouldRetryOnError : !0), be && Ir(b, C ? C.errorRetryCount : 1, i)), [
+                      return v.isValidating = !1, ce.delete(E), v.error !== void 0 && (be = !s && i.shouldRetryOnError && (C ? C.shouldRetryOnError : !0), be && Er(b, C ? C.errorRetryCount : 1, i)), [
                         2
                         /*return*/
                       ];
@@ -505,7 +505,7 @@ function xr() {
                 return U(this, function(P) {
                   switch (P.label) {
                     case 0:
-                      return u ? [3, 2] : [4, ae()];
+                      return s ? [3, 2] : [4, ae()];
                     case 1:
                       P.sent(), P.label = 2;
                     case 2:
@@ -532,7 +532,7 @@ function xr() {
         }
       });
     });
-  }, y = function() {
+  }, m = function() {
     return Z(e, void 0, void 0, function() {
       return U(this, function(S) {
         return [2, b(null, { shouldRetryOnError: !1 })];
@@ -551,7 +551,7 @@ function xr() {
             case 2:
               h && clearTimeout(h), C.label = 3;
             case 3:
-              return i.refreshInterval && !u && (h = setTimeout(S, i.refreshInterval)), [
+              return i.refreshInterval && !s && (h = setTimeout(S, i.refreshInterval)), [
                 2
                 /*return*/
               ];
@@ -559,9 +559,9 @@ function xr() {
         });
       });
     };
-    i.refreshInterval && (h = setTimeout(S, i.refreshInterval)), i.revalidateOnFocus && (document.addEventListener("visibilitychange", y, !1), window.addEventListener("focus", y, !1));
+    i.refreshInterval && (h = setTimeout(S, i.refreshInterval)), i.revalidateOnFocus && (document.addEventListener("visibilitychange", m, !1), window.addEventListener("focus", m, !1));
   }), Pe(function() {
-    u = !0, h && clearTimeout(h), i.revalidateOnFocus && (document.removeEventListener("visibilitychange", y, !1), window.removeEventListener("focus", y, !1));
+    s = !0, h && clearTimeout(h), i.revalidateOnFocus && (document.removeEventListener("visibilitychange", m, !1), window.removeEventListener("focus", m, !1));
     var S = ie.get(d.value);
     S && (S.data = S.data.filter(function(C) {
       return C !== v;
@@ -569,18 +569,18 @@ function xr() {
   });
   try {
     Ke(d, function(S) {
-      Ze(d) || (d.value = S), v.key = S, v.isValidating = !!S, Er(d.value, v, l), !s && !c && d.value && b(), c = !1;
+      Ze(d) || (d.value = S), v.key = S, v.isValidating = !!S, Tr(d.value, v, u), !l && !f && d.value && b(), f = !1;
     }, {
       immediate: !0
     });
   } catch {
   }
-  var T = O(O({}, Ue(v)), { mutate: function(S, C) {
+  var x = O(O({}, Ue(v)), { mutate: function(S, C) {
     return b(S, O(O({}, C), { forceRevalidate: !0 }));
   } });
-  return T;
+  return x;
 }
-function Tr(e) {
+function xr(e) {
   return e !== null && typeof e == "object" && typeof e.then == "function";
 }
 function kr(e, r, t) {
@@ -588,8 +588,8 @@ function kr(e, r, t) {
     data: a,
     error: n,
     isValidating: i,
-    mutate: u
-  } = xr(e, r, {
+    mutate: s
+  } = Ir(e, r, {
     revalidateDebounce: 500,
     revalidateOnFocus: !1,
     dedupingInterval: 100,
@@ -600,13 +600,13 @@ function kr(e, r, t) {
     response: a,
     error: n,
     isValidating: i,
-    revalidate: u
+    revalidate: s
   };
 }
 const K = {
   useI18n: cr,
   useMetricCardBuilder: hr,
-  useMetricFetcher: yr,
+  useMetricFetcher: mr,
   useRequest: kr
 }, Le = Symbol("METRICS_PROVIDER_KEY"), qr = (e) => {
   const {
@@ -615,17 +615,17 @@ const K = {
     additionalFilter: a,
     queryReady: n,
     timeframe: i,
-    tz: u,
-    hasTrendAccess: c,
-    refreshInterval: f,
+    tz: s,
+    hasTrendAccess: f,
+    refreshInterval: c,
     abortController: o,
-    queryFn: s
+    queryFn: l
   } = e;
   if (t && !r)
     throw new Error("Must provide a dimension if filtering by a value");
-  const l = !!(r && t), d = !!(r && !t), v = g(() => {
+  const u = !!(r && t), d = !!(r && !t), v = g(() => {
     const S = [];
-    return l && S.push({
+    return u && S.push({
       dimension: r,
       type: "in",
       values: [t]
@@ -637,40 +637,40 @@ const K = {
     // Traffic and error rate cards should only try to query for the dimension if it's going to be used.
     // It isn't used for single entity queries.
     dimensions: [
-      ...r && !l ? [r] : [],
+      ...r && !u ? [r] : [],
       "status_code_grouped"
     ],
     filter: v,
     queryReady: n,
     timeframe: i,
-    tz: u,
+    tz: s,
     // Traffic and error rate cards can't query trend if multiple entities are expected.
-    withTrend: g(() => c.value && !d),
-    refreshInterval: f,
-    queryFn: s,
+    withTrend: g(() => f.value && !d),
+    refreshInterval: c,
+    queryFn: l,
     abortController: o
-  }, y = {
+  }, m = {
     metrics: [
       "response_latency_p99"
     ],
     // To keep single-entity queries consistent, don't bother querying the dimension for latency
     // in the single-entity case, even though it's possible.
-    ...r && !l ? { dimensions: [r] } : {},
+    ...r && !u ? { dimensions: [r] } : {},
     filter: v,
     queryReady: n,
     timeframe: i,
-    tz: u,
+    tz: s,
     // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
-    withTrend: g(() => c.value && !d),
-    refreshInterval: f,
-    queryFn: s,
+    withTrend: g(() => f.value && !d),
+    refreshInterval: c,
+    queryFn: l,
     abortController: o
-  }, h = K.useMetricFetcher(b), T = K.useMetricFetcher(y);
+  }, h = K.useMetricFetcher(b), x = K.useMetricFetcher(m);
   return {
     trafficData: h,
-    latencyData: T
+    latencyData: x
   };
-}, mi = /* @__PURE__ */ k({
+}, gi = /* @__PURE__ */ k({
   __name: "MetricsProviderInternal",
   props: {
     maxTimeframe: { default: te.THIRTY_DAY },
@@ -682,6 +682,7 @@ const K = {
     queryReady: { type: Boolean, default: !0 },
     refreshInterval: {},
     longCardTitles: { type: Boolean, default: !1 },
+    containerTitle: { default: void 0 },
     description: { default: void 0 },
     abortController: { default: void 0 }
   },
@@ -689,45 +690,46 @@ const K = {
     const r = e;
     if (r.dimension && er.findIndex((d) => d === r.dimension) === -1)
       throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${r.dimension}`);
-    const t = Te(pr);
+    const t = xe(pr);
     let a;
     t ? a = t.queryFn : (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-metric-provider/README.md#requirements"), a = () => Promise.reject(new Error("Query bridge required")));
-    const i = ar().getConfig(), u = g(() => i.value !== null && r.queryReady), c = g(() => {
+    const i = ar().getConfig(), s = g(() => i.value !== null && r.queryReady), f = g(() => {
       var v, b;
       const d = (b = (v = i.value) == null ? void 0 : v.analytics) == null ? void 0 : b.retention_ms;
       return !!d && d > or;
-    }), f = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), o = g(() => {
+    }), c = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), o = g(() => {
       if (r.overrideTimeframe)
         return r.overrideTimeframe;
-      const d = c.value ? re.get(r.maxTimeframe) : re.get(te.ONE_DAY);
+      const d = f.value ? re.get(r.maxTimeframe) : re.get(te.ONE_DAY);
       if (!d)
         throw new Error("Metrics provider failed to resolve fallback timeframe.");
       return d;
     }), {
-      trafficData: s,
-      latencyData: l
+      trafficData: l,
+      latencyData: u
     } = qr({
       dimension: r.dimension,
       dimensionFilterValue: r.filterValue,
       additionalFilter: Ge(r, "additionalFilter"),
-      queryReady: u,
+      queryReady: s,
       timeframe: o,
-      tz: f,
-      hasTrendAccess: c,
+      tz: c,
+      hasTrendAccess: f,
       refreshInterval: r.refreshInterval,
       queryFn: a,
       abortController: r.abortController
     });
     return je(Le, {
       data: {
-        traffic: s,
-        latency: l
+        traffic: l,
+        latency: u
       },
       description: r.description,
-      hasTrendAccess: c,
+      containerTitle: r.containerTitle,
+      hasTrendAccess: f,
       longCardTitles: r.longCardTitles
     }), (d, v) => ke(d.$slots, "default", {
-      hasTrendAccess: c.value,
+      hasTrendAccess: f.value,
       timeframe: o.value
     });
   }
@@ -738,33 +740,33 @@ function zr(e) {
 var Me = { exports: {} };
 (function(e) {
   (function() {
-    function r(o, s) {
-      if (s.separator === !1 || o < 1e3)
+    function r(o, l) {
+      if (l.separator === !1 || o < 1e3)
         return o.toString();
-      var l = typeof s.separator == "string" ? s.separator : ",", d = [], v = Math.round(o).toString().split("");
-      return v.reverse().forEach(function(b, y) {
-        y && y % 3 === 0 && d.push(l), d.push(b);
+      var u = typeof l.separator == "string" ? l.separator : ",", d = [], v = Math.round(o).toString().split("");
+      return v.reverse().forEach(function(b, m) {
+        m && m % 3 === 0 && d.push(u), d.push(b);
       }), d.reverse().join("");
     }
-    function t(o, s, l) {
-      var d = o / s, v = l.round ? "round" : "floor";
-      return l.decimal === !1 ? (o = Math[v](d), o.toString()) : (l.precision ? o = d : o = d < 10 ? Math[v](d * 10) / 10 : Math[v](d), o = o.toString(), typeof l.decimal == "string" && (o = o.replace(".", l.decimal)), o);
+    function t(o, l, u) {
+      var d = o / l, v = u.round ? "round" : "floor";
+      return u.decimal === !1 ? (o = Math[v](d), o.toString()) : (u.precision ? o = d : o = d < 10 ? Math[v](d * 10) / 10 : Math[v](d), o = o.toString(), typeof u.decimal == "string" && (o = o.replace(".", u.decimal)), o);
     }
-    var a = 1e3, n = 1e4, i = 1e6, u = 1e9, c = 1e12;
-    function f(o, s) {
-      var l;
-      s = s || {};
+    var a = 1e3, n = 1e4, i = 1e6, s = 1e9, f = 1e12;
+    function c(o, l) {
+      var u;
+      l = l || {};
       var d = o < 0;
-      d && (o = Math.abs(o)), s.precision && (o = parseFloat(o.toPrecision(s.precision)));
-      var v = s.min10k ? n : a;
-      return o < v || s.precision && s.precision > Math.log10(o) ? l = r(t(o, 1, s), s) : o < i ? l = t(o, a, s) + "k" : o < u ? l = t(o, i, s) + "m" : o < c ? l = r(t(o, u, s), s) + "b" : l = r(t(o, c, s), s) + "t", d && (l = "-" + l), s.capital && (l = l.toUpperCase()), s.prefix && (l = s.prefix + l), s.suffix && (l = l + s.suffix), l;
+      d && (o = Math.abs(o)), l.precision && (o = parseFloat(o.toPrecision(l.precision)));
+      var v = l.min10k ? n : a;
+      return o < v || l.precision && l.precision > Math.log10(o) ? u = r(t(o, 1, l), l) : o < i ? u = t(o, a, l) + "k" : o < s ? u = t(o, i, l) + "m" : o < f ? u = r(t(o, s, l), l) + "b" : u = r(t(o, f, l), l) + "t", d && (u = "-" + u), l.capital && (u = u.toUpperCase()), l.prefix && (u = l.prefix + u), l.suffix && (u = u + l.suffix), u;
     }
-    f.addCommas = r, e.exports = f;
+    c.addCommas = r, e.exports = c;
   })();
 })(Me);
-var Ar = Me.exports;
-const Vr = /* @__PURE__ */ zr(Ar);
-var z = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.LargeCompact = "lgc", e.ExtraLarge = "xl", e))(z || {});
+var Vr = Me.exports;
+const Ar = /* @__PURE__ */ zr(Vr);
+var q = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.LargeCompact = "lgc", e.ExtraLarge = "xl", e))(q || {});
 const _ = "24px", D = (e, r) => {
   const t = e.__vccOpts || e;
   for (const [a, n] of r)
@@ -845,14 +847,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon cloud-upload-icon",
       "data-testid": "kui-icon-wrapper-cloud-upload-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-cloud-upload-icon",
           fill: "none",
@@ -862,7 +864,7 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", Dr, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", Dr, R(e.title), 1)) : N("", !0),
           Or
         ], 8, Mr))
       ]),
@@ -944,14 +946,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon equal-icon",
       "data-testid": "kui-icon-wrapper-equal-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-equal-icon",
           fill: "none",
@@ -961,7 +963,7 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", Pr, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", Pr, R(e.title), 1)) : N("", !0),
           Kr
         ], 8, $r))
       ]),
@@ -1043,14 +1045,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon indeterminate-small-icon",
       "data-testid": "kui-icon-wrapper-indeterminate-small-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-indeterminate-small-icon",
           fill: "none",
@@ -1060,7 +1062,7 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", Yr, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", Yr, R(e.title), 1)) : N("", !0),
           Xr
         ], 8, jr))
       ]),
@@ -1142,14 +1144,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon info-icon",
       "data-testid": "kui-icon-wrapper-info-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-info-icon",
           fill: "none",
@@ -1159,7 +1161,7 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", et, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", et, R(e.title), 1)) : N("", !0),
           rt
         ], 8, Jr))
       ]),
@@ -1169,10 +1171,10 @@ const _ = "24px", D = (e, r) => {
 }), it = /* @__PURE__ */ D(tt, [["__scopeId", "data-v-60c6b8be"]]), nt = (e) => (L("data-v-9ad4bd00"), e = e(), M(), e), at = ["aria-hidden"], ot = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, st = /* @__PURE__ */ nt(() => /* @__PURE__ */ I("path", {
+}, lt = /* @__PURE__ */ nt(() => /* @__PURE__ */ I("path", {
   d: "M15.25 5C14.9 5 14.6042 4.87917 14.3625 4.6375C14.1208 4.39583 14 4.1 14 3.75C14 3.4 14.1208 3.10417 14.3625 2.8625C14.6042 2.62083 14.9 2.5 15.25 2.5C15.6 2.5 15.8958 2.62083 16.1375 2.8625C16.3792 3.10417 16.5 3.4 16.5 3.75C16.5 4.1 16.3792 4.39583 16.1375 4.6375C15.8958 4.87917 15.6 5 15.25 5ZM15.25 21.5C14.9 21.5 14.6042 21.3792 14.3625 21.1375C14.1208 20.8958 14 20.6 14 20.25C14 19.9 14.1208 19.6042 14.3625 19.3625C14.6042 19.1208 14.9 19 15.25 19C15.6 19 15.8958 19.1208 16.1375 19.3625C16.3792 19.6042 16.5 19.9 16.5 20.25C16.5 20.6 16.3792 20.8958 16.1375 21.1375C15.8958 21.3792 15.6 21.5 15.25 21.5ZM19.25 8.5C18.9 8.5 18.6042 8.37917 18.3625 8.1375C18.1208 7.89583 18 7.6 18 7.25C18 6.9 18.1208 6.60417 18.3625 6.3625C18.6042 6.12083 18.9 6 19.25 6C19.6 6 19.8958 6.12083 20.1375 6.3625C20.3792 6.60417 20.5 6.9 20.5 7.25C20.5 7.6 20.3792 7.89583 20.1375 8.1375C19.8958 8.37917 19.6 8.5 19.25 8.5ZM19.25 18C18.9 18 18.6042 17.8792 18.3625 17.6375C18.1208 17.3958 18 17.1 18 16.75C18 16.4 18.1208 16.1042 18.3625 15.8625C18.6042 15.6208 18.9 15.5 19.25 15.5C19.6 15.5 19.8958 15.6208 20.1375 15.8625C20.3792 16.1042 20.5 16.4 20.5 16.75C20.5 17.1 20.3792 17.3958 20.1375 17.6375C19.8958 17.8792 19.6 18 19.25 18ZM20.75 13.25C20.4 13.25 20.1042 13.1292 19.8625 12.8875C19.6208 12.6458 19.5 12.35 19.5 12C19.5 11.65 19.6208 11.3542 19.8625 11.1125C20.1042 10.8708 20.4 10.75 20.75 10.75C21.1 10.75 21.3958 10.8708 21.6375 11.1125C21.8792 11.3542 22 11.65 22 12C22 12.35 21.8792 12.6458 21.6375 12.8875C21.3958 13.1292 21.1 13.25 20.75 13.25ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2V4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20V22ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.9167 10.0042 11.8292 10.0125 11.7375C10.0208 11.6458 10.0417 11.5583 10.075 11.475L8 9.4L9.4 8L11.475 10.075C11.5417 10.0583 11.7167 10.0333 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14Z",
   fill: "currentColor"
-}, null, -1)), ut = /* @__PURE__ */ k({
+}, null, -1)), st = /* @__PURE__ */ k({
   __name: "ResponseIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1241,14 +1243,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon response-icon",
       "data-testid": "kui-icon-wrapper-response-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-response-icon",
           fill: "none",
@@ -1258,14 +1260,14 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", ot, R(e.title), 1)) : x("", !0),
-          st
+          e.title ? (p(), y("title", ot, R(e.title), 1)) : N("", !0),
+          lt
         ], 8, at))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), lt = /* @__PURE__ */ D(ut, [["__scopeId", "data-v-9ad4bd00"]]), dt = (e) => (L("data-v-aa775b0e"), e = e(), M(), e), ct = ["aria-hidden"], ft = {
+}), ut = /* @__PURE__ */ D(st, [["__scopeId", "data-v-9ad4bd00"]]), dt = (e) => (L("data-v-aa775b0e"), e = e(), M(), e), ct = ["aria-hidden"], ft = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, pt = /* @__PURE__ */ dt(() => /* @__PURE__ */ I("path", {
@@ -1340,14 +1342,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon trend-down-icon",
       "data-testid": "kui-icon-wrapper-trend-down-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-trend-down-icon",
           fill: "none",
@@ -1357,17 +1359,17 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", ft, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", ft, R(e.title), 1)) : N("", !0),
           pt
         ], 8, ct))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), gt = /* @__PURE__ */ D(vt, [["__scopeId", "data-v-aa775b0e"]]), mt = (e) => (L("data-v-cb010004"), e = e(), M(), e), yt = ["aria-hidden"], ht = {
+}), gt = /* @__PURE__ */ D(vt, [["__scopeId", "data-v-aa775b0e"]]), yt = (e) => (L("data-v-cb010004"), e = e(), M(), e), mt = ["aria-hidden"], ht = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, Ct = /* @__PURE__ */ mt(() => /* @__PURE__ */ I("path", {
+}, Ct = /* @__PURE__ */ yt(() => /* @__PURE__ */ I("path", {
   d: "M3.4 18L2 16.6L9.4 9.15L13.4 13.15L18.6 8H16V6H22V12H20V9.4L13.4 16L9.4 12L3.4 18Z",
   fill: "currentColor"
 }, null, -1)), bt = /* @__PURE__ */ k({
@@ -1439,14 +1441,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon trend-up-icon",
       "data-testid": "kui-icon-wrapper-trend-up-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-trend-up-icon",
           fill: "none",
@@ -1456,9 +1458,9 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", ht, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", ht, R(e.title), 1)) : N("", !0),
           Ct
-        ], 8, yt))
+        ], 8, mt))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
@@ -1469,7 +1471,7 @@ const _ = "24px", D = (e, r) => {
 }, Nt = /* @__PURE__ */ wt(() => /* @__PURE__ */ I("path", {
   d: "M9 20C8.68333 20 8.4 19.9083 8.15 19.725C7.9 19.5417 7.71667 19.3083 7.6 19.025L5.3 13H1V11H6.7L9 17.1L13.6 4.975C13.7167 4.69167 13.9 4.45833 14.15 4.275C14.4 4.09167 14.6833 4 15 4C15.3167 4 15.6 4.09167 15.85 4.275C16.1 4.45833 16.2833 4.69167 16.4 4.975L18.7 11H23V13H17.3L15 6.9L10.4 19.025C10.2833 19.3083 10.1 19.5417 9.85 19.725C9.6 19.9083 9.31667 20 9 20Z",
   fill: "currentColor"
-}, null, -1)), Et = /* @__PURE__ */ k({
+}, null, -1)), Tt = /* @__PURE__ */ k({
   __name: "VitalsIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1538,14 +1540,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon vitals-icon",
       "data-testid": "kui-icon-wrapper-vitals-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-vitals-icon",
           fill: "none",
@@ -1555,17 +1557,17 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", Rt, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", Rt, R(e.title), 1)) : N("", !0),
           Nt
         ], 8, _t))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), It = /* @__PURE__ */ D(Et, [["__scopeId", "data-v-6d3b4073"]]), xt = (e) => (L("data-v-0e9cc640"), e = e(), M(), e), Tt = ["aria-hidden"], kt = {
+}), Et = /* @__PURE__ */ D(Tt, [["__scopeId", "data-v-6d3b4073"]]), It = (e) => (L("data-v-0e9cc640"), e = e(), M(), e), xt = ["aria-hidden"], kt = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, qt = /* @__PURE__ */ xt(() => /* @__PURE__ */ I("path", {
+}, qt = /* @__PURE__ */ It(() => /* @__PURE__ */ I("path", {
   d: "M12.0001 22.025C11.7334 22.025 11.4793 21.975 11.2376 21.875C10.9959 21.775 10.7751 21.6333 10.5751 21.45L2.5501 13.425C2.36676 13.225 2.2251 13.0041 2.1251 12.7625C2.0251 12.5208 1.9751 12.2666 1.9751 12C1.9751 11.7333 2.0251 11.475 2.1251 11.225C2.2251 10.975 2.36676 10.7583 2.5501 10.575L10.5751 2.54998C10.7751 2.34998 10.9959 2.20414 11.2376 2.11248C11.4793 2.02081 11.7334 1.97498 12.0001 1.97498C12.2668 1.97498 12.5251 2.02081 12.7751 2.11248C13.0251 2.20414 13.2418 2.34998 13.4251 2.54998L21.4501 10.575C21.6501 10.7583 21.7959 10.975 21.8876 11.225C21.9793 11.475 22.0251 11.7333 22.0251 12C22.0251 12.2666 21.9793 12.5208 21.8876 12.7625C21.7959 13.0041 21.6501 13.225 21.4501 13.425L13.4251 21.45C13.2418 21.6333 13.0251 21.775 12.7751 21.875C12.5251 21.975 12.2668 22.025 12.0001 22.025ZM12.0001 20.025L20.0251 12L12.0001 3.97498L3.9751 12L12.0001 20.025ZM11.0001 13H13.0001V6.99998H11.0001V13ZM12.0001 16C12.2834 16 12.5209 15.9041 12.7126 15.7125C12.9043 15.5208 13.0001 15.2833 13.0001 15C13.0001 14.7166 12.9043 14.4791 12.7126 14.2875C12.5209 14.0958 12.2834 14 12.0001 14C11.7168 14 11.4793 14.0958 11.2876 14.2875C11.0959 14.4791 11.0001 14.7166 11.0001 15C11.0001 15.2833 11.0959 15.5208 11.2876 15.7125C11.4793 15.9041 11.7168 16 12.0001 16Z",
   fill: "currentColor"
 }, null, -1)), zt = /* @__PURE__ */ k({
@@ -1637,14 +1639,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon warning-outline-icon",
       "data-testid": "kui-icon-wrapper-warning-outline-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-warning-outline-icon",
           fill: "none",
@@ -1654,17 +1656,17 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", kt, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", kt, R(e.title), 1)) : N("", !0),
           qt
-        ], 8, Tt))
+        ], 8, xt))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), At = /* @__PURE__ */ D(zt, [["__scopeId", "data-v-0e9cc640"]]), Vt = (e) => (L("data-v-d7b122fd"), e = e(), M(), e), Lt = ["aria-hidden"], Mt = {
+}), Vt = /* @__PURE__ */ D(zt, [["__scopeId", "data-v-0e9cc640"]]), At = (e) => (L("data-v-d7b122fd"), e = e(), M(), e), Lt = ["aria-hidden"], Mt = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, Dt = /* @__PURE__ */ Vt(() => /* @__PURE__ */ I("path", {
+}, Dt = /* @__PURE__ */ At(() => /* @__PURE__ */ I("path", {
   d: "M12.025 22.05C11.7583 22.05 11.5042 22 11.2625 21.9C11.0208 21.8 10.8 21.6583 10.6 21.475L2.575 13.45C2.39167 13.25 2.25 13.0292 2.15 12.7875C2.05 12.5458 2 12.2917 2 12.025C2 11.7583 2.05 11.5 2.15 11.25C2.25 11 2.39167 10.7833 2.575 10.6L10.6 2.575C10.8 2.375 11.0208 2.22917 11.2625 2.1375C11.5042 2.04583 11.7583 2 12.025 2C12.2917 2 12.55 2.04583 12.8 2.1375C13.05 2.22917 13.2667 2.375 13.45 2.575L21.475 10.6C21.675 10.7833 21.8208 11 21.9125 11.25C22.0042 11.5 22.05 11.7583 22.05 12.025C22.05 12.2917 22.0042 12.5458 21.9125 12.7875C21.8208 13.0292 21.675 13.25 21.475 13.45L13.45 21.475C13.2667 21.6583 13.05 21.8 12.8 21.9C12.55 22 12.2917 22.05 12.025 22.05ZM11.025 13.025H13.025V7.025H11.025V13.025ZM12.025 16.025C12.3083 16.025 12.5458 15.9292 12.7375 15.7375C12.9292 15.5458 13.025 15.3083 13.025 15.025C13.025 14.7417 12.9292 14.5042 12.7375 14.3125C12.5458 14.1208 12.3083 14.025 12.025 14.025C11.7417 14.025 11.5042 14.1208 11.3125 14.3125C11.1208 14.5042 11.025 14.7417 11.025 15.025C11.025 15.3083 11.1208 15.5458 11.3125 15.7375C11.5042 15.9292 11.7417 16.025 12.025 16.025Z",
   fill: "currentColor"
 }, null, -1)), Ot = /* @__PURE__ */ k({
@@ -1736,14 +1738,14 @@ const _ = "24px", D = (e, r) => {
       lineHeight: "0",
       width: t.value
     }));
-    return (n, i) => (p(), N(q(e.as), {
+    return (n, i) => (p(), T(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon warning-icon",
       "data-testid": "kui-icon-wrapper-warning-icon",
-      style: V(a.value)
+      style: A(a.value)
     }, {
-      default: A(() => [
-        (p(), m("svg", {
+      default: V(() => [
+        (p(), y("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-warning-icon",
           fill: "none",
@@ -1753,31 +1755,31 @@ const _ = "24px", D = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), m("title", Mt, R(e.title), 1)) : x("", !0),
+          e.title ? (p(), y("title", Mt, R(e.title), 1)) : N("", !0),
           Dt
         ], 8, Lt))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Oe = /* @__PURE__ */ D(Ot, [["__scopeId", "data-v-d7b122fd"]]), ge = 2, Ee = ge + 2, Ft = (e, r, t = !1) => {
-  let a = !r || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
+}), Oe = /* @__PURE__ */ D(Ot, [["__scopeId", "data-v-d7b122fd"]]), ge = 2, Te = ge + 2, Ft = (e, r, t = !1) => {
+  let a = !r || Number(e.toFixed(Te)) === 0 ? 0 : Number(e.toFixed(Te)) > 0 ? 1 : -1;
   return t && (a *= -1), a;
-}, Ht = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(ge)}%` : t, Bt = (e, r) => r === 0 ? 0 : e / r - 1, $t = (e, r = !1) => (r && (e *= -1), e > 0 ? St : e < 0 ? gt : De), Pt = "#ad000e", fe = "#6c7489", Ie = "#52596e", Kt = "#007d60", J = "16px", Zt = "20px", Ut = "14px", Gt = "24px", jt = "48px";
+}, Ht = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(ge)}%` : t, Bt = (e, r) => r === 0 ? 0 : e / r - 1, $t = (e, r = !1) => (r && (e *= -1), e > 0 ? St : e < 0 ? gt : De), Pt = "#ad000e", fe = "#6c7489", Ee = "#52596e", Kt = "#007d60", J = "16px", Zt = "20px";
 var F = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(F || {});
-const Yt = { class: "metricscard" }, Xt = {
+const Ut = { class: "metricscard" }, Gt = {
   key: 0,
   class: "metricscard-description"
-}, Qt = {
+}, jt = {
   key: 0,
   class: "metricscard-error"
-}, Wt = {
+}, Yt = {
   key: 2,
   class: "metricscard-trend"
-}, Jt = { "data-testid": "metric-trend-change" }, ei = {
+}, Xt = { "data-testid": "metric-trend-change" }, Qt = {
   key: 0,
   class: "metricscard-trend-range"
-}, ri = /* @__PURE__ */ k({
+}, Wt = /* @__PURE__ */ k({
   __name: "MetricsCard",
   props: {
     cardType: {
@@ -1836,7 +1838,12 @@ const Yt = { class: "metricscard" }, Xt = {
     cardSize: {
       type: String,
       required: !1,
-      default: () => "lg"
+      default: () => q.Large
+    },
+    hasContainerTitle: {
+      type: Boolean,
+      required: !1,
+      default: !1
     },
     titleTag: {
       type: String,
@@ -1845,111 +1852,116 @@ const Yt = { class: "metricscard" }, Xt = {
   },
   setup(e) {
     const r = /* @__PURE__ */ new Map([
-      [F.GENERIC_COUNT, It],
+      [F.GENERIC_COUNT, Et],
       [F.TRAFFIC, Hr],
-      [F.ERROR_RATE, At],
-      [F.LATENCY, lt]
-    ]), t = e, a = (o) => {
-      const s = {
+      [F.ERROR_RATE, Vt],
+      [F.LATENCY, ut]
+    ]), t = e, a = (c) => {
+      const o = {
         red: `var(--kong-ui-metric-card-trend-negative, ${Pt})`,
         green: `var(--kong-ui-metric-card-trend-positive, ${Kt})`,
-        grey: `var(--kong-ui-metric-card-trend-neutral, ${Ie})`
+        grey: `var(--kong-ui-metric-card-trend-neutral, ${Ee})`
       };
-      return o > 0 ? s.green : o < 0 ? s.red : s.grey;
-    }, n = (o) => o > 0 ? "positive" : o < 0 ? "negative" : "neutral", i = [z.Medium, z.Large, z.LargeCompact].includes(t.cardSize), u = t.cardSize === z.ExtraLarge ? jt : i ? Gt : Ut, c = g(() => t.cardSize === z.LargeCompact), f = [z.Small, z.LargeCompact].includes(t.cardSize);
-    return (o, s) => {
+      return c > 0 ? o.green : c < 0 ? o.red : o.grey;
+    }, n = (c) => c > 0 ? "positive" : c < 0 ? "negative" : "neutral", i = [q.Medium, q.Large, q.LargeCompact].includes(t.cardSize), s = g(() => t.cardSize === q.LargeCompact), f = [q.Small, q.LargeCompact].includes(t.cardSize);
+    return (c, o) => {
       const l = qe("KTooltip");
-      return p(), m("div", Yt, [
+      return p(), y("div", Ut, [
         I("div", {
           class: G(["metricscard-title", e.cardSize])
         }, [
-          w(f) ? x("", !0) : (p(), N(q(w(r).get(e.cardType)), {
+          w(f) ? N("", !0) : (p(), T(z(w(r).get(e.cardType)), {
             key: 0,
             class: "metricscard-icon",
             color: w(fe),
             size: w(J)
           }, null, 8, ["color", "size"])),
-          (p(), N(q(e.titleTag), null, {
-            default: A(() => [
+          (p(), T(z(e.titleTag), null, {
+            default: V(() => [
               Ye(R(e.title), 1)
             ]),
             _: 1
           })),
-          e.tooltip ? (p(), N(l, {
+          e.tooltip ? (p(), T(l, {
             key: 1,
             class: "metricscard-tooltip",
             placement: "right",
             text: e.tooltip
           }, {
-            default: A(() => [
+            default: V(() => [
               Y(w(it), {
                 color: w(fe),
                 size: w(J)
               }, null, 8, ["color", "size"])
             ]),
             _: 1
-          }, 8, ["text"])) : x("", !0)
+          }, 8, ["text"])) : N("", !0)
         ], 2),
-        e.description && w(i) && !c.value ? (p(), m("div", Xt, [
+        e.description && w(i) && !s.value ? (p(), y("div", Gt, [
           I("span", null, R(e.description), 1)
-        ])) : x("", !0),
+        ])) : N("", !0),
         I("div", {
-          class: G(["metricscard-valuetrend", { "is-compact": c.value }])
+          class: G(["metricscard-valuetrend", { "is-compact": s.value }])
         }, [
-          e.hasError ? (p(), m("div", Qt, [
+          e.hasError ? (p(), y("div", jt, [
             Y(w(Oe), {
               color: w(fe),
               size: w(Zt)
             }, null, 8, ["color", "size"]),
             I("div", null, " " + R(e.errorMessage), 1)
-          ])) : (p(), m("div", {
+          ])) : (p(), y("div", {
             key: 1,
             class: G(["metricscard-value", e.cardSize]),
-            "data-testid": "metric-value",
-            style: V(`font-size:${w(u)}`)
-          }, R(e.metricValue), 7)),
-          w(i) ? (p(), m("div", Wt, [
+            "data-testid": "metric-value"
+          }, R(e.metricValue), 3)),
+          w(i) ? (p(), y("div", Yt, [
             I("div", {
               class: G(["metricscard-trend-change", n(e.changePolarity)]),
               "data-testid": "metric-trend-parent"
             }, [
-              e.changePolarity !== 0 ? (p(), N(q(e.trendIcon), {
+              e.changePolarity !== 0 ? (p(), T(z(e.trendIcon), {
                 key: 0,
                 color: a(e.changePolarity),
                 size: w(J)
-              }, null, 8, ["color", "size"])) : (p(), N(w(Ur), {
+              }, null, 8, ["color", "size"])) : (p(), T(w(Ur), {
                 key: 1,
-                color: w(Ie),
+                color: w(Ee),
                 size: w(J)
               }, null, 8, ["color", "size"])),
-              I("div", Jt, R(e.metricChange), 1)
+              I("div", Xt, R(e.metricChange), 1)
             ], 2),
-            e.trendRange && e.cardSize !== w(z).LargeCompact ? (p(), m("div", ei, R(e.trendRange), 1)) : x("", !0)
-          ])) : x("", !0)
+            e.trendRange && e.cardSize !== w(q).LargeCompact ? (p(), y("div", Qt, R(e.trendRange), 1)) : N("", !0)
+          ])) : N("", !0)
         ], 2)
       ]);
     };
   }
-}), me = (e, r) => {
+}), ye = (e, r) => {
   const t = e.__vccOpts || e;
   for (const [a, n] of r)
     t[a] = n;
   return t;
-}, ti = /* @__PURE__ */ me(ri, [["__scopeId", "data-v-b64f16bb"]]), ii = {}, ni = { class: "loading-tabs" };
-function ai(e, r) {
+}, Jt = /* @__PURE__ */ ye(Wt, [["__scopeId", "data-v-bb9e718a"]]), ei = {}, ri = { class: "loading-tabs" };
+function ti(e, r) {
   const t = qe("KSkeletonBox");
-  return p(), m("div", ni, [
+  return p(), y("div", ri, [
     Y(t, { width: "100" }),
     Y(t, { width: "75" })
   ]);
 }
-const oi = /* @__PURE__ */ me(ii, [["render", ai], ["__scopeId", "data-v-f7eb9c40"]]), si = {
+const ii = /* @__PURE__ */ ye(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c40"]]), ni = {
   key: 0,
+  class: "container-title"
+}, ai = {
+  key: 1,
   class: "error-display"
-}, ui = {
+}, oi = {
   key: 0,
   class: "error-display-message"
-}, li = /* @__PURE__ */ k({
+}, li = {
+  key: 2,
+  class: "cards-wrapper"
+}, si = /* @__PURE__ */ k({
   __name: "MetricCardContainer",
   props: {
     fallbackDisplayText: {
@@ -1978,56 +1990,65 @@ const oi = /* @__PURE__ */ me(ii, [["render", ai], ["__scopeId", "data-v-f7eb9c4
     cardSize: {
       type: String,
       required: !1,
-      default: () => z.Large
+      default: () => q.Large
+    },
+    containerTitle: {
+      type: String,
+      required: !1,
+      default: ""
     }
   },
   setup(e) {
     const r = e, t = g(() => r.cards.every((n) => (n == null ? void 0 : n.hasError) === !0)), a = (n) => {
-      const i = Bt(n.currentValue, n.previousValue) || 0, u = Ft(i, r.hasTrendAccess, n.increaseIsBad);
+      const i = Bt(n.currentValue, n.previousValue) || 0, s = Ft(i, r.hasTrendAccess, n.increaseIsBad);
       return {
-        metricValue: n.formatValueFn ? n.formatValueFn(n.currentValue) : Vr(n.currentValue, { capital: !0, round: !0 }) || "0",
+        metricValue: n.formatValueFn ? n.formatValueFn(n.currentValue) : Ar(n.currentValue, { capital: !0, round: !0 }) || "0",
         metricChange: n.formatChangeFn ? n.formatChangeFn(i) : Ht(i, r.hasTrendAccess, r.fallbackDisplayText),
-        changePolarity: u,
-        trendIcon: $t(u, n.increaseIsBad),
-        cardSize: r.cardSize
+        changePolarity: s,
+        trendIcon: $t(s, n.increaseIsBad),
+        cardSize: r.cardSize,
+        hasContainerTitle: !!r.containerTitle
       };
     };
-    return (n, i) => (p(), m("div", {
+    return (n, i) => (p(), y("div", {
       class: G(["kong-ui-public-metric-card-container", e.cardSize])
     }, [
-      t.value ? (p(), m("div", si, [
+      r.containerTitle ? (p(), y("div", ni, R(r.containerTitle), 1)) : N("", !0),
+      t.value ? (p(), y("div", ai, [
         Y(w(Oe), { class: "error-display-icon" }),
-        e.errorMessage ? (p(), m("div", ui, R(e.errorMessage), 1)) : x("", !0)
-      ])) : (p(!0), m(Se, { key: 1 }, Xe(e.cards, (u, c) => (p(), m(Se, null, [
-        e.loading ? (p(), N(oi, {
-          key: `skeleton-${c}`,
-          class: G(e.cardSize === w(z).Small ? "loading-tabs-small" : "loading-tabs-large")
-        }, null, 8, ["class"])) : (p(), N(ti, Qe({ key: c }, a(u), {
-          "card-size": e.cardSize,
-          "card-type": u.cardType,
-          description: u.description,
-          "error-message": e.errorMessage,
-          "has-error": u.hasError,
-          title: u.title,
-          "title-tag": u.titleTag,
-          tooltip: u.tooltip,
-          "trend-range": u.trendRange
-        }), null, 16, ["card-size", "card-type", "description", "error-message", "has-error", "title", "title-tag", "tooltip", "trend-range"]))
-      ], 64))), 256))
+        e.errorMessage ? (p(), y("div", oi, R(e.errorMessage), 1)) : N("", !0)
+      ])) : (p(), y("div", li, [
+        (p(!0), y(Se, null, Xe(e.cards, (s, f) => (p(), y(Se, null, [
+          e.loading ? (p(), T(ii, {
+            key: `skeleton-${f}`,
+            class: G(e.cardSize === w(q).Small ? "loading-tabs-small" : "loading-tabs-large")
+          }, null, 8, ["class"])) : (p(), T(Jt, Qe({ key: f }, a(s), {
+            "card-size": e.cardSize,
+            "card-type": s.cardType,
+            description: s.description,
+            "error-message": e.errorMessage,
+            "has-error": s.hasError,
+            title: s.title,
+            "title-tag": s.titleTag,
+            tooltip: s.tooltip,
+            "trend-range": s.trendRange
+          }), null, 16, ["card-size", "card-type", "description", "error-message", "has-error", "title", "title-tag", "tooltip", "trend-range"]))
+        ], 64))), 256))
+      ]))
     ], 2));
   }
-}), di = /* @__PURE__ */ me(li, [["__scopeId", "data-v-081c6557"]]), yi = /* @__PURE__ */ k({
+}), ui = /* @__PURE__ */ ye(si, [["__scopeId", "data-v-0483795d"]]), yi = /* @__PURE__ */ k({
   __name: "MetricsConsumer",
   props: {
     lookupKey: { default: void 0 },
-    cardSize: { default: z.Large },
+    cardSize: { default: q.Large },
     cardToDisplay: { default: void 0 }
   },
   setup(e) {
-    const r = e, t = Te(Le);
+    const r = e, t = xe(Le);
     if (!t)
       throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
-    const { traffic: a, latency: n } = t.data, { i18n: i } = K.useI18n(), u = K.useMetricCardBuilder({
+    const { traffic: a, latency: n } = t.data, { i18n: i } = K.useI18n(), s = K.useMetricCardBuilder({
       cardType: F.TRAFFIC,
       title: g(() => t.longCardTitles ? i.t("metricCard.long.traffic") : i.t("metricCard.short.traffic")),
       description: t.description,
@@ -2036,20 +2057,20 @@ const oi = /* @__PURE__ */ me(ii, [["render", ai], ["__scopeId", "data-v-f7eb9c4
       lookupKey: r.lookupKey,
       sumGroupedValues: Q,
       trendRange: a.trendRange
-    }), c = (y) => `${y.toFixed(ge)}%`, f = g(() => {
-      const y = a.mapped.value, h = j(y, "current", r.lookupKey, we), T = j(y, "current", r.lookupKey, Q), S = h / T * 100 || 0, C = j(y, "previous", r.lookupKey, we), H = j(y, "previous", r.lookupKey, Q), E = C / H * 100 || 0;
+    }), f = (m) => `${m.toFixed(ge)}%`, c = g(() => {
+      const m = a.mapped.value, h = j(m, "current", r.lookupKey, we), x = j(m, "current", r.lookupKey, Q), S = h / x * 100 || 0, C = j(m, "previous", r.lookupKey, we), H = j(m, "previous", r.lookupKey, Q), E = C / H * 100 || 0;
       return {
         cardType: F.ERROR_RATE,
         hasError: a.hasError.value,
         currentValue: S,
         previousValue: E,
-        formatValueFn: c,
+        formatValueFn: f,
         title: t.longCardTitles ? i.t("metricCard.long.errorRate") : i.t("metricCard.short.errorRate"),
         description: t.description,
         increaseIsBad: !0,
         trendRange: a.trendRange.value
       };
-    }), o = (y) => `${y}ms`, s = K.useMetricCardBuilder({
+    }), o = (m) => `${m}ms`, l = K.useMetricCardBuilder({
       cardType: F.LATENCY,
       title: g(() => t.longCardTitles ? i.t("metricCard.long.latency") : i.t("metricCard.short.latency")),
       description: t.description,
@@ -2059,60 +2080,62 @@ const oi = /* @__PURE__ */ me(ii, [["render", ai], ["__scopeId", "data-v-f7eb9c4
       increaseIsBad: !0,
       formatValueFn: o,
       trendRange: n.trendRange
-    }), l = g(() => r.cardToDisplay === "TRAFFIC" ? [u.value] : r.cardToDisplay === "ERROR_RATE" ? [f.value] : r.cardToDisplay === "LATENCY" ? [s.value] : [u.value, f.value, s.value]), d = g(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? a.isLoading.value : r.cardToDisplay === "LATENCY" ? n.isLoading.value : a.isLoading.value || n.isLoading.value), v = g(() => ({
-      cards: l.value,
+    }), u = g(() => r.cardToDisplay === "TRAFFIC" ? [s.value] : r.cardToDisplay === "ERROR_RATE" ? [c.value] : r.cardToDisplay === "LATENCY" ? [l.value] : [s.value, c.value, l.value]), d = g(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? a.isLoading.value : r.cardToDisplay === "LATENCY" ? n.isLoading.value : a.isLoading.value || n.isLoading.value), v = g(() => ({
+      cards: u.value,
+      containerTitle: t.containerTitle,
       loading: d.value,
       hasTrendAccess: t.hasTrendAccess.value,
       fallbackDisplayText: i.t("general.notAvailable"),
-      cardSize: r.cardSize,
+      // If the parent container has a title, we enforce a Medium card size; otherwise, pass down provided cardSize
+      cardSize: t.containerTitle ? q.Medium : r.cardSize,
       hideTitle: !0
     })), b = g(() => ({
       loading: v.value.loading,
-      trafficCard: u.value,
-      errorRateCard: f.value,
-      latencyCard: s.value,
-      errorRateFormatted: c(f.value.currentValue),
-      latencyFormatted: o(s.value.currentValue)
+      trafficCard: s.value,
+      errorRateCard: c.value,
+      latencyCard: l.value,
+      errorRateFormatted: f(c.value.currentValue),
+      latencyFormatted: o(l.value.currentValue)
     }));
-    return (y, h) => ke(y.$slots, "default", { cardValues: b.value }, () => [
-      Y(w(di), We(Je(v.value)), null, 16)
+    return (m, h) => ke(m.$slots, "default", { cardValues: b.value }, () => [
+      Y(w(ui), We(Je(v.value)), null, 16)
     ]);
   }
-}), ee = (e) => new Date(e), hi = (e, r) => {
+}), ee = (e) => new Date(e), mi = (e, r) => {
   const t = e.body;
   e.reply({
     statusCode: 200,
-    body: ci(t, r)
+    body: di(t, r)
   });
-}, xe = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), ci = (e, r) => {
-  var b, y;
-  const t = re.get(te.ONE_DAY), a = e.granularity === "trend" ? new rr(t) : new tr(t), n = a.endMs(), i = a.startMs(), u = a.granularityMs(), c = e.granularity === "trend" ? 2 : 1;
+}, Ie = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), di = (e, r) => {
+  var b, m;
+  const t = re.get(te.ONE_DAY), a = e.granularity === "trend" ? new rr(t) : new tr(t), n = a.endMs(), i = a.startMs(), s = a.granularityMs(), f = e.granularity === "trend" ? 2 : 1;
   if ((e.dimensions ?? []).length > 2)
     throw new Error(`Explore only supports 0-2 dimensions; got: ${JSON.stringify(e.dimensions)}`);
-  const f = (e.dimensions ?? []).find((h) => h !== "time"), o = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(o.length, 1), l = e.metrics || [], d = [];
-  for (let h = 0; h < c; h++)
-    for (let T = 0; T < s; T++) {
-      const S = f ? { [f]: o[T] } : {};
+  const c = (e.dimensions ?? []).find((h) => h !== "time"), o = (r == null ? void 0 : r.dimensionNames) ?? [], l = Math.max(o.length, 1), u = e.metrics || [], d = [];
+  for (let h = 0; h < f; h++)
+    for (let x = 0; x < l; x++) {
+      const S = c ? { [c]: o[x] } : {};
       (b = e.dimensions) != null && b.includes("status_code_grouped") ? Q.forEach((C) => {
-        const H = l.reduce((E, $) => (E[$] = (c - h) * 1e3 + 100 * T + 1, E), { ...S, status_code_grouped: C });
+        const H = u.reduce((E, $) => (E[$] = (f - h) * 1e3 + 100 * x + 1, E), { ...S, status_code_grouped: C });
         d.push({
           version: "v1",
-          timestamp: h === 0 ? ee(i).toISOString() : ee(i + u).toISOString(),
+          timestamp: h === 0 ? ee(i).toISOString() : ee(i + s).toISOString(),
           event: H
         });
       }) : d.push({
         version: "v1",
-        timestamp: h === 0 ? ee(i).toISOString() : ee(i + u).toISOString(),
-        event: l.reduce((C, H) => (C[H] = (c - h) * 1e3 + 100 * T + 1, C), { ...S })
+        timestamp: h === 0 ? ee(i).toISOString() : ee(i + s).toISOString(),
+        event: u.reduce((C, H) => (C[H] = (f - h) * 1e3 + 100 * x + 1, C), { ...S })
       });
     }
   const v = {
     start_ms: i,
     end_ms: n,
-    granularity_ms: u,
-    display: f ? {
-      [f]: xe(o),
-      ...(y = e.dimensions) != null && y.includes("status_code_grouped") ? { status_code_grouped: xe(Q) } : {}
+    granularity_ms: s,
+    display: c ? {
+      [c]: Ie(o),
+      ...(m = e.dimensions) != null && m.includes("status_code_grouped") ? { status_code_grouped: Ie(Q) } : {}
     } : {},
     metric_names: e.metrics,
     query_id: "test"
@@ -2124,7 +2147,7 @@ const oi = /* @__PURE__ */ me(ii, [["render", ai], ["__scopeId", "data-v-f7eb9c4
 };
 export {
   yi as MetricsConsumer,
-  mi as MetricsProviderInternal,
-  ci as mockExploreResponse,
-  hi as mockExploreResponseFromCypress
+  gi as MetricsProviderInternal,
+  di as mockExploreResponse,
+  mi as mockExploreResponseFromCypress
 };