@plumile/ui 0.1.120 → 0.1.125

package/lib/esm/components/charts/MetricHistoryChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n  id: string;\n  label: string;\n  color: string;\n  unit?: string;\n  data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n  seriesId: string;\n  label: string;\n  value: number;\n  color: string;\n  unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n  series: readonly MetricHistoryChartSerie[];\n  ariaLabel: string;\n  formatValue?: (value: number, unit?: string) => string;\n  formatTimestamp?: (value: string) => string;\n  emptyMessage?: string;\n};\n\n/**\n * Formats metric values with an optional unit suffix.\n */\nfunction formatDefaultValue(value: number, unit?: string): string {\n  const formatted = new Intl.NumberFormat(undefined, {\n    maximumFractionDigits: 2,\n  }).format(value);\n\n  if (unit == null || unit.length === 0) {\n    return formatted;\n  }\n\n  return `${formatted} ${unit}`;\n}\n\n/**\n * Formats an ISO timestamp for tooltip display.\n */\nfunction formatDefaultTimestamp(value: string): string {\n  const parsed = new Date(value);\n  if (Number.isNaN(parsed.getTime())) {\n    return value;\n  }\n\n  return parsed.toLocaleString(undefined, {\n    month: 'short',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\n/**\n * Formats chart axis ticks as localized times.\n */\nfunction formatAxisTimestamp(value: Date): string {\n  return value.toLocaleTimeString(undefined, {\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\nexport const MetricHistoryChart = ({\n  ariaLabel,\n  emptyMessage = 'No data',\n  formatTimestamp = formatDefaultTimestamp,\n  formatValue = formatDefaultValue,\n  series,\n}: MetricHistoryChartProps): JSX.Element => {\n  const visibleSeries = series.filter((serie) => {\n    return serie.data.length > 0;\n  });\n\n  if (visibleSeries.length === 0) {\n    return <div className={styles.emptyState}>{emptyMessage}</div>;\n  }\n\n  const metadataById = Object.fromEntries(\n    visibleSeries.map((serie) => {\n      return [\n        serie.id,\n        {\n          color: serie.color,\n          label: serie.label,\n          unit: serie.unit,\n        },\n      ];\n    }),\n  );\n\n  const data = visibleSeries.map((serie) => {\n    return {\n      id: serie.id,\n      data: serie.data.map((point) => {\n        return {\n          x: new Date(point.x),\n          y: point.y,\n        };\n      }),\n    };\n  });\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 110,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: visibleSeries.map((serie) => {\n        return {\n          id: serie.id,\n          label: serie.label,\n          color: serie.color,\n        };\n      }),\n    },\n  ];\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n    const firstPoint = slice.points[0];\n    let timestampValue = String(slice.id);\n    if (firstPoint?.data.x instanceof Date) {\n      timestampValue = firstPoint.data.x.toISOString();\n    }\n\n    const points = [...slice.points]\n      .map((point): SlicePointPayload | null => {\n        let value = Number(point.data.y);\n        if (typeof point.data.y === 'number') {\n          value = point.data.y;\n        }\n\n        if (Number.isNaN(value)) {\n          return null;\n        }\n\n        const seriesId = String(point.seriesId);\n        const metadata = metadataById[seriesId];\n\n        return {\n          seriesId,\n          label: metadata?.label ?? seriesId,\n          value,\n          color: point.seriesColor,\n          unit: metadata?.unit,\n        };\n      })\n      .filter((point): point is SlicePointPayload => {\n        return point != null;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${point.seriesId}-${timestampValue}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{point.label}</span>\n              </span>\n              <strong>{formatValue(point.value, point.unit)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={data}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={(serie) => {\n          return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n        }}\n        xScale={{\n          type: 'time',\n          format: 'native',\n          precision: 'minute',\n          useUTC: false,\n        }}\n        xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          format: (value) => {\n            if (!(value instanceof Date)) {\n              return '';\n            }\n\n            return formatAxisTimestamp(value);\n          },\n          tickSize: 0,\n          tickPadding: 10,\n          tickValues: 'every 15 minutes',\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return new Intl.NumberFormat(undefined, {\n              notation: 'compact',\n              maximumFractionDigits: 1,\n            }).format(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default MetricHistoryChart;\n\nexport const __test = {\n  formatDefaultValue,\n  formatDefaultTimestamp,\n  formatAxisTimestamp,\n} as const;\n"],"mappings":"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"}
+{"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport {\n  formatAxisTimestamp,\n  formatDefaultTimestamp,\n  formatDefaultValue,\n} from '../../internal/charts/metricHistoryChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n  id: string;\n  label: string;\n  color: string;\n  unit?: string;\n  data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n  seriesId: string;\n  label: string;\n  value: number;\n  color: string;\n  unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n  series: readonly MetricHistoryChartSerie[];\n  ariaLabel: string;\n  formatValue?: (value: number, unit?: string) => string;\n  formatTimestamp?: (value: string) => string;\n  emptyMessage?: string;\n};\n\nexport const MetricHistoryChart = ({\n  ariaLabel,\n  emptyMessage = 'No data',\n  formatTimestamp = formatDefaultTimestamp,\n  formatValue = formatDefaultValue,\n  series,\n}: MetricHistoryChartProps): JSX.Element => {\n  const visibleSeries = series.filter((serie) => {\n    return serie.data.length > 0;\n  });\n\n  if (visibleSeries.length === 0) {\n    return <div className={styles.emptyState}>{emptyMessage}</div>;\n  }\n\n  const metadataById = Object.fromEntries(\n    visibleSeries.map((serie) => {\n      return [\n        serie.id,\n        {\n          color: serie.color,\n          label: serie.label,\n          unit: serie.unit,\n        },\n      ];\n    }),\n  );\n\n  const data = visibleSeries.map((serie) => {\n    return {\n      id: serie.id,\n      data: serie.data.map((point) => {\n        return {\n          x: new Date(point.x),\n          y: point.y,\n        };\n      }),\n    };\n  });\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 110,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: visibleSeries.map((serie) => {\n        return {\n          id: serie.id,\n          label: serie.label,\n          color: serie.color,\n        };\n      }),\n    },\n  ];\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n    const firstPoint = slice.points[0];\n    let timestampValue = String(slice.id);\n    if (firstPoint?.data.x instanceof Date) {\n      timestampValue = firstPoint.data.x.toISOString();\n    }\n\n    const points = [...slice.points]\n      .map((point): SlicePointPayload | null => {\n        let value = Number(point.data.y);\n        if (typeof point.data.y === 'number') {\n          value = point.data.y;\n        }\n\n        if (Number.isNaN(value)) {\n          return null;\n        }\n\n        const seriesId = String(point.seriesId);\n        const metadata = metadataById[seriesId];\n\n        return {\n          seriesId,\n          label: metadata?.label ?? seriesId,\n          value,\n          color: point.seriesColor,\n          unit: metadata?.unit,\n        };\n      })\n      .filter((point): point is SlicePointPayload => {\n        return point != null;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${point.seriesId}-${timestampValue}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{point.label}</span>\n              </span>\n              <strong>{formatValue(point.value, point.unit)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={data}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={(serie) => {\n          return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n        }}\n        xScale={{\n          type: 'time',\n          format: 'native',\n          precision: 'minute',\n          useUTC: false,\n        }}\n        xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          format: (value) => {\n            if (!(value instanceof Date)) {\n              return '';\n            }\n\n            return formatAxisTimestamp(value);\n          },\n          tickSize: 0,\n          tickPadding: 10,\n          tickValues: 'every 15 minutes',\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return new Intl.NumberFormat(undefined, {\n              notation: 'compact',\n              maximumFractionDigits: 1,\n            }).format(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default MetricHistoryChart;\n"],"mappings":"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"}

package/lib/esm/components/charts/TimeSeriesLineChart.js

@@ -1,23 +1,11 @@
 import { vars as e } from "../../theme/themeContract.js";
 import { chartContainer as t, tooltip as n, tooltipDate as r, tooltipRow as i, tooltipRowLabel as a, tooltipSwatch as o } from "./timeSeriesLineChart.css.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { ResponsiveLine as l } from "@nivo/line";
+import { formatDayTick as s, getVisibleDayTicks as c } from "../../internal/charts/timeSeriesLineChartHelpers.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ResponsiveLine as d } from "@nivo/line";
 //#region src/components/charts/TimeSeriesLineChart.tsx
-var u = 6;
-function d(e) {
-	let t = e[0];
-	if (t == null || t.data.length <= u) return t == null ? [] : t.data.map((e) => e.x);
-	let n = Math.ceil(t.data.length / u), r = t.data.filter((e, t) => t % n === 0).map((e) => e.x), i = t.data.at(-1);
-	return i != null && r.at(-1) !== i.x && r.push(i.x), r;
-}
-function f(e) {
-	return (/* @__PURE__ */ new Date(`${e}T00:00:00Z`)).toLocaleDateString(void 0, {
-		month: "short",
-		day: "2-digit"
-	});
-}
-var p = (u) => {
-	let { ariaLabel: p, categoryColorById: m, categoryLabel: h, categoryOrder: g, formatValue: _, series: v } = u, y = d(v), b = g, x = (e) => b.includes(e), S = [{
+var f = (f) => {
+	let { ariaLabel: p, categoryColorById: m, categoryLabel: h, categoryOrder: g, formatValue: _, series: v } = f, y = c(v), b = g, x = (e) => b.includes(e), S = [{
 		anchor: "bottom",
 		direction: "row",
 		translateY: 56,
@@ -33,9 +21,9 @@ var p = (u) => {
 			color: m[e]
 		}))
 	}];
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ l("div", {
 		className: t,
-		children: /* @__PURE__ */ s(l, {
+		children: /* @__PURE__ */ l(d, {
 			data: v,
 			margin: {
 				top: 14,
@@ -66,7 +54,7 @@ var p = (u) => {
 			axisRight: null,
 			axisBottom: {
 				tickValues: y,
-				format: (e) => f(String(e)),
+				format: (e) => s(String(e)),
 				tickSize: 0,
 				tickPadding: 10
 			},
@@ -100,31 +88,31 @@ var p = (u) => {
 				} }
 			},
 			sliceTooltip: ({ slice: e }) => {
-				let t = String(e.id), l = g[0] ?? null, u = [...e.points].map((e) => {
+				let t = String(e.id), c = g[0] ?? null, d = [...e.points].map((e) => {
 					let t = 0;
 					typeof e.data.y == "number" && (t = e.data.y);
-					let n = l;
+					let n = c;
 					return typeof e.seriesId == "string" && x(e.seriesId) && (n = e.seriesId), n == null ? null : {
 						seriesId: n,
 						data: { y: t },
 						color: e.seriesColor
 					};
 				}).filter((e) => e != null).sort((e, t) => g.indexOf(e.seriesId) - g.indexOf(t.seriesId));
-				return /* @__PURE__ */ c("div", {
+				return /* @__PURE__ */ u("div", {
 					className: n,
-					children: [/* @__PURE__ */ s("p", {
+					children: [/* @__PURE__ */ l("p", {
 						className: r,
-						children: f(t)
-					}), u.map((e) => /* @__PURE__ */ c("div", {
+						children: s(t)
+					}), d.map((e) => /* @__PURE__ */ u("div", {
 						className: i,
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ u("span", {
 							className: a,
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ l("span", {
 								className: o,
 								style: { backgroundColor: e.color },
 								"aria-hidden": !0
-							}), /* @__PURE__ */ s("span", { children: h(e.seriesId) })]
-						}), /* @__PURE__ */ s("strong", { children: _(e.data.y) })]
+							}), /* @__PURE__ */ l("span", { children: h(e.seriesId) })]
+						}), /* @__PURE__ */ l("strong", { children: _(e.data.y) })]
 					}, `${t}-${e.seriesId}`))]
 				});
 			},
@@ -133,8 +121,8 @@ var p = (u) => {
 			ariaLabel: p
 		})
 	});
-}, m = { formatDayTick: f };
+};
 //#endregion
-export { p as TimeSeriesLineChart, p as default, m as __test };
+export { f as TimeSeriesLineChart, f as default };
 
 //# sourceMappingURL=TimeSeriesLineChart.js.map

package/lib/esm/components/charts/TimeSeriesLineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n  id: Category;\n  data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n  seriesId: Category;\n  data: {\n    y: number;\n  };\n  color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n  series: readonly TimeSeriesLineChartSerie<Category>[];\n  categoryOrder: readonly Category[];\n  categoryColorById: Readonly<Record<Category, string>>;\n  categoryLabel: (category: Category) => string;\n  formatValue: (value: number) => string;\n  ariaLabel: string;\n};\n\nconst MAX_X_TICKS = 6;\n\n/**\n * Limits the number of visible day ticks while always keeping the last point.\n */\nfunction getVisibleDayTicks<Category extends string>(\n  series: readonly TimeSeriesLineChartSerie<Category>[],\n): readonly string[] {\n  const firstSerie = series[0];\n  if (firstSerie == null || firstSerie.data.length <= MAX_X_TICKS) {\n    if (firstSerie == null) {\n      return [];\n    }\n\n    return firstSerie.data.map((point) => {\n      return point.x;\n    });\n  }\n\n  const step = Math.ceil(firstSerie.data.length / MAX_X_TICKS);\n  const visibleTicks = firstSerie.data\n    .filter((_, index) => {\n      return index % step === 0;\n    })\n    .map((point) => {\n      return point.x;\n    });\n\n  const lastPoint = firstSerie.data.at(-1);\n  if (lastPoint != null && visibleTicks.at(-1) !== lastPoint.x) {\n    visibleTicks.push(lastPoint.x);\n  }\n\n  return visibleTicks;\n}\n\n/**\n * Formats a `YYYY-MM-DD` key into a short month/day label for the x-axis.\n */\nfunction formatDayTick(dayKey: string): string {\n  const parsed = new Date(`${dayKey}T00:00:00Z`);\n  return parsed.toLocaleDateString(undefined, {\n    month: 'short',\n    day: '2-digit',\n  });\n}\n\nexport const TimeSeriesLineChart = <Category extends string>(\n  props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n  const {\n    ariaLabel,\n    categoryColorById,\n    categoryLabel,\n    categoryOrder,\n    formatValue,\n    series,\n  } = props;\n\n  const visibleTicks = getVisibleDayTicks(series);\n  const categoryOrderString = categoryOrder as readonly string[];\n  const isCategory = (value: string): value is Category => {\n    return categoryOrderString.includes(value);\n  };\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 90,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: categoryOrder.map((category) => {\n        return {\n          id: category,\n          label: categoryLabel(category),\n          color: categoryColorById[category],\n        };\n      }),\n    },\n  ];\n\n  const colorById = (serie: { id: string | number }): string => {\n    if (typeof serie.id !== 'string' || !isCategory(serie.id)) {\n      return vars.colors.primary;\n    }\n\n    return categoryColorById[serie.id];\n  };\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n    const dayKey = String(slice.id);\n    const fallbackCategory = categoryOrder[0] ?? null;\n    const points = [...slice.points]\n      .map((point): SlicePointPayload<Category> | null => {\n        let credits = 0;\n        if (typeof point.data.y === 'number') {\n          credits = point.data.y;\n        }\n\n        let seriesId = fallbackCategory;\n        if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n          seriesId = point.seriesId;\n        }\n        if (seriesId == null) {\n          return null;\n        }\n\n        return {\n          seriesId,\n          data: { y: credits },\n          color: point.seriesColor,\n        };\n      })\n      .filter((point): point is SlicePointPayload<Category> => {\n        return point != null;\n      })\n      .sort((left, right) => {\n        const leftIndex = categoryOrder.indexOf(left.seriesId);\n        const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n        return leftIndex - rightIndex;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${dayKey}-${point.seriesId}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{categoryLabel(point.seriesId)}</span>\n              </span>\n              <strong>{formatValue(point.data.y)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={series}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={colorById}\n        xScale={{ type: 'point' }}\n        yScale={{ type: 'linear', min: 0, max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickValues: visibleTicks,\n          format: (value) => {\n            return formatDayTick(String(value));\n          },\n          tickSize: 0,\n          tickPadding: 10,\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return new Intl.NumberFormat('en-US', {\n              notation: 'compact',\n              maximumFractionDigits: 1,\n            }).format(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default TimeSeriesLineChart;\n\nexport const __test = {\n  formatDayTick,\n} as const;\n"],"mappings":"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"}
+{"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport {\n  formatDayTick,\n  getVisibleDayTicks,\n} from '../../internal/charts/timeSeriesLineChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n  id: Category;\n  data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n  seriesId: Category;\n  data: {\n    y: number;\n  };\n  color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n  series: readonly TimeSeriesLineChartSerie<Category>[];\n  categoryOrder: readonly Category[];\n  categoryColorById: Readonly<Record<Category, string>>;\n  categoryLabel: (category: Category) => string;\n  formatValue: (value: number) => string;\n  ariaLabel: string;\n};\n\nexport const TimeSeriesLineChart = <Category extends string>(\n  props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n  const {\n    ariaLabel,\n    categoryColorById,\n    categoryLabel,\n    categoryOrder,\n    formatValue,\n    series,\n  } = props;\n\n  const visibleTicks = getVisibleDayTicks(series);\n  const categoryOrderString = categoryOrder as readonly string[];\n  const isCategory = (value: string): value is Category => {\n    return categoryOrderString.includes(value);\n  };\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 90,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: categoryOrder.map((category) => {\n        return {\n          id: category,\n          label: categoryLabel(category),\n          color: categoryColorById[category],\n        };\n      }),\n    },\n  ];\n\n  const colorById = (serie: { id: string | number }): string => {\n    if (typeof serie.id !== 'string' || !isCategory(serie.id)) {\n      return vars.colors.primary;\n    }\n\n    return categoryColorById[serie.id];\n  };\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n    const dayKey = String(slice.id);\n    const fallbackCategory = categoryOrder[0] ?? null;\n    const points = [...slice.points]\n      .map((point): SlicePointPayload<Category> | null => {\n        let credits = 0;\n        if (typeof point.data.y === 'number') {\n          credits = point.data.y;\n        }\n\n        let seriesId = fallbackCategory;\n        if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n          seriesId = point.seriesId;\n        }\n        if (seriesId == null) {\n          return null;\n        }\n\n        return {\n          seriesId,\n          data: { y: credits },\n          color: point.seriesColor,\n        };\n      })\n      .filter((point): point is SlicePointPayload<Category> => {\n        return point != null;\n      })\n      .sort((left, right) => {\n        const leftIndex = categoryOrder.indexOf(left.seriesId);\n        const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n        return leftIndex - rightIndex;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${dayKey}-${point.seriesId}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{categoryLabel(point.seriesId)}</span>\n              </span>\n              <strong>{formatValue(point.data.y)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={series}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={colorById}\n        xScale={{ type: 'point' }}\n        yScale={{ type: 'linear', min: 0, max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickValues: visibleTicks,\n          format: (value) => {\n            return formatDayTick(String(value));\n          },\n          tickSize: 0,\n          tickPadding: 10,\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return new Intl.NumberFormat('en-US', {\n              notation: 'compact',\n              maximumFractionDigits: 1,\n            }).format(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default TimeSeriesLineChart;\n"],"mappings":"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"}

package/lib/esm/components/charts/metricHistoryChart.css.js

@@ -1,7 +1,7 @@
 /* empty css                                   */
 /* empty css                                  */
 //#region src/components/charts/metricHistoryChart.css.ts
-var e = "kweehz0 txvbqbnvy txvbqboj7 txvbqbp6g txvbqbly7 txvbqbu7g txvbqbcfy txvbqbcfr txvbqb1dg txvbqb1qg txvbqbx7 txvbqb1rp txvbqbv41", t = "kweehz1 txvbqbnwg txvbqbojp txvbqbp6y txvbqblyp txvbqbu7g txvbqbjoy txvbqb9ip txvbqbcp txvbqbdoy txvbqbt6y txvbqbva3 txvbqb8y txvbqb1dg txvbqb1qg txvbqbx7 txvbqb1rp txvbqbv41", n = "kweehz2 txvbqbohp txvbqbp4y txvbqbp6g txvbqbly7 txvbqb9ip txvbqbai7 txvbqbb9p txvbqb1dg txvbqb1qg txvbqbwg txvbqb1rg txvbqbv47 txvbqb8q7", r = "kweehz3 txvbqb8p txvbqbva3 txvbqbamg txvbqbfcp", i = "kweehz4 txvbqb9ip txvbqbcp txvbqbdpp txvbqbaog txvbqb8y txvbqbv9z", a = "kweehz5 txvbqb9jg txvbqbcp txvbqbb9p", o = "kweehz6 txvbqbtwp txvbqbc5p txvbqb1t7";
+var e = "kweehz0 txvbqbyo5 txvbqbzlq txvbqb10jb txvbqbvve txvbqb17w0 txvbqbi0p txvbqbi0e txvbqb1w1 txvbqb2et txvbqb18k txvbqb2gm txvbqb196b", t = "kweehz1 txvbqbyov txvbqbzmg txvbqb10k1 txvbqbvw4 txvbqb17w0 txvbqbsky txvbqbdr8 txvbqbey txvbqbjtp txvbqb16fa txvbqb19cd txvbqb9j txvbqb1w1 txvbqb2et txvbqb18k txvbqb2gm txvbqb196b", n = "kweehz2 txvbqbzjk txvbqb10h5 txvbqb10jb txvbqbvve txvbqbdr8 txvbqbf6i txvbqbga8 txvbqb1w1 txvbqb2et txvbqb17h txvbqb2g9 txvbqb196h txvbqbck9", r = "kweehz3 txvbqb96 txvbqb19cd txvbqbfcn txvbqbm9g", i = "kweehz4 txvbqbdr8 txvbqbey txvbqbjus txvbqbffj txvbqb9j txvbqb19c9", a = "kweehz5 txvbqbdsb txvbqbey txvbqbga8", o = "kweehz6 txvbqb17gh txvbqbhlw txvbqb2is";
 //#endregion
 export { e as chartContainer, t as emptyState, n as tooltip, r as tooltipDate, i as tooltipRow, a as tooltipRowLabel, o as tooltipSwatch };
 

package/lib/esm/components/charts/timeSeriesLineChart.css.js

@@ -1,7 +1,7 @@
 /* empty css                                   */
 /* empty css                                   */
 //#region src/components/charts/timeSeriesLineChart.css.ts
-var e = "_15xy5md0 txvbqbnvy txvbqboj7 txvbqbp6g txvbqbly7 txvbqbu7g txvbqbcfy txvbqbcfi txvbqb1dg txvbqb1qg txvbqbx7 txvbqb1rp txvbqbv41", t = "_15xy5md1 txvbqbohp txvbqbp4y txvbqbp6g txvbqbly7 txvbqb9ip txvbqbai7 txvbqbb9p txvbqb1dg txvbqb1qg txvbqbwg txvbqb1rg txvbqbv47 txvbqb8q7", n = "_15xy5md2 txvbqb8p txvbqbva3 txvbqbamg txvbqbfcp", r = "_15xy5md3 txvbqb9ip txvbqbcp txvbqbdpp txvbqbaog txvbqb8y txvbqbv9z", i = "_15xy5md4 txvbqb9jg txvbqbcp txvbqbb9p", a = "_15xy5md5 txvbqbtwp txvbqbc5p txvbqb1t7";
+var e = "_15xy5md0 txvbqbyo5 txvbqbzlq txvbqb10jb txvbqbvve txvbqb17w0 txvbqbi0p txvbqbi01 txvbqb1w1 txvbqb2et txvbqb18k txvbqb2gm txvbqb196b", t = "_15xy5md1 txvbqbzjk txvbqb10h5 txvbqb10jb txvbqbvve txvbqbdr8 txvbqbf6i txvbqbga8 txvbqb1w1 txvbqb2et txvbqb17h txvbqb2g9 txvbqb196h txvbqbck9", n = "_15xy5md2 txvbqb96 txvbqb19cd txvbqbfcn txvbqbm9g", r = "_15xy5md3 txvbqbdr8 txvbqbey txvbqbjus txvbqbffj txvbqb9j txvbqb19c9", i = "_15xy5md4 txvbqbdsb txvbqbey txvbqbga8", a = "_15xy5md5 txvbqb17gh txvbqbhlw txvbqb2is";
 //#endregion
 export { e as chartContainer, t as tooltip, n as tooltipDate, r as tooltipRow, i as tooltipRowLabel, a as tooltipSwatch };
 

package/lib/esm/components/dashboard/activity_card/ActivityCard.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                            */
 //#region src/components/dashboard/activity_card/ActivityCard.css.ts
-var e = "_1d32hgo0 txvbqb9ip txvbqbai7 txvbqbao7", t = "_1d32hgo1 txvbqb9ip txvbqbdpp txvbqbcp txvbqbao7", n = "_1d32hgo2 txvbqb8y txvbqbamp txvbqbv9z", r = "_1d32hgo3 txvbqb8p txvbqbva1", i = "_1d32hgo4 txvbqb8y txvbqbva1";
+var e = "_1d32hgo0 txvbqbdr8 txvbqbf6i txvbqbff6", t = "_1d32hgo1 txvbqbdr8 txvbqbjus txvbqbey txvbqbff6", n = "_1d32hgo2 txvbqb9j txvbqbfd0 txvbqb19c9", r = "_1d32hgo3 txvbqb96 txvbqb19cb", i = "_1d32hgo4 txvbqb9j txvbqb19cb";
 //#endregion
 export { e as root, i as summary, r as timestamp, n as title, t as top };
 

package/lib/esm/components/dashboard/activity_card/ActivityCard.js

@@ -22,11 +22,11 @@ var c = ({ className: c, details: l, status: u, statusTone: d, summary: f, times
 					}), h]
 				}),
 				p != null && /* @__PURE__ */ o("span", {
-					className: "_1d32hgo3 txvbqb8p txvbqbva1",
+					className: "_1d32hgo3 txvbqb96 txvbqb19cb",
 					children: /* @__PURE__ */ o(e, { value: p })
 				}),
 				f != null && /* @__PURE__ */ o("div", {
-					className: "_1d32hgo4 txvbqb8y txvbqbva1",
+					className: "_1d32hgo4 txvbqb9j txvbqb19cb",
 					children: f
 				}),
 				l

package/lib/esm/components/dashboard/activity_feed/ActivityFeed.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                            */
 //#region src/components/dashboard/activity_feed/ActivityFeed.css.ts
-var e = "_1rlmg5z0 txvbqb9ip txvbqbai7 txvbqbao7";
+var e = "_1rlmg5z0 txvbqbdr8 txvbqbf6i txvbqbff6";
 //#endregion
 export { e as root };
 

package/lib/esm/components/dashboard/dashboard_grid/DashboardGrid.css.js

@@ -2,33 +2,33 @@
 /* empty css                             */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/dashboard/dashboard_grid/DashboardGrid.css.ts
-var t = "_15366911 _15366910 txvbqb9iy txvbqbaop txvbqbu7g txvbqbjh7", n = {
-	1: "_15366912 txvbqbbtg txvbqbbto",
-	2: "_15366913 txvbqbbtg txvbqbbtx",
-	3: "_15366914 txvbqbbtg txvbqbbu6",
-	4: "_15366915 txvbqbbtg txvbqbbuf",
-	12: "_15366917 _15366916 txvbqbbtg txvbqbbwf",
-	uneven: "_15366918 txvbqbbtg txvbqbbyo"
-}, r = "_15366919 txvbqb9ip txvbqbai7 txvbqbaop txvbqbjh7", i = e({
-	defaultClassName: "_1536691n _1536691a",
+var t = "_15366910 txvbqbdrl txvbqbffw txvbqb17w0 txvbqbs9r", n = {
+	1: "_15366911 txvbqbh2r txvbqbh33",
+	2: "_15366912 txvbqbh2r txvbqbh3g",
+	3: "_15366913 txvbqbh2r txvbqbh3t",
+	4: "_15366914 txvbqbh2r txvbqbh46",
+	12: "_15366916 _15366915 txvbqbh2r txvbqbh72",
+	uneven: "_15366917 txvbqbh2r txvbqbhbr"
+}, r = "_15366918 txvbqbdr8 txvbqbf6i txvbqbffw txvbqbs9r", i = e({
+	defaultClassName: "_1536691m _15366919 txvbqbt9i",
 	variantClassNames: {
 		minHeight: {
-			auto: "_1536691o _1536691b",
-			sm: "_1536691p _1536691c txvbqbjm7",
-			md: "_1536691q _1536691d txvbqbjmy",
-			lg: "_1536691r _1536691e txvbqbjnp"
+			auto: "_1536691n _1536691a txvbqbs9r",
+			sm: "_1536691o _1536691b txvbqbsgz",
+			md: "_1536691p _1536691c txvbqbsi2",
+			lg: "_1536691q _1536691d txvbqbsj5"
 		},
 		span: {
-			span3: "_1536691s _1536691f",
-			span4: "_1536691t _1536691g",
-			span6: "_1536691u _1536691h",
-			span8: "_1536691v _1536691i",
-			span12: "_1536691w _1536691j"
+			span3: "_1536691r _1536691e",
+			span4: "_1536691s _1536691f",
+			span6: "_1536691t _1536691g",
+			span8: "_1536691u _1536691h",
+			span12: "_1536691v _1536691i txvbqbgjm"
 		},
 		tabletSpan: {
-			auto: "_1536691x _1536691k",
-			tablet3: "_1536691y _1536691l",
-			tablet6: "_1536691z _1536691m"
+			auto: "_1536691w _1536691j",
+			tablet3: "_1536691x _1536691k",
+			tablet6: "_1536691y _1536691l"
 		}
 	},
 	defaultVariants: {

package/lib/esm/components/dashboard/dashboard_grid/DashboardGrid.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardGrid.css.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_grid/DashboardGrid.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = style([\n  sprinkles({\n    display: 'grid',\n    gap: 4,\n    width: 'full',\n    minHeight: 0,\n  }),\n]);\n\nexport const columns = {\n  1: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 1,\n    },\n  }),\n  2: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 2,\n    },\n  }),\n  3: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 3,\n    },\n  }),\n  4: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 4,\n    },\n  }),\n  12: style([\n    sprinkles({\n      gridTemplateColumns: {\n        base: 1,\n        min1200: 12,\n      },\n    }),\n    {\n      '@media': {\n        'screen and (min-width: 768px) and (max-width: 1199px)': {\n          gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',\n        },\n      },\n    },\n  ]),\n  uneven: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 'dashboardUneven',\n    },\n  }),\n} as const;\n\nexport const column = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minHeight: 0,\n});\n\nexport const item = recipe({\n  base: style({\n    minWidth: 0,\n  }),\n  variants: {\n    minHeight: {\n      auto: style({\n        minHeight: 0,\n      }),\n      sm: sprinkles({\n        minHeight: 24,\n      }),\n      md: sprinkles({\n        minHeight: 32,\n      }),\n      lg: sprinkles({\n        minHeight: 40,\n      }),\n    },\n    span: {\n      span3: style({\n        gridColumn: 'span 3 / span 3',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 3 / span 3',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span4: style({\n        gridColumn: 'span 4 / span 4',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 3 / span 3',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span6: style({\n        gridColumn: 'span 6 / span 6',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 6 / span 6',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span8: style({\n        gridColumn: 'span 8 / span 8',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 6 / span 6',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span12: style({\n        gridColumn: '1 / -1',\n      }),\n    },\n    tabletSpan: {\n      auto: style({}),\n      tablet3: style({\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 3 / span 3',\n          },\n        },\n      }),\n      tablet6: style({\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 6 / span 6',\n          },\n        },\n      }),\n    },\n  },\n  defaultVariants: {\n    minHeight: 'auto',\n    span: 'span12',\n    tabletSpan: 'auto',\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"DashboardGrid.css.js","names":[],"sources":["../../../../../src/components/dashboard/dashboard_grid/DashboardGrid.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'grid',\n  gap: 4,\n  width: 'full',\n  minHeight: 0,\n});\n\nexport const columns = {\n  1: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 1,\n    },\n  }),\n  2: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 2,\n    },\n  }),\n  3: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 3,\n    },\n  }),\n  4: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 4,\n    },\n  }),\n  12: style([\n    sprinkles({\n      gridTemplateColumns: {\n        base: 1,\n        min1200: 12,\n      },\n    }),\n    {\n      '@media': {\n        'screen and (min-width: 768px) and (max-width: 1199px)': {\n          gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',\n        },\n      },\n    },\n  ]),\n  uneven: sprinkles({\n    gridTemplateColumns: {\n      base: 1,\n      min1200: 'dashboardUneven',\n    },\n  }),\n} as const;\n\nexport const column = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minHeight: 0,\n});\n\nexport const item = recipe({\n  base: sprinkles({\n    minWidth: 0,\n  }),\n  variants: {\n    minHeight: {\n      auto: sprinkles({\n        minHeight: 0,\n      }),\n      sm: sprinkles({\n        minHeight: 24,\n      }),\n      md: sprinkles({\n        minHeight: 32,\n      }),\n      lg: sprinkles({\n        minHeight: 40,\n      }),\n    },\n    span: {\n      span3: style({\n        gridColumn: 'span 3 / span 3',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 3 / span 3',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span4: style({\n        gridColumn: 'span 4 / span 4',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 3 / span 3',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span6: style({\n        gridColumn: 'span 6 / span 6',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 6 / span 6',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span8: style({\n        gridColumn: 'span 8 / span 8',\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 6 / span 6',\n          },\n          'screen and (max-width: 767px)': {\n            gridColumn: '1 / -1',\n          },\n        },\n      }),\n      span12: sprinkles({\n        gridColumn: 'span-full',\n      }),\n    },\n    tabletSpan: {\n      auto: sprinkles({}),\n      tablet3: style({\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 3 / span 3',\n          },\n        },\n      }),\n      tablet6: style({\n        '@media': {\n          'screen and (min-width: 768px) and (max-width: 1199px)': {\n            gridColumn: 'span 6 / span 6',\n          },\n        },\n      }),\n    },\n  },\n  defaultVariants: {\n    minHeight: 'auto',\n    span: 'span12',\n    tabletSpan: 'auto',\n  },\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/metadata_strip/MetadataStrip.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                             */
 //#region src/components/dashboard/metadata_strip/MetadataStrip.css.ts
-var e = "b5wog90 txvbqb9ip txvbqbai7 txvbqbao7", t = "b5wog91 txvbqb9iy txvbqbaog txvbqbby7", n = "b5wog92 txvbqb8p txvbqbva1 txvbqb66 txvbqbefy", r = "b5wog93 txvbqb8y txvbqbv9z txvbqbk5y";
+var e = "b5wog90 txvbqbdr8 txvbqbf6i txvbqbff6", t = "b5wog91 txvbqbdrl txvbqbffj txvbqbhb2", n = "b5wog92 txvbqb96 txvbqb19cb txvbqb6a txvbqbky5", r = "b5wog93 txvbqb9j txvbqb19c9 txvbqbt9i";
 //#endregion
 export { t as item, n as label, e as list, r as value };
 

package/lib/esm/components/dashboard/metric_card/MetricCard.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                          */
 //#region src/components/dashboard/metric_card/MetricCard.css.ts
-var e = "_177uje60 txvbqb9ip txvbqbai7 txvbqbaog", t = "_177uje61 txvbqb9ip txvbqbcg txvbqbdpp txvbqbaog", n = "_177uje62 txvbqbfcp txvbqb8y txvbqbva1", r = "_177uje63 txvbqbfcp txvbqb9y txvbqba9 txvbqbamy txvbqbv9z", i = "_177uje64 txvbqbfcp txvbqb8y txvbqbva1", a = "_177uje65 txvbqb9jg txvbqbcp txvbqbdoy txvbqbva1";
+var e = "_177uje60 txvbqbdr8 txvbqbf6i txvbqbffj", t = "_177uje61 txvbqbdr8 txvbqbel txvbqbjus txvbqbffj", n = "_177uje62 txvbqbm9g txvbqb9j txvbqb19cb", r = "_177uje63 txvbqbm9g txvbqbaz txvbqbbe txvbqbfdd txvbqb19c9", i = "_177uje64 txvbqbm9g txvbqb9j txvbqb19cb", a = "_177uje65 txvbqbdsb txvbqbey txvbqbjtp txvbqb19cb";
 //#endregion
 export { i as hint, a as icon, n as label, e as root, t as top, r as value };
 

package/lib/esm/components/dashboard/metric_card/MetricCard.js

@@ -16,11 +16,11 @@ var s = ({ actions: s, className: c, hint: l, icon: u, label: d, value: f }) =>
 				className: i,
 				children: f
 			})] }), u != null && /* @__PURE__ */ a("div", {
-				className: "_177uje65 txvbqb9jg txvbqbcp txvbqbdoy txvbqbva1",
+				className: "_177uje65 txvbqbdsb txvbqbey txvbqbjtp txvbqb19cb",
 				children: u
 			})]
 		}), l != null && /* @__PURE__ */ a("p", {
-			className: "_177uje64 txvbqbfcp txvbqb8y txvbqbva1",
+			className: "_177uje64 txvbqbm9g txvbqb9j txvbqb19cb",
 			children: l
 		})]
 	})

