themelia-react-ui 2.0.4 → 2.0.5

package/dist/blocks/analytics.js

@@ -1,27 +1,27 @@
 "use client";
-import { c as e, u as t } from "../ui-provider-CQCuCBcy.js";
+import { f as e, m as t } from "../ui-provider-C-74NVLc.js";
 import { useStrings as n } from "../lib/strings.js";
-import { t as r } from "../utils-CF3c95Io.js";
-import { n as i } from "../buttons-BbfzgczK.js";
-import { c as a, o, s } from "../typography-CSyJrh28.js";
+import { t as r } from "../utils-B6kKb8jB.js";
+import { n as i } from "../buttons-BedGfygC.js";
+import { c as a, o, s } from "../typography-BQnine1k.js";
 import { c } from "../text.styles-B64My8RZ.js";
 import { t as l } from "../focus-recipes-B653VaLq.js";
-import { r as u, t as d } from "../structure-C0V0_Fyf.js";
+import { r as u, t as d } from "../structure-DuxKl954.js";
 import { i as f, r as p, t as m } from "../tone-recipes-BPsRAvhu.js";
-import { t as h } from "../smart-card-CqkzQsK-.js";
-import { t as g } from "../progress-BvF2oCdV.js";
-import { r as _ } from "../skeleton-CUj8O5Bd.js";
+import { t as h } from "../smart-card-CW0hjetE.js";
+import { t as g } from "../progress-BJhQP9WX.js";
+import { r as _ } from "../skeleton-BapcJd9C.js";
 import { t as v } from "../interaction-recipes-XR9ZpVYL.js";
-import { a as y, i as b, r as x } from "../value-typography-ClupF0Gz.js";
-import { _ as S, g as C } from "../primitives-Du64iDbb.js";
-import { a as ee } from "../number-E_OiIfJz.js";
-import { t as w } from "../icon-badge-COWbCCWu.js";
-import { t as T } from "../badge-DErMA7ul.js";
-import { t as te } from "../chart-C19flDQb.js";
-import { n as ne } from "../display-BB4BL_-K.js";
-import { n as re, t as ie } from "../usage-card-DVTRDmGz.js";
-import { useId as E, useMemo as D, useSyncExternalStore as ae } from "react";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { a as y, i as b, r as x } from "../value-typography-uAmWUAL1.js";
+import { _ as S, g as C } from "../primitives-ByWgGUgt.js";
+import { a as w } from "../number-CRU3kGuk.js";
+import { t as T } from "../icon-badge-DZF-YjQp.js";
+import { t as E } from "../badge-xIiV_E7f.js";
+import { t as ee } from "../chart-Darg_0Kv.js";
+import { n as te } from "../display-KsZLw9Ov.js";
+import { n as ne, t as re } from "../usage-card-BeSLY0i0.js";
+import { useId as D, useMemo as O, useSyncExternalStore as ie } from "react";
+import { Fragment as ae, jsx as k, jsxs as A } from "react/jsx-runtime";
 import { ArrowDown as j, ArrowRight as oe, ArrowUp as M, ArrowUpRight as se, Calendar as ce, Equal as le, Minus as ue } from "lucide-react";
 import { Area as N, AreaChart as P, ResponsiveContainer as F } from "recharts";
 //#region src/components/blocks/analytics/analytics.strings.ts
