@kong-ui-public/analytics-metric-provider 4.0.7 → 4.0.8

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

@@ -1,5 +1,5 @@
-import { ref as pe, watchEffect as He, computed as g, getCurrentInstance as Be, reactive as $e, onMounted as Pe, onUnmounted as Ke, isReadonly as Ze, watch as Ue, toRefs as Ge, defineComponent as x, inject as ke, toRef as Se, provide as je, renderSlot as ze, resolveComponent as qe, openBlock as f, createElementBlock as y, createElementVNode as R, normalizeClass as G, unref as S, createCommentVNode as E, createBlock as T, resolveDynamicComponent as z, toDisplayString as N, withCtx as A, createVNode as X, normalizeStyle as V, Fragment as we, renderList as Xe, mergeProps as Ye, pushScopeId as L, popScopeId as D, normalizeProps as Qe, guardReactiveProps as We } from "vue";
-import { TimeframeKeys as re, queryableExploreDimensions as Je, TimePeriods as te, DeltaQueryTime as er, UnaryQueryTime as rr } from "@kong-ui-public/analytics-utilities";
+import { ref as pe, watchEffect as He, computed as g, getCurrentInstance as Be, reactive as $e, onMounted as Pe, onUnmounted as Ke, isReadonly as Ze, watch as Ue, toRefs as Ge, defineComponent as k, inject as ke, toRef as Se, provide as je, renderSlot as ze, resolveComponent as qe, openBlock as p, createElementBlock as m, createElementVNode as R, normalizeClass as G, unref as w, createCommentVNode as E, createBlock as T, resolveDynamicComponent as q, toDisplayString as N, withCtx as A, createVNode as X, normalizeStyle as V, Fragment as we, renderList as Xe, mergeProps as Ye, pushScopeId as L, popScopeId as D, normalizeProps as Qe, guardReactiveProps as We } from "vue";
+import { TimePeriods as re, TimeframeKeys as te, queryableExploreDimensions as Je, DeltaQueryTime as er, UnaryQueryTime as rr } from "@kong-ui-public/analytics-utilities";
 import { createI18n as tr, i18nTComponent as ir } from "@kong-ui-public/i18n";
 const nr = {
   notAvailable: "N/A"
@@ -15,7 +15,7 @@ const nr = {
     latency: "P99 Latency"
   }
 }, or = {
-  custom: "vs previous {numDays} days",
+  custom: "vs previous {numDays, plural, =1 {day} other {# days}}",
   "15m": "vs previous 15 minutes",
   "1h": "vs previous hour",
   "6h": "vs previous 6 hours",
@@ -45,59 +45,59 @@ function ur() {
 const lr = 2, Q = ["1XX", "2XX", "3XX", "4XX", "5XX"], _e = ["4XX", "5XX"], dr = "analytics-query-provider";
 var Ae = /* @__PURE__ */ ((e) => (e.VALIDATING = "VALIDATING", e.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", e.PENDING = "PENDING", e.SUCCESS = "SUCCESS", e.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", e.ERROR = "ERROR", e.STALE_IF_ERROR = "STALE_IF_ERROR", e))(Ae || {});
 const cr = (e) => {
-  var t, r, a, n, i;
+  var r, t, a, n, i;
   return e ? !!// TODO: revisit: currently only the first check ever matters?
-  ((t = Object.keys(e)) != null && t.length || (r = e.data) != null && r.length || (n = (a = e.data) == null ? void 0 : a.data) != null && n.length || !((i = e.data) != null && i.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
+  ((r = Object.keys(e)) != null && r.length || (t = e.data) != null && t.length || (n = (a = e.data) == null ? void 0 : a.data) != null && n.length || !((i = e.data) != null && i.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
 };
-function fr(e = pe({}), t, r, a = cr) {
+function fr(e = pe({}), r, t, a = cr) {
   const n = pe(
     "PENDING"
     /* PENDING */
   );
   return He(() => {
     const i = a(e.value);
-    if (e.value && i && r.value) {
+    if (e.value && i && t.value) {
       n.value = "VALIDATING_HAS_DATA";
       return;
     }
-    if (e.value && r.value) {
+    if (e.value && t.value) {
       n.value = "VALIDATING";
       return;
     }
-    if (e.value && t.value) {
+    if (e.value && r.value) {
       n.value = "STALE_IF_ERROR";
       return;
     }
-    if (e.value === void 0 && !t.value) {
+    if (e.value === void 0 && !r.value) {
       n.value = "PENDING";
       return;
     }
-    if (e.value && !t.value && i) {
+    if (e.value && !r.value && i) {
       n.value = "SUCCESS_HAS_DATA";
       return;
     }
-    if (e.value && !t.value) {
+    if (e.value && !r.value) {
       n.value = "SUCCESS";
       return;
     }
-    e.value === void 0 && t && (n.value = "ERROR");
+    e.value === void 0 && r && (n.value = "ERROR");
   }), {
     state: n,
     swrvState: Ae
   };
 }
-const B = Symbol("default"), ue = "status_code_grouped", Re = (e, t, r, a, n) => {
-  e[t][r] || (e[t][r] = {}), e[t][r][a] = n;
+const B = Symbol("default"), ue = "status_code_grouped", Re = (e, r, t, a, n) => {
+  e[r][t] || (e[r][t] = {}), e[r][t][a] = n;
 };
-function pr(e, t) {
-  var c;
-  const r = ((c = e.meta.metric_names) == null ? void 0 : c[0]) || "", a = e.meta.start_ms, n = Object.keys(e.meta.display || {}), i = !!n.find((d) => d === ue), u = n.find((d) => d !== ue);
+function pr(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((d) => d === ue), u = n.find((d) => d !== ue);
   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((d, o) => {
-    const s = o.event[r], l = u ? o.event[u] : B, p = i ? o.event[ue] : B;
-    return new Date(o.timestamp).getTime() === a && t ? Re(d, "previous", l, p, s) : Re(d, "current", l, p, s), d;
+    const s = o.event[t], l = u ? o.event[u] : B, c = i ? o.event[ue] : B;
+    return new Date(o.timestamp).getTime() === a && r ? Re(d, "previous", l, c, s) : Re(d, "current", l, c, s), d;
   }, {
     previous: {},
     current: {}
@@ -105,56 +105,67 @@ function pr(e, t) {
 }
 function vr(e) {
   e.queryReady === void 0 && (e.queryReady = g(() => !0));
-  const t = g(() => {
-    var o, s;
+  const { i18n: r } = K.useI18n(), t = g(() => {
+    var l, c;
     return {
       metrics: e.metrics,
       dimensions: [
-        ...(o = e.dimensions) != null && o.length ? [...e.dimensions] : [],
+        ...(l = e.dimensions) != null && l.length ? [...e.dimensions] : [],
         ...e.withTrend ? ["time"] : []
       ],
       granularity: e.withTrend ? "trend" : void 0,
-      ...(s = e.filter.value) != null && s.length ? { filters: e.filter.value } : {},
+      ...(c = e.filter.value) != null && c.length ? { filters: e.filter.value } : {},
       time_range: e.timeframe.value.v4Query(e.tz.value)
     };
-  }), r = g(() => {
-    var s, l, p, v;
-    if (!((s = e.queryReady) != null && s.value) || e.featureFlags && !e.featureFlags.every((b) => b))
+  }), a = g(() => {
+    var c, v, S, y;
+    if (!((c = e.queryReady) != null && c.value) || e.featureFlags && !e.featureFlags.every((h) => h))
       return null;
-    const o = (l = e.filter) != null && l.value ? JSON.stringify(e.filter.value) : "";
-    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(p = e.dimensions) == null ? void 0 : p.join("-")}-${(v = e.metrics) == null ? void 0 : v.join("-")}-${o}`;
-  }), { response: a, error: n, isValidating: i } = K.useRequest(
-    () => r.value,
+    const l = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
+    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(S = e.dimensions) == null ? void 0 : S.join("-")}-${(y = e.metrics) == null ? void 0 : y.join("-")}-${l}`;
+  }), { response: n, error: i, isValidating: u } = K.useRequest(
+    () => a.value,
     () => e.queryFn(t.value, e.abortController ?? new AbortController()),
     {
       refreshInterval: e.refreshInterval,
       revalidateOnFocus: !1,
       errorRetryCount: lr
     }
-  ), { state: u, swrvState: c } = fr(a, n, i), d = g(() => {
-    var o, s, l, p, v, b, h;
-    return !((s = (o = a.value) == null ? void 0 : o.data) != null && s.length) || !((p = (l = a.value) == null ? void 0 : l.meta) != null && p.display) || !((h = (b = (v = a.value) == null ? void 0 : v.meta) == null ? void 0 : b.metric_names) != null && h.length) ? { current: {}, previous: {} } : pr(a.value, !!e.withTrend);
+  ), { state: f, swrvState: d } = fr(n, i, u), o = g(() => {
+    var l, c, v, S, y, h, x;
+    return !((c = (l = n.value) == null ? void 0 : l.data) != null && c.length) || !((S = (v = n.value) == null ? void 0 : v.meta) != null && S.display) || !((x = (h = (y = n.value) == null ? void 0 : y.meta) == null ? void 0 : h.metric_names) != null && x.length) ? { current: {}, previous: {} } : pr(n.value, !!e.withTrend);
+  }), s = g(() => {
+    var l, c, v;
+    if (e.timeframe.value.key === "custom") {
+      if (!((c = (l = n.value) == null ? void 0 : l.meta) != null && c.start_ms))
+        return "";
+      const { start_ms: S, end_ms: y } = n.value.meta;
+      let h = (y - S) / (1e3 * 60 * 60 * 24);
+      return e.withTrend && (h /= 2), r.t("trendRange.custom", { numDays: Math.round(h) });
+    } else
+      return e.withTrend ? r.t(`trendRange.${e.timeframe.value.key}`) : r.t(`trendRange.${(v = re.get(te.ONE_DAY)) == null ? void 0 : v.key}`);
   });
   return {
-    isLoading: g(() => c.PENDING === u.value),
-    hasError: g(() => c.ERROR === u.value),
-    raw: a,
-    mapped: d
+    isLoading: g(() => d.PENDING === f.value),
+    hasError: g(() => d.ERROR === f.value),
+    raw: n,
+    mapped: o,
+    trendRange: s
   };
 }
-const j = (e, t, r = B, a) => (a ?? [B]).reduce((i, u) => {
-  const c = e[t][r];
-  return c ? i + (c[u] || 0) : i;
+const j = (e, r, t = B, a) => (a ?? [B]).reduce((i, u) => {
+  const f = e[r][t];
+  return f ? i + (f[u] || 0) : i;
 }, 0);
 function gr(e) {
   const {
-    cardType: t,
-    title: r,
+    cardType: r,
+    title: t,
     description: a,
     record: n,
     hasError: i,
     increaseIsBad: u,
-    formatValueFn: c,
+    formatValueFn: f,
     trendRange: d
   } = e;
   return g(() => {
@@ -169,64 +180,64 @@ function gr(e) {
         );
       }
     return {
-      cardType: t,
+      cardType: r,
       hasError: i.value,
       currentValue: o,
       previousValue: s,
-      title: r.value,
+      title: t.value,
       description: a,
       increaseIsBad: !!u,
       // Coerce undefined to false
-      formatValueFn: c,
+      formatValueFn: f,
       trendRange: d == null ? void 0 : d.value
     };
   });
 }
 var le = /* @__PURE__ */ new WeakMap(), Ne = 0;
-function yr(e) {
+function mr(e) {
   if (!e.length)
     return "";
-  for (var t = "arg", r = 0; r < e.length; ++r) {
+  for (var r = "arg", t = 0; t < e.length; ++t) {
     var a = void 0;
-    e[r] === null || typeof e[r] != "object" && typeof e[r] != "function" ? typeof e[r] == "string" ? a = '"' + e[r] + '"' : a = String(e[r]) : le.has(e[r]) ? a = le.get(e[r]) : (a = Ne, le.set(e[r], Ne++)), t += "@" + a;
+    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 = Ne, le.set(e[t], Ne++)), r += "@" + a;
   }
-  return t;
+  return r;
 }
-function mr(e) {
+function yr(e) {
   if (typeof e == "function")
     try {
       e = e();
     } catch {
       e = "";
     }
-  return Array.isArray(e) ? e = yr(e) : e = String(e || ""), e;
+  return Array.isArray(e) ? e = mr(e) : e = String(e || ""), e;
 }
 var ve = (
   /** @class */
   function() {
-    function e(t) {
-      t === void 0 && (t = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = t;
+    function e(r) {
+      r === void 0 && (r = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = r;
     }
-    return e.prototype.serializeKey = function(t) {
-      return mr(t);
-    }, e.prototype.get = function(t) {
-      var r = this.serializeKey(t);
-      return this.items.get(r);
-    }, e.prototype.set = function(t, r, a) {
-      var n = this.serializeKey(t), i = a || this.ttl, u = Date.now(), c = {
-        data: r,
+    return e.prototype.serializeKey = function(r) {
+      return yr(r);
+    }, e.prototype.get = function(r) {
+      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(), f = {
+        data: t,
         createdAt: u,
         expiresAt: i ? u + i : 1 / 0
       };
-      this.dispatchExpire(i, c, n), this.items.set(n, c);
-    }, e.prototype.dispatchExpire = function(t, r, a) {
+      this.dispatchExpire(i, f, n), this.items.set(n, f);
+    }, e.prototype.dispatchExpire = function(r, t, a) {
       var n = this;
-      t && setTimeout(function() {
-        var i = Date.now(), u = i >= r.expiresAt;
+      r && setTimeout(function() {
+        var i = Date.now(), u = i >= t.expiresAt;
         u && n.delete(a);
-      }, t);
-    }, e.prototype.delete = function(t) {
-      this.items.delete(t);
+      }, r);
+    }, e.prototype.delete = function(r) {
+      this.items.delete(r);
     }, e;
   }()
 );
@@ -237,8 +248,8 @@ function Cr() {
   return typeof document < "u" && typeof document.visibilityState < "u" ? document.visibilityState !== "hidden" : !0;
 }
 var br = function(e) {
-  return fetch(e).then(function(t) {
-    return t.json();
+  return fetch(e).then(function(r) {
+    return r.json();
   });
 };
 const de = {
@@ -248,21 +259,21 @@ const de = {
 };
 var O = function() {
   return O = Object.assign || function(e) {
-    for (var t, r = 1, a = arguments.length; r < a; r++) {
-      t = arguments[r];
-      for (var n in t)
-        Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+    for (var r, t = 1, a = arguments.length; t < a; t++) {
+      r = arguments[t];
+      for (var n in r)
+        Object.prototype.hasOwnProperty.call(r, n) && (e[n] = r[n]);
     }
     return e;
   }, O.apply(this, arguments);
-}, Z = function(e, t, r, a) {
+}, Z = function(e, r, t, a) {
   function n(i) {
-    return i instanceof r ? i : new r(function(u) {
+    return i instanceof t ? i : new t(function(u) {
       u(i);
     });
   }
-  return new (r || (r = Promise))(function(i, u) {
-    function c(s) {
+  return new (t || (t = Promise))(function(i, u) {
+    function f(s) {
       try {
         o(a.next(s));
       } catch (l) {
@@ -277,20 +288,20 @@ var O = function() {
       }
     }
     function o(s) {
-      s.done ? i(s.value) : n(s.value).then(c, d);
+      s.done ? i(s.value) : n(s.value).then(f, d);
     }
-    o((a = a.apply(e, t || [])).next());
+    o((a = a.apply(e, r || [])).next());
   });
-}, U = function(e, t) {
-  var r = { label: 0, sent: function() {
+}, U = function(e, r) {
+  var t = { label: 0, sent: 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() {
+  return u = { next: f(0), throw: f(1), return: f(2) }, typeof Symbol == "function" && (u[Symbol.iterator] = function() {
     return this;
   }), u;
-  function c(o) {
+  function f(o) {
     return function(s) {
       return d([o, s]);
     };
@@ -298,7 +309,7 @@ var O = function() {
   function d(o) {
     if (a)
       throw new TypeError("Generator is already executing.");
-    for (; r; )
+    for (; t; )
       try {
         if (a = 1, n && (i = o[0] & 2 ? n.return : o[0] ? n.throw || ((i = n.return) && i.call(n), 0) : n.next) && !(i = i.call(n, o[1])).done)
           return i;
@@ -308,34 +319,34 @@ var O = function() {
             i = o;
             break;
           case 4:
-            return r.label++, { value: o[1], done: !1 };
+            return t.label++, { value: o[1], done: !1 };
           case 5:
-            r.label++, n = o[1], o = [0];
+            t.label++, n = o[1], o = [0];
             continue;
           case 7:
-            o = r.ops.pop(), r.trys.pop();
+            o = t.ops.pop(), t.trys.pop();
             continue;
           default:
-            if (i = r.trys, !(i = i.length > 0 && i[i.length - 1]) && (o[0] === 6 || o[0] === 2)) {
-              r = 0;
+            if (i = t.trys, !(i = i.length > 0 && i[i.length - 1]) && (o[0] === 6 || o[0] === 2)) {
+              t = 0;
               continue;
             }
             if (o[0] === 3 && (!i || o[1] > i[0] && o[1] < i[3])) {
-              r.label = o[1];
+              t.label = o[1];
               break;
             }
-            if (o[0] === 6 && r.label < i[1]) {
-              r.label = i[1], i = o;
+            if (o[0] === 6 && t.label < i[1]) {
+              t.label = i[1], i = o;
               break;
             }
-            if (i && r.label < i[2]) {
-              r.label = i[2], r.ops.push(o);
+            if (i && t.label < i[2]) {
+              t.label = i[2], t.ops.push(o);
               break;
             }
-            i[2] && r.ops.pop(), r.trys.pop();
+            i[2] && t.ops.pop(), t.trys.pop();
             continue;
         }
-        o = t.call(e, r);
+        o = r.call(e, t);
       } catch (s) {
         o = [6, s], n = 0;
       } finally {
@@ -345,30 +356,30 @@ var O = function() {
       throw o[1];
     return { value: o[0] ? o[1] : void 0, done: !0 };
   }
-}, Sr = function(e, t) {
-  var r = typeof Symbol == "function" && e[Symbol.iterator];
-  if (!r)
+}, Sr = function(e, r) {
+  var t = typeof Symbol == "function" && e[Symbol.iterator];
+  if (!t)
     return e;
-  var a = r.call(e), n, i = [], u;
+  var a = t.call(e), n, i = [], u;
   try {
-    for (; (t === void 0 || t-- > 0) && !(n = a.next()).done; )
+    for (; (r === void 0 || r-- > 0) && !(n = a.next()).done; )
       i.push(n.value);
-  } catch (c) {
-    u = { error: c };
+  } catch (f) {
+    u = { error: f };
   } finally {
     try {
-      n && !n.done && (r = a.return) && r.call(a);
+      n && !n.done && (t = a.return) && t.call(a);
     } finally {
       if (u)
         throw u.error;
     }
   }
   return i;
-}, wr = function(e, t, r) {
-  if (r || arguments.length === 2)
-    for (var a = 0, n = t.length, i; a < n; a++)
-      (i || !(a in t)) && (i || (i = Array.prototype.slice.call(t, 0, a)), i[a] = t[a]);
-  return e.concat(i || Array.prototype.slice.call(t));
+}, wr = function(e, r, t) {
+  if (t || arguments.length === 2)
+    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));
 }, Ve = new ve(), ie = new ve(), ce = new ve(), Le = {
   cache: Ve,
   refreshInterval: 0,
@@ -384,69 +395,69 @@ var O = function() {
   isOnline: de.isOnline,
   isDocumentVisible: de.isDocumentVisible
 };
-function _r(e, t, r) {
+function _r(e, r, t) {
   var a = ie.get(e);
   if (a)
-    a.data.push(t);
+    a.data.push(r);
   else {
     var n = 5e3;
-    ie.set(e, [t], r > 0 ? r + n : r);
+    ie.set(e, [r], t > 0 ? t + n : t);
   }
 }
-function Rr(e, t, r) {
-  if (r.isDocumentVisible() && !(r.errorRetryCount !== void 0 && t > r.errorRetryCount)) {
-    var a = Math.min(t || 0, r.errorRetryCount), n = a * r.errorRetryInterval;
+function Rr(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() {
       e(null, { errorRetryCount: a + 1, shouldRetryOnError: !0 });
     }, n);
   }
 }
-var Ie = function(e, t, r, a) {
-  return r === void 0 && (r = Ve), a === void 0 && (a = Le.ttl), Z(void 0, void 0, void 0, function() {
-    var n, i, u, c, d, o, s;
+var Ie = function(e, r, t, a) {
+  return t === void 0 && (t = Ve), a === void 0 && (a = Le.ttl), Z(void 0, void 0, void 0, function() {
+    var n, i, u, f, d, o, s;
     return U(this, function(l) {
       switch (l.label) {
         case 0:
-          if (!Ir(t))
+          if (!Ir(r))
             return [3, 5];
           l.label = 1;
         case 1:
-          return l.trys.push([1, 3, , 4]), [4, t];
+          return l.trys.push([1, 3, , 4]), [4, r];
         case 2:
           return n = l.sent(), [3, 4];
         case 3:
-          return c = l.sent(), i = c, [3, 4];
+          return f = l.sent(), i = f, [3, 4];
         case 4:
           return [3, 6];
         case 5:
-          n = t, l.label = 6;
+          n = r, l.label = 6;
         case 6:
           if (u = !1, d = { data: n, error: i, isValidating: u }, typeof n < "u")
             try {
-              r.set(e, d, a);
-            } catch (p) {
-              console.error("swrv(mutate): failed to set cache", p);
+              t.set(e, d, a);
+            } catch (c) {
+              console.error("swrv(mutate): failed to set cache", c);
             }
-          return o = ie.get(e), o && o.data.length && (s = o.data.filter(function(p) {
-            return p.key === e;
-          }), s.forEach(function(p, v) {
-            typeof d.data < "u" && (p.data = d.data), p.error = d.error, p.isValidating = d.isValidating;
-            var b = v === s.length - 1;
-            b || delete s[v];
+          return o = ie.get(e), o && o.data.length && (s = o.data.filter(function(c) {
+            return c.key === e;
+          }), s.forEach(function(c, v) {
+            typeof d.data < "u" && (c.data = d.data), c.error = d.error, c.isValidating = d.isValidating;
+            var S = v === s.length - 1;
+            S || delete s[v];
           }), s = s.filter(Boolean)), [2, d];
       }
     });
   });
 };
 function Nr() {
-  for (var e = this, t = [], r = 0; r < arguments.length; r++)
-    t[r] = arguments[r];
-  var a, n, i = O({}, Le), u = !1, c = !1, d = Be(), o = (d == null ? void 0 : d.proxy) || d;
+  for (var e = this, r = [], t = 0; t < arguments.length; t++)
+    r[t] = arguments[t];
+  var a, n, i = O({}, Le), u = !1, f = !1, d = Be(), o = (d == null ? void 0 : d.proxy) || d;
   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;
-  t.length >= 1 && (a = t[0]), t.length >= 2 && (n = t[1]), t.length > 2 && (i = O(O({}, i), t[2]));
-  var l = s ? i.serverTTL : i.ttl, p = typeof a == "function" ? a : pe(a);
+  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, c = typeof a == "function" ? a : pe(a);
   typeof n > "u" && (n = i.fetcher);
   var v = null;
   v || (v = $e({
@@ -455,16 +466,16 @@ function Nr() {
     isValidating: !0,
     key: null
   }));
-  var b = function(C, m) {
+  var S = function(b, C) {
     return Z(e, void 0, void 0, function() {
-      var H, I, $, Y, ne, me, ae, he = this;
+      var H, I, $, Y, ne, ye, ae, he = this;
       return U(this, function(oe) {
         switch (oe.label) {
           case 0:
-            return H = v.data === void 0, I = p.value, I ? ($ = i.cache.get(I), Y = $ && $.data, v.isValidating = !0, Y && (v.data = Y.data, v.error = Y.error), ne = C || n, !ne || !i.isDocumentVisible() && !H || (m == null ? void 0 : m.forceRevalidate) !== void 0 && !(m != null && m.forceRevalidate) ? (v.isValidating = !1, [
+            return H = v.data === void 0, I = c.value, I ? ($ = i.cache.get(I), Y = $ && $.data, v.isValidating = !0, Y && (v.data = Y.data, v.error = Y.error), ne = b || n, !ne || !i.isDocumentVisible() && !H || (C == null ? void 0 : C.forceRevalidate) !== void 0 && !(C != null && C.forceRevalidate) ? (v.isValidating = !1, [
               2
               /*return*/
-            ]) : $ && (me = !!(Date.now() - $.createdAt >= i.dedupingInterval || m != null && m.forceRevalidate), !me) ? (v.isValidating = !1, [
+            ]) : $ && (ye = !!(Date.now() - $.createdAt >= i.dedupingInterval || C != null && C.forceRevalidate), !ye) ? (v.isValidating = !1, [
               2
               /*return*/
             ]) : (ae = function() {
@@ -481,7 +492,7 @@ function Nr() {
                     case 3:
                       W.sent(), W.label = 4;
                     case 4:
-                      return v.isValidating = !1, ce.delete(I), v.error !== void 0 && (be = !u && i.shouldRetryOnError && (m ? m.shouldRetryOnError : !0), be && Rr(b, m ? m.errorRetryCount : 1, i)), [
+                      return v.isValidating = !1, ce.delete(I), v.error !== void 0 && (be = !u && i.shouldRetryOnError && (C ? C.shouldRetryOnError : !0), be && Rr(S, C ? C.errorRetryCount : 1, i)), [
                         2
                         /*return*/
                       ];
@@ -520,26 +531,26 @@ function Nr() {
         }
       });
     });
-  }, h = function() {
+  }, y = function() {
     return Z(e, void 0, void 0, function() {
-      return U(this, function(C) {
-        return [2, b(null, { shouldRetryOnError: !1 })];
+      return U(this, function(b) {
+        return [2, S(null, { shouldRetryOnError: !1 })];
       });
     });
-  }, w = null;
+  }, h = null;
   Pe(function() {
-    var C = function() {
+    var b = function() {
       return Z(e, void 0, void 0, function() {
-        return U(this, function(m) {
-          switch (m.label) {
+        return U(this, function(C) {
+          switch (C.label) {
             case 0:
-              return !v.error && i.isOnline() ? [4, b()] : [3, 2];
+              return !v.error && i.isOnline() ? [4, S()] : [3, 2];
             case 1:
-              return m.sent(), [3, 3];
+              return C.sent(), [3, 3];
             case 2:
-              w && clearTimeout(w), m.label = 3;
+              h && clearTimeout(h), C.label = 3;
             case 3:
-              return i.refreshInterval && !u && (w = setTimeout(C, i.refreshInterval)), [
+              return i.refreshInterval && !u && (h = setTimeout(b, i.refreshInterval)), [
                 2
                 /*return*/
               ];
@@ -547,41 +558,41 @@ function Nr() {
         });
       });
     };
-    i.refreshInterval && (w = setTimeout(C, i.refreshInterval)), i.revalidateOnFocus && (document.addEventListener("visibilitychange", h, !1), window.addEventListener("focus", h, !1));
+    i.refreshInterval && (h = setTimeout(b, i.refreshInterval)), i.revalidateOnFocus && (document.addEventListener("visibilitychange", y, !1), window.addEventListener("focus", y, !1));
   }), Ke(function() {
-    u = !0, w && clearTimeout(w), i.revalidateOnFocus && (document.removeEventListener("visibilitychange", h, !1), window.removeEventListener("focus", h, !1));
-    var C = ie.get(p.value);
-    C && (C.data = C.data.filter(function(m) {
-      return m !== v;
+    u = !0, h && clearTimeout(h), i.revalidateOnFocus && (document.removeEventListener("visibilitychange", y, !1), window.removeEventListener("focus", y, !1));
+    var b = ie.get(c.value);
+    b && (b.data = b.data.filter(function(C) {
+      return C !== v;
     }));
   });
   try {
-    Ue(p, function(C) {
-      Ze(p) || (p.value = C), v.key = C, v.isValidating = !!C, _r(p.value, v, l), !s && !c && p.value && b(), c = !1;
+    Ue(c, function(b) {
+      Ze(c) || (c.value = b), v.key = b, v.isValidating = !!b, _r(c.value, v, l), !s && !f && c.value && S(), f = !1;
     }, {
       immediate: !0
     });
   } catch {
   }
-  var q = O(O({}, Ge(v)), { mutate: function(C, m) {
-    return b(C, O(O({}, m), { forceRevalidate: !0 }));
+  var x = O(O({}, Ge(v)), { mutate: function(b, C) {
+    return S(b, O(O({}, C), { forceRevalidate: !0 }));
   } });
-  return q;
+  return x;
 }
 function Ir(e) {
   return e !== null && typeof e == "object" && typeof e.then == "function";
 }
-function Er(e, t, r) {
+function Er(e, r, t) {
   const {
     data: a,
     error: n,
     isValidating: i,
     mutate: u
-  } = Nr(e, t, {
+  } = Nr(e, r, {
     revalidateDebounce: 500,
     revalidateOnFocus: !1,
     dedupingInterval: 100,
-    ...r
+    ...t
   });
   return {
     data: g(() => a.value),
@@ -598,34 +609,34 @@ const K = {
   useRequest: Er
 }, De = Symbol("METRICS_PROVIDER_KEY"), Tr = (e) => {
   const {
-    dimension: t,
-    dimensionFilterValue: r,
+    dimension: r,
+    dimensionFilterValue: t,
     additionalFilter: a,
     queryReady: n,
     timeframe: i,
     tz: u,
-    hasTrendAccess: c,
+    hasTrendAccess: f,
     refreshInterval: d,
     abortController: o,
     queryFn: s
   } = e;
-  if (r && !t)
+  if (t && !r)
     throw new Error("Must provide a dimension if filtering by a value");
-  const l = !!(t && r), p = !!(t && !r), v = g(() => {
-    const C = [];
-    return l && C.push({
-      dimension: t,
+  const l = !!(r && t), c = !!(r && !t), v = g(() => {
+    const b = [];
+    return l && b.push({
+      dimension: r,
       type: "in",
-      values: [r]
-    }), a.value && C.push(...a.value), C;
-  }), b = {
+      values: [t]
+    }), a.value && b.push(...a.value), b;
+  }), S = {
     metrics: [
       "request_count"
     ],
     // 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: [
-      ...t && !l ? [t] : [],
+      ...r && !l ? [r] : [],
       "status_code_grouped"
     ],
     filter: v,
@@ -633,35 +644,35 @@ const K = {
     timeframe: i,
     tz: u,
     // Traffic and error rate cards can't query trend if multiple entities are expected.
-    withTrend: c && !p,
+    withTrend: f && !c,
     refreshInterval: d,
     queryFn: s,
     abortController: o
-  }, h = {
+  }, y = {
     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.
-    ...t && !l ? { dimensions: [t] } : {},
+    ...r && !l ? { dimensions: [r] } : {},
     filter: v,
     queryReady: n,
     timeframe: i,
     tz: u,
     // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
-    withTrend: c && !p,
+    withTrend: f && !c,
     refreshInterval: d,
     queryFn: s,
     abortController: o
-  }, w = K.useMetricFetcher(b), q = K.useMetricFetcher(h);
+  }, h = K.useMetricFetcher(S), x = K.useMetricFetcher(y);
   return {
-    trafficData: w,
-    latencyData: q
+    trafficData: h,
+    latencyData: x
   };
-}, ci = /* @__PURE__ */ x({
+}, ci = /* @__PURE__ */ k({
   __name: "MetricsProviderInternal",
   props: {
-    maxTimeframe: { default: re.THIRTY_DAY },
+    maxTimeframe: { default: te.THIRTY_DAY },
     overrideTimeframe: { default: void 0 },
     tz: { default: void 0 },
     dimension: { default: void 0 },
@@ -675,49 +686,45 @@ const K = {
     abortController: { default: void 0 }
   },
   setup(e) {
-    const { i18n: t } = K.useI18n(), r = e;
-    if (r.dimension && Je.findIndex((s) => s === r.dimension) === -1)
+    const r = e;
+    if (r.dimension && Je.findIndex((d) => d === r.dimension) === -1)
       throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${r.dimension}`);
-    const a = ke(dr);
-    let n;
-    a ? n = a.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"), n = () => Promise.reject(new Error("Query bridge required")));
-    const i = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), u = g(() => {
+    const t = ke(dr);
+    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 n = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), i = g(() => {
       if (r.overrideTimeframe)
         return r.overrideTimeframe;
-      const s = r.hasTrendAccess ? te.get(r.maxTimeframe) : te.get(re.ONE_DAY);
-      if (!s)
+      const d = r.hasTrendAccess ? re.get(r.maxTimeframe) : re.get(te.ONE_DAY);
+      if (!d)
         throw new Error("Metrics provider failed to resolve fallback timeframe.");
-      return s;
-    }), c = g(() => {
-      var s;
-      return u.value.key === "custom" ? t.t("trendRange.custom", { numDays: Math.ceil(u.value.timeframeLength() / (1e3 * 60 * 24)) }) : r.hasTrendAccess ? t.t(`trendRange.${u.value.key}`) : t.t(`trendRange.${(s = te.get(re.ONE_DAY)) == null ? void 0 : s.key}`);
+      return d;
     }), {
-      trafficData: d,
-      latencyData: o
+      trafficData: u,
+      latencyData: f
     } = Tr({
       dimension: r.dimension,
       dimensionFilterValue: r.filterValue,
       additionalFilter: Se(r, "additionalFilter"),
       queryReady: Se(r, "queryReady"),
-      timeframe: u,
-      tz: i,
+      timeframe: i,
+      tz: n,
       hasTrendAccess: r.hasTrendAccess,
       refreshInterval: r.refreshInterval,
-      queryFn: n,
+      queryFn: a,
       abortController: r.abortController
     });
     return je(De, {
       data: {
-        traffic: d,
-        latency: o
+        traffic: u,
+        latency: f
       },
       description: r.description,
       hasTrendAccess: r.hasTrendAccess,
-      longCardTitles: r.longCardTitles,
-      trendRange: c
-    }), (s, l) => ze(s.$slots, "default", {
+      longCardTitles: r.longCardTitles
+    }), (d, o) => ze(d.$slots, "default", {
       hasTrendAccess: r.hasTrendAccess,
-      timeframe: u.value
+      timeframe: i.value
     });
   }
 });
@@ -727,45 +734,45 @@ function xr(e) {
 var Me = { exports: {} };
 (function(e) {
   (function() {
-    function t(o, s) {
+    function r(o, s) {
       if (s.separator === !1 || o < 1e3)
         return o.toString();
-      var l = typeof s.separator == "string" ? s.separator : ",", p = [], v = Math.round(o).toString().split("");
-      return v.reverse().forEach(function(b, h) {
-        h && h % 3 === 0 && p.push(l), p.push(b);
-      }), p.reverse().join("");
+      var l = typeof s.separator == "string" ? s.separator : ",", c = [], v = Math.round(o).toString().split("");
+      return v.reverse().forEach(function(S, y) {
+        y && y % 3 === 0 && c.push(l), c.push(S);
+      }), c.reverse().join("");
     }
-    function r(o, s, l) {
-      var p = o / s, v = l.round ? "round" : "floor";
-      return l.decimal === !1 ? (o = Math[v](p), o.toString()) : (l.precision ? o = p : o = p < 10 ? Math[v](p * 10) / 10 : Math[v](p), o = o.toString(), typeof l.decimal == "string" && (o = o.replace(".", l.decimal)), o);
+    function t(o, s, l) {
+      var c = o / s, v = l.round ? "round" : "floor";
+      return l.decimal === !1 ? (o = Math[v](c), o.toString()) : (l.precision ? o = c : o = c < 10 ? Math[v](c * 10) / 10 : Math[v](c), o = o.toString(), typeof l.decimal == "string" && (o = o.replace(".", l.decimal)), o);
     }
-    var a = 1e3, n = 1e4, i = 1e6, u = 1e9, c = 1e12;
+    var a = 1e3, n = 1e4, i = 1e6, u = 1e9, f = 1e12;
     function d(o, s) {
       var l;
       s = s || {};
-      var p = o < 0;
-      p && (o = Math.abs(o)), s.precision && (o = parseFloat(o.toPrecision(s.precision)));
+      var c = o < 0;
+      c && (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 = t(r(o, 1, s), s) : o < i ? l = r(o, a, s) + "k" : o < u ? l = r(o, i, s) + "m" : o < c ? l = t(r(o, u, s), s) + "b" : l = t(r(o, c, s), s) + "t", p && (l = "-" + l), s.capital && (l = l.toUpperCase()), s.prefix && (l = s.prefix + l), s.suffix && (l = l + s.suffix), l;
+      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 < f ? l = r(t(o, u, s), s) + "b" : l = r(t(o, f, s), s) + "t", c && (l = "-" + l), s.capital && (l = l.toUpperCase()), s.prefix && (l = s.prefix + l), s.suffix && (l = l + s.suffix), l;
     }
-    d.addCommas = t, e.exports = d;
+    d.addCommas = r, e.exports = d;
   })();
 })(Me);
 var kr = Me.exports;
 const zr = /* @__PURE__ */ xr(kr);
-var k = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.LargeCompact = "lgc", e.ExtraLarge = "xl", e))(k || {});
-const _ = "24px", M = (e, t) => {
-  const r = e.__vccOpts || e;
-  for (const [a, n] of t)
-    r[a] = n;
-  return r;
+var z = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.LargeCompact = "lgc", e.ExtraLarge = "xl", e))(z || {});
+const _ = "24px", M = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [a, n] of r)
+    t[a] = n;
+  return t;
 }, qr = (e) => (L("data-v-115ec679"), e = e(), D(), e), Ar = ["aria-hidden"], Vr = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Lr = /* @__PURE__ */ qr(() => /* @__PURE__ */ R("path", {
   d: "M6.5 20C4.98333 20 3.6875 19.475 2.6125 18.425C1.5375 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.6042 4.67917 16.9625 6.0375C18.3208 7.39583 19 9.05 19 11C20.15 11.1333 21.1042 11.6292 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.75 22.5625 17.8125 21.6875 18.6875C20.8125 19.5625 19.75 20 18.5 20H13C12.45 20 11.9792 19.8042 11.5875 19.4125C11.1958 19.0208 11 18.55 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5C19.2 18 19.7917 17.7583 20.275 17.275C20.7583 16.7917 21 16.2 21 15.5C21 14.8 20.7583 14.2083 20.275 13.725C19.7917 13.2417 19.2 13 18.5 13H17V11C17 9.61667 16.5125 8.4375 15.5375 7.4625C14.5625 6.4875 13.3833 6 12 6C10.6167 6 9.4375 6.4875 8.4625 7.4625C7.4875 8.4375 7 9.61667 7 11H6.5C5.53333 11 4.70833 11.3417 4.025 12.025C3.34167 12.7083 3 13.5333 3 14.5C3 15.4667 3.34167 16.2917 4.025 16.975C4.70833 17.6583 5.53333 18 6.5 18H9V20H6.5Z",
   fill: "currentColor"
-}, null, -1)), Dr = /* @__PURE__ */ x({
+}, null, -1)), Dr = /* @__PURE__ */ k({
   __name: "CloudUploadIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -802,8 +809,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -817,31 +824,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-cloud-upload-icon",
           fill: "none",
@@ -851,7 +858,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", Vr, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", Vr, N(e.title), 1)) : E("", !0),
           Lr
         ], 8, Ar))
       ]),
@@ -864,7 +871,7 @@ const _ = "24px", M = (e, t) => {
 }, Br = /* @__PURE__ */ Or(() => /* @__PURE__ */ R("path", {
   d: "M4 17V14H20V17H4ZM4 10V7H20V10H4Z",
   fill: "currentColor"
-}, null, -1)), $r = /* @__PURE__ */ x({
+}, null, -1)), $r = /* @__PURE__ */ k({
   __name: "EqualIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -901,8 +908,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -916,31 +923,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-equal-icon",
           fill: "none",
@@ -950,7 +957,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", Hr, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", Hr, N(e.title), 1)) : E("", !0),
           Br
         ], 8, Fr))
       ]),
@@ -963,7 +970,7 @@ const _ = "24px", M = (e, t) => {
 }, Gr = /* @__PURE__ */ Kr(() => /* @__PURE__ */ R("path", {
   d: "M5 11V9H15V11H5Z",
   fill: "currentColor"
-}, null, -1)), jr = /* @__PURE__ */ x({
+}, null, -1)), jr = /* @__PURE__ */ k({
   __name: "IndeterminateSmallIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1000,8 +1007,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1015,31 +1022,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-indeterminate-small-icon",
           fill: "none",
@@ -1049,7 +1056,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", Ur, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", Ur, N(e.title), 1)) : E("", !0),
           Gr
         ], 8, Zr))
       ]),
@@ -1062,7 +1069,7 @@ const _ = "24px", M = (e, t) => {
 }, Wr = /* @__PURE__ */ Xr(() => /* @__PURE__ */ R("path", {
   d: "M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 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 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z",
   fill: "currentColor"
-}, null, -1)), Jr = /* @__PURE__ */ x({
+}, null, -1)), Jr = /* @__PURE__ */ k({
   __name: "InfoIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1099,8 +1106,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1114,31 +1121,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-info-icon",
           fill: "none",
@@ -1148,7 +1155,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", Qr, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", Qr, N(e.title), 1)) : E("", !0),
           Wr
         ], 8, Yr))
       ]),
@@ -1161,7 +1168,7 @@ const _ = "24px", M = (e, t) => {
 }, nt = /* @__PURE__ */ rt(() => /* @__PURE__ */ R("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)), at = /* @__PURE__ */ x({
+}, null, -1)), at = /* @__PURE__ */ k({
   __name: "ResponseIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1198,8 +1205,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1213,31 +1220,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-response-icon",
           fill: "none",
@@ -1247,7 +1254,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", it, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", it, N(e.title), 1)) : E("", !0),
           nt
         ], 8, tt))
       ]),
@@ -1260,7 +1267,7 @@ const _ = "24px", M = (e, t) => {
 }, dt = /* @__PURE__ */ st(() => /* @__PURE__ */ R("path", {
   d: "M16 18V16H18.6L13.4 10.85L9.4 14.85L2 7.4L3.4 6L9.4 12L13.4 8L20 14.6V12H22V18H16Z",
   fill: "currentColor"
-}, null, -1)), ct = /* @__PURE__ */ x({
+}, null, -1)), ct = /* @__PURE__ */ k({
   __name: "TrendDownIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1297,8 +1304,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1312,31 +1319,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-trend-down-icon",
           fill: "none",
@@ -1346,7 +1353,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", lt, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", lt, N(e.title), 1)) : E("", !0),
           dt
         ], 8, ut))
       ]),
@@ -1356,10 +1363,10 @@ const _ = "24px", M = (e, t) => {
 }), ft = /* @__PURE__ */ M(ct, [["__scopeId", "data-v-aa775b0e"]]), pt = (e) => (L("data-v-cb010004"), e = e(), D(), e), vt = ["aria-hidden"], gt = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, yt = /* @__PURE__ */ pt(() => /* @__PURE__ */ R("path", {
+}, mt = /* @__PURE__ */ pt(() => /* @__PURE__ */ R("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)), mt = /* @__PURE__ */ x({
+}, null, -1)), yt = /* @__PURE__ */ k({
   __name: "TrendUpIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1396,8 +1403,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1411,31 +1418,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-trend-up-icon",
           fill: "none",
@@ -1445,20 +1452,20 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", gt, N(e.title), 1)) : E("", !0),
-          yt
+          e.title ? (p(), m("title", gt, N(e.title), 1)) : E("", !0),
+          mt
         ], 8, vt))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), ht = /* @__PURE__ */ M(mt, [["__scopeId", "data-v-cb010004"]]), Ct = (e) => (L("data-v-6d3b4073"), e = e(), D(), e), bt = ["aria-hidden"], St = {
+}), ht = /* @__PURE__ */ M(yt, [["__scopeId", "data-v-cb010004"]]), Ct = (e) => (L("data-v-6d3b4073"), e = e(), D(), e), bt = ["aria-hidden"], St = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, wt = /* @__PURE__ */ Ct(() => /* @__PURE__ */ R("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)), _t = /* @__PURE__ */ x({
+}, null, -1)), _t = /* @__PURE__ */ k({
   __name: "VitalsIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1495,8 +1502,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1510,31 +1517,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-vitals-icon",
           fill: "none",
@@ -1544,7 +1551,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", St, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", St, N(e.title), 1)) : E("", !0),
           wt
         ], 8, bt))
       ]),
@@ -1557,7 +1564,7 @@ const _ = "24px", M = (e, t) => {
 }, Tt = /* @__PURE__ */ Nt(() => /* @__PURE__ */ R("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)), xt = /* @__PURE__ */ x({
+}, null, -1)), xt = /* @__PURE__ */ k({
   __name: "WarningOutlineIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1594,8 +1601,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1609,31 +1616,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-warning-outline-icon",
           fill: "none",
@@ -1643,7 +1650,7 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", Et, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", Et, N(e.title), 1)) : E("", !0),
           Tt
         ], 8, It))
       ]),
@@ -1656,7 +1663,7 @@ const _ = "24px", M = (e, t) => {
 }, Vt = /* @__PURE__ */ zt(() => /* @__PURE__ */ R("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)), Lt = /* @__PURE__ */ x({
+}, null, -1)), Lt = /* @__PURE__ */ k({
   __name: "WarningIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1693,8 +1700,8 @@ const _ = "24px", M = (e, t) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), r = Number(t);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const r = String(e).replace(/px/gi, ""), t = Number(r);
+          if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
             return !0;
         }
         return !1;
@@ -1708,31 +1715,31 @@ const _ = "24px", M = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, r = g(() => {
-      if (typeof t.size == "number" && t.size > 0)
-        return `${t.size}px`;
-      if (typeof t.size == "string") {
-        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
+    const r = e, t = g(() => {
+      if (typeof r.size == "number" && r.size > 0)
+        return `${r.size}px`;
+      if (typeof r.size == "string") {
+        const n = String(r.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
       return _;
     }), a = g(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
-      height: r.value,
+      color: r.color,
+      display: r.display,
+      height: t.value,
       lineHeight: "0",
-      width: r.value
+      width: t.value
     }));
-    return (n, i) => (f(), T(z(e.as), {
+    return (n, i) => (p(), T(q(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)
     }, {
       default: A(() => [
-        (f(), y("svg", {
+        (p(), m("svg", {
           "aria-hidden": e.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-warning-icon",
           fill: "none",
@@ -1742,17 +1749,17 @@ const _ = "24px", M = (e, t) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), y("title", At, N(e.title), 1)) : E("", !0),
+          e.title ? (p(), m("title", At, N(e.title), 1)) : E("", !0),
           Vt
         ], 8, qt))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Fe = /* @__PURE__ */ M(Lt, [["__scopeId", "data-v-d7b122fd"]]), ge = 2, Ee = ge + 2, Dt = (e, t, r = !1) => {
-  let a = !t || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
-  return r && (a *= -1), a;
-}, Mt = (e, t, r) => t ? `${Math.abs(e * 100).toFixed(ge)}%` : r, Ot = (e, t) => t === 0 ? 0 : e / t - 1, Ft = (e, t = !1) => (t && (e *= -1), e > 0 ? ht : e < 0 ? ft : Oe), Ht = "#ad000e", fe = "#6c7489", Te = "#52596e", Bt = "#007d60", J = "16px", $t = "20px", Pt = "14px", Kt = "48px";
+}), Fe = /* @__PURE__ */ M(Lt, [["__scopeId", "data-v-d7b122fd"]]), ge = 2, Ee = ge + 2, Dt = (e, r, t = !1) => {
+  let a = !r || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
+  return t && (a *= -1), a;
+}, Mt = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(ge)}%` : t, Ot = (e, r) => r === 0 ? 0 : e / r - 1, Ft = (e, r = !1) => (r && (e *= -1), e > 0 ? ht : e < 0 ? ft : Oe), Ht = "#ad000e", fe = "#6c7489", Te = "#52596e", Bt = "#007d60", J = "16px", $t = "20px", Pt = "14px", Kt = "48px";
 var F = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(F || {});
 const Zt = { class: "metricscard" }, Ut = {
   key: 0,
@@ -1766,7 +1773,7 @@ const Zt = { class: "metricscard" }, Ut = {
 }, Xt = { "data-testid": "metric-trend-change" }, Yt = {
   key: 0,
   class: "metricscard-trend-range"
-}, Qt = /* @__PURE__ */ x({
+}, Qt = /* @__PURE__ */ k({
   __name: "MetricsCard",
   props: {
     cardType: {
@@ -1829,107 +1836,107 @@ const Zt = { class: "metricscard" }, Ut = {
     }
   },
   setup(e) {
-    const t = /* @__PURE__ */ new Map([
+    const r = /* @__PURE__ */ new Map([
       [F.GENERIC_COUNT, Rt],
       [F.TRAFFIC, Mr],
       [F.ERROR_RATE, kt],
       [F.LATENCY, ot]
-    ]), r = e, a = (o) => {
+    ]), t = e, a = (o) => {
       const s = {
         red: `var(--kong-ui-metric-card-trend-negative, ${Ht})`,
         green: `var(--kong-ui-metric-card-trend-positive, ${Bt})`,
         grey: `var(--kong-ui-metric-card-trend-neutral, ${Te})`
       };
       return o > 0 ? s.green : o < 0 ? s.red : s.grey;
-    }, n = (o) => o > 0 ? "positive" : o < 0 ? "negative" : "neutral", i = [k.Medium, k.Large, k.LargeCompact].includes(r.cardSize), u = r.cardSize === k.ExtraLarge ? Kt : i ? "22px" : Pt, c = g(() => r.cardSize === k.LargeCompact), d = [k.Small, k.LargeCompact].includes(r.cardSize);
+    }, n = (o) => o > 0 ? "positive" : o < 0 ? "negative" : "neutral", i = [z.Medium, z.Large, z.LargeCompact].includes(t.cardSize), u = t.cardSize === z.ExtraLarge ? Kt : i ? "22px" : Pt, f = g(() => t.cardSize === z.LargeCompact), d = [z.Small, z.LargeCompact].includes(t.cardSize);
     return (o, s) => {
       const l = qe("KTooltip");
-      return f(), y("div", Zt, [
+      return p(), m("div", Zt, [
         R("div", {
           class: G(["metricscard-title", e.cardSize])
         }, [
-          S(d) ? E("", !0) : (f(), T(z(S(t).get(e.cardType)), {
+          w(d) ? E("", !0) : (p(), T(q(w(r).get(e.cardType)), {
             key: 0,
             class: "metricscard-icon",
-            color: S(fe),
-            size: S(J)
+            color: w(fe),
+            size: w(J)
           }, null, 8, ["color", "size"])),
           R("span", null, N(e.title), 1),
-          e.tooltip ? (f(), T(l, {
+          e.tooltip ? (p(), T(l, {
             key: 1,
             class: "metricscard-tooltip",
             placement: "right",
             text: e.tooltip
           }, {
             default: A(() => [
-              X(S(et), {
-                color: S(fe),
-                size: S(J)
+              X(w(et), {
+                color: w(fe),
+                size: w(J)
               }, null, 8, ["color", "size"])
             ]),
             _: 1
           }, 8, ["text"])) : E("", !0)
         ], 2),
-        e.description && S(i) && !c.value ? (f(), y("div", Ut, [
+        e.description && w(i) && !f.value ? (p(), m("div", Ut, [
           R("span", null, N(e.description), 1)
         ])) : E("", !0),
         R("div", {
-          class: G(["metricscard-valuetrend", { "is-compact": c.value }])
+          class: G(["metricscard-valuetrend", { "is-compact": f.value }])
         }, [
-          e.hasError ? (f(), y("div", Gt, [
-            X(S(Fe), {
-              color: S(fe),
-              size: S($t)
+          e.hasError ? (p(), m("div", Gt, [
+            X(w(Fe), {
+              color: w(fe),
+              size: w($t)
             }, null, 8, ["color", "size"]),
             R("div", null, " " + N(e.errorMessage), 1)
-          ])) : (f(), y("div", {
+          ])) : (p(), m("div", {
             key: 1,
             class: G(["metricscard-value", e.cardSize]),
             "data-testid": "metric-value",
-            style: V(`font-size:${S(u)}`)
+            style: V(`font-size:${w(u)}`)
           }, N(e.metricValue), 7)),
-          S(i) ? (f(), y("div", jt, [
+          w(i) ? (p(), m("div", jt, [
             R("div", {
               class: G(["metricscard-trend-change", n(e.changePolarity)]),
               "data-testid": "metric-trend-parent"
             }, [
-              e.changePolarity !== 0 ? (f(), T(z(e.trendIcon), {
+              e.changePolarity !== 0 ? (p(), T(q(e.trendIcon), {
                 key: 0,
                 color: a(e.changePolarity),
-                size: S(J)
-              }, null, 8, ["color", "size"])) : (f(), T(S(Pr), {
+                size: w(J)
+              }, null, 8, ["color", "size"])) : (p(), T(w(Pr), {
                 key: 1,
-                color: S(Te),
-                size: S(J)
+                color: w(Te),
+                size: w(J)
               }, null, 8, ["color", "size"])),
               R("div", Xt, N(e.metricChange), 1)
             ], 2),
-            e.trendRange && e.cardSize !== S(k).LargeCompact ? (f(), y("div", Yt, N(e.trendRange), 1)) : E("", !0)
+            e.trendRange && e.cardSize !== w(z).LargeCompact ? (p(), m("div", Yt, N(e.trendRange), 1)) : E("", !0)
           ])) : E("", !0)
         ], 2)
       ]);
     };
   }
-}), ye = (e, t) => {
-  const r = e.__vccOpts || e;
-  for (const [a, n] of t)
-    r[a] = n;
-  return r;
-}, Wt = /* @__PURE__ */ ye(Qt, [["__scopeId", "data-v-975ba293"]]), Jt = {}, ei = { class: "loading-tabs" };
-function ri(e, t) {
-  const r = qe("KSkeletonBox");
-  return f(), y("div", ei, [
-    X(r, { width: "100" }),
-    X(r, { width: "75" })
+}), me = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [a, n] of r)
+    t[a] = n;
+  return t;
+}, Wt = /* @__PURE__ */ me(Qt, [["__scopeId", "data-v-975ba293"]]), Jt = {}, ei = { class: "loading-tabs" };
+function ri(e, r) {
+  const t = qe("KSkeletonBox");
+  return p(), m("div", ei, [
+    X(t, { width: "100" }),
+    X(t, { width: "75" })
   ]);
 }
-const ti = /* @__PURE__ */ ye(Jt, [["render", ri], ["__scopeId", "data-v-f7eb9c40"]]), ii = {
+const ti = /* @__PURE__ */ me(Jt, [["render", ri], ["__scopeId", "data-v-f7eb9c40"]]), ii = {
   key: 0,
   class: "error-display"
 }, ni = {
   key: 0,
   class: "error-display-message"
-}, ai = /* @__PURE__ */ x({
+}, ai = /* @__PURE__ */ k({
   __name: "MetricCardContainer",
   props: {
     fallbackDisplayText: {
@@ -1958,31 +1965,31 @@ const ti = /* @__PURE__ */ ye(Jt, [["render", ri], ["__scopeId", "data-v-f7eb9c4
     cardSize: {
       type: String,
       required: !1,
-      default: () => k.Large
+      default: () => z.Large
     }
   },
   setup(e) {
-    const t = e, r = g(() => t.cards.every((n) => (n == null ? void 0 : n.hasError) === !0)), a = (n) => {
-      const i = Ot(n.currentValue, n.previousValue) || 0, u = Dt(i, t.hasTrendAccess, n.increaseIsBad);
+    const r = e, t = g(() => r.cards.every((n) => (n == null ? void 0 : n.hasError) === !0)), a = (n) => {
+      const i = Ot(n.currentValue, n.previousValue) || 0, u = Dt(i, r.hasTrendAccess, n.increaseIsBad);
       return {
         metricValue: n.formatValueFn ? n.formatValueFn(n.currentValue) : zr(n.currentValue, { capital: !0, round: !0 }) || "0",
-        metricChange: n.formatChangeFn ? n.formatChangeFn(i) : Mt(i, t.hasTrendAccess, t.fallbackDisplayText),
+        metricChange: n.formatChangeFn ? n.formatChangeFn(i) : Mt(i, r.hasTrendAccess, r.fallbackDisplayText),
         changePolarity: u,
         trendIcon: Ft(u, n.increaseIsBad),
-        cardSize: t.cardSize
+        cardSize: r.cardSize
       };
     };
-    return (n, i) => (f(), y("div", {
+    return (n, i) => (p(), m("div", {
       class: G(["kong-ui-public-metric-card-container", e.cardSize])
     }, [
-      r.value ? (f(), y("div", ii, [
-        X(S(Fe), { class: "error-display-icon" }),
-        e.errorMessage ? (f(), y("div", ni, N(e.errorMessage), 1)) : E("", !0)
-      ])) : (f(!0), y(we, { key: 1 }, Xe(e.cards, (u, c) => (f(), y(we, null, [
-        e.loading ? (f(), T(ti, {
-          key: `skeleton-${c}`,
-          class: G(e.cardSize === S(k).Small ? "loading-tabs-small" : "loading-tabs-large")
-        }, null, 8, ["class"])) : (f(), T(Wt, Ye({ key: c }, a(u), {
+      t.value ? (p(), m("div", ii, [
+        X(w(Fe), { class: "error-display-icon" }),
+        e.errorMessage ? (p(), m("div", ni, N(e.errorMessage), 1)) : E("", !0)
+      ])) : (p(!0), m(we, { key: 1 }, Xe(e.cards, (u, f) => (p(), m(we, null, [
+        e.loading ? (p(), T(ti, {
+          key: `skeleton-${f}`,
+          class: G(e.cardSize === w(z).Small ? "loading-tabs-small" : "loading-tabs-large")
+        }, null, 8, ["class"])) : (p(), T(Wt, Ye({ key: f }, a(u), {
           "card-size": e.cardSize,
           "card-type": u.cardType,
           description: u.description,
@@ -1995,95 +2002,94 @@ const ti = /* @__PURE__ */ ye(Jt, [["render", ri], ["__scopeId", "data-v-f7eb9c4
       ], 64))), 256))
     ], 2));
   }
-}), oi = /* @__PURE__ */ ye(ai, [["__scopeId", "data-v-80b51a84"]]), fi = /* @__PURE__ */ x({
+}), oi = /* @__PURE__ */ me(ai, [["__scopeId", "data-v-80b51a84"]]), fi = /* @__PURE__ */ k({
   __name: "MetricsConsumer",
   props: {
     lookupKey: { default: void 0 },
-    cardSize: { default: k.Large },
+    cardSize: { default: z.Large },
     cardToDisplay: { default: void 0 }
   },
   setup(e) {
-    const t = e, r = ke(De);
-    if (!r)
+    const r = e, t = ke(De);
+    if (!t)
       throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
-    const { traffic: a, latency: n } = r.data, { i18n: i } = K.useI18n(), u = K.useMetricCardBuilder({
+    const { traffic: a, latency: n } = t.data, { i18n: i } = K.useI18n(), u = K.useMetricCardBuilder({
       cardType: F.TRAFFIC,
-      title: g(() => r.longCardTitles ? i.t("metricCard.long.traffic") : i.t("metricCard.short.traffic")),
-      description: r.description,
+      title: g(() => t.longCardTitles ? i.t("metricCard.long.traffic") : i.t("metricCard.short.traffic")),
+      description: t.description,
       record: a.mapped,
       hasError: a.hasError,
-      lookupKey: t.lookupKey,
+      lookupKey: r.lookupKey,
       sumGroupedValues: Q,
-      trendRange: r.trendRange
-    }), c = (h) => `${h.toFixed(ge)}%`, d = g(() => {
-      const h = a.mapped.value, w = j(h, "current", t.lookupKey, _e), q = j(h, "current", t.lookupKey, Q), C = w / q * 100 || 0, m = j(h, "previous", t.lookupKey, _e), H = j(h, "previous", t.lookupKey, Q), I = m / H * 100 || 0;
+      trendRange: a.trendRange
+    }), f = (y) => `${y.toFixed(ge)}%`, d = g(() => {
+      const y = a.mapped.value, h = j(y, "current", r.lookupKey, _e), x = j(y, "current", r.lookupKey, Q), b = h / x * 100 || 0, C = j(y, "previous", r.lookupKey, _e), H = j(y, "previous", r.lookupKey, Q), I = C / H * 100 || 0;
       return {
         cardType: F.ERROR_RATE,
         hasError: a.hasError.value,
-        currentValue: C,
+        currentValue: b,
         previousValue: I,
-        formatValueFn: c,
-        title: r.longCardTitles ? i.t("metricCard.long.errorRate") : i.t("metricCard.short.errorRate"),
-        description: r.description,
+        formatValueFn: f,
+        title: t.longCardTitles ? i.t("metricCard.long.errorRate") : i.t("metricCard.short.errorRate"),
+        description: t.description,
         increaseIsBad: !0,
-        trendRange: r.trendRange.value
+        trendRange: a.trendRange.value
       };
-    }), o = (h) => `${h}ms`, s = K.useMetricCardBuilder({
+    }), o = (y) => `${y}ms`, s = K.useMetricCardBuilder({
       cardType: F.LATENCY,
-      title: g(() => r.longCardTitles ? i.t("metricCard.long.latency") : i.t("metricCard.short.latency")),
-      description: r.description,
+      title: g(() => t.longCardTitles ? i.t("metricCard.long.latency") : i.t("metricCard.short.latency")),
+      description: t.description,
       hasError: n.hasError,
       record: n.mapped,
-      lookupKey: t.lookupKey,
+      lookupKey: r.lookupKey,
       increaseIsBad: !0,
       formatValueFn: o,
-      trendRange: r.trendRange
-    }), l = g(() => t.cardToDisplay === "TRAFFIC" ? [u.value] : t.cardToDisplay === "ERROR_RATE" ? [d.value] : t.cardToDisplay === "LATENCY" ? [s.value] : [u.value, d.value, s.value]), p = g(() => t.cardToDisplay === "TRAFFIC" || t.cardToDisplay === "ERROR_RATE" ? a.isLoading.value : t.cardToDisplay === "LATENCY" ? n.isLoading.value : a.isLoading.value || n.isLoading.value), v = g(() => ({
+      trendRange: n.trendRange
+    }), l = g(() => r.cardToDisplay === "TRAFFIC" ? [u.value] : r.cardToDisplay === "ERROR_RATE" ? [d.value] : r.cardToDisplay === "LATENCY" ? [s.value] : [u.value, d.value, s.value]), c = 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,
-      loading: p.value,
-      hasTrendAccess: r.hasTrendAccess,
+      loading: c.value,
+      hasTrendAccess: t.hasTrendAccess,
       fallbackDisplayText: i.t("general.notAvailable"),
-      cardSize: t.cardSize,
-      hideTitle: !0,
-      trendRange: r.trendRange.value
-    })), b = g(() => ({
+      cardSize: r.cardSize,
+      hideTitle: !0
+    })), S = g(() => ({
       loading: v.value.loading,
       trafficCard: u.value,
       errorRateCard: d.value,
       latencyCard: s.value,
-      errorRateFormatted: c(d.value.currentValue),
+      errorRateFormatted: f(d.value.currentValue),
       latencyFormatted: o(s.value.currentValue)
     }));
-    return (h, w) => ze(h.$slots, "default", { cardValues: b.value }, () => [
-      X(S(oi), Qe(We(v.value)), null, 16)
+    return (y, h) => ze(y.$slots, "default", { cardValues: S.value }, () => [
+      X(w(oi), Qe(We(v.value)), null, 16)
     ]);
   }
-}), ee = (e) => new Date(e), pi = (e, t) => {
-  const r = e.body;
+}), ee = (e) => new Date(e), pi = (e, r) => {
+  const t = e.body;
   e.reply({
     statusCode: 200,
-    body: si(r, t)
+    body: si(t, r)
   });
-}, xe = (e) => e.reduce((t, r) => (t[r] = { name: r }, t), {}), si = (e, t) => {
-  var b, h;
-  const r = te.get(re.ONE_DAY), a = e.granularity === "trend" ? new er(r) : new rr(r), n = a.endMs(), i = a.startMs(), u = a.granularityMs(), c = e.granularity === "trend" ? 2 : 1;
+}, xe = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), si = (e, r) => {
+  var S, y;
+  const t = re.get(te.ONE_DAY), a = e.granularity === "trend" ? new er(t) : new rr(t), n = a.endMs(), i = a.startMs(), u = 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 d = (e.dimensions ?? []).find((w) => w !== "time"), o = (t == null ? void 0 : t.dimensionNames) ?? [], s = Math.max(o.length, 1), l = e.metrics || [], p = [];
-  for (let w = 0; w < c; w++)
-    for (let q = 0; q < s; q++) {
-      const C = d ? { [d]: o[q] } : {};
-      (b = e.dimensions) != null && b.includes("status_code_grouped") ? Q.forEach((m) => {
-        const H = l.reduce((I, $) => (I[$] = (c - w) * 1e3 + 100 * q + 1, I), { ...C, status_code_grouped: m });
-        p.push({
+  const d = (e.dimensions ?? []).find((h) => h !== "time"), o = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(o.length, 1), l = e.metrics || [], c = [];
+  for (let h = 0; h < f; h++)
+    for (let x = 0; x < s; x++) {
+      const b = d ? { [d]: o[x] } : {};
+      (S = e.dimensions) != null && S.includes("status_code_grouped") ? Q.forEach((C) => {
+        const H = l.reduce((I, $) => (I[$] = (f - h) * 1e3 + 100 * x + 1, I), { ...b, status_code_grouped: C });
+        c.push({
           version: "v1",
-          timestamp: w === 0 ? ee(i).toISOString() : ee(i + u).toISOString(),
+          timestamp: h === 0 ? ee(i).toISOString() : ee(i + u).toISOString(),
           event: H
         });
-      }) : p.push({
+      }) : c.push({
         version: "v1",
-        timestamp: w === 0 ? ee(i).toISOString() : ee(i + u).toISOString(),
-        event: l.reduce((m, H) => (m[H] = (c - w) * 1e3 + 100 * q + 1, m), { ...C })
+        timestamp: h === 0 ? ee(i).toISOString() : ee(i + u).toISOString(),
+        event: l.reduce((C, H) => (C[H] = (f - h) * 1e3 + 100 * x + 1, C), { ...b })
       });
     }
   const v = {
@@ -2092,13 +2098,13 @@ const ti = /* @__PURE__ */ ye(Jt, [["render", ri], ["__scopeId", "data-v-f7eb9c4
     granularity_ms: u,
     display: d ? {
       [d]: xe(o),
-      ...(h = e.dimensions) != null && h.includes("status_code_grouped") ? { status_code_grouped: xe(Q) } : {}
+      ...(y = e.dimensions) != null && y.includes("status_code_grouped") ? { status_code_grouped: xe(Q) } : {}
     } : {},
     metric_names: e.metrics,
     query_id: "test"
   };
   return {
-    data: p,
+    data: c,
     meta: v
   };
 };