package/lib/esm/components/dashboard/metric_tile_group/MetricTileGroup.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                               */
 //#region src/components/dashboard/metric_tile_group/MetricTileGroup.css.ts
-var e = "_1p0u7xj0 txvbqb9iy txvbqbaog txvbqbu7g txvbqbc0y";
+var e = "_1p0u7xj0 txvbqbdrl txvbqbffj txvbqb17w0 txvbqbhf1";
 //#endregion
 export { e as root };
 

package/lib/esm/components/dashboard/page_hero/PageHero.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                        */
 //#region src/components/dashboard/page_hero/PageHero.css.ts
-var e = "_1oey25i0 txvbqbnwy txvbqbok7 txvbqbp6y txvbqblyp txvbqb9ip txvbqbai7 txvbqbai0 txvbqbcg txvbqbcr txvbqbdpp txvbqbaop txvbqbu7g", t = "_1oey25i1 txvbqb9ip txvbqbai7 txvbqbb9p txvbqbk5y", n = "_1oey25i2 txvbqbfcp txvbqb9y txvbqba9 txvbqbamy txvbqbv9z", r = "_1oey25i3 txvbqbfcp txvbqb8y txvbqbva1 txvbqbjay", i = "_1oey25i4 txvbqb9ip txvbqbcp txvbqbajy txvbqbao7 txvbqbva1 txvbqb8y", a = "_1oey25i5 txvbqb9ip txvbqbcp txvbqbajy txvbqbao7";
+var e = "_1oey25i0 txvbqbypl txvbqbzn6 txvbqb10k1 txvbqbvw4 txvbqbdr8 txvbqbf6i txvbqbf67 txvbqbel txvbqbf0 txvbqbjus txvbqbffw txvbqb17w0", t = "_1oey25i1 txvbqbdr8 txvbqbf6i txvbqbga8 txvbqbt9i", n = "_1oey25i2 txvbqbm9g txvbqbaz txvbqbbe txvbqbfdd txvbqb19c9", r = "_1oey25i3 txvbqbm9g txvbqb9j txvbqb19cb txvbqbryx", i = "_1oey25i4 txvbqbdr8 txvbqbey txvbqbf91 txvbqbff6 txvbqb19cb txvbqb9j", a = "_1oey25i5 txvbqbdr8 txvbqbey txvbqbf91 txvbqbff6";
 //#endregion
 export { a as actions, t as body, i as meta, e as root, r as subtitle, n as title };
 

