@mt-gloss/ui 0.1.141 → 0.1.143

package/TimeframeQuickBar-BhKzqcZC.js

@@ -0,0 +1,933 @@
+import { jsxs as u, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { useId as me, useMemo as B, useState as ge, useRef as $, useCallback as C, useEffect as pe } from "react";
+import { formatTrend as xe, isStatusModeEnabled as ye, pickMetricTier as be, getValueFontSize as Y, formatValue as q, getDateRangeForPreset as ve, formatDateRangeSmart as ke, ROLLING_OPTIONS as we, PERIOD_OPTIONS as Se } from "@mt-gloss/utils";
+import { B as D, a as N, b as Ce } from "./BaseText-Dxbk1JJa.js";
+import { Box as E, Chip as X, Popper as Ie, Paper as ze, MenuList as Me, MenuItem as Re, ListItemText as Le, IconButton as Te, Tooltip as De, Divider as Ne } from "@mui/material";
+import $e from "@mui/icons-material/ExpandMore";
+import Be from "@mui/icons-material/Star";
+import We from "@mui/icons-material/StarBorder";
+import Oe from "@mui/icons-material/Check";
+const Q = {
+  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)" }
+}, Z = {
+  up: "▲",
+  down: "▼",
+  flat: "▶"
+}, j = function({ value: n, direction: t }) {
+  if (n == null) return null;
+  const { text: a, direction: f } = xe(n), s = t || f, { color: r, bg: l } = Q[s] || Q.flat, o = Z[s] || Z.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: l,
+        whiteSpace: "nowrap"
+      },
+      children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 8, lineHeight: 1 }, children: o }),
+        a
+      ]
+    }
+  );
+};
+j.displayName = "TrendIndicator";
+const H = ({ data: i, color: n, isStale: t }) => {
+  const f = "sparkbg-" + me().replace(/:/g, ""), s = n || "#4f46e5", r = B(() => {
+    if (!i || i.length < 2) return null;
+    const l = 300, o = 55, c = 2, d = Math.min(...i), m = Math.max(...i) - d || 1, p = i.map((y, S) => ({
+      x: S / (i.length - 1) * l,
+      y: c + (1 - (y - d) / m) * (o - c * 2)
+    })).map((y, S) => `${S === 0 ? "M" : "L"}${y.x},${y.y}`).join(" "), w = `${p} L${l},${o} L0,${o}Z`;
+    return { line: p, area: w, w: l, h: o };
+  }, [i]);
+  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: t ? "scaleY(0.05)" : "scaleY(1)",
+        transformOrigin: "bottom",
+        transition: t ? "transform 400ms ease-out" : "transform 500ms ease-in-out"
+      },
+      children: [
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ u("linearGradient", { id: f, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: s, stopOpacity: "0.09" }),
+          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: s, stopOpacity: "0.01" })
+        ] }) }),
+        /* @__PURE__ */ e("path", { d: r.area, fill: `url(#${f})` }),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: r.line,
+            fill: "none",
+            stroke: s,
+            strokeOpacity: "0.22",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  ) : null;
+};
+H.displayName = "SparklineBg";
+const ee = ({ data: i, color: n, isStale: t }) => {
+  const a = n || "#4f46e5", f = B(() => {
+    if (!i || i.length < 1) return null;
+    const s = 300, r = 50, l = r * 0.82, o = i.length, c = s / (o * 4), d = c * 3, m = Math.max(...i) || 1;
+    return i.map((x, p) => {
+      const w = x / m, y = Math.max(w * l, 2);
+      return {
+        x: p * (d + c),
+        y: r - y,
+        width: d,
+        height: y,
+        isLast: p === o - 1
+      };
+    });
+  }, [i]);
+  return f ? /* @__PURE__ */ e(
+    "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: t ? "scaleY(0.05)" : "scaleY(1)",
+        transformOrigin: "bottom",
+        transition: t ? "transform 400ms ease-out" : "transform 500ms ease-in-out"
+      },
+      children: f.map((s, r) => /* @__PURE__ */ e(
+        "rect",
+        {
+          x: s.x,
+          y: s.y,
+          width: s.width,
+          height: s.height,
+          fill: a,
+          fillOpacity: s.isLast ? 0.14 : 0.06,
+          rx: "2.5"
+        },
+        r
+      ))
+    }
+  ) : null;
+};
+ee.displayName = "BarsBg";
+const te = ({ value: i = 0, max: n = 100, color: t = "#4f46e5", colSpan: a = 1, isStale: f }) => {
+  const s = a >= 2 ? 40 : 34, r = 3.5, l = (s - r) / 2, o = 2 * Math.PI * l, c = f ? 0 : Math.min(Math.max(i / (n || 1), 0), 1), d = o * (1 - c);
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      width: s,
+      height: s,
+      viewBox: `0 0 ${s} ${s}`,
+      style: { flexShrink: 0, marginRight: 8, display: "block" },
+      children: [
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: s / 2,
+            cy: s / 2,
+            r: l,
+            fill: "none",
+            stroke: t,
+            strokeOpacity: "0.06",
+            strokeWidth: r
+          }
+        ),
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: s / 2,
+            cy: s / 2,
+            r: l,
+            fill: "none",
+            stroke: t,
+            strokeWidth: r,
+            strokeDasharray: o,
+            strokeDashoffset: d,
+            strokeLinecap: "round",
+            transform: `rotate(-90 ${s / 2} ${s / 2})`,
+            style: { transition: "stroke-dashoffset 0.4s ease" }
+          }
+        )
+      ]
+    }
+  );
+};
+te.displayName = "DonutChart";
+const re = ({ value: i = 0, max: n = 100, trendValue: t = 0, color: a = "#6b7280", colSpan: f = 1, isStale: s }) => {
+  const r = f >= 2 ? 44 : 36, l = 3.5, o = (r - l) / 2, c = 2 * Math.PI * o, d = s ? 0 : Math.min(Math.max(i / (n || 1), 0), 1), h = c * (1 - d), m = f >= 2 ? 11 : 9, x = `${Math.round(Math.abs(t))}%`;
+  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__ */ e(
+                "circle",
+                {
+                  cx: r / 2,
+                  cy: r / 2,
+                  r: o,
+                  fill: "none",
+                  stroke: a,
+                  strokeOpacity: "0.06",
+                  strokeWidth: l
+                }
+              ),
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  cx: r / 2,
+                  cy: r / 2,
+                  r: o,
+                  fill: "none",
+                  stroke: a,
+                  strokeWidth: l,
+                  strokeDasharray: c,
+                  strokeDashoffset: h,
+                  strokeLinecap: "round",
+                  transform: `rotate(-90 ${r / 2} ${r / 2})`,
+                  style: { transition: "stroke-dashoffset 0.4s ease" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: m,
+              fontWeight: 700,
+              color: a,
+              lineHeight: 1,
+              pointerEvents: "none"
+            },
+            children: x
+          }
+        )
+      ]
+    }
+  );
+};
+re.displayName = "ObjectArrow";
+const _e = { slot3: 200, slot5: 380 };
+function Ee(i, n) {
+  const t = _e, a = 150, [f, s] = ge(1), r = $(null), l = $(null), o = C(() => {
+    const d = r.current;
+    if (d == null) return;
+    const h = d < t.slot3 ? 1 : d < t.slot5 ? 3 : 5;
+    s((m) => m === h ? m : h), r.current = null, l.current && (clearTimeout(l.current), l.current = null);
+  }, [t.slot3, t.slot5]);
+  pe(() => {
+    const d = i.current;
+    if (!d || typeof ResizeObserver > "u") return;
+    const h = new ResizeObserver((m) => {
+      const x = m[0]?.contentRect.width ?? 0;
+      r.current = x, l.current && clearTimeout(l.current), l.current = setTimeout(o, a);
+    });
+    return h.observe(d), () => {
+      h.disconnect(), l.current && clearTimeout(l.current);
+    };
+  }, [i, o, a]);
+  const c = C(() => {
+    o();
+  }, [o]);
+  return { capacity: f, onPointerUp: c };
+}
+function ie(i) {
+  const { onStatusSlotClick: n } = i, t = $(null), a = ye(), { capacity: f, onPointerUp: s } = Ee(t), r = i.maxSlots ?? f, l = i.statuses.slice(0, r);
+  if (!a) {
+    const o = i.statuses[0];
+    return /* @__PURE__ */ u(
+      D,
+      {
+        definition: { display: "flex", direction: "column" },
+        className: "gloss-status-card gloss-status-card--flag-off",
+        children: [
+          /* @__PURE__ */ e(N, { className: "gloss-metric-card__label", children: i.label }),
+          o != null ? /* @__PURE__ */ e(N, { children: String(o.value) }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: t,
+      className: "gloss-status-card",
+      "data-status-mode": "on",
+      "data-status-capacity": r,
+      onPointerUp: s,
+      children: [
+        /* @__PURE__ */ e(N, { className: "gloss-metric-card__label", children: i.label }),
+        /* @__PURE__ */ e("div", { className: "gloss-status-slots", "data-status-slot-count": l.length, children: l.map((o, c) => {
+          const d = i.sparklinePerStatus?.[o.id], h = o.id === i.activeStatusId;
+          return /* @__PURE__ */ u(
+            "div",
+            {
+              className: `gloss-status-slots__slot${h ? " gloss-status-slots__slot--active" : ""}`,
+              "data-status-slot-id": o.id,
+              "data-status-slot-index": c,
+              onClick: n ? (m) => n(o.id, m.currentTarget) : void 0,
+              style: n ? { cursor: "pointer" } : void 0,
+              children: [
+                /* @__PURE__ */ e("span", { className: "gloss-metric-card__label", children: o.label }),
+                /* @__PURE__ */ e("span", { children: String(o.value) }),
+                d != null && d.length > 0 ? /* @__PURE__ */ e(H, { data: [...d], color: o.accentColor }) : null
+              ]
+            },
+            o.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+ie.displayName = "StatusModeCard";
+function je(i, n) {
+  if (!n) return;
+  if (i == null) return n.fallback;
+  const { operator: t, threshold: a, result: f, fallback: s } = n;
+  return (t === "lt" ? i < a : t === "gt" ? i > a : t === "eq" ? Math.abs(i - a) < 1e-9 : t === "gte" ? i >= a : t === "lte" ? i <= a : !1) ? f : s;
+}
+function J(i, n) {
+  const t = i.replace("#", "");
+  if (!/^[0-9a-fA-F]{6}$/.test(t))
+    return `rgba(0,0,0,${n})`;
+  const a = parseInt(t.substring(0, 2), 16), f = parseInt(t.substring(2, 4), 16), s = parseInt(t.substring(4, 6), 16);
+  return `rgba(${a},${f},${s},${n})`;
+}
+const _ = {
+  up: "var(--color-positive)",
+  down: "var(--color-negative)",
+  flat: "var(--color-text-secondary)"
+}, Ae = {
+  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
+}, He = () => /* @__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__ */ e(
+        "path",
+        {
+          d: "M7 1.5L13 12.5H1L7 1.5Z",
+          fill: "currentColor",
+          fillOpacity: "0.15",
+          stroke: "currentColor",
+          strokeWidth: "1.2",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ e("line", { x1: "7", y1: "5.5", x2: "7", y2: "8.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+      /* @__PURE__ */ e("circle", { cx: "7", cy: "10.5", r: "0.7", fill: "currentColor" })
+    ]
+  }
+), Fe = () => /* @__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__ */ e("circle", { cx: "7", cy: "7", r: "6", fill: "currentColor", fillOpacity: "0.15", stroke: "currentColor", strokeWidth: "1.2" }),
+      /* @__PURE__ */ e("line", { x1: "7", y1: "4", x2: "7", y2: "8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+      /* @__PURE__ */ e("circle", { cx: "7", cy: "10", r: "0.7", fill: "currentColor" })
+    ]
+  }
+), Pe = function(n) {
+  const {
+    variant: t = "standard",
+    label: a,
+    labelAdornment: f,
+    value: s,
+    valueFormat: r,
+    trend: l,
+    subtitle: o,
+    colSpan: c = 1,
+    isStale: d,
+    thresholdBreach: h = "none"
+  } = n, m = t === "sparkline" || t === "bars" || t === "donut" ? n.accentColor ?? "#4f46e5" : "#4f46e5", x = t === "highlight" ? n.highlightColor : void 0, p = t === "sparkline" ? n.sparklineData : void 0, w = t === "bars" ? n.barData : void 0, y = t === "donut" ? n.donutValue : 0, S = t === "donut" ? n.donutMax ?? 100 : 100, L = t === "object-arrow" ? n.objectArrowValue : 0, W = t === "object-arrow" ? n.objectArrowMax : 100, O = t === "arrow" ? n.arrowDirection : void 0, I = t === "versus" ? n.versusData : void 0, z = t === "segmented" ? n.segments : void 0, b = (t === "highlight" && n.tintCondition ? je(
+    typeof n.value == "number" ? n.value : null,
+    n.tintCondition
+  ) : void 0) ?? x, k = (b ? Ae[b] : void 0) || b, { formatted: T, tier: ne, length: oe } = B(
+    () => t === "status-mode" ? { formatted: "", tier: 0, length: 0 } : be(s, {
+      prefix: r?.prefix || "",
+      suffix: r?.suffix || "",
+      abbreviated: r?.abbreviated
+    }, c),
+    [t, s, r?.prefix, r?.suffix, r?.abbreviated, c]
+  );
+  if (n.variant === "status-mode")
+    return /* @__PURE__ */ e(ie, { ...n });
+  const R = { display: T, full: T, length: oe }, se = Y(R.length, c), le = l?.direction && _[l.direction] || _.flat, F = d ? "gloss-metric-data-stale" : "gloss-metric-data-fresh", P = {
+    fontWeight: 700,
+    letterSpacing: "-0.03em",
+    color: t === "highlight" ? k : "rgba(0,0,0,0.87)",
+    fontSize: se,
+    lineHeight: 1.1,
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  }, V = {
+    fontSize: 10.5,
+    color: "rgba(0,0,0,0.35)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+    minWidth: 0
+  }, G = t === "sparkline" || t === "bars", ae = G && o ? {
+    ...V,
+    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
+  } : V, ce = () => {
+    const v = O === "down" ? "▼" : "▲";
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          width: 22,
+          height: 22,
+          borderRadius: 5,
+          backgroundColor: `${m}14`,
+          // ~8% opacity
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          marginRight: 6
+        },
+        children: /* @__PURE__ */ e("span", { style: { fontSize: 10, color: m, lineHeight: 1 }, children: v })
+      }
+    );
+  }, de = () => {
+    if (!I) return null;
+    const v = q(I.current, {
+      prefix: r?.prefix || "",
+      suffix: r?.suffix || "",
+      abbreviated: r?.abbreviated
+    }), M = q(I.prior, {
+      prefix: r?.prefix || "",
+      suffix: r?.suffix || "",
+      abbreviated: r?.abbreviated
+    }), U = Y(v.length, c), he = Math.max(U - 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__ */ e(
+          "span",
+          {
+            style: {
+              fontWeight: 700,
+              fontSize: U,
+              letterSpacing: "-0.03em",
+              color: "rgba(0,0,0,0.87)",
+              lineHeight: 1.1
+            },
+            title: v.full,
+            children: v.display
+          }
+        ),
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "rgba(0,0,0,0.35)", marginTop: 2 }, children: I.currentLabel })
+      ] }),
+      /* @__PURE__ */ e(
+        Ce,
+        {
+          definition: { orientation: "vertical", color: "rgba(0,0,0,0.08)" },
+          style: { flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              fontWeight: 700,
+              fontSize: he,
+              letterSpacing: "-0.03em",
+              color: "rgba(0,0,0,0.5)",
+              lineHeight: 1.1
+            },
+            title: M.full,
+            children: M.display
+          }
+        ),
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "rgba(0,0,0,0.35)", marginTop: 2 }, children: I.priorLabel })
+      ] })
+    ] });
+  }, fe = () => !z || z.length === 0 ? null : /* @__PURE__ */ u("div", { style: { zIndex: 2, position: "relative" }, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          height: 5,
+          borderRadius: 3,
+          display: "flex",
+          gap: 1,
+          overflow: "hidden"
+        },
+        children: z.map((v, M) => /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              flex: v.value,
+              backgroundColor: v.color,
+              minWidth: 2
+            }
+          },
+          M
+        ))
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: 8,
+          flexWrap: "wrap",
+          marginTop: 4
+        },
+        children: z.map((v, M) => /* @__PURE__ */ u(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 3
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    backgroundColor: v.color,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "rgba(0,0,0,0.5)" }, children: v.label })
+            ]
+          },
+          M
+        ))
+      }
+    )
+  ] }), ue = [
+    "gloss-threshold-overlay",
+    h === "warn" ? "gloss-threshold-warn" : "",
+    h === "critical" ? "gloss-threshold-critical" : "",
+    h === "critical" ? "gloss-threshold-pulse" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u(K, { children: [
+    h !== "none" && /* @__PURE__ */ e("div", { className: ue }),
+    h === "warn" && /* @__PURE__ */ e("span", { className: "gloss-threshold-icon gloss-threshold-icon--warn", children: /* @__PURE__ */ e(He, {}) }),
+    h === "critical" && /* @__PURE__ */ e("span", { className: "gloss-threshold-icon gloss-threshold-icon--critical", children: /* @__PURE__ */ e(Fe, {}) }),
+    t === "highlight" && k && /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: 10,
+          backgroundColor: J(k, 0.06),
+          border: `1px solid ${J(k, 0.15)}`,
+          zIndex: 0,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    t === "sparkline" && /* @__PURE__ */ e(H, { data: p, color: m, isStale: d }),
+    t === "bars" && /* @__PURE__ */ e(ee, { data: w, color: m, isStale: d }),
+    /* @__PURE__ */ u(
+      D,
+      {
+        className: "gloss-metric-card__zone-a",
+        "data-tier": ne,
+        style: { height: 28, flexShrink: 0, zIndex: 2, position: "relative", display: "flex", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ e(N, { className: "gloss-metric-card__label", children: a }),
+          f
+        ]
+      }
+    ),
+    /* @__PURE__ */ u(
+      D,
+      {
+        definition: { display: "flex", align: "center" },
+        className: `gloss-metric-card__zone-b ${F}`,
+        style: { flex: 1, zIndex: 2, position: "relative", minHeight: 0 },
+        children: [
+          t === "donut" && /* @__PURE__ */ e(te, { value: y, max: S, color: m, colSpan: c, isStale: d }),
+          t === "object-arrow" && /* @__PURE__ */ e(
+            re,
+            {
+              value: L,
+              max: W,
+              trendValue: l?.value,
+              color: le,
+              colSpan: c,
+              isStale: d
+            }
+          ),
+          t === "arrow" && ce(),
+          t !== "versus" && t !== "segmented" && /* @__PURE__ */ e("span", { style: P, title: R.full, children: R.display }),
+          t === "versus" && de(),
+          t === "segmented" && /* @__PURE__ */ e("span", { style: P, title: R.full, children: R.display })
+        ]
+      }
+    ),
+    /* @__PURE__ */ u(
+      D,
+      {
+        definition: { display: "flex", justify: "between", align: "center" },
+        className: `gloss-metric-card__zone-c ${F}`,
+        style: { minHeight: 18, flexShrink: 0, zIndex: 2, position: "relative" },
+        children: [
+          /* @__PURE__ */ e("span", { style: ae, children: o }),
+          G && l?.value != null ? /* @__PURE__ */ e("span", { style: {
+            backgroundColor: "rgba(255,255,255,0.78)",
+            backdropFilter: "blur(4px)",
+            WebkitBackdropFilter: "blur(4px)",
+            borderRadius: 4,
+            display: "inline-flex",
+            flexShrink: 0
+          }, children: /* @__PURE__ */ e(j, { value: l?.value, direction: l?.direction }) }) : /* @__PURE__ */ e(j, { value: l?.value, direction: l?.direction })
+        ]
+      }
+    ),
+    t === "segmented" && fe()
+  ] });
+};
+Pe.displayName = "MetricCard";
+const A = ({
+  groupId: i,
+  options: n,
+  selectedId: t,
+  defaultId: a,
+  onSelect: f,
+  pinnedId: s,
+  onPin: r,
+  isOpen: l = !1,
+  onOpenChange: o,
+  disableHover: c = !1
+}) => {
+  const d = $(null), h = l, m = n.find((g) => g.id === t), x = !!m, p = m || n.find((g) => g.id === s) || n.find((g) => g.id === a) || n[0], w = B(() => {
+    if (!p || !["7d", "30d", "60d", "90d", "mtd", "qtd", "ytd", "lytd"].includes(p.id))
+      return "";
+    const { start: b, end: k } = ve(p.id);
+    return ke(b, k, /* @__PURE__ */ new Date());
+  }, [p]), y = C(() => {
+    c || o && o(i, !0);
+  }, [i, o, c]), S = C(() => {
+    c || o && o(i, !1);
+  }, [i, o, c]), L = C(() => {
+    o && o(i, !1);
+  }, [i, o]), W = C(() => {
+    o && o(i, !h);
+  }, [i, h, o]), O = C((g) => {
+    f(g), L();
+  }, [f, L]), I = C((g, b) => {
+    g.stopPropagation(), r && r(b);
+  }, [r]), z = /* @__PURE__ */ u(
+    E,
+    {
+      ref: d,
+      onMouseEnter: y,
+      onMouseLeave: S,
+      sx: { position: "relative", display: "inline-flex" },
+      children: [
+        /* @__PURE__ */ e(
+          X,
+          {
+            label: p?.label,
+            onClick: W,
+            deleteIcon: /* @__PURE__ */ e(
+              $e,
+              {
+                sx: {
+                  transform: h ? "rotate(180deg)" : "none",
+                  transition: "transform 200ms"
+                }
+              }
+            ),
+            onDelete: () => {
+            },
+            variant: "outlined",
+            color: x ? "primary" : "default",
+            size: "small",
+            sx: {
+              cursor: "pointer",
+              fontWeight: x ? 600 : 400,
+              "& .MuiChip-deleteIcon": {
+                fontSize: "16px",
+                marginLeft: "-4px",
+                marginRight: "4px",
+                color: x ? "primary.main" : "action.active"
+              },
+              "&:hover": {
+                borderColor: "primary.main"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          Ie,
+          {
+            open: h,
+            anchorEl: d.current,
+            placement: "bottom-start",
+            disablePortal: !0,
+            sx: { zIndex: 1300 },
+            children: /* @__PURE__ */ e(
+              ze,
+              {
+                elevation: 8,
+                onMouseEnter: y,
+                onMouseLeave: S,
+                sx: {
+                  minWidth: 120,
+                  mt: 0.5,
+                  py: 0.5
+                },
+                children: /* @__PURE__ */ e(Me, { dense: !0, children: n.map((g) => {
+                  const b = t === g.id, k = s === g.id;
+                  return /* @__PURE__ */ u(
+                    Re,
+                    {
+                      onClick: () => O(g.id),
+                      selected: b,
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 1,
+                        py: 0.75,
+                        minHeight: 36
+                      },
+                      children: [
+                        /* @__PURE__ */ u(E, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                          b && /* @__PURE__ */ e(Oe, { fontSize: "small", color: "primary", sx: { fontSize: 14 } }),
+                          /* @__PURE__ */ e(
+                            Le,
+                            {
+                              primary: g.label,
+                              primaryTypographyProps: {
+                                fontSize: 13,
+                                fontWeight: b ? 600 : 400,
+                                sx: { ml: b ? 0 : 2.5 }
+                              }
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ e(
+                          Te,
+                          {
+                            size: "small",
+                            onClick: (T) => I(T, g.id),
+                            sx: {
+                              p: 0.25,
+                              opacity: k ? 1 : 0,
+                              transition: "opacity 200ms",
+                              ".MuiMenuItem-root:hover &": {
+                                opacity: 1
+                              }
+                            },
+                            title: k ? "Unpin as default" : "Set as default",
+                            children: k ? /* @__PURE__ */ e(Be, { fontSize: "small", color: "warning", sx: { fontSize: 14 } }) : /* @__PURE__ */ e(We, { fontSize: "small", sx: { fontSize: 14 } })
+                          }
+                        )
+                      ]
+                    },
+                    g.id
+                  );
+                }) })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  return w ? /* @__PURE__ */ e(
+    De,
+    {
+      title: w,
+      placement: "top-start",
+      slotProps: {
+        popper: {
+          modifiers: [{ name: "offset", options: { offset: [0, -9] } }]
+        }
+      },
+      children: z
+    }
+  ) : z;
+};
+A.displayName = "ExpandableChip";
+function Ve({
+  selectedPreset: i,
+  onSelect: n,
+  pinnedPreset: t = "30d",
+  onPin: a,
+  openGroup: f,
+  onOpenChange: s,
+  disableHover: r = !1,
+  showCalendarEntry: l = !0,
+  calendarEntry: o
+}) {
+  const c = i === "today";
+  return /* @__PURE__ */ u(E, { className: "hybrid-date-picker__quick-bar", children: [
+    /* @__PURE__ */ e(
+      X,
+      {
+        label: "Today",
+        size: "small",
+        variant: c ? "filled" : "outlined",
+        color: c ? "primary" : "default",
+        onClick: () => n("today"),
+        sx: {
+          fontWeight: c ? 600 : 400,
+          cursor: "pointer"
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      A,
+      {
+        groupId: "rolling",
+        options: we,
+        selectedId: i,
+        defaultId: t,
+        onSelect: n,
+        pinnedId: t,
+        onPin: a,
+        isOpen: f === "rolling",
+        onOpenChange: s,
+        disableHover: r
+      }
+    ),
+    /* @__PURE__ */ e(
+      A,
+      {
+        groupId: "period",
+        options: Se,
+        selectedId: i,
+        defaultId: t,
+        onSelect: n,
+        pinnedId: t,
+        onPin: a,
+        isOpen: f === "period",
+        onOpenChange: s,
+        disableHover: r
+      }
+    ),
+    l && /* @__PURE__ */ u(K, { children: [
+      /* @__PURE__ */ e(Ne, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5 } }),
+      o
+    ] })
+  ] });
+}
+Ve.displayName = "TimeframeQuickBar";
+export {
+  ee as B,
+  te as D,
+  A as E,
+  Pe as M,
+  re as O,
+  ie as S,
+  j as T,
+  H as a,
+  Ve as b,
+  je as e,
+  Ee as u
+};