@mt-gloss/ui 0.1.139 → 0.2.0

package/MetricCard-DOPtBpek.js

@@ -1,698 +0,0 @@
-import { jsxs as u, jsx as t, Fragment as ce } from "react/jsx-runtime";
-import { useId as de, useMemo as N, useState as he, useRef as R, useCallback as A, useEffect as ue } from "react";
-import { formatTrend as fe, isStatusModeEnabled as ge, pickMetricTier as me, getValueFontSize as F, formatValue as E } from "@mt-gloss/utils";
-import { B as z, a as $, b as pe } from "./BaseText-Dxbk1JJa.js";
-const V = {
-  up: { color: "#10b981", bg: "rgba(16,185,129,0.07)" },
-  down: { color: "#ef4444", bg: "rgba(239,68,68,0.07)" },
-  flat: { color: "#6b7280", bg: "rgba(107,114,128,0.07)" }
-}, P = {
-  up: "▲",
-  down: "▼",
-  flat: "▶"
-}, D = function({ value: o, direction: e }) {
-  if (o == null) return null;
-  const { text: c, direction: d } = fe(o), i = e || d, { color: r, bg: s } = V[i] || V.flat, l = P[i] || P.flat;
-  return /* @__PURE__ */ u(
-    "span",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 2,
-        padding: "2px 6px",
-        borderRadius: 4,
-        fontSize: 11,
-        fontWeight: 600,
-        lineHeight: 1,
-        color: r,
-        backgroundColor: s,
-        whiteSpace: "nowrap"
-      },
-      children: [
-        /* @__PURE__ */ t("span", { style: { fontSize: 8, lineHeight: 1 }, children: l }),
-        c
-      ]
-    }
-  );
-};
-D.displayName = "TrendIndicator";
-const L = ({ data: n, color: o, isStale: e }) => {
-  const d = "sparkbg-" + de().replace(/:/g, ""), i = o || "#4f46e5", r = N(() => {
-    if (!n || n.length < 2) return null;
-    const s = 300, l = 55, h = 2, a = Math.min(...n), g = Math.max(...n) - a || 1, x = n.map((p, k) => ({
-      x: k / (n.length - 1) * s,
-      y: h + (1 - (p - a) / g) * (l - h * 2)
-    })).map((p, k) => `${k === 0 ? "M" : "L"}${p.x},${p.y}`).join(" "), v = `${x} L${s},${l} L0,${l}Z`;
-    return { line: x, area: v, w: s, h: l };
-  }, [n]);
-  return r ? /* @__PURE__ */ u(
-    "svg",
-    {
-      height: 55,
-      viewBox: `0 0 ${r.w} ${r.h}`,
-      preserveAspectRatio: "none",
-      style: {
-        position: "absolute",
-        // quick-260418-k7k-fix-4: "bleed" means REACH the card edges — NOT
-        // extend past them. CardShell's FRONT BaseBox has `inset: 0` inside
-        // CardShell root, so its padding-box (= containing block for abs
-        // descendants) is the FULL card size. width:100% + left:0 + right:0
-        // + bottom:0 lands the SVG exactly inside the card border. Earlier
-        // fix-3 added `calc(100% + 24px)` to overshoot each side by 12px,
-        // which user rejected ("Why on earth would I want the sparklines
-        // to go beyond the edge of the cards?"). StackedGroupCard hoists
-        // SparklineBg to Fragment-root so its containing block matches the
-        // 1×1 MetricCard path (FRONT BaseBox padding-box = full card).
-        bottom: 0,
-        left: 0,
-        right: 0,
-        width: "100%",
-        zIndex: 1,
-        display: "block",
-        pointerEvents: "none",
-        transform: e ? "scaleY(0.05)" : "scaleY(1)",
-        transformOrigin: "bottom",
-        transition: e ? "transform 400ms ease-out" : "transform 500ms ease-in-out"
-      },
-      children: [
-        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ u("linearGradient", { id: d, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ t("stop", { offset: "0%", stopColor: i, stopOpacity: "0.09" }),
-          /* @__PURE__ */ t("stop", { offset: "100%", stopColor: i, stopOpacity: "0.01" })
-        ] }) }),
-        /* @__PURE__ */ t("path", { d: r.area, fill: `url(#${d})` }),
-        /* @__PURE__ */ t(
-          "path",
-          {
-            d: r.line,
-            fill: "none",
-            stroke: i,
-            strokeOpacity: "0.22",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  ) : null;
-};
-L.displayName = "SparklineBg";
-const G = ({ data: n, color: o, isStale: e }) => {
-  const c = o || "#4f46e5", d = N(() => {
-    if (!n || n.length < 1) return null;
-    const i = 300, r = 50, s = r * 0.82, l = n.length, h = i / (l * 4), a = h * 3, g = Math.max(...n) || 1;
-    return n.map((b, x) => {
-      const v = b / g, p = Math.max(v * s, 2);
-      return {
-        x: x * (a + h),
-        y: r - p,
-        width: a,
-        height: p,
-        isLast: x === l - 1
-      };
-    });
-  }, [n]);
-  return d ? /* @__PURE__ */ t(
-    "svg",
-    {
-      width: "100%",
-      height: 50,
-      viewBox: "0 0 300 50",
-      preserveAspectRatio: "none",
-      style: {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1,
-        display: "block",
-        pointerEvents: "none",
-        transform: e ? "scaleY(0.05)" : "scaleY(1)",
-        transformOrigin: "bottom",
-        transition: e ? "transform 400ms ease-out" : "transform 500ms ease-in-out"
-      },
-      children: d.map((i, r) => /* @__PURE__ */ t(
-        "rect",
-        {
-          x: i.x,
-          y: i.y,
-          width: i.width,
-          height: i.height,
-          fill: c,
-          fillOpacity: i.isLast ? 0.14 : 0.06,
-          rx: "2.5"
-        },
-        r
-      ))
-    }
-  ) : null;
-};
-G.displayName = "BarsBg";
-const U = ({ value: n = 0, max: o = 100, color: e = "#4f46e5", colSpan: c = 1, isStale: d }) => {
-  const i = c >= 2 ? 40 : 34, r = 3.5, s = (i - r) / 2, l = 2 * Math.PI * s, h = d ? 0 : Math.min(Math.max(n / (o || 1), 0), 1), a = l * (1 - h);
-  return /* @__PURE__ */ u(
-    "svg",
-    {
-      width: i,
-      height: i,
-      viewBox: `0 0 ${i} ${i}`,
-      style: { flexShrink: 0, marginRight: 8, display: "block" },
-      children: [
-        /* @__PURE__ */ t(
-          "circle",
-          {
-            cx: i / 2,
-            cy: i / 2,
-            r: s,
-            fill: "none",
-            stroke: e,
-            strokeOpacity: "0.06",
-            strokeWidth: r
-          }
-        ),
-        /* @__PURE__ */ t(
-          "circle",
-          {
-            cx: i / 2,
-            cy: i / 2,
-            r: s,
-            fill: "none",
-            stroke: e,
-            strokeWidth: r,
-            strokeDasharray: l,
-            strokeDashoffset: a,
-            strokeLinecap: "round",
-            transform: `rotate(-90 ${i / 2} ${i / 2})`,
-            style: { transition: "stroke-dashoffset 0.4s ease" }
-          }
-        )
-      ]
-    }
-  );
-};
-U.displayName = "DonutChart";
-const Z = ({ value: n = 0, max: o = 100, trendValue: e = 0, color: c = "#6b7280", colSpan: d = 1, isStale: i }) => {
-  const r = d >= 2 ? 44 : 36, s = 3.5, l = (r - s) / 2, h = 2 * Math.PI * l, a = i ? 0 : Math.min(Math.max(n / (o || 1), 0), 1), f = h * (1 - a), g = d >= 2 ? 11 : 9, b = `${Math.round(Math.abs(e))}%`;
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      style: {
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: r,
-        height: r,
-        flexShrink: 0,
-        marginRight: 8
-      },
-      children: [
-        /* @__PURE__ */ u(
-          "svg",
-          {
-            width: r,
-            height: r,
-            viewBox: `0 0 ${r} ${r}`,
-            style: { display: "block" },
-            children: [
-              /* @__PURE__ */ t(
-                "circle",
-                {
-                  cx: r / 2,
-                  cy: r / 2,
-                  r: l,
-                  fill: "none",
-                  stroke: c,
-                  strokeOpacity: "0.06",
-                  strokeWidth: s
-                }
-              ),
-              /* @__PURE__ */ t(
-                "circle",
-                {
-                  cx: r / 2,
-                  cy: r / 2,
-                  r: l,
-                  fill: "none",
-                  stroke: c,
-                  strokeWidth: s,
-                  strokeDasharray: h,
-                  strokeDashoffset: f,
-                  strokeLinecap: "round",
-                  transform: `rotate(-90 ${r / 2} ${r / 2})`,
-                  style: { transition: "stroke-dashoffset 0.4s ease" }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ t(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: g,
-              fontWeight: 700,
-              color: c,
-              lineHeight: 1,
-              pointerEvents: "none"
-            },
-            children: b
-          }
-        )
-      ]
-    }
-  );
-};
-Z.displayName = "ObjectArrow";
-const be = { slot3: 200, slot5: 380 };
-function xe(n, o) {
-  const e = be, c = 150, [d, i] = he(1), r = R(null), s = R(null), l = A(() => {
-    const a = r.current;
-    if (a == null) return;
-    const f = a < e.slot3 ? 1 : a < e.slot5 ? 3 : 5;
-    i((g) => g === f ? g : f), r.current = null, s.current && (clearTimeout(s.current), s.current = null);
-  }, [e.slot3, e.slot5]);
-  ue(() => {
-    const a = n.current;
-    if (!a || typeof ResizeObserver > "u") return;
-    const f = new ResizeObserver((g) => {
-      const b = g[0]?.contentRect.width ?? 0;
-      r.current = b, s.current && clearTimeout(s.current), s.current = setTimeout(l, c);
-    });
-    return f.observe(a), () => {
-      f.disconnect(), s.current && clearTimeout(s.current);
-    };
-  }, [n, l, c]);
-  const h = A(() => {
-    l();
-  }, [l]);
-  return { capacity: d, onPointerUp: h };
-}
-function q(n) {
-  const { onStatusSlotClick: o } = n, e = R(null), c = ge(), { capacity: d, onPointerUp: i } = xe(e), r = n.maxSlots ?? d, s = n.statuses.slice(0, r);
-  if (!c) {
-    const l = n.statuses[0];
-    return /* @__PURE__ */ u(
-      z,
-      {
-        definition: { display: "flex", direction: "column" },
-        className: "gloss-status-card gloss-status-card--flag-off",
-        children: [
-          /* @__PURE__ */ t($, { className: "gloss-metric-card__label", children: n.label }),
-          l != null ? /* @__PURE__ */ t($, { children: String(l.value) }) : null
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      ref: e,
-      className: "gloss-status-card",
-      "data-status-mode": "on",
-      "data-status-capacity": r,
-      onPointerUp: i,
-      children: [
-        /* @__PURE__ */ t($, { className: "gloss-metric-card__label", children: n.label }),
-        /* @__PURE__ */ t("div", { className: "gloss-status-slots", "data-status-slot-count": s.length, children: s.map((l, h) => {
-          const a = n.sparklinePerStatus?.[l.id], f = l.id === n.activeStatusId;
-          return /* @__PURE__ */ u(
-            "div",
-            {
-              className: `gloss-status-slots__slot${f ? " gloss-status-slots__slot--active" : ""}`,
-              "data-status-slot-id": l.id,
-              "data-status-slot-index": h,
-              onClick: o ? (g) => o(l.id, g.currentTarget) : void 0,
-              style: o ? { cursor: "pointer" } : void 0,
-              children: [
-                /* @__PURE__ */ t("span", { className: "gloss-metric-card__label", children: l.label }),
-                /* @__PURE__ */ t("span", { children: String(l.value) }),
-                a != null && a.length > 0 ? /* @__PURE__ */ t(L, { data: [...a], color: l.accentColor }) : null
-              ]
-            },
-            l.id
-          );
-        }) })
-      ]
-    }
-  );
-}
-q.displayName = "StatusModeCard";
-function ye(n, o) {
-  if (!o) return;
-  if (n == null) return o.fallback;
-  const { operator: e, threshold: c, result: d, fallback: i } = o;
-  return (e === "lt" ? n < c : e === "gt" ? n > c : e === "eq" ? Math.abs(n - c) < 1e-9 : e === "gte" ? n >= c : e === "lte" ? n <= c : !1) ? d : i;
-}
-function Y(n, o) {
-  const e = n.replace("#", "");
-  if (!/^[0-9a-fA-F]{6}$/.test(e))
-    return `rgba(0,0,0,${o})`;
-  const c = parseInt(e.substring(0, 2), 16), d = parseInt(e.substring(2, 4), 16), i = parseInt(e.substring(4, 6), 16);
-  return `rgba(${c},${d},${i},${o})`;
-}
-const O = {
-  up: "var(--color-positive)",
-  down: "var(--color-negative)",
-  flat: "var(--color-text-secondary)"
-}, ve = {
-  positive: "#10b981",
-  // Used with hexToRgba() for tinted overlays -- must stay hex
-  negative: "#ef4444",
-  // Used with hexToRgba() for tinted overlays -- must stay hex
-  warning: "#f59e0b",
-  // Used with hexToRgba() for tinted overlays -- must stay hex
-  neutral: "#6b7280"
-  // Used with hexToRgba() for tinted overlays -- must stay hex
-}, ke = () => /* @__PURE__ */ u(
-  "svg",
-  {
-    "aria-label": "Warning threshold breached",
-    role: "img",
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ t(
-        "path",
-        {
-          d: "M7 1.5L13 12.5H1L7 1.5Z",
-          fill: "currentColor",
-          fillOpacity: "0.15",
-          stroke: "currentColor",
-          strokeWidth: "1.2",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ t("line", { x1: "7", y1: "5.5", x2: "7", y2: "8.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
-      /* @__PURE__ */ t("circle", { cx: "7", cy: "10.5", r: "0.7", fill: "currentColor" })
-    ]
-  }
-), we = () => /* @__PURE__ */ u(
-  "svg",
-  {
-    "aria-label": "Critical threshold breached",
-    role: "img",
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ t("circle", { cx: "7", cy: "7", r: "6", fill: "currentColor", fillOpacity: "0.15", stroke: "currentColor", strokeWidth: "1.2" }),
-      /* @__PURE__ */ t("line", { x1: "7", y1: "4", x2: "7", y2: "8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
-      /* @__PURE__ */ t("circle", { cx: "7", cy: "10", r: "0.7", fill: "currentColor" })
-    ]
-  }
-), Se = function(o) {
-  const {
-    variant: e = "standard",
-    label: c,
-    labelAdornment: d,
-    value: i,
-    valueFormat: r,
-    trend: s,
-    subtitle: l,
-    colSpan: h = 1,
-    isStale: a,
-    thresholdBreach: f = "none"
-  } = o, g = e === "sparkline" || e === "bars" || e === "donut" ? o.accentColor ?? "#4f46e5" : "#4f46e5", b = e === "highlight" ? o.highlightColor : void 0, x = e === "sparkline" ? o.sparklineData : void 0, v = e === "bars" ? o.barData : void 0, p = e === "donut" ? o.donutValue : 0, k = e === "donut" ? o.donutMax ?? 100 : 100, J = e === "object-arrow" ? o.objectArrowValue : 0, K = e === "object-arrow" ? o.objectArrowMax : 100, Q = e === "arrow" ? o.arrowDirection : void 0, w = e === "versus" ? o.versusData : void 0, C = e === "segmented" ? o.segments : void 0, M = (e === "highlight" && o.tintCondition ? ye(
-    typeof o.value == "number" ? o.value : null,
-    o.tintCondition
-  ) : void 0) ?? b, I = (M ? ve[M] : void 0) || M, { formatted: B, tier: X, length: ee } = N(
-    () => e === "status-mode" ? { formatted: "", tier: 0, length: 0 } : me(i, {
-      prefix: r?.prefix || "",
-      suffix: r?.suffix || "",
-      abbreviated: r?.abbreviated
-    }, h),
-    [e, i, r?.prefix, r?.suffix, r?.abbreviated, h]
-  );
-  if (o.variant === "status-mode")
-    return /* @__PURE__ */ t(q, { ...o });
-  const S = { display: B, full: B, length: ee }, te = F(S.length, h), re = s?.direction && O[s.direction] || O.flat, T = a ? "gloss-metric-data-stale" : "gloss-metric-data-fresh", W = {
-    fontWeight: 700,
-    letterSpacing: "-0.03em",
-    color: e === "highlight" ? I : "rgba(0,0,0,0.87)",
-    fontSize: te,
-    lineHeight: 1.1,
-    whiteSpace: "nowrap",
-    overflow: "hidden"
-  }, _ = {
-    fontSize: 10.5,
-    color: "rgba(0,0,0,0.35)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    flex: 1,
-    minWidth: 0
-  }, j = e === "sparkline" || e === "bars", ne = j && l ? {
-    ..._,
-    backgroundColor: "rgba(255,255,255,0.78)",
-    backdropFilter: "blur(4px)",
-    WebkitBackdropFilter: "blur(4px)",
-    padding: "1px 6px",
-    borderRadius: 4,
-    color: "rgba(0,0,0,0.5)",
-    flex: "none",
-    minWidth: void 0
-  } : _, oe = () => {
-    const m = Q === "down" ? "▼" : "▲";
-    return /* @__PURE__ */ t(
-      "div",
-      {
-        style: {
-          width: 22,
-          height: 22,
-          borderRadius: 5,
-          backgroundColor: `${g}14`,
-          // ~8% opacity
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0,
-          marginRight: 6
-        },
-        children: /* @__PURE__ */ t("span", { style: { fontSize: 10, color: g, lineHeight: 1 }, children: m })
-      }
-    );
-  }, ie = () => {
-    if (!w) return null;
-    const m = E(w.current, {
-      prefix: r?.prefix || "",
-      suffix: r?.suffix || "",
-      abbreviated: r?.abbreviated
-    }), y = E(w.prior, {
-      prefix: r?.prefix || "",
-      suffix: r?.suffix || "",
-      abbreviated: r?.abbreviated
-    }), H = F(m.length, h), ae = Math.max(H - 4, 14);
-    return /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1 }, children: [
-      /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column" }, children: [
-        /* @__PURE__ */ t(
-          "span",
-          {
-            style: {
-              fontWeight: 700,
-              fontSize: H,
-              letterSpacing: "-0.03em",
-              color: "rgba(0,0,0,0.87)",
-              lineHeight: 1.1
-            },
-            title: m.full,
-            children: m.display
-          }
-        ),
-        /* @__PURE__ */ t("span", { style: { fontSize: 10, color: "rgba(0,0,0,0.35)", marginTop: 2 }, children: w.currentLabel })
-      ] }),
-      /* @__PURE__ */ t(
-        pe,
-        {
-          definition: { orientation: "vertical", color: "rgba(0,0,0,0.08)" },
-          style: { flexShrink: 0 }
-        }
-      ),
-      /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column" }, children: [
-        /* @__PURE__ */ t(
-          "span",
-          {
-            style: {
-              fontWeight: 700,
-              fontSize: ae,
-              letterSpacing: "-0.03em",
-              color: "rgba(0,0,0,0.5)",
-              lineHeight: 1.1
-            },
-            title: y.full,
-            children: y.display
-          }
-        ),
-        /* @__PURE__ */ t("span", { style: { fontSize: 10, color: "rgba(0,0,0,0.35)", marginTop: 2 }, children: w.priorLabel })
-      ] })
-    ] });
-  }, se = () => !C || C.length === 0 ? null : /* @__PURE__ */ u("div", { style: { zIndex: 2, position: "relative" }, children: [
-    /* @__PURE__ */ t(
-      "div",
-      {
-        style: {
-          height: 5,
-          borderRadius: 3,
-          display: "flex",
-          gap: 1,
-          overflow: "hidden"
-        },
-        children: C.map((m, y) => /* @__PURE__ */ t(
-          "div",
-          {
-            style: {
-              flex: m.value,
-              backgroundColor: m.color,
-              minWidth: 2
-            }
-          },
-          y
-        ))
-      }
-    ),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        style: {
-          display: "flex",
-          gap: 8,
-          flexWrap: "wrap",
-          marginTop: 4
-        },
-        children: C.map((m, y) => /* @__PURE__ */ u(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 3
-            },
-            children: [
-              /* @__PURE__ */ t(
-                "div",
-                {
-                  style: {
-                    width: 6,
-                    height: 6,
-                    borderRadius: "50%",
-                    backgroundColor: m.color,
-                    flexShrink: 0
-                  }
-                }
-              ),
-              /* @__PURE__ */ t("span", { style: { fontSize: 10, color: "rgba(0,0,0,0.5)" }, children: m.label })
-            ]
-          },
-          y
-        ))
-      }
-    )
-  ] }), le = [
-    "gloss-threshold-overlay",
-    f === "warn" ? "gloss-threshold-warn" : "",
-    f === "critical" ? "gloss-threshold-critical" : "",
-    f === "critical" ? "gloss-threshold-pulse" : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u(ce, { children: [
-    f !== "none" && /* @__PURE__ */ t("div", { className: le }),
-    f === "warn" && /* @__PURE__ */ t("span", { className: "gloss-threshold-icon gloss-threshold-icon--warn", children: /* @__PURE__ */ t(ke, {}) }),
-    f === "critical" && /* @__PURE__ */ t("span", { className: "gloss-threshold-icon gloss-threshold-icon--critical", children: /* @__PURE__ */ t(we, {}) }),
-    e === "highlight" && I && /* @__PURE__ */ t(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          borderRadius: 10,
-          backgroundColor: Y(I, 0.06),
-          border: `1px solid ${Y(I, 0.15)}`,
-          zIndex: 0,
-          pointerEvents: "none"
-        }
-      }
-    ),
-    e === "sparkline" && /* @__PURE__ */ t(L, { data: x, color: g, isStale: a }),
-    e === "bars" && /* @__PURE__ */ t(G, { data: v, color: g, isStale: a }),
-    /* @__PURE__ */ u(
-      z,
-      {
-        className: "gloss-metric-card__zone-a",
-        "data-tier": X,
-        style: { height: 28, flexShrink: 0, zIndex: 2, position: "relative", display: "flex", alignItems: "center" },
-        children: [
-          /* @__PURE__ */ t($, { className: "gloss-metric-card__label", children: c }),
-          d
-        ]
-      }
-    ),
-    /* @__PURE__ */ u(
-      z,
-      {
-        definition: { display: "flex", align: "center" },
-        className: `gloss-metric-card__zone-b ${T}`,
-        style: { flex: 1, zIndex: 2, position: "relative", minHeight: 0 },
-        children: [
-          e === "donut" && /* @__PURE__ */ t(U, { value: p, max: k, color: g, colSpan: h, isStale: a }),
-          e === "object-arrow" && /* @__PURE__ */ t(
-            Z,
-            {
-              value: J,
-              max: K,
-              trendValue: s?.value,
-              color: re,
-              colSpan: h,
-              isStale: a
-            }
-          ),
-          e === "arrow" && oe(),
-          e !== "versus" && e !== "segmented" && /* @__PURE__ */ t("span", { style: W, title: S.full, children: S.display }),
-          e === "versus" && ie(),
-          e === "segmented" && /* @__PURE__ */ t("span", { style: W, title: S.full, children: S.display })
-        ]
-      }
-    ),
-    /* @__PURE__ */ u(
-      z,
-      {
-        definition: { display: "flex", justify: "between", align: "center" },
-        className: `gloss-metric-card__zone-c ${T}`,
-        style: { minHeight: 18, flexShrink: 0, zIndex: 2, position: "relative" },
-        children: [
-          /* @__PURE__ */ t("span", { style: ne, children: l }),
-          j && s?.value != null ? /* @__PURE__ */ t("span", { style: {
-            backgroundColor: "rgba(255,255,255,0.78)",
-            backdropFilter: "blur(4px)",
-            WebkitBackdropFilter: "blur(4px)",
-            borderRadius: 4,
-            display: "inline-flex",
-            flexShrink: 0
-          }, children: /* @__PURE__ */ t(D, { value: s?.value, direction: s?.direction }) }) : /* @__PURE__ */ t(D, { value: s?.value, direction: s?.direction })
-        ]
-      }
-    ),
-    e === "segmented" && se()
-  ] });
-};
-Se.displayName = "MetricCard";
-export {
-  G as B,
-  U as D,
-  Se as M,
-  Z as O,
-  q as S,
-  D as T,
-  L as a,
-  ye as e,
-  xe as u
-};