package/lib/esm/components/dashboard/page_hero/PageHero.js

@@ -12,16 +12,16 @@ var o = ({ actions: o, className: s, meta: c, subtitle: l, title: u }) => /* @__
 				children: u
 			}),
 			l != null && /* @__PURE__ */ i("div", {
-				className: "_1oey25i3 txvbqbfcp txvbqb8y txvbqbva1 txvbqbjay",
+				className: "_1oey25i3 txvbqbm9g txvbqb9j txvbqb19cb txvbqbryx",
 				children: l
 			}),
 			c != null && /* @__PURE__ */ i("div", {
-				className: "_1oey25i4 txvbqb9ip txvbqbcp txvbqbajy txvbqbao7 txvbqbva1 txvbqb8y",
+				className: "_1oey25i4 txvbqbdr8 txvbqbey txvbqbf91 txvbqbff6 txvbqb19cb txvbqb9j",
 				children: c
 			})
 		]
 	}), o != null && /* @__PURE__ */ i("div", {
-		className: "_1oey25i5 txvbqb9ip txvbqbcp txvbqbajy txvbqbao7",
+		className: "_1oey25i5 txvbqbdr8 txvbqbey txvbqbf91 txvbqbff6",
 		children: o
 	})]
 });

package/lib/esm/components/dashboard/section_nav/SectionNav.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                          */
 //#region src/components/dashboard/section_nav/SectionNav.css.ts