@@ -60,7 +60,7 @@ function L(e, t = {}) {
 	if (e.value === null || e.value === void 0) return "—";
 	let n = e.value, r = typeof n == "number" ? n : null, { locale: i } = t;
 	switch (e.valueType) {
-		case "currency": return r === null ? String(n) : ee({
+		case "currency": return r === null ? String(n) : w({
 			amount: r,
 			currency: e.currency ?? t.defaultCurrency ?? "USD",
 			locale: i,
@@ -72,12 +72,12 @@ function L(e, t = {}) {
 		default: return String(n);
 	}
 }
-function R(e) {
+function de(e) {
 	return e.trend ? e.trend : e.change?.direction === "up" ? "positive" : e.change?.direction === "down" ? "negative" : "neutral";
 }
 //#endregion
 //#region src/components/blocks/analytics/atoms/metric-trend-chip.tsx
-var de = {
+var fe = {
 	positive: {
 		text: "text-success",
 		badge: `${f.success.tint} ${f.success.ink}`,
@@ -93,54 +93,54 @@ var de = {
 		badge: "bg-muted text-muted-foreground",
 		arrow: "text-muted-foreground"
 	}
-}, z = {
+}, R = {
 	sm: "size-icon-sm",
 	md: "size-icon-md",
 	lg: "size-icon"
-}, B = {
+}, z = {
 	sm: "xxs",
 	md: "xs",
 	lg: "sm"
-}, fe = {
+}, pe = {
 	sm: "px-space-sm py-space-2xs",
 	md: "px-space-md py-space-2xs",
 	lg: "px-space-md py-space-xs"
 };
-function pe(e, t) {
+function me(e, t) {
 	return e || (t === "up" ? "positive" : t === "down" ? "negative" : "neutral");
 }
-function V({ change: e, trend: t, size: n = "md", variant: i = "default", className: o }) {
-	let s = pe(t, e.direction), c = e.direction === "up" ? M : e.direction === "down" ? j : ue, l = de[s], u = String(e.value), d = e.direction === "up" ? "+" : (e.direction, "");
+function B({ change: e, trend: t, size: n = "md", variant: i = "default", className: o }) {
+	let s = me(t, e.direction), c = e.direction === "up" ? M : e.direction === "down" ? j : ue, l = fe[s], u = String(e.value), d = e.direction === "up" ? "+" : (e.direction, "");
 	return i === "inline" ? /* @__PURE__ */ A(S, {
 		type: "inherit",
-		size: B[n],
+		size: z[n],
 		weight: "medium",
 		className: r("metric-trend-chip--component", l.text, "tabular-nums", o),
 		children: [d, u]
 	}) : i === "compact" ? /* @__PURE__ */ A("span", {
 		className: r("inline-flex items-center gap-space-2xs", l.text, o),
 		children: [/* @__PURE__ */ k(c, {
-			className: z[n],
+			className: R[n],
 			strokeWidth: 2.5,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ k(S, {
 			type: "inherit",
-			size: B[n],
+			size: z[n],
 			weight: "semibold",
 			className: "tabular-nums",
 			children: u
 		})]
 	}) : i === "badge" ? /* @__PURE__ */ A("span", {
-		className: r("inline-flex items-center gap-space-xs rounded-radius", l.badge, fe[n], o),
+		className: r("inline-flex items-center gap-space-xs rounded-radius", l.badge, pe[n], o),
 		children: [
 			/* @__PURE__ */ k(c, {
-				className: z[n],
+				className: R[n],
 				strokeWidth: 2.5,
 				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ k(S, {
 				type: "inherit",
-				size: B[n],
+				size: z[n],
 				weight: "semibold",
 				className: "tabular-nums",
 				children: u
@@ -148,7 +148,7 @@ function V({ change: e, trend: t, size: n = "md", variant: i = "default", classN
 			!!e.label && /* @__PURE__ */ k(a, {
 				type: "inherit",
 				tag: "span",
-				size: B[n],
+				size: z[n],
 				children: e.label
 			})
 		]
@@ -156,53 +156,53 @@ function V({ change: e, trend: t, size: n = "md", variant: i = "default", classN
 		className: r("inline-flex items-center gap-space-xs", l.text, o),
 		children: [
 			/* @__PURE__ */ k(c, {
-				className: z[n],
+				className: R[n],
 				strokeWidth: 2.5,
 				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ k(S, {
 				type: "inherit",
-				size: B[n],
+				size: z[n],
 				weight: "semibold",
 				className: "tabular-nums",
 				children: u
 			}),
 			!!e.label && /* @__PURE__ */ k(a, {
 				tag: "span",
-				size: B[n],
+				size: z[n],
 				type: "secondary",
 				children: e.label
 			})
 		]
 	});
 }
-V.displayName = "MetricTrendChip";
+B.displayName = "MetricTrendChip";
 //#endregion
 //#region src/lib/use-prefers-reduced-motion.ts
-var H = "(prefers-reduced-motion: reduce)";
-function me(e) {
+var V = "(prefers-reduced-motion: reduce)";
+function he(e) {
 	if (typeof window > "u" || typeof window.matchMedia != "function") return () => {};
-	let t = window.matchMedia(H);
+	let t = window.matchMedia(V);
 	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
 }
-function he() {
-	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(H).matches;
-}
 function ge() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(V).matches;
+}
+function _e() {
 	return !0;
 }
-function U() {
-	return ae(me, he, ge);
+function H() {
+	return ie(he, ge, _e);
 }
 //#endregion
 //#region src/components/blocks/analytics/atoms/metric-sparkline.tsx
-var _e = {
+var ve = {
 	positive: "var(--success)",
 	negative: "var(--destructive)",
 	neutral: "var(--muted-foreground)"
 };
-function W({ data: e, trend: t = "neutral", color: n, className: i, animated: a = !0, "aria-label": o = "Trend sparkline" }) {
-	let s = E(), c = U(), l = D(() => `metric-spark-${s.replaceAll(":", "")}`, [s]), u = n ?? _e[t], d = D(() => !Array.isArray(e) || e.length === 0 ? [] : e.map((e, t) => ({
+function U({ data: e, trend: t = "neutral", color: n, className: i, animated: a = !0, "aria-label": o = "Trend sparkline" }) {
+	let s = D(), c = H(), l = O(() => `metric-spark-${s.replaceAll(":", "")}`, [s]), u = n ?? ve[t], d = O(() => !Array.isArray(e) || e.length === 0 ? [] : e.map((e, t) => ({
 		i: t,
 		v: e
 	})), [e]);
@@ -258,20 +258,20 @@ function W({ data: e, trend: t = "neutral", color: n, className: i, animated: a
 		})
 	});
 }
-W.displayName = "MetricSparkline";
+U.displayName = "MetricSparkline";
 //#endregion
 //#region src/components/blocks/analytics/atoms/metric-skeleton.tsx
-var G = ({ className: e }) => /* @__PURE__ */ k(_, { className: e });
-function K({ variant: e = "default", size: t = "md", className: n }) {
+var W = ({ className: e }) => /* @__PURE__ */ k(_, { className: e });
+function G({ variant: e = "default", size: t = "md", className: n }) {
 	let i = /* @__PURE__ */ A(d, {
 		gap: "lg",
 		children: [
-			/* @__PURE__ */ k(G, { className: "h-3 w-24" }),
+			/* @__PURE__ */ k(W, { className: "h-3 w-24" }),
 			/* @__PURE__ */ A(d, {
 				gap: "md",
-				children: [/* @__PURE__ */ k(G, { className: t === "lg" ? "h-9 w-40" : "h-7 w-32" }), /* @__PURE__ */ k(G, { className: "h-3 w-20" })]
+				children: [/* @__PURE__ */ k(W, { className: t === "lg" ? "h-9 w-40" : "h-7 w-32" }), /* @__PURE__ */ k(W, { className: "h-3 w-20" })]
 			}),
-			/* @__PURE__ */ k(G, { className: "h-8 w-full" })
+			/* @__PURE__ */ k(W, { className: "h-8 w-full" })
 		]
 	});
 	return e === "card" || e === "bordered" || e === "accent" || e === "colored" ? /* @__PURE__ */ k(h, {
@@ -284,34 +284,34 @@ function K({ variant: e = "default", size: t = "md", className: n }) {
 		className: r("flex items-center gap-space-lg", n),
 		"aria-busy": "true",
 		children: [
-			/* @__PURE__ */ k(G, { className: "size-avatar rounded-radius" }),
+			/* @__PURE__ */ k(W, { className: "size-avatar rounded-radius" }),
 			/* @__PURE__ */ A(d, {
 				gap: "sm",
 				className: "flex-1",
-				children: [/* @__PURE__ */ k(G, { className: "h-3 w-20" }), /* @__PURE__ */ k(G, { className: "h-4 w-28" })]
+				children: [/* @__PURE__ */ k(W, { className: "h-3 w-20" }), /* @__PURE__ */ k(W, { className: "h-4 w-28" })]
 			}),
-			/* @__PURE__ */ k(G, { className: "h-5 w-12 rounded-full" })
+			/* @__PURE__ */ k(W, { className: "h-5 w-12 rounded-full" })
 		]
 	}) : e === "minimal" ? /* @__PURE__ */ A("div", {
 		className: r("inline-flex items-baseline gap-space-md", n),
 		"aria-busy": "true",
-		children: [/* @__PURE__ */ k(G, { className: "h-3 w-12" }), /* @__PURE__ */ k(G, { className: "h-3 w-16" })]
+		children: [/* @__PURE__ */ k(W, { className: "h-3 w-12" }), /* @__PURE__ */ k(W, { className: "h-3 w-16" })]
 	}) : /* @__PURE__ */ A("div", {
 		className: r("flex flex-col gap-space-sm p-surface", n),
 		"aria-busy": "true",
 		children: [
-			/* @__PURE__ */ k(G, { className: "h-3 w-20" }),
-			/* @__PURE__ */ k(G, { className: "h-5 w-28" }),
-			/* @__PURE__ */ k(G, { className: "mt-1 h-6 w-full" })
+			/* @__PURE__ */ k(W, { className: "h-3 w-20" }),
+			/* @__PURE__ */ k(W, { className: "h-5 w-28" }),
+			/* @__PURE__ */ k(W, { className: "mt-1 h-6 w-full" })
 		]
 	});
 }
-K.displayName = "MetricSkeleton";
+G.displayName = "MetricSkeleton";
 //#endregion
 //#region src/components/blocks/analytics/use-metric-format-options.ts
-function q() {
+function K() {
 	let { locale: n } = e(), { defaultCurrency: r, formatMode: i } = t();
-	return D(() => ({
+	return O(() => ({
 		locale: n,
 		defaultCurrency: r,
 		moneyFormatMode: i
@@ -323,7 +323,7 @@ function q() {
 }
 //#endregion
 //#region src/components/blocks/analytics/metric/metric.tsx
-var J = {
+var q = {
 	default: {
 		border: "border-border",
 		bg: "bg-card",
@@ -366,26 +366,26 @@ var J = {
 		dot: f.info.solid,
 		ring: f.info.halo
 	}
-}, ve = {
+}, ye = {
 	sm: "sm",
 	md: "base",
 	lg: "base"
-}, Y = {
+}, J = {
 	sm: "2xl",
 	md: "2xl",
 	lg: "3xl"
-}, ye = {
+}, be = {
 	sm: "@max-[11rem]/metric-card:text-xl",
 	md: "@max-[11rem]/metric-card:text-xl",
 	lg: "@max-[16rem]/metric-card:text-2xl @max-[11rem]/metric-card:text-xl"
-}, X = {
+}, xe = {
 	sm: "h-control-sm",
 	md: "h-control",
 	lg: "h-control-lg"
-}, be = 16;
-function Z(e) {
-	let { data: t, variant: n = "default", size: i = "md", colorScheme: o = "default", showSparkline: s = !0, showChange: c = !0, showIcon: l = !0, loading: u = !1, error: d = !1, errorLabel: f, progress: p = 0, className: m, "aria-label": g } = e, _ = r("metric--component", m), v = q(), y = D(() => L(t, v), [t, v]), b = D(() => R(t), [t]);
-	if (u) return /* @__PURE__ */ k(K, {
+}, Se = 16;
+function Y(e) {
+	let { data: t, variant: n = "default", size: i = "md", colorScheme: o = "default", showSparkline: s = !0, showChange: c = !0, showIcon: l = !0, loading: u = !1, error: d = !1, errorLabel: f, progress: p = 0, className: m, "aria-label": g } = e, _ = r("metric--component", m), v = K(), y = O(() => L(t, v), [t, v]), b = O(() => de(t), [t]);
+	if (u) return /* @__PURE__ */ k(G, {
 		variant: n,
 		size: i,
 		className: _
@@ -411,20 +411,20 @@ function Z(e) {
 		className: _
 	};
 	switch (n) {
-		case "card": return /* @__PURE__ */ k(Se, { ...x });
-		case "compact": return /* @__PURE__ */ k(Ce, { ...x });
-		case "minimal": return /* @__PURE__ */ k(we, { ...x });
-		case "bordered": return /* @__PURE__ */ k(Te, { ...x });
-		case "accent": return /* @__PURE__ */ k(Ee, { ...x });
-		case "colored": return /* @__PURE__ */ k(De, {
+		case "card": return /* @__PURE__ */ k(we, { ...x });
+		case "compact": return /* @__PURE__ */ k(Te, { ...x });
+		case "minimal": return /* @__PURE__ */ k(Ee, { ...x });
+		case "bordered": return /* @__PURE__ */ k(De, { ...x });
+		case "accent": return /* @__PURE__ */ k(Oe, { ...x });
+		case "colored": return /* @__PURE__ */ k(ke, {
 			...x,
 			progress: p
 		});
-		default: return /* @__PURE__ */ k(xe, { ...x });
+		default: return /* @__PURE__ */ k(Ce, { ...x });
 	}
 }
-Z.displayName = "Metric";
-function xe({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: l, ariaLabel: u, className: f }) {
+Y.displayName = "Metric";
+function Ce({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: l, ariaLabel: u, className: f }) {
 	let p = e.icon;
 	return /* @__PURE__ */ A(d, {
 		gap: "xs",
@@ -449,14 +449,14 @@ function xe({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 			}),
 			/* @__PURE__ */ k(s, {
 				tag: "h5",
-				size: ve[i],
+				size: ye[i],
 				className: "truncate tabular-nums text-inherit",
 				title: t,
 				children: t
 			}),
 			!!c && !!e.change && /* @__PURE__ */ k("div", {
 				className: "min-w-0",
-				children: /* @__PURE__ */ k(V, {
+				children: /* @__PURE__ */ k(B, {
 					change: e.change,
 					trend: e.trend,
 					size: i,
@@ -469,10 +469,10 @@ function xe({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 				className: "truncate",
 				children: e.subtitle
 			}),
-			!!o && !!e.sparkline?.length && /* @__PURE__ */ k(W, {
+			!!o && !!e.sparkline?.length && /* @__PURE__ */ k(U, {
 				data: e.sparkline,
 				trend: n,
-				className: r("mt-auto", X[i])
+				className: r("mt-auto", xe[i])
 			}),
 			!!e.footer && /* @__PURE__ */ k(a, {
 				size: "xs",
@@ -483,7 +483,7 @@ function xe({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 		]
 	});
 }
-function Se({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: u, ariaLabel: f, className: p }) {
+function we({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: u, ariaLabel: f, className: p }) {
 	let m = e.icon, g = !!(e.href || e.onClick);
 	return /* @__PURE__ */ A(h, {
 		title: /* @__PURE__ */ k(a, {
@@ -504,12 +504,12 @@ function Se({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 			href: e.href,
 			onClick: e.onClick,
 			"aria-label": f,
-			className: `metric--action absolute inset-0 z-0 rounded-radius focus-visible:outline-none ${l.inset}`
+			className: `metric--action absolute inset-0 z-0 rounded-surface focus-visible:outline-none ${l.inset}`
 		}) : /* @__PURE__ */ k("button", {
 			type: "button",
 			onClick: e.onClick,
 			"aria-label": f,
-			className: `metric--action ${v.nativeButtonReset} absolute inset-0 z-0 cursor-pointer rounded-radius focus-visible:outline-none ${l.inset}`
+			className: `metric--action ${v.nativeButtonReset} absolute inset-0 z-0 cursor-pointer rounded-surface focus-visible:outline-none ${l.inset}`
 		})), /* @__PURE__ */ A(d, {
 			gap: "normal",
 			children: [
@@ -520,10 +520,10 @@ function Se({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 					gap: "sm",
 					children: [/* @__PURE__ */ k(s, {
 						tag: i === "sm" ? "h5" : i === "lg" ? "h3" : "h4",
-						size: Y[i],
-						className: r("max-w-full break-words tabular-nums text-inherit", ye[i]),
+						size: J[i],
+						className: r("max-w-full break-words tabular-nums text-inherit", be[i]),
 						children: t
-					}), !!c && !!e.change && /* @__PURE__ */ k(V, {
+					}), !!c && !!e.change && /* @__PURE__ */ k(B, {
 						change: e.change,
 						trend: e.trend,
 						size: i,
@@ -535,7 +535,7 @@ function Se({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 					type: "secondary",
 					children: e.subtitle
 				}),
-				!!o && !!e.sparkline?.length && /* @__PURE__ */ k(W, {
+				!!o && !!e.sparkline?.length && /* @__PURE__ */ k(U, {
 					data: e.sparkline,
 					trend: n,
 					className: i === "lg" ? "h-control-lg" : "h-control"
@@ -549,13 +549,13 @@ function Se({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 		})]
 	});
 }
-function Ce({ data: e, formattedValue: t, size: n, showChange: i, showIcon: o, ariaLabel: s, className: c }) {
+function Te({ data: e, formattedValue: t, size: n, showChange: i, showIcon: o, ariaLabel: s, className: c }) {
 	let l = e.icon;
 	return /* @__PURE__ */ A("div", {
 		className: r("flex items-center gap-space-lg", c),
 		"aria-label": s,
 		children: [
-			!!o && !!l && /* @__PURE__ */ k(w, {
+			!!o && !!l && /* @__PURE__ */ k(T, {
 				icon: l,
 				tone: "secondary",
 				shape: "square",
@@ -576,7 +576,7 @@ function Ce({ data: e, formattedValue: t, size: n, showChange: i, showIcon: o, a
 					children: t
 				})]
 			}),
-			!!i && !!e.change && /* @__PURE__ */ k(V, {
+			!!i && !!e.change && /* @__PURE__ */ k(B, {
 				change: e.change,
 				trend: e.trend,
 				size: n,
@@ -586,7 +586,7 @@ function Ce({ data: e, formattedValue: t, size: n, showChange: i, showIcon: o, a
 		]
 	});
 }
-function we({ data: e, formattedValue: t, size: n, showChange: i, ariaLabel: o, className: s }) {
+function Ee({ data: e, formattedValue: t, size: n, showChange: i, ariaLabel: o, className: s }) {
 	return /* @__PURE__ */ A("span", {
 		className: r("inline-flex items-baseline gap-space-md", s),
 		"aria-label": o,
@@ -604,7 +604,7 @@ function we({ data: e, formattedValue: t, size: n, showChange: i, ariaLabel: o,
 				className: "tabular-nums",
 				children: t
 			}),
-			!!i && !!e.change && /* @__PURE__ */ k(V, {
+			!!i && !!e.change && /* @__PURE__ */ k(B, {
 				change: e.change,
 				trend: e.trend,
 				size: "sm",
@@ -613,8 +613,8 @@ function we({ data: e, formattedValue: t, size: n, showChange: i, ariaLabel: o,
 		]
 	});
 }
-function Te({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: l, colorScheme: u, ariaLabel: f, className: p }) {
-	let m = e.icon, g = J[u];
+function De({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: l, colorScheme: u, ariaLabel: f, className: p }) {
+	let m = e.icon, g = q[u];
 	return /* @__PURE__ */ k(h, {
 		surface: "card",
 		className: r(g.border, g.bg, p),
@@ -638,7 +638,7 @@ function Te({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 							weight: "medium",
 							children: e.label
 						})]
-					}), !!c && !!e.change && /* @__PURE__ */ k(V, {
+					}), !!c && !!e.change && /* @__PURE__ */ k(B, {
 						change: e.change,
 						trend: e.trend,
 						size: i,
@@ -647,7 +647,7 @@ function Te({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 				}),
 				/* @__PURE__ */ k(s, {
 					tag: i === "lg" ? "h3" : "h4",
-					size: Y[i],
+					size: J[i],
 					className: "tabular-nums text-inherit",
 					children: t
 				}),
@@ -656,10 +656,10 @@ function Te({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 					type: "secondary",
 					children: e.subtitle
 				}),
-				!!o && !!e.sparkline?.length && /* @__PURE__ */ k(W, {
+				!!o && !!e.sparkline?.length && /* @__PURE__ */ k(U, {
 					data: e.sparkline,
 					trend: n,
-					className: X[i]
+					className: xe[i]
 				}),
 				!!e.footer && /* @__PURE__ */ k(a, {
 					size: "xs",
@@ -670,7 +670,7 @@ function Te({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, s
 		})
 	});
 }
-function Ee({ data: e, formattedValue: t, trend: n, size: i, showSparkline: c, showChange: l, showIcon: u, ariaLabel: f, className: p }) {
+function Oe({ data: e, formattedValue: t, trend: n, size: i, showSparkline: c, showChange: l, showIcon: u, ariaLabel: f, className: p }) {
 	let m = e.icon;
 	return /* @__PURE__ */ A(h, {
 		surface: "card",
@@ -689,7 +689,7 @@ function Ee({ data: e, formattedValue: t, trend: n, size: i, showSparkline: c, s
 					children: [/* @__PURE__ */ k(o, {
 						className: "text-inherit",
 						children: e.label
-					}), !!u && !!m && /* @__PURE__ */ k(w, {
+					}), !!u && !!m && /* @__PURE__ */ k(T, {
 						tone: "secondary",
 						shape: "square",
 						size: "sm",
@@ -703,10 +703,10 @@ function Ee({ data: e, formattedValue: t, trend: n, size: i, showSparkline: c, s
 					className: "flex items-baseline gap-space-md",
 					children: [/* @__PURE__ */ k(s, {
 						tag: "h3",
-						size: Y[i],
+						size: J[i],
 						className: "tabular-nums text-inherit",
 						children: t
-					}), !!l && !!e.change && /* @__PURE__ */ k(V, {
+					}), !!l && !!e.change && /* @__PURE__ */ k(B, {
 						change: e.change,
 						trend: e.trend,
 						size: i,
@@ -719,15 +719,15 @@ function Ee({ data: e, formattedValue: t, trend: n, size: i, showSparkline: c, s
 					children: e.subtitle
 				})
 			]
-		}), !!c && !!e.sparkline?.length && /* @__PURE__ */ k(W, {
+		}), !!c && !!e.sparkline?.length && /* @__PURE__ */ k(U, {
 			data: e.sparkline,
 			trend: n,
 			className: "h-control-lg w-full"
 		})]
 	});
 }
-function De({ data: e, formattedValue: t, size: n, showChange: i, colorScheme: o, ariaLabel: c, className: l, progress: u = 0 }) {
-	let f = J[o === "default" ? "primary" : o], p = Math.round(Math.min(Math.max(u, 0), 100) / 100 * be);
+function ke({ data: e, formattedValue: t, size: n, showChange: i, colorScheme: o, ariaLabel: c, className: l, progress: u = 0 }) {
+	let f = q[o === "default" ? "primary" : o], p = Math.round(Math.min(Math.max(u, 0), 100) / 100 * Se);
 	return /* @__PURE__ */ k(h, {
 		surface: "card",
 		className: l,
@@ -753,7 +753,7 @@ function De({ data: e, formattedValue: t, size: n, showChange: i, colorScheme: o
 						className: "flex flex-wrap items-baseline gap-x-space-md",
 						children: [/* @__PURE__ */ k(s, {
 							tag: "h3",
-							size: Y[n],
+							size: J[n],
 							className: "whitespace-nowrap tabular-nums text-inherit",
 							children: t
 						}), !!e.subtitle && /* @__PURE__ */ k(a, {
@@ -771,11 +771,11 @@ function De({ data: e, formattedValue: t, size: n, showChange: i, colorScheme: o
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
 					"aria-valuetext": `${u}%`,
-					children: Array.from({ length: be }, (e, t) => /* @__PURE__ */ k("div", { className: r("h-6 w-1.5 rounded-radius-sm transition-colors", t < p ? f.bar : "bg-muted") }, `seg-${t}`))
+					children: Array.from({ length: Se }, (e, t) => /* @__PURE__ */ k("div", { className: r("h-6 w-1.5 rounded-radius-sm transition-colors", t < p ? f.bar : "bg-muted") }, `seg-${t}`))
 				}),
 				(!!(i && e.change) || !!e.footer) && /* @__PURE__ */ A(d, {
 					gap: "md",
-					children: [!!i && !!e.change && /* @__PURE__ */ k("div", { children: /* @__PURE__ */ k(V, {
+					children: [!!i && !!e.change && /* @__PURE__ */ k("div", { children: /* @__PURE__ */ k(B, {
 						change: e.change,
 						trend: e.trend,
 						size: n,
@@ -798,12 +798,12 @@ function De({ data: e, formattedValue: t, size: n, showChange: i, colorScheme: o
 }
 //#endregion
 //#region src/components/blocks/analytics/metric-bar/metric-bar.tsx
-function Oe({ metrics: e, period: t, onPeriodChange: n, variant: o = "default", size: s = "sm", showSparklines: c = !0, showChanges: l = !0, footerText: u, className: d }) {
+function Ae({ metrics: e, period: t, onPeriodChange: n, variant: o = "default", size: s = "sm", showSparklines: c = !0, showChanges: l = !0, footerText: u, className: d }) {
 	let f = /* @__PURE__ */ k("div", {
 		className: "grid min-w-0 flex-1 grid-cols-1 divide-y divide-border @xl/metric-bar:flex @xl/metric-bar:items-stretch @xl/metric-bar:divide-x @xl/metric-bar:divide-y-0",
 		children: e.map((e) => /* @__PURE__ */ k("div", {
 			className: "flex min-w-0 flex-col px-surface py-row-y @xl/metric-bar:min-w-36 @xl/metric-bar:flex-1",
-			children: /* @__PURE__ */ k(Z, {
+			children: /* @__PURE__ */ k(Y, {
 				data: e,
 				variant: "default",
 				size: s,
@@ -831,15 +831,15 @@ function Oe({ metrics: e, period: t, onPeriodChange: n, variant: o = "default",
 		})
 	});
 	return o === "gradient" ? /* @__PURE__ */ A("div", {
-		className: r("metric-bar--component box-border @container/metric-bar", "w-full", "rounded-radius bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-px", d),
+		className: r("metric-bar--component box-border @container/metric-bar", "w-full", "rounded-surface bg-gradient-to-r from-chart-3/8 via-chart-2/5 to-chart-1/8 p-px", d),
 		children: [/* @__PURE__ */ A("div", {
-			className: "flex min-w-0 flex-col overflow-hidden rounded-radius bg-card text-card-foreground @xl/metric-bar:flex-row",
-			children: [p && /* @__PURE__ */ A(O, { children: [p, /* @__PURE__ */ k("div", {
+			className: "flex min-w-0 flex-col overflow-hidden rounded-surface bg-card text-card-foreground @xl/metric-bar:flex-row",
+			children: [p && /* @__PURE__ */ A(ae, { children: [p, /* @__PURE__ */ k("div", {
 				className: "hidden w-px bg-border @xl/metric-bar:block",
 				"aria-hidden": "true"
 			})] }), f]
 		}), !!u && /* @__PURE__ */ k("div", {
-			className: "rounded-b-radius border-t border-border/60 bg-card text-card-foreground px-surface py-row-y",
+			className: "rounded-b-surface border-t border-border/60 bg-card text-card-foreground px-surface py-row-y",
 			children: /* @__PURE__ */ k(a, {
 				size: "xs",
 				type: "discrete",
@@ -847,10 +847,10 @@ function Oe({ metrics: e, period: t, onPeriodChange: n, variant: o = "default",
 			})
 		})]
 	}) : /* @__PURE__ */ A("div", {
-		className: r("metric-bar--component box-border @container/metric-bar flex w-full flex-col overflow-hidden rounded-radius border border-border bg-card text-card-foreground shadow-sm", d),
+		className: r("metric-bar--component box-border @container/metric-bar flex w-full flex-col overflow-hidden rounded-surface border border-border bg-card text-card-foreground shadow-sm", d),
 		children: [/* @__PURE__ */ A("div", {
 			className: "flex min-w-0 flex-col overflow-hidden @xl/metric-bar:flex-row",
-			children: [p && /* @__PURE__ */ A(O, { children: [p, /* @__PURE__ */ k("div", {
+			children: [p && /* @__PURE__ */ A(ae, { children: [p, /* @__PURE__ */ k("div", {
 				className: "hidden w-px bg-border @xl/metric-bar:block",
 				"aria-hidden": "true"
 			})] }), f]
@@ -864,28 +864,28 @@ function Oe({ metrics: e, period: t, onPeriodChange: n, variant: o = "default",
 		})]
 	});
 }
-Oe.displayName = "MetricBar";
+Ae.displayName = "MetricBar";
 //#endregion
 //#region src/components/blocks/analytics/metric-grid/metric-grid.tsx
-var ke = {
+var je = {
 	1: "grid-cols-1",
 	2: "grid-cols-1 @md/metric-grid:grid-cols-2",
-	3: "grid-cols-1 @md/metric-grid:grid-cols-2 @3xl/metric-grid:grid-cols-3",
+	3: "grid-cols-1 @2xl/metric-grid:grid-cols-3",
 	4: "grid-cols-1 @md/metric-grid:grid-cols-2 @5xl/metric-grid:grid-cols-4",
 	6: "grid-cols-1 @md/metric-grid:grid-cols-2 @3xl/metric-grid:grid-cols-3 @7xl/metric-grid:grid-cols-6"
 };
-function Ae(e) {
-	return ke[e <= 1 ? 1 : e === 2 ? 2 : e === 3 ? 3 : e <= 4 || e > 6 ? 4 : 6];
+function Me(e) {
+	return je[e <= 1 ? 1 : e === 2 ? 2 : e === 3 ? 3 : e <= 4 || e > 6 ? 4 : 6];
 }
-function je({ metrics: e, variant: t = "card", size: n = "md", colorScheme: i = "default", columns: a = "auto", gap: o = "xl", showSparklines: s = !0, showChanges: c = !0, showIcons: l = !0, loading: d = !1, className: f }) {
-	let p = a === "auto" ? Ae(e.length) : ke[a];
+function Ne({ metrics: e, variant: t = "card", size: n = "md", colorScheme: i = "default", columns: a = "auto", gap: o = "xl", showSparklines: s = !0, showChanges: c = !0, showIcons: l = !0, loading: d = !1, className: f }) {
+	let p = a === "auto" ? Me(e.length) : je[a];
 	return /* @__PURE__ */ k("div", {
 		className: r("metric-grid--component @container/metric-grid", f),
 		children: /* @__PURE__ */ k(u, {
 			columns: 1,
 			gap: o,
 			className: r("metric-grid--grid", p),
-			children: e.map((e) => /* @__PURE__ */ k(Z, {
+			children: e.map((e) => /* @__PURE__ */ k(Y, {
 				data: e,
 				variant: t,
 				size: n,
@@ -898,170 +898,177 @@ function je({ metrics: e, variant: t = "card", size: n = "md", colorScheme: i =
 		})
 	});
 }
-je.displayName = "MetricGrid";
+Ne.displayName = "MetricGrid";
 //#endregion
 //#region src/components/blocks/analytics/metric-comparison/metric-comparison.tsx
-var Me = {
+var X = {
 	title: "Comparison",
 	currentLabel: "This period",
 	previousLabel: "Previous period",
-	suffix: "vs previous"
+	suffix: "vs previous",
+	pointsUnit: "pp"
 };
-function Ne(e) {
+function Pe(e) {
 	if (e == null) return null;
 	if (typeof e == "number") return e;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : null;
 }
-function Pe({ current: e, previous: t, title: i, currentPeriod: s, previousPeriod: c, className: l, strings: u }) {
-	let f = n(Me, u), p = q(), m = Ne(e.value), h = Ne(t.value), g = m !== null && h !== null, _ = g ? m - h : 0, v = g && h !== 0 ? Math.round(_ / h * 100) : 0, y = _ > 0, b = _ === 0, x = b ? le : y ? M : j, C = b ? "secondary" : y ? "success" : "destructive";
+function Fe({ current: e, previous: t, title: i, currentPeriod: s, previousPeriod: c, className: l, strings: u }) {
+	let f = n(X, u), p = K(), m = Pe(e.value), h = Pe(t.value), g = m !== null && h !== null, _ = g ? m - h : 0, v = g && h !== 0 ? Math.round(_ / h * 100) : 0, y = _ > 0, x = _ === 0, C = x ? le : y ? M : j, w = x ? "neutral" : e.trend ?? (y ? "positive" : "negative"), T = w === "positive" ? "success" : w === "negative" ? "destructive" : "secondary";
 	return /* @__PURE__ */ A(d, {
 		"data-component": "metric-comparison",
 		"data-slot": "metric-comparison",
 		gap: "md",
 		className: r("metric-comparison--component @container/metric-comparison", l),
 		"aria-label": i ?? f.title,
-		children: [
-			!!(s || c) && /* @__PURE__ */ A(d, {
-				direction: "horizontal",
-				wrap: !0,
-				align: "center",
-				gap: "sm",
-				children: [!!s && /* @__PURE__ */ k(T, {
-					tone: "secondary",
-					inline: !0,
-					children: s
-				}), !!c && /* @__PURE__ */ k(T, {
-					tone: "secondary",
-					inline: !0,
-					children: c
-				})]
-			}),
-			/* @__PURE__ */ A("div", {
-				className: "grid items-center gap-space-md grid-cols-1 @md/metric-comparison:grid-cols-[1fr_auto_1fr]",
-				children: [
-					/* @__PURE__ */ A(d, {
-						gap: "dense",
-						className: "metric-comparison--current min-w-0",
+		children: [/* @__PURE__ */ A("div", {
+			className: "grid items-center gap-space-md grid-cols-1 @md/metric-comparison:grid-cols-[1fr_auto_1fr]",
+			children: [
+				/* @__PURE__ */ A(d, {
+					gap: "dense",
+					className: "metric-comparison--current min-w-0",
+					children: [/* @__PURE__ */ A(d, {
+						direction: "horizontal",
+						wrap: !0,
+						align: "center",
+						gap: "sm",
 						children: [/* @__PURE__ */ k(o, {
 							className: "text-inherit",
 							children: f.currentLabel
-						}), /* @__PURE__ */ k(S, {
-							type: "inherit",
-							size: "base",
-							weight: "semibold",
-							className: "tabular-nums",
-							children: L(e, p)
+						}), !!s && /* @__PURE__ */ k(E, {
+							tone: "secondary",
+							inline: !0,
+							className: "metric-comparison--period",
+							children: s
 						})]
-					}),
-					/* @__PURE__ */ A("div", {
-						className: "flex items-center text-muted-foreground @md/metric-comparison:justify-center",
-						children: [/* @__PURE__ */ k(oe, {
-							className: "hidden size-icon @md/metric-comparison:block",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ k(j, {
-							className: "size-icon @md/metric-comparison:hidden",
-							"aria-hidden": "true"
-						})]
-					}),
-					/* @__PURE__ */ A(d, {
-						gap: "dense",
-						className: "metric-comparison--previous min-w-0",
+					}), /* @__PURE__ */ k(S, {
+						type: "inherit",
+						size: "base",
+						weight: "semibold",
+						className: "tabular-nums",
+						children: L(e, p)
+					})]
+				}),
+				/* @__PURE__ */ A("div", {
+					className: "flex items-center text-muted-foreground @md/metric-comparison:justify-center",
+					children: [/* @__PURE__ */ k(oe, {
+						className: "hidden size-icon @md/metric-comparison:block",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ k(j, {
+						className: "size-icon @md/metric-comparison:hidden",
+						"aria-hidden": "true"
+					})]
+				}),
+				/* @__PURE__ */ A(d, {
+					gap: "dense",
+					className: "metric-comparison--previous min-w-0",
+					children: [/* @__PURE__ */ A(d, {
+						direction: "horizontal",
+						wrap: !0,
+						align: "center",
+						gap: "sm",
 						children: [/* @__PURE__ */ k(o, {
 							className: "text-inherit",
 							children: f.previousLabel
-						}), /* @__PURE__ */ k(S, {
-							size: "base",
-							weight: "semibold",
-							type: "secondary",
-							className: "tabular-nums",
-							children: L(t, p)
+						}), !!c && /* @__PURE__ */ k(E, {
+							tone: "secondary",
+							inline: !0,
+							className: "metric-comparison--period",
+							children: c
 						})]
-					})
-				]
-			}),
-			!!g && /* @__PURE__ */ A(d, {
-				direction: "horizontal",
-				wrap: !0,
-				align: "center",
-				gap: "md",
-				className: "metric-comparison--delta",
-				children: [/* @__PURE__ */ A(T, {
-					tone: C,
-					size: "sm",
-					inline: !0,
-					children: [/* @__PURE__ */ k(x, {
-						className: "size-icon-sm",
-						strokeWidth: 2.5,
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ A(S, {
-						size: "inherit",
+					}), /* @__PURE__ */ k(S, {
+						size: "base",
 						weight: "semibold",
-						className: "tabular-nums text-inherit",
-						children: [y ? "+" : b ? "" : "−", ((t) => {
-							let n = Math.abs(t);
-							return L({
-								...e,
-								value: n
-							}, p);
-						})(_)]
+						type: "secondary",
+						className: "tabular-nums",
+						children: L(t, p)
 					})]
-				}), /* @__PURE__ */ A(a, {
-					size: "xs",
-					type: "secondary",
-					className: "tabular-nums",
-					children: [
-						y ? "+" : b ? "" : "−",
-						Math.abs(v),
-						"% ",
-						f.suffix
-					]
+				})
+			]
+		}), !!g && /* @__PURE__ */ A(d, {
+			direction: "horizontal",
+			wrap: !0,
+			align: "center",
+			gap: "md",
+			className: "metric-comparison--delta",
+			children: [/* @__PURE__ */ A(E, {
+				tone: T,
+				size: "sm",
+				inline: !0,
+				children: [/* @__PURE__ */ k(C, {
+					className: "size-icon-sm",
+					strokeWidth: 2.5,
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ A(S, {
+					size: "inherit",
+					weight: "semibold",
+					className: "tabular-nums text-inherit",
+					children: [y ? "+" : x ? "" : "−", ((t) => {
+						let n = Math.abs(t);
+						return e.valueType === "percentage" ? `${b(n * 100, {
+							locale: p.locale,
+							maximumFractionDigits: 1
+						})} ${f.pointsUnit ?? X.pointsUnit}` : L({
+							...e,
+							value: n
+						}, p);
+					})(_)]
 				})]
-			})
-		]
+			}), /* @__PURE__ */ A(a, {
+				size: "xs",
+				type: "secondary",
+				className: "tabular-nums",
+				children: [
+					y ? "+" : x ? "" : "−",
+					Math.abs(v),
+					"% ",
+					f.suffix
+				]
+			})]
+		})]
 	});
 }
-Pe.displayName = "MetricComparison";
+Fe.displayName = "MetricComparison";
 //#endregion
 //#region src/components/blocks/analytics/metric-micro-grid/metric-micro-grid.tsx
-var Fe = [
+var Ie = [
 	"bars",
 	"line",
 	"dots",
 	"progress",
 	"area",
 	"pie"
-], Ie = {
+], Le = {
 	bars: "var(--chart-1)",
 	line: "var(--chart-1)",
 	dots: "var(--chart-1)",
 	progress: "var(--chart-1)",
 	area: "var(--chart-1)",
 	pie: "var(--chart-1)"
-}, Le = [
+}, Re = [
 	"var(--chart-1)",
 	"var(--chart-2)",
 	"var(--chart-3)"
-];
-function Re({ data: e, color: t }) {
+], Z = "h-control-sm";
+function ze({ data: e, color: t }) {
 	let n = Math.max(...e, 1);
 	return /* @__PURE__ */ k("div", {
-		className: r("metric-micro-grid--component", "flex h-5 items-end gap-space-2xs"),
+		className: r("flex items-end gap-space-2xs", Z),
 		children: e.slice(0, 6).map((e, r) => /* @__PURE__ */ k("div", {
 			className: "flex-1 rounded-t-radius-sm",
 			style: {
 				height: `${e / n * 100}%`,
-				backgroundColor: t,
-				opacity: .8
+				backgroundColor: t
 			}
 		}, `bar-${r}`))
 	});
 }
-function ze({ data: e, color: t }) {
-	let n = Math.max(...e, 1), r = Math.min(...e), i = n - r || 1, a = e.slice(0, 6);
+function Be({ data: e, color: t }) {
+	let n = Math.max(...e, 1), i = Math.min(...e), a = n - i || 1, o = e.slice(0, 6);
 	return /* @__PURE__ */ k("svg", {
 		viewBox: "0 0 60 16",
-		className: "h-5 w-full",
+		className: r("w-full", Z),
 		preserveAspectRatio: "none",
 		children: /* @__PURE__ */ k("polyline", {
 			fill: "none",
@@ -1069,25 +1076,28 @@ function ze({ data: e, color: t }) {
 			strokeWidth: "1.5",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
-			points: a.map((e, t) => `${t / Math.max(a.length - 1, 1) * 60},${16 - (e - r) / i * 14}`).join(" ")
+			points: o.map((e, t) => `${t / Math.max(o.length - 1, 1) * 60},${16 - (e - i) / a * 14}`).join(" ")
 		})
 	});
 }
-function Be({ data: e, color: t }) {
-	let n = Math.max(...e, 1);
+function Ve({ data: e, color: t }) {
+	let n = e.slice(0, 5), i = Math.max(...n), a = Math.min(...n), o = i - a || 1;
 	return /* @__PURE__ */ k("div", {
-		className: "flex h-5 items-end justify-around",
+		className: r("flex justify-around", Z),
 		"data-intrinsic-geometry": !0,
-		children: e.slice(0, 5).map((e, r) => /* @__PURE__ */ k("div", {
-			className: "h-1.5 w-1.5 rounded-full",
-			style: {
-				marginBottom: `${e / n * 12}px`,
-				backgroundColor: t
-			}
-		}, `dot-${r}`))
+		children: n.map((e, n) => /* @__PURE__ */ k("div", {
+			className: "relative h-full w-1.5",
+			children: /* @__PURE__ */ k("div", {
+				className: "absolute inset-x-0 h-1.5 rounded-full",
+				style: {
+					bottom: `calc(${(e - a) / o} * (100% - 0.375rem))`,
+					backgroundColor: t
+				}
+			})
+		}, `dot-${n}`))
 	});
 }
-function Ve({ data: e, label: t }) {
+function He({ data: e, label: t }) {
 	return /* @__PURE__ */ k(g, {
 		value: e[0] ?? 0,
 		max: e[1] ?? 100,
@@ -1096,13 +1106,13 @@ function Ve({ data: e, label: t }) {
 		indicatorProps: { className: "bg-chart-1" }
 	});
 }
-function He({ data: e, color: t }) {
-	let n = E(), r = U(), i = `micro-area-${n.replaceAll(":", "")}`, a = e.map((e, t) => ({
+function Ue({ data: e, color: t }) {
+	let n = D(), i = H(), a = `micro-area-${n.replaceAll(":", "")}`, o = Math.min(...e), s = e.map((e, t) => ({
 		i: t,
-		v: e
+		v: e - o
 	}));
 	return /* @__PURE__ */ k("div", {
-		className: "h-5 w-full",
+		className: r("w-full", Z),
 		children: /* @__PURE__ */ k(F, {
 			width: "100%",
 			height: "100%",
@@ -1111,7 +1121,7 @@ function He({ data: e, color: t }) {
 				height: 1
 			},
 			children: /* @__PURE__ */ A(P, {
-				data: a,
+				data: s,
 				margin: {
 					top: 0,
 					right: 0,
@@ -1119,7 +1129,7 @@ function He({ data: e, color: t }) {
 					left: 0
 				},
 				children: [/* @__PURE__ */ k("defs", { children: /* @__PURE__ */ A("linearGradient", {
-					id: i,
+					id: a,
 					x1: "0",
 					y1: "0",
 					x2: "0",
@@ -1138,58 +1148,67 @@ function He({ data: e, color: t }) {
 					dataKey: "v",
 					stroke: t,
 					strokeWidth: 1.25,
-					fill: `url(#${i})`,
-					isAnimationActive: !r
+					fill: `url(#${a})`,
+					isAnimationActive: !i
 				})]
 			})
 		})
 	});
 }
-function Ue({ data: e }) {
+function We({ data: e }) {
 	let t = e.reduce((e, t) => e + t, 0) || 1, n = 0;
 	return /* @__PURE__ */ k("svg", {
 		viewBox: "0 0 24 24",
-		className: "h-6 w-6",
+		className: "size-control-sm",
 		children: e.slice(0, 3).map((e, r) => {
 			let i = e / t * 360, a = n;
 			n += i;
 			let o = (a - 90) * Math.PI / 180, s = (a + i - 90) * Math.PI / 180, c = +(i > 180), l = 12 + 10 * Math.cos(o), u = 12 + 10 * Math.sin(o), d = 12 + 10 * Math.cos(s), f = 12 + 10 * Math.sin(s);
 			return /* @__PURE__ */ k("path", {
 				d: `M12,12 L${l},${u} A10,10 0 ${c},1 ${d},${f} Z`,
-				fill: Le[r % Le.length]
+				fill: Re[r % Re.length]
 			}, `slice-${r}`);
 		})
 	});
 }
-function We({ kind: e, data: t, label: n }) {
-	let r = Ie[e];
-	return e === "bars" ? /* @__PURE__ */ k(Re, {
+function Ge({ kind: e, data: t, label: n }) {
+	let r = Le[e];
+	return e === "bars" ? /* @__PURE__ */ k(ze, {
 		data: t,
 		color: r
-	}) : e === "line" ? /* @__PURE__ */ k(ze, {
+	}) : e === "line" ? /* @__PURE__ */ k(Be, {
 		data: t,
 		color: r
-	}) : e === "dots" ? /* @__PURE__ */ k(Be, {
+	}) : e === "dots" ? /* @__PURE__ */ k(Ve, {
 		data: t,
 		color: r
-	}) : e === "progress" ? /* @__PURE__ */ k(Ve, {
+	}) : e === "progress" ? /* @__PURE__ */ k(He, {
 		data: t,
 		label: n
-	}) : e === "area" ? /* @__PURE__ */ k(He, {
+	}) : e === "area" ? /* @__PURE__ */ k(Ue, {
 		data: t,
 		color: r
-	}) : /* @__PURE__ */ k(Ue, { data: t });
+	}) : /* @__PURE__ */ k(We, { data: t });
 }
-function Ge({ title: e = "Overview", cells: t, className: n }) {
+var Ke = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-1 @md/metric-micro-grid:grid-cols-3",
+	4: "grid-cols-2 @3xl/metric-micro-grid:grid-cols-4",
+	5: "grid-cols-2 @xl/metric-micro-grid:grid-cols-3 @5xl/metric-micro-grid:grid-cols-5",
+	6: "grid-cols-2 @xl/metric-micro-grid:grid-cols-3 @5xl/metric-micro-grid:grid-cols-6"
+};
+function qe({ title: e = "Overview", cells: t, className: n }) {
+	let i = t.slice(0, 6);
 	return /* @__PURE__ */ k("div", {
 		"data-component": "metric-micro-grid",
 		"data-slot": "metric-micro-grid",
-		className: r("metric-micro-grid--component min-w-0", n),
+		className: r("metric-micro-grid--component @container/metric-micro-grid min-w-0 overflow-hidden", n),
 		"aria-label": e,
 		children: /* @__PURE__ */ k("div", {
-			className: "grid grid-cols-3 grid-rows-2",
-			children: t.slice(0, 6).map((e, t) => /* @__PURE__ */ k("div", {
-				className: r("p-surface-xs", t % 3 != 2 && "border-r border-border/60", t < 3 && "border-b border-border/60"),
+			className: r("-me-px -mb-px grid", Ke[Math.max(i.length, 1)]),
+			children: i.map((e, t) => /* @__PURE__ */ k("div", {
+				className: "min-w-0 border-e border-b border-border/60 p-surface-xs",
 				children: /* @__PURE__ */ A(d, {
 					gap: "sm",
 					children: [
@@ -1205,8 +1224,8 @@ function Ge({ title: e = "Overview", cells: t, className: n }) {
 						}),
 						/* @__PURE__ */ k("div", {
 							className: "mt-auto",
-							children: /* @__PURE__ */ k(We, {
-								kind: e.chart ?? Fe[t],
+							children: /* @__PURE__ */ k(Ge, {
+								kind: e.chart ?? Ie[t],
 								data: e.data,
 								label: e.label
 							})
@@ -1217,19 +1236,19 @@ function Ge({ title: e = "Overview", cells: t, className: n }) {
 		})
 	});
 }
-Ge.displayName = "MetricMicroGrid";
+qe.displayName = "MetricMicroGrid";
 //#endregion
 //#region src/components/blocks/analytics/metric-gradient/metric-gradient.tsx
-var Ke = {
-	green: "bg-gradient-to-br from-success via-primary to-success",
-	purple: "bg-gradient-to-br from-primary via-info to-primary",
-	warm: "bg-gradient-to-br from-warning via-destructive to-warning",
-	ocean: "bg-gradient-to-br from-info via-success to-info"
-}, Q = "var(--inverse-foreground)", qe = "var(--inverse-muted)";
-function Je({ title: e, value: t, change: n, data: i, theme: c = "green", subtitle: l, className: u }) {
-	let f = E(), p = U(), m = `metric-grad-${f.replaceAll(":", "")}`;
+var Je = {
+	green: "bg-gradient-to-br from-chart-1 via-chart-2 to-chart-1",
+	purple: "bg-gradient-to-br from-chart-3 via-chart-4 to-chart-3",
+	warm: "bg-gradient-to-br from-chart-5 via-chart-4 to-chart-5",
+	ocean: "bg-gradient-to-br from-chart-2 via-chart-1 to-chart-2"
+}, Q = "var(--inverse-foreground)", Ye = "var(--inverse-muted)";
+function Xe({ title: e, value: t, change: n, data: i, theme: c = "green", subtitle: l, className: u }) {
+	let f = D(), p = H(), m = `metric-grad-${f.replaceAll(":", "")}`;
 	return /* @__PURE__ */ k("div", {
-		className: r("metric-gradient--component", "relative overflow-hidden rounded-radius p-surface text-inverse-foreground shadow-sm ring-1 ring-inverse-border", Ke[c], u),
+		className: r("metric-gradient--component", "relative overflow-hidden rounded-surface p-surface text-inverse-foreground shadow-sm ring-1 ring-inverse-border", Je[c], u),
 		children: /* @__PURE__ */ A(d, {
 			gap: "md",
 			children: [/* @__PURE__ */ A(d, {
@@ -1237,7 +1256,7 @@ function Je({ title: e, value: t, change: n, data: i, theme: c = "green", subtit
 				align: "start",
 				justify: "between",
 				wrap: !0,
-				className: "relative rounded-radius bg-inverse-background p-surface",
+				className: "relative rounded-surface bg-inverse-background p-surface",
 				children: [/* @__PURE__ */ A(d, {
 					gap: "xs",
 					className: "min-w-0",
@@ -1257,7 +1276,7 @@ function Je({ title: e, value: t, change: n, data: i, theme: c = "green", subtit
 							children: l
 						})
 					]
-				}), !!n && /* @__PURE__ */ k(V, {
+				}), !!n && /* @__PURE__ */ k(B, {
 					change: n,
 					trend: n.direction === "up" ? "positive" : n.direction === "down" ? "negative" : "neutral",
 					size: "sm",
@@ -1299,7 +1318,7 @@ function Je({ title: e, value: t, change: n, data: i, theme: c = "green", subtit
 						}) }), /* @__PURE__ */ k(N, {
 							type: "monotone",
 							dataKey: "value",
-							stroke: qe,
+							stroke: Ye,
 							strokeWidth: 2,
 							fill: `url(#${m})`,
 							dot: !1,
@@ -1307,7 +1326,7 @@ function Je({ title: e, value: t, change: n, data: i, theme: c = "green", subtit
 								r: 4,
 								strokeWidth: 2,
 								fill: Q,
-								stroke: qe
+								stroke: Ye
 							},
 							isAnimationActive: !p,
 							animationDuration: 800
@@ -1318,21 +1337,21 @@ function Je({ title: e, value: t, change: n, data: i, theme: c = "green", subtit
 		})
 	});
 }
-Je.displayName = "MetricGradient";
+Xe.displayName = "MetricGradient";
 //#endregion
 //#region src/components/blocks/analytics/activity-heatmap/activity-heatmap.tsx
-var Ye = {
+var Ze = {
 	0: p.activity[0],
 	1: p.activity[1],
 	2: p.activity[2],
 	3: p.activity[3],
 	4: p.activity[4]
-}, Xe = r("text--component fill-current", c({
+}, Qe = r("text--component fill-current", c({
 	size: "xs",
 	type: "secondary",
 	lineHeight: "none"
 }));
-function Ze(e, t) {
+function $e(e, t) {
 	if (e.length === 0) return {
 		weeks: [],
 		monthLabels: []
@@ -1368,8 +1387,8 @@ function Ze(e, t) {
 		monthLabels: u
 	};
 }
-function Qe({ title: e, description: t, data: i, className: o, strings: s }) {
-	let c = n(I, s), { weeks: l, monthLabels: u } = Ze(i, c.heatmapMonthNames);
+function et({ title: e, description: t, data: i, className: o, strings: s }) {
+	let c = n(I, s), { weeks: l, monthLabels: u } = $e(i, c.heatmapMonthNames);
 	return /* @__PURE__ */ A(d, {
 		gap: "md",
 		"data-component": "activity-heatmap",
@@ -1391,14 +1410,14 @@ function Qe({ title: e, description: t, data: i, className: o, strings: s }) {
 					role: "img",
 					"aria-label": e,
 					children: [/* @__PURE__ */ A("g", { children: [u.filter((e, t, n) => t === 0 || e.weekIndex - n[t - 1].weekIndex >= 3).map((e) => /* @__PURE__ */ k("text", {
-						className: Xe,
+						className: Qe,
 						"data-typography": "text",
 						x: 28 + e.weekIndex * 15,
 						y: 0,
 						dominantBaseline: "text-before-edge",
 						children: e.label
 					}, `${e.label}-${e.weekIndex}`)), c.heatmapDayLabels.map((e, t) => e ? /* @__PURE__ */ k("text", {
-						className: Xe,
+						className: Qe,
 						"data-typography": "text",
 						x: 24,
 						y: 28 + t * 15,
@@ -1411,7 +1430,7 @@ function Qe({ title: e, description: t, data: i, className: o, strings: s }) {
 						width: 12,
 						height: 12,
 						rx: 2.5,
-						className: e ? Ye[e.level] : "fill-transparent",
+						className: e ? Ze[e.level] : "fill-transparent",
 						children: e && /* @__PURE__ */ k("title", { children: `${e.date}: Level ${e.level}` })
 					}, `d-${t}-${n}`)) }, `w-${t}`))]
 				}), /* @__PURE__ */ A("div", {
@@ -1437,7 +1456,7 @@ function Qe({ title: e, description: t, data: i, className: o, strings: s }) {
 								width: 12,
 								height: 12,
 								rx: 2.5,
-								className: Ye[e]
+								className: Ze[e]
 							})
 						}, `legend-${e}`)),
 						/* @__PURE__ */ k(a, {
@@ -1451,11 +1470,11 @@ function Qe({ title: e, description: t, data: i, className: o, strings: s }) {
 		})]
 	});
 }
-Qe.displayName = "ActivityHeatmap";
+et.displayName = "ActivityHeatmap";
 //#endregion
 //#region src/components/blocks/analytics/chart-card/chart-card.tsx
-function $e({ title: e, description: t, headerEnd: n, titleSuffix: i, footer: a, config: o, children: s, initialDimension: c, surface: l, padding: u, className: d, contentClassName: f, chartClassName: p }) {
-	return /* @__PURE__ */ k(ne, {
+function tt({ title: e, description: t, headerEnd: n, titleSuffix: i, footer: a, config: o, children: s, initialDimension: c, surface: l, padding: u, className: d, contentClassName: f, chartClassName: p }) {
+	return /* @__PURE__ */ k(te, {
 		title: e,
 		description: t,
 		headerEnd: n,
@@ -1465,7 +1484,7 @@ function $e({ title: e, description: t, headerEnd: n, titleSuffix: i, footer: a,
 		padding: u,
 		className: r("chart-card--component", d),
 		contentClassName: r("chart-card--content", f),
-		children: /* @__PURE__ */ k(te, {
+		children: /* @__PURE__ */ k(ee, {
 			config: o,
 			initialDimension: c,
 			className: r("chart-card--chart min-h-[var(--chart-min-height)]", p),
@@ -1473,10 +1492,10 @@ function $e({ title: e, description: t, headerEnd: n, titleSuffix: i, footer: a,
 		})
 	});
 }
-$e.displayName = "ChartCard";
+tt.displayName = "ChartCard";
 //#endregion
 //#region src/components/blocks/analytics/time-ruler/types.ts
-var et = {
+var nt = {
 	legendNone: "None",
 	legendLow: "Low",
 	legendMedium: "Medium",
@@ -1488,7 +1507,7 @@ var et = {
 //#endregion
 //#region src/components/blocks/analytics/time-ruler/time-ruler.tsx
 function $({ hours: e, currentHour: t, className: i, strings: o }) {
-	let s = n(et, o), c = Math.max(...e, 1), l = e.indexOf(Math.max(...e));
+	let s = n(nt, o), c = Math.max(...e, 1), l = e.indexOf(Math.max(...e));
 	function u(e) {
 		if (e === 0) return p.density[0];
 		let t = e / c;
@@ -1577,6 +1596,6 @@ function $({ hours: e, currentHour: t, className: i, strings: o }) {
 }
 $.displayName = "TimeDistributionRuler";
 //#endregion
-export { Qe as ActivityHeatmap, $e as ChartCard, Z as Metric, Oe as MetricBar, Pe as MetricComparison, Je as MetricGradient, je as MetricGrid, Ge as MetricMicroGrid, K as MetricSkeleton, W as MetricSparkline, V as MetricTrendChip, $ as TimeDistributionRuler, ie as UsageCard, I as defaultAnalyticsStrings, Me as defaultMetricComparisonStrings, et as defaultTimeDistributionRulerStrings, re as defaultUsageCardStrings, L as formatMetricValue, R as resolveTrend };
+export { et as ActivityHeatmap, tt as ChartCard, Y as Metric, Ae as MetricBar, Fe as MetricComparison, Xe as MetricGradient, Ne as MetricGrid, qe as MetricMicroGrid, G as MetricSkeleton, U as MetricSparkline, B as MetricTrendChip, $ as TimeDistributionRuler, re as UsageCard, I as defaultAnalyticsStrings, X as defaultMetricComparisonStrings, nt as defaultTimeDistributionRulerStrings, ne as defaultUsageCardStrings, L as formatMetricValue, de as resolveTrend };
 
 //# sourceMappingURL=analytics.js.map