@mt-gloss/ui 0.1.149 → 0.1.151

package/{TimeframeQuickBar-BexFJUgk.js → TimeframeQuickBar-I9Io0v7_.js}

@@ -1,24 +1,24 @@
-import { jsxs as u, jsx as e, Fragment as K } from "react/jsx-runtime";
-import { useId as me, useMemo as W, useState as ge, useRef as B, 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 { jsxs as h, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { useId as me, useMemo as O, useState as ge, useRef as W, useCallback as C, useEffect as pe } from "react";
+import { formatTrend as xe, isStatusModeEnabled as ye, pickMetricTier as be, getValueFontSize as Y, hexToRgba as q, formatValue as Q, getDateRangeForPreset as ve, formatDateRangeSmart as ke, ROLLING_OPTIONS as we, PERIOD_OPTIONS as Se } from "@mt-gloss/utils";
 import { B as N, a as D, b as Ce } from "./BaseText-Dxbk1JJa.js";
-import { Box as $, Chip as X, Popper as Ie, Paper as ze, MenuList as Me, MenuItem as Re, ListItemText as Te, IconButton as Le, Tooltip as Ne, Divider as De } 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 = {
+import { Box as B, Chip as X, Popper as Ie, Paper as ze, MenuList as Me, MenuItem as Re, ListItemText as Te, IconButton as Le, Tooltip as Ne, Divider as De } from "@mui/material";
+import Be from "@mui/icons-material/ExpandMore";
+import We from "@mui/icons-material/Star";
+import Oe from "@mui/icons-material/StarBorder";
+import _e from "@mui/icons-material/Check";
+const Z = {
   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 = {
+}, J = {
   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(
+}, j = function({ value: o, direction: t }) {
+  if (o == null) return null;
+  const { text: d, direction: f } = xe(o), l = t || f, { color: r, bg: s } = Z[l] || Z.flat, n = J[l] || J.flat;
+  return /* @__PURE__ */ h(
     "span",
     {
       style: {
@@ -31,27 +31,27 @@ const Q = {
         fontWeight: 600,
         lineHeight: 1,
         color: r,
-        backgroundColor: l,
+        backgroundColor: s,
         whiteSpace: "nowrap"
       },
       children: [
-        /* @__PURE__ */ e("span", { style: { fontSize: 8, lineHeight: 1 }, children: o }),
-        a
+        /* @__PURE__ */ e("span", { style: { fontSize: 8, lineHeight: 1 }, children: n }),
+        d
       ]
     }
   );
 };
 j.displayName = "TrendIndicator";
-const H = ({ data: i, color: n, isStale: t }) => {
-  const f = "sparkbg-" + me().replace(/:/g, ""), s = n || "#4f46e5", r = W(() => {
+const A = ({ data: i, color: o, isStale: t }) => {
+  const f = "sparkbg-" + me().replace(/:/g, ""), l = o || "#4f46e5", r = O(() => {
     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 };
+    const s = 300, n = 55, a = 2, c = Math.min(...i), m = Math.max(...i) - c || 1, p = i.map((y, S) => ({
+      x: S / (i.length - 1) * s,
+      y: a + (1 - (y - c) / m) * (n - a * 2)
+    })).map((y, S) => `${S === 0 ? "M" : "L"}${y.x},${y.y}`).join(" "), w = `${p} L${s},${n} L0,${n}Z`;
+    return { line: p, area: w, w: s, h: n };
   }, [i]);
-  return r ? /* @__PURE__ */ u(
+  return r ? /* @__PURE__ */ h(
     "svg",
     {
       height: 55,
@@ -81,9 +81,9 @@ const H = ({ data: i, color: n, isStale: t }) => {
         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("defs", { children: /* @__PURE__ */ h("linearGradient", { id: f, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: l, stopOpacity: "0.09" }),
+          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: l, stopOpacity: "0.01" })
         ] }) }),
         /* @__PURE__ */ e("path", { d: r.area, fill: `url(#${f})` }),
         /* @__PURE__ */ e(
@@ -91,7 +91,7 @@ const H = ({ data: i, color: n, isStale: t }) => {
           {
             d: r.line,
             fill: "none",
-            stroke: s,
+            stroke: l,
             strokeOpacity: "0.22",
             strokeWidth: "1.5",
             strokeLinecap: "round",
@@ -102,19 +102,19 @@ const H = ({ data: i, color: n, isStale: t }) => {
     }
   ) : null;
 };
-H.displayName = "SparklineBg";
-const ee = ({ data: i, color: n, isStale: t }) => {
-  const a = n || "#4f46e5", f = W(() => {
+A.displayName = "SparklineBg";
+const ee = ({ data: i, color: o, isStale: t }) => {
+  const d = o || "#4f46e5", f = O(() => {
     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;
+    const l = 300, r = 50, s = r * 0.82, n = i.length, a = l / (n * 4), c = a * 3, m = Math.max(...i) || 1;
     return i.map((x, p) => {
-      const w = x / m, y = Math.max(w * l, 2);
+      const w = x / m, y = Math.max(w * s, 2);
       return {
-        x: p * (d + c),
+        x: p * (c + a),
         y: r - y,
-        width: d,
+        width: c,
         height: y,
-        isLast: p === o - 1
+        isLast: p === n - 1
       };
     });
   }, [i]);
@@ -137,15 +137,15 @@ const ee = ({ data: i, color: n, isStale: t }) => {
         transformOrigin: "bottom",
         transition: t ? "transform 400ms ease-out" : "transform 500ms ease-in-out"
       },
-      children: f.map((s, r) => /* @__PURE__ */ e(
+      children: f.map((l, 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,
+          x: l.x,
+          y: l.y,
+          width: l.width,
+          height: l.height,
+          fill: d,
+          fillOpacity: l.isLast ? 0.14 : 0.06,
           rx: "2.5"
         },
         r
@@ -154,22 +154,22 @@ const ee = ({ data: i, color: n, isStale: t }) => {
   ) : 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(
+const te = ({ value: i = 0, max: o = 100, color: t = "#4f46e5", colSpan: d = 1, isStale: f }) => {
+  const l = d >= 2 ? 40 : 34, r = 3.5, s = (l - r) / 2, n = 2 * Math.PI * s, a = f ? 0 : Math.min(Math.max(i / (o || 1), 0), 1), c = n * (1 - a);
+  return /* @__PURE__ */ h(
     "svg",
     {
-      width: s,
-      height: s,
-      viewBox: `0 0 ${s} ${s}`,
+      width: l,
+      height: l,
+      viewBox: `0 0 ${l} ${l}`,
       style: { flexShrink: 0, marginRight: 8, display: "block" },
       children: [
         /* @__PURE__ */ e(
           "circle",
           {
-            cx: s / 2,
-            cy: s / 2,
-            r: l,
+            cx: l / 2,
+            cy: l / 2,
+            r: s,
             fill: "none",
             stroke: t,
             strokeOpacity: "0.06",
@@ -179,16 +179,16 @@ const te = ({ value: i = 0, max: n = 100, color: t = "#4f46e5", colSpan: a = 1,
         /* @__PURE__ */ e(
           "circle",
           {
-            cx: s / 2,
-            cy: s / 2,
-            r: l,
+            cx: l / 2,
+            cy: l / 2,
+            r: s,
             fill: "none",
             stroke: t,
             strokeWidth: r,
-            strokeDasharray: o,
-            strokeDashoffset: d,
+            strokeDasharray: n,
+            strokeDashoffset: c,
             strokeLinecap: "round",
-            transform: `rotate(-90 ${s / 2} ${s / 2})`,
+            transform: `rotate(-90 ${l / 2} ${l / 2})`,
             style: { transition: "stroke-dashoffset 0.4s ease" }
           }
         )
@@ -197,9 +197,9 @@ const te = ({ value: i = 0, max: n = 100, color: t = "#4f46e5", colSpan: a = 1,
   );
 };
 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(
+const re = ({ value: i = 0, max: o = 100, trendValue: t = 0, color: d = "#6b7280", colSpan: f = 1, isStale: l }) => {
+  const r = f >= 2 ? 44 : 36, s = 3.5, n = (r - s) / 2, a = 2 * Math.PI * n, c = l ? 0 : Math.min(Math.max(i / (o || 1), 0), 1), u = a * (1 - c), m = f >= 2 ? 11 : 9, x = `${Math.round(Math.abs(t))}%`;
+  return /* @__PURE__ */ h(
     "div",
     {
       style: {
@@ -213,7 +213,7 @@ const re = ({ value: i = 0, max: n = 100, trendValue: t = 0, color: a = "#6b7280
         marginRight: 8
       },
       children: [
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ h(
           "svg",
           {
             width: r,
@@ -226,11 +226,11 @@ const re = ({ value: i = 0, max: n = 100, trendValue: t = 0, color: a = "#6b7280
                 {
                   cx: r / 2,
                   cy: r / 2,
-                  r: o,
+                  r: n,
                   fill: "none",
-                  stroke: a,
+                  stroke: d,
                   strokeOpacity: "0.06",
-                  strokeWidth: l
+                  strokeWidth: s
                 }
               ),
               /* @__PURE__ */ e(
@@ -238,12 +238,12 @@ const re = ({ value: i = 0, max: n = 100, trendValue: t = 0, color: a = "#6b7280
                 {
                   cx: r / 2,
                   cy: r / 2,
-                  r: o,
+                  r: n,
                   fill: "none",
-                  stroke: a,
-                  strokeWidth: l,
-                  strokeDasharray: c,
-                  strokeDashoffset: h,
+                  stroke: d,
+                  strokeWidth: s,
+                  strokeDasharray: a,
+                  strokeDashoffset: u,
                   strokeLinecap: "round",
                   transform: `rotate(-90 ${r / 2} ${r / 2})`,
                   style: { transition: "stroke-dashoffset 0.4s ease" }
@@ -263,7 +263,7 @@ const re = ({ value: i = 0, max: n = 100, trendValue: t = 0, color: a = "#6b7280
               justifyContent: "center",
               fontSize: m,
               fontWeight: 700,
-              color: a,
+              color: d,
               lineHeight: 1,
               pointerEvents: "none"
             },
@@ -275,73 +275,73 @@ const re = ({ value: i = 0, max: n = 100, trendValue: t = 0, color: a = "#6b7280
   );
 };
 re.displayName = "ObjectArrow";
-const _e = { slot3: 200, slot5: 380 };
-function Ee(i, n) {
-  const t = _e, a = 150, [f, s] = ge(1), r = B(null), l = B(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);
+const $e = { slot3: 200, slot5: 380 };
+function Ee(i, o) {
+  const t = $e, d = 150, [f, l] = ge(1), r = W(null), s = W(null), n = C(() => {
+    const c = r.current;
+    if (c == null) return;
+    const u = c < t.slot3 ? 1 : c < t.slot5 ? 3 : 5;
+    l((m) => m === u ? m : u), r.current = null, s.current && (clearTimeout(s.current), s.current = null);
   }, [t.slot3, t.slot5]);
   pe(() => {
-    const d = i.current;
-    if (!d || typeof ResizeObserver > "u") return;
-    const h = new ResizeObserver((m) => {
+    const c = i.current;
+    if (!c || typeof ResizeObserver > "u") return;
+    const u = new ResizeObserver((m) => {
       const x = m[0]?.contentRect.width ?? 0;
-      r.current = x, l.current && clearTimeout(l.current), l.current = setTimeout(o, a);
+      r.current = x, s.current && clearTimeout(s.current), s.current = setTimeout(n, d);
     });
-    return h.observe(d), () => {
-      h.disconnect(), l.current && clearTimeout(l.current);
+    return u.observe(c), () => {
+      u.disconnect(), s.current && clearTimeout(s.current);
     };
-  }, [i, o, a]);
-  const c = C(() => {
-    o();
-  }, [o]);
-  return { capacity: f, onPointerUp: c };
+  }, [i, n, d]);
+  const a = C(() => {
+    n();
+  }, [n]);
+  return { capacity: f, onPointerUp: a };
 }
 function ie(i) {
-  const { onStatusSlotClick: n } = i, t = B(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(
+  const { onStatusSlotClick: o } = i, t = W(null), d = ye(), { capacity: f, onPointerUp: l } = Ee(t), r = i.maxSlots ?? f, s = i.statuses.slice(0, r);
+  if (!d) {
+    const n = i.statuses[0];
+    return /* @__PURE__ */ h(
       N,
       {
         definition: { display: "flex", direction: "column" },
         className: "gloss-status-card gloss-status-card--flag-off",
         children: [
           /* @__PURE__ */ e(D, { className: "gloss-metric-card__label", children: i.label }),
-          o != null ? /* @__PURE__ */ e(D, { children: String(o.value) }) : null
+          n != null ? /* @__PURE__ */ e(D, { children: String(n.value) }) : null
         ]
       }
     );
   }
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ h(
     "div",
     {
       ref: t,
       className: "gloss-status-card",
       "data-status-mode": "on",
       "data-status-capacity": r,
-      onPointerUp: s,
+      onPointerUp: l,
       children: [
         /* @__PURE__ */ e(D, { 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(
+        /* @__PURE__ */ e("div", { className: "gloss-status-slots", "data-status-slot-count": s.length, children: s.map((n, a) => {
+          const c = i.sparklinePerStatus?.[n.id], u = n.id === i.activeStatusId;
+          return /* @__PURE__ */ h(
             "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,
+              className: `gloss-status-slots__slot${u ? " gloss-status-slots__slot--active" : ""}`,
+              "data-status-slot-id": n.id,
+              "data-status-slot-index": a,
+              onClick: o ? (m) => o(n.id, m.currentTarget) : void 0,
+              style: o ? { 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
+                /* @__PURE__ */ e("span", { className: "gloss-metric-card__label", children: n.label }),
+                /* @__PURE__ */ e("span", { children: String(n.value) }),
+                c != null && c.length > 0 ? /* @__PURE__ */ e(A, { data: [...c], color: n.accentColor }) : null
               ]
             },
-            o.id
+            n.id
           );
         }) })
       ]
@@ -349,24 +349,17 @@ function ie(i) {
   );
 }
 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})`;
+function je(i, o) {
+  if (!o) return;
+  if (i == null) return o.fallback;
+  const { operator: t, threshold: d, result: f, fallback: l } = o;
+  return (t === "lt" ? i < d : t === "gt" ? i > d : t === "eq" ? Math.abs(i - d) < 1e-9 : t === "gte" ? i >= d : t === "lte" ? i <= d : !1) ? f : l;
 }
 const E = {
   up: "var(--color-positive)",
   down: "var(--color-negative)",
   flat: "var(--color-text-secondary)"
-}, Ae = {
+}, He = {
   positive: "#10b981",
   // Used with hexToRgba() for tinted overlays -- must stay hex
   negative: "#ef4444",
@@ -375,7 +368,7 @@ const E = {
   // Used with hexToRgba() for tinted overlays -- must stay hex
   neutral: "#6b7280"
   // Used with hexToRgba() for tinted overlays -- must stay hex
-}, He = () => /* @__PURE__ */ u(
+}, Ae = () => /* @__PURE__ */ h(
   "svg",
   {
     "aria-label": "Warning threshold breached",
@@ -401,7 +394,7 @@ const E = {
       /* @__PURE__ */ e("circle", { cx: "7", cy: "10.5", r: "0.7", fill: "currentColor" })
     ]
   }
-), Fe = () => /* @__PURE__ */ u(
+), Fe = () => /* @__PURE__ */ h(
   "svg",
   {
     "aria-label": "Critical threshold breached",
@@ -417,36 +410,36 @@ const E = {
       /* @__PURE__ */ e("circle", { cx: "7", cy: "10", r: "0.7", fill: "currentColor" })
     ]
   }
-), Pe = function(n) {
+), Pe = function(o) {
   const {
     variant: t = "standard",
-    label: a,
+    label: d,
     labelAdornment: f,
-    value: s,
+    value: l,
     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, T = t === "object-arrow" ? n.objectArrowValue : 0, O = t === "object-arrow" ? n.objectArrowMax : 100, _ = 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: L, tier: ne, length: oe } = W(
-    () => t === "status-mode" ? { formatted: "", tier: 0, length: 0 } : be(s, {
+    trend: s,
+    subtitle: n,
+    colSpan: a = 1,
+    isStale: c,
+    thresholdBreach: u = "none"
+  } = o, m = t === "sparkline" || t === "bars" || t === "donut" ? o.accentColor ?? "#4f46e5" : "#4f46e5", x = t === "highlight" ? o.highlightColor : void 0, p = t === "sparkline" ? o.sparklineData : void 0, w = t === "bars" ? o.barData : void 0, y = t === "donut" ? o.donutValue : 0, S = t === "donut" ? o.donutMax ?? 100 : 100, T = t === "object-arrow" ? o.objectArrowValue : 0, _ = t === "object-arrow" ? o.objectArrowMax : 100, $ = t === "arrow" ? o.arrowDirection : void 0, I = t === "versus" ? o.versusData : void 0, z = t === "segmented" ? o.segments : void 0, b = (t === "highlight" && o.tintCondition ? je(
+    typeof o.value == "number" ? o.value : null,
+    o.tintCondition
+  ) : void 0) ?? x, k = (b ? He[b] : void 0) || b, { formatted: L, tier: ne, length: oe } = O(
+    () => t === "status-mode" ? { formatted: "", tier: 0, length: 0 } : be(l, {
       prefix: r?.prefix || "",
       suffix: r?.suffix || "",
       abbreviated: r?.abbreviated
-    }, c),
-    [t, s, r?.prefix, r?.suffix, r?.abbreviated, c]
+    }, a),
+    [t, l, r?.prefix, r?.suffix, r?.abbreviated, a]
   );
-  if (n.variant === "status-mode")
-    return /* @__PURE__ */ e(ie, { ...n });
-  const R = { display: L, full: L, length: oe }, se = Y(R.length, c), le = l?.direction && E[l.direction] || E.flat, F = d ? "gloss-metric-data-stale" : "gloss-metric-data-fresh", P = {
+  if (o.variant === "status-mode")
+    return /* @__PURE__ */ e(ie, { ...o });
+  const R = { display: L, full: L, length: oe }, le = Y(R.length, a), se = s?.direction && E[s.direction] || E.flat, F = c ? "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,
+    fontSize: le,
     lineHeight: 1.1,
     whiteSpace: "nowrap",
     overflow: "hidden"
@@ -458,7 +451,7 @@ const E = {
     whiteSpace: "nowrap",
     flex: 1,
     minWidth: 0
-  }, G = t === "sparkline" || t === "bars", ae = G && o ? {
+  }, G = t === "sparkline" || t === "bars", ae = G && n ? {
     ...V,
     backgroundColor: "rgba(255,255,255,0.78)",
     backdropFilter: "blur(4px)",
@@ -469,7 +462,7 @@ const E = {
     flex: "none",
     minWidth: void 0
   } : V, ce = () => {
-    const v = _ === "down" ? "▼" : "▲";
+    const v = $ === "down" ? "▼" : "▲";
     return /* @__PURE__ */ e(
       "div",
       {
@@ -490,17 +483,17 @@ const E = {
     );
   }, de = () => {
     if (!I) return null;
-    const v = q(I.current, {
+    const v = Q(I.current, {
       prefix: r?.prefix || "",
       suffix: r?.suffix || "",
       abbreviated: r?.abbreviated
-    }), M = q(I.prior, {
+    }), 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: [
+    }), U = Y(v.length, a), ue = Math.max(U - 4, 14);
+    return /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1 }, children: [
+      /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column" }, children: [
         /* @__PURE__ */ e(
           "span",
           {
@@ -524,13 +517,13 @@ const E = {
           style: { flexShrink: 0 }
         }
       ),
-      /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column" }, children: [
         /* @__PURE__ */ e(
           "span",
           {
             style: {
               fontWeight: 700,
-              fontSize: he,
+              fontSize: ue,
               letterSpacing: "-0.03em",
               color: "rgba(0,0,0,0.5)",
               lineHeight: 1.1
@@ -542,7 +535,7 @@ const E = {
         /* @__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: [
+  }, fe = () => !z || z.length === 0 ? null : /* @__PURE__ */ h("div", { style: { zIndex: 2, position: "relative" }, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -575,7 +568,7 @@ const E = {
           flexWrap: "wrap",
           marginTop: 4
         },
-        children: z.map((v, M) => /* @__PURE__ */ u(
+        children: z.map((v, M) => /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -603,16 +596,16 @@ const E = {
         ))
       }
     )
-  ] }), ue = [
+  ] }), he = [
     "gloss-threshold-overlay",
-    h === "warn" ? "gloss-threshold-warn" : "",
-    h === "critical" ? "gloss-threshold-critical" : "",
-    h === "critical" ? "gloss-threshold-pulse" : ""
+    u === "warn" ? "gloss-threshold-warn" : "",
+    u === "critical" ? "gloss-threshold-critical" : "",
+    u === "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, {}) }),
+  return /* @__PURE__ */ h(K, { children: [
+    u !== "none" && /* @__PURE__ */ e("div", { className: he }),
+    u === "warn" && /* @__PURE__ */ e("span", { className: "gloss-threshold-icon gloss-threshold-icon--warn", children: /* @__PURE__ */ e(Ae, {}) }),
+    u === "critical" && /* @__PURE__ */ e("span", { className: "gloss-threshold-icon gloss-threshold-icon--critical", children: /* @__PURE__ */ e(Fe, {}) }),
     t === "highlight" && k && /* @__PURE__ */ e(
       "div",
       {
@@ -620,44 +613,44 @@ const E = {
           position: "absolute",
           inset: 0,
           borderRadius: 10,
-          backgroundColor: J(k, 0.06),
-          border: `1px solid ${J(k, 0.15)}`,
+          backgroundColor: q(k, 0.06),
+          border: `1px solid ${q(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(
+    t === "sparkline" && /* @__PURE__ */ e(A, { data: p, color: m, isStale: c }),
+    t === "bars" && /* @__PURE__ */ e(ee, { data: w, color: m, isStale: c }),
+    /* @__PURE__ */ h(
       N,
       {
         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(D, { className: "gloss-metric-card__label", children: a }),
+          /* @__PURE__ */ e(D, { className: "gloss-metric-card__label", children: d }),
           f
         ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ h(
       N,
       {
         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 === "donut" && /* @__PURE__ */ e(te, { value: y, max: S, color: m, colSpan: a, isStale: c }),
           t === "object-arrow" && /* @__PURE__ */ e(
             re,
             {
               value: T,
-              max: O,
-              trendValue: l?.value,
-              color: le,
-              colSpan: c,
-              isStale: d
+              max: _,
+              trendValue: s?.value,
+              color: se,
+              colSpan: a,
+              isStale: c
             }
           ),
           t === "arrow" && ce(),
@@ -667,22 +660,22 @@ const E = {
         ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ h(
       N,
       {
         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: {
+          /* @__PURE__ */ e("span", { style: ae, children: n }),
+          G && s?.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 })
+          }, children: /* @__PURE__ */ e(j, { value: s?.value, direction: s?.direction }) }) : /* @__PURE__ */ e(j, { value: s?.value, direction: s?.direction })
         ]
       }
     ),
@@ -690,39 +683,39 @@ const E = {
   ] });
 };
 Pe.displayName = "MetricCard";
-const A = ({
+const H = ({
   groupId: i,
-  options: n,
+  options: o,
   selectedId: t,
-  defaultId: a,
+  defaultId: d,
   onSelect: f,
-  pinnedId: s,
+  pinnedId: l,
   onPin: r,
-  isOpen: l = !1,
-  onOpenChange: o,
-  disableHover: c = !1
+  isOpen: s = !1,
+  onOpenChange: n,
+  disableHover: a = !1
 }) => {
-  const d = B(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 = W(() => {
+  const c = W(null), u = s, m = o.find((g) => g.id === t), x = !!m, p = m || o.find((g) => g.id === l) || o.find((g) => g.id === d) || o[0], w = O(() => {
     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]), T = C(() => {
-    o && o(i, !1);
-  }, [i, o]), O = C(() => {
-    o && o(i, !h);
-  }, [i, h, o]), _ = C((g) => {
+    a || n && n(i, !0);
+  }, [i, n, a]), S = C(() => {
+    a || n && n(i, !1);
+  }, [i, n, a]), T = C(() => {
+    n && n(i, !1);
+  }, [i, n]), _ = C(() => {
+    n && n(i, !u);
+  }, [i, u, n]), $ = C((g) => {
     f(g), T();
   }, [f, T]), I = C((g, b) => {
     g.stopPropagation(), r && r(b);
-  }, [r]), z = /* @__PURE__ */ u(
-    $,
+  }, [r]), z = /* @__PURE__ */ h(
+    B,
     {
-      ref: d,
+      ref: c,
       onMouseEnter: y,
       onMouseLeave: S,
       sx: { position: "relative", display: "inline-flex" },
@@ -730,21 +723,21 @@ const A = ({
         /* @__PURE__ */ e(
           X,
           {
-            label: /* @__PURE__ */ u($, { sx: { display: "inline-flex", alignItems: "center", gap: "2px" }, children: [
+            label: /* @__PURE__ */ h(B, { sx: { display: "inline-flex", alignItems: "center", gap: "2px" }, children: [
               p?.label,
               /* @__PURE__ */ e(
-                $e,
+                Be,
                 {
                   sx: {
                     fontSize: 16,
                     color: x ? "primary.main" : "action.active",
-                    transform: h ? "rotate(180deg)" : "none",
+                    transform: u ? "rotate(180deg)" : "none",
                     transition: "transform 200ms"
                   }
                 }
               )
             ] }),
-            onClick: O,
+            onClick: _,
             variant: "outlined",
             color: x ? "primary" : "default",
             size: "small",
@@ -760,8 +753,8 @@ const A = ({
         /* @__PURE__ */ e(
           Ie,
           {
-            open: h,
-            anchorEl: d.current,
+            open: u,
+            anchorEl: c.current,
             placement: "bottom-start",
             sx: { zIndex: 1300 },
             children: /* @__PURE__ */ e(
@@ -775,12 +768,12 @@ const A = ({
                   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(
+                children: /* @__PURE__ */ e(Me, { dense: !0, children: o.map((g) => {
+                  const b = t === g.id, k = l === g.id;
+                  return /* @__PURE__ */ h(
                     Re,
                     {
-                      onClick: () => _(g.id),
+                      onClick: () => $(g.id),
                       selected: b,
                       sx: {
                         display: "flex",
@@ -791,8 +784,8 @@ const A = ({
                         minHeight: 36
                       },
                       children: [
-                        /* @__PURE__ */ u($, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                          b && /* @__PURE__ */ e(Oe, { fontSize: "small", color: "primary", sx: { fontSize: 14 } }),
+                        /* @__PURE__ */ h(B, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                          b && /* @__PURE__ */ e(_e, { fontSize: "small", color: "primary", sx: { fontSize: 14 } }),
                           /* @__PURE__ */ e(
                             Te,
                             {
@@ -819,7 +812,7 @@ const A = ({
                               }
                             },
                             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 } })
+                            children: k ? /* @__PURE__ */ e(We, { fontSize: "small", color: "warning", sx: { fontSize: 14 } }) : /* @__PURE__ */ e(Oe, { fontSize: "small", sx: { fontSize: 14 } })
                           }
                         )
                       ]
@@ -848,67 +841,67 @@ const A = ({
     }
   ) : z;
 };
-A.displayName = "ExpandableChip";
+H.displayName = "ExpandableChip";
 function Ve({
   selectedPreset: i,
-  onSelect: n,
+  onSelect: o,
   pinnedPreset: t = "30d",
-  onPin: a,
+  onPin: d,
   openGroup: f,
-  onOpenChange: s,
+  onOpenChange: l,
   disableHover: r = !1,
-  showCalendarEntry: l = !0,
-  calendarEntry: o
+  showCalendarEntry: s = !0,
+  calendarEntry: n
 }) {
-  const c = i === "today";
-  return /* @__PURE__ */ u($, { className: "hybrid-date-picker__quick-bar", children: [
+  const a = i === "today";
+  return /* @__PURE__ */ h(B, { 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"),
+        variant: a ? "filled" : "outlined",
+        color: a ? "primary" : "default",
+        onClick: () => o("today"),
         sx: {
-          fontWeight: c ? 600 : 400,
+          fontWeight: a ? 600 : 400,
           cursor: "pointer"
         }
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      H,
       {
         groupId: "rolling",
         options: we,
         selectedId: i,
         defaultId: t,
-        onSelect: n,
+        onSelect: o,
         pinnedId: t,
-        onPin: a,
+        onPin: d,
         isOpen: f === "rolling",
-        onOpenChange: s,
+        onOpenChange: l,
         disableHover: r
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      H,
       {
         groupId: "period",
         options: Se,
         selectedId: i,
         defaultId: t,
-        onSelect: n,
+        onSelect: o,
         pinnedId: t,
-        onPin: a,
+        onPin: d,
         isOpen: f === "period",
-        onOpenChange: s,
+        onOpenChange: l,
         disableHover: r
       }
     ),
-    l && /* @__PURE__ */ u(K, { children: [
+    s && /* @__PURE__ */ h(K, { children: [
       /* @__PURE__ */ e(De, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5 } }),
-      o
+      n
     ] })
   ] });
 }
@@ -916,12 +909,12 @@ Ve.displayName = "TimeframeQuickBar";
 export {
   ee as B,
   te as D,
-  A as E,
+  H as E,
   Pe as M,
   re as O,
   ie as S,
   j as T,
-  H as a,
+  A as a,
   Ve as b,
   je as e,
   Ee as u