-var e = "_1wio3660 txvbqb9ip txvbqbajy txvbqbao7 txvbqbu7g", t = "_1wio3664 _1wio3661 txvbqb4 _1wio3662 txvbqbnw7 txvbqbojg txvbqbp6g txvbqbly7 txvbqb9jg txvbqbcp txvbqbdoy txvbqb1t7 txvbqbv txvbqb8y txvbqbamg txvbqbva1 txvbqbv41 txvbqb77 txvbqb6y txvbqb7k txvbqb3b _1wio3663 txvbqbwm4 txvbqbw4a", n = "_1wio3665 txvbqbv6f txvbqbv3r";
+var e = "_1wio3660 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb17w0", t = "_1wio3664 _1wio3661 txvbqb4 _1wio3662 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbdsb txvbqbey txvbqbjtp txvbqb2is txvbqbv txvbqb9j txvbqbfcn txvbqb19cb txvbqb196b txvbqb7g txvbqb77 txvbqb7t txvbqb3f _1wio3663 txvbqb1bs9 txvbqb1afl", n = "_1wio3665 txvbqb198p txvbqb1961";
 //#endregion
 export { n as active, t as item, e as nav };
 

package/lib/esm/components/dashboard/section_nav/SectionNav.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/section_nav/SectionNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'textSecondary',\n    backgroundColor: 'surface',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'backgroundSecondary',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}
+{"version":3,"file":"SectionNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/section_nav/SectionNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'textSecondary',\n    backgroundColor: 'surface',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'backgroundSecondary',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/segmented_nav/SegmentedNav.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                            */
 //#region src/components/dashboard/segmented_nav/SegmentedNav.css.ts
-var e = "bfnpna0 txvbqb9ip txvbqbajy txvbqbao7 txvbqbu7g", t = "bfnpna4 bfnpna1 txvbqb4 bfnpna2 txvbqbnw7 txvbqbojg txvbqbp6g txvbqbly7 txvbqb9jg txvbqbcp txvbqbdoy txvbqb1t7 txvbqbv txvbqb8y txvbqbamp txvbqbva1 txvbqbv4b txvbqb77 txvbqb6y txvbqb7k txvbqb3b bfnpna3 txvbqbwm4 txvbqbw41", n = "bfnpna5 txvbqbv6f txvbqbv3r";
+var e = "bfnpna0 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb17w0", t = "bfnpna4 bfnpna1 txvbqb4 bfnpna2 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbdsb txvbqbey txvbqbjtp txvbqb2is txvbqbv txvbqb9j txvbqbfd0 txvbqb19cb txvbqb196l txvbqb7g txvbqb77 txvbqb7t txvbqb3f bfnpna3 txvbqb1bs9 txvbqb1aex", n = "bfnpna5 txvbqb198p txvbqb1961";
 //#endregion
 export { n as active, t as item, e as nav };
 

package/lib/esm/components/dashboard/segmented_nav/SegmentedNav.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/segmented_nav/SegmentedNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    color: 'textSecondary',\n    backgroundColor: 'backgroundSecondary',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}
+{"version":3,"file":"SegmentedNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/segmented_nav/SegmentedNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    color: 'textSecondary',\n    backgroundColor: 'backgroundSecondary',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/selectable_card/SelectableCard.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                              */
 //#region src/components/dashboard/selectable_card/SelectableCard.css.ts
-var e = "_1ev8s9e2 _1ev8s9e0 txvbqb4 txvbqbu7g txvbqb9ip txvbqbai7 txvbqbao7 txvbqblb7 txvbqb1cp txvbqb1qg txvbqbwp txvbqb1rg txvbqbv49 txvbqbv txvbqb77 txvbqb6y txvbqb7k _1ev8s9e1 txvbqbwep", t = "_1ev8s9e3 txvbqbsg txvbqbv45", n = "_1ev8s9e4 txvbqb9ip txvbqbdpp txvbqbcp txvbqbao7", r = "_1ev8s9e5 txvbqbamp txvbqbv9z txvbqb8y", i = "_1ev8s9e6 txvbqbva1 txvbqb8p", a = "_1ev8s9e7 txvbqb9ip txvbqbai7 txvbqbao7";
+var e = "_1ev8s9e2 _1ev8s9e0 txvbqb4 txvbqb17w0 txvbqbdr8 txvbqbf6i txvbqbff6 txvbqbuy6 txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqb196j txvbqbv txvbqb7g txvbqb77 txvbqb7t _1ev8s9e1 txvbqb1b7d qbwcue6 txvbqb1d2y txvbqb1d37 qbwcue0 txvbqb1cb0 txvbqb1cws", t = "_1ev8s9e3 txvbqb11p txvbqb196f", n = "_1ev8s9e4 txvbqbdr8 txvbqbjus txvbqbey txvbqbff6", r = "_1ev8s9e5 txvbqbfd0 txvbqb19c9 txvbqb9j", i = "_1ev8s9e6 txvbqb19cb txvbqb96", a = "_1ev8s9e7 txvbqbdr8 txvbqbf6i txvbqbff6";
 //#endregion
 export { a as body, e as button, i as meta, t as selected, r as title, n as top };
 

package/lib/esm/components/dashboard/selectable_card/SelectableCard.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableCard.css.js","names":[],"sources":["../../../../../src/components/dashboard/selectable_card/SelectableCard.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const button = style([\n  sprinkles({\n    all: 'unset',\n    width: 'full',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    padding: 3,\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    borderRadius: 'md',\n    backgroundColor: 'background',\n    cursor: 'pointer',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    boxShadow: {\n      hover: 'sm',\n    },\n  }),\n  {\n    ':hover': {\n      transform: 'translateY(-1px)',\n    },\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const selected = sprinkles({\n  borderColor: 'primary',\n  backgroundColor: 'surfaceMuted',\n});\n\nexport const top = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n  fontSize: 'sm',\n});\n\nexport const meta = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n"],"mappings":""}
+{"version":3,"file":"SelectableCard.css.js","names":[],"sources":["../../../../../src/components/dashboard/selectable_card/SelectableCard.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { focusRing, liftOnHover } from '../../../theme/styleRecipes.css.js';\n\nexport const button = style([\n  sprinkles({\n    all: 'unset',\n    width: 'full',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    padding: 3,\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    borderRadius: 'md',\n    backgroundColor: 'background',\n    cursor: 'pointer',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    boxShadow: {\n      hover: 'sm',\n    },\n  }),\n  liftOnHover,\n  focusRing,\n]);\n\nexport const selected = sprinkles({\n  borderColor: 'primary',\n  backgroundColor: 'surfaceMuted',\n});\n\nexport const top = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n  fontSize: 'sm',\n});\n\nexport const meta = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/selectable_card/SelectableCard.js

@@ -15,11 +15,11 @@ var s = ({ children: s, className: c, meta: l, onSelect: u, selected: d = !1, ti
 			}), p]
 		}),
 		l != null && /* @__PURE__ */ a("div", {
-			className: "_1ev8s9e6 txvbqbva1 txvbqb8p",
+			className: "_1ev8s9e6 txvbqb19cb txvbqb96",
 			children: l
 		}),
 		s != null && /* @__PURE__ */ a("div", {
-			className: "_1ev8s9e7 txvbqb9ip txvbqbai7 txvbqbao7",
+			className: "_1ev8s9e7 txvbqbdr8 txvbqbf6i txvbqbff6",
 			children: s
 		})
 	]

