@mt-gloss/ui 0.1.107 → 0.1.109

package/MetricCard-Cyoxhb_S.js

@@ -0,0 +1,697 @@
+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) {
+  if (o.variant === "status-mode")
+    return /* @__PURE__ */ t(q, { ...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(
+    () => me(i, {
+      prefix: r?.prefix || "",
+      suffix: r?.suffix || "",
+      abbreviated: r?.abbreviated
+    }, h),
+    [i, r?.prefix, r?.suffix, r?.abbreviated, h]
+  ), 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
+};