package/lib/esm/components/dashboard/status_summary_panel/StatusSummaryPanel.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                                  */
 //#region src/components/dashboard/status_summary_panel/StatusSummaryPanel.css.ts
-var e = "_1geqsra0 txvbqb9ip txvbqbai7 txvbqbaog", t = "_1geqsra1 txvbqb9ip txvbqbdpp txvbqbcp txvbqbao7", n = "_1geqsra2 txvbqb8y txvbqbva1";
+var e = "_1geqsra0 txvbqbdr8 txvbqbf6i txvbqbffj", t = "_1geqsra1 txvbqbdr8 txvbqbjus txvbqbey txvbqbff6", n = "_1geqsra2 txvbqb9j txvbqb19cb";
 //#endregion
 export { n as help, e as root, t as row };
 

package/lib/esm/components/dashboard/status_summary_panel/StatusSummaryPanel.js

@@ -21,7 +21,7 @@ var c = ({ className: c, help: l, items: u = [], status: d, statusLabel: f, stat
 			h != null && /* @__PURE__ */ o(e, { value: h }),
 			u.length > 0 && /* @__PURE__ */ o(r, { items: u }),
 			l != null && /* @__PURE__ */ o("div", {
-				className: "_1geqsra2 txvbqb8y txvbqbva1",
+				className: "_1geqsra2 txvbqb9j txvbqb19cb",
 				children: l
 			})
 		]

package/lib/esm/components/dashboard/timeline_event_row/TimelineEventRow.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                                */
 //#region src/components/dashboard/timeline_event_row/TimelineEventRow.css.ts
-var e = "_1664kmj0 txvbqb1cp txvbqb1qg txvbqbwp txvbqb1rg txvbqblb7 txvbqb9ip txvbqbai7 txvbqbao7 txvbqbv4b", t = "_1664kmj1 txvbqb8p txvbqbva1", n = "_1664kmj2 txvbqb8y txvbqbv9z", r = "_1664kmj3 txvbqb9ip txvbqbajy txvbqbao7 txvbqb8p txvbqbva1";
+var e = "_1664kmj0 txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqbuy6 txvbqbdr8 txvbqbf6i txvbqbff6 txvbqb196l", t = "_1664kmj1 txvbqb96 txvbqb19cb", n = "_1664kmj2 txvbqb9j txvbqb19c9", r = "_1664kmj3 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb96 txvbqb19cb";
 //#endregion
 export { r as metrics, e as root, n as summary, t as timestamp };
 

package/lib/esm/components/dashboard/timeline_event_row/TimelineEventRow.js

@@ -11,11 +11,11 @@ var o = ({ className: o, details: s, metrics: c = [], summary: l, timestamp: u }
 			children: /* @__PURE__ */ i(t, { value: u })
 		}),
 		l != null && /* @__PURE__ */ i("div", {
-			className: "_1664kmj2 txvbqb8y txvbqbv9z",
+			className: "_1664kmj2 txvbqb9j txvbqb19c9",
 			children: l
 		}),
 		c.length > 0 && /* @__PURE__ */ i("div", {
-			className: "_1664kmj3 txvbqb9ip txvbqbajy txvbqbao7 txvbqb8p txvbqbva1",
+			className: "_1664kmj3 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb96 txvbqb19cb",
 			children: c.map((e) => /* @__PURE__ */ a("span", { children: [
 				e.label,
 				": ",