@epilot/spark-ui 0.10.1 → 0.11.0

package/dist/components/info-block.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "bare" | "default" | null | undefined;
+  variant?: "default" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/info-block.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "bare" | "default" | null | undefined;
+  variant?: "default" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/input.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 
 //#region src/components/input.d.ts

package/dist/components/input.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 
 //#region src/components/input.d.ts

package/dist/components/line-chart.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/line-chart.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/metering-row.cjs

@@ -1,24 +1,41 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_icon = require("./icon.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/metering-row.tsx
+const MeteringRowContext = (0, react.createContext)(null);
+function useMeteringRowTone() {
+	const tone = (0, react.useContext)(MeteringRowContext);
+	if (!tone) throw new Error("MeteringRow.* must be rendered inside <MeteringRow>");
+	return tone;
+}
 const MeteringRow = ({ className, tone, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("group flex items-center gap-3", className),
-		"data-tone": tone,
-		...rest
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MeteringRowContext.Provider, {
+		value: tone,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, cnfast.cn)("group flex items-center gap-3", className),
+			"data-tone": tone,
+			...rest
+		})
 	});
 };
+const toneToIconColor = {
+	accent: "accent",
+	neutral: "neutral",
+	success: "success",
+	warning: "warning",
+	error: "danger"
+};
 const MeteringRowIcon = ({ className, icon, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, cnfast.cn)("flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning", className),
+	const tone = useMeteringRowTone();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "text-[18px]",
-			name: icon
-		})
+		className,
+		color: toneToIconColor[tone],
+		name: icon,
+		size: "large"
 	});
 };
 const MeteringRowLabel = ({ className, ...rest }) => {

package/dist/components/metering-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"metering-row.cjs","names":["MaterialSymbol"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <div\n      className={cn('group flex items-center gap-3', className)}\n      data-tone={tone}\n      {...rest}\n    />\n  )\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  return (\n    <span\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[18px]\" name={icon} />\n    </span>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;AAOA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,aAAW;EACX,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,4dACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GAAgB,WAAU;GAAc,MAAM;EAAO,CAAA;CACjD,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"metering-row.cjs","names":["Icon"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      name={icon}\n      size=\"large\"\n    />\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;;AAOA,MAAM,sBAAA,GAAA,MAAA,eAAgD,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,QAAA,GAAA,MAAA,YAAkB,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAM;EACN,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/metering-row.js

@@ -1,23 +1,40 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Icon } from "./icon.js";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/metering-row.tsx
+const MeteringRowContext = createContext(null);
+function useMeteringRowTone() {
+	const tone = useContext(MeteringRowContext);
+	if (!tone) throw new Error("MeteringRow.* must be rendered inside <MeteringRow>");
+	return tone;
+}
 const MeteringRow = ({ className, tone, ...rest }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("group flex items-center gap-3", className),
-		"data-tone": tone,
-		...rest
+	return /* @__PURE__ */ jsx(MeteringRowContext.Provider, {
+		value: tone,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("group flex items-center gap-3", className),
+			"data-tone": tone,
+			...rest
+		})
 	});
 };
+const toneToIconColor = {
+	accent: "accent",
+	neutral: "neutral",
+	success: "success",
+	warning: "warning",
+	error: "danger"
+};
 const MeteringRowIcon = ({ className, icon, ...rest }) => {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning", className),
+	const tone = useMeteringRowTone();
+	return /* @__PURE__ */ jsx(Icon, {
 		...rest,
-		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "text-[18px]",
-			name: icon
-		})
+		className,
+		color: toneToIconColor[tone],
+		name: icon,
+		size: "large"
 	});
 };
 const MeteringRowLabel = ({ className, ...rest }) => {

package/dist/components/metering-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <div\n      className={cn('group flex items-center gap-3', className)}\n      data-tone={tone}\n      {...rest}\n    />\n  )\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  return (\n    <span\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[18px]\" name={icon} />\n    </span>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;AAOA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,SAAS;EACxD,aAAW;EACX,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,QAAD;EACE,WAAW,GACT,4dACA,SACF;EACA,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAM;EAAO,CAAA;CACjD,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      name={icon}\n      size=\"large\"\n    />\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;AAOA,MAAM,qBAAqB,cAA2B,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,OAAO,WAAW,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,OAAD;GACE,WAAW,GAAG,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAM;EACN,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/page-header.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "styleVariant" | "color" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "styleVariant" | "color" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/pill.cjs

@@ -35,7 +35,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 		ref,
 		role: clickable ? "button" : void 0,
 		tabIndex: focusable ? 0 : void 0,
-		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",

package/dist/components/pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pill.cjs","names":["React","accentByColor","MaterialSymbol"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,YAAA,GAAA,OAAA,IACE,0FACA,4FACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.cjs","names":["React","accentByColor","MaterialSymbol"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,YAAA,GAAA,OAAA,IACE,0FACA,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/pill.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
 import { SparkAccentColor } from "../lib/accent-colors.cjs";
 import * as React$1 from "react";
 

package/dist/components/pill.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 import { SparkAccentColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 

package/dist/components/pill.js

@@ -32,7 +32,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 		ref,
 		role: clickable ? "button" : void 0,
 		tabIndex: focusable ? 0 : void 0,
-		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",

package/dist/components/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,WAAW,GACT,0FACA,4FACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,WAAW,GACT,0FACA,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/power-history-chart.cjs

@@ -1,6 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
@@ -8,7 +9,6 @@ const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/power-history-chart.js

@@ -1,13 +1,13 @@
 "use client";
-import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/components/power-history.cjs

@@ -1,10 +1,10 @@
 "use client";
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_line_chart = require("./line-chart.cjs");
-const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/power-history.tsx

package/dist/components/power-history.js

@@ -1,10 +1,10 @@
 "use client";
+import { useContainerWidth } from "../hooks/use-container-width.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
 import { LineChart } from "./line-chart.js";
-import { useContainerWidth } from "../hooks/use-container-width.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/power-history.tsx

package/dist/components/power-network.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_number_flow = require("./number-flow.cjs");
 const require_components_skeleton = require("./skeleton.cjs");

package/dist/components/power-network.js

@@ -1,7 +1,7 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { SectionTitle } from "./typography.js";
 import NumberFlow from "./number-flow.js";
 import { Skeleton } from "./skeleton.js";

package/dist/components/radio.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";

package/dist/components/radio.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";

package/dist/components/segmented-control.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 

package/dist/components/segmented-control.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 

package/dist/components/select.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 

package/dist/components/select.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 

package/dist/components/switch.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 
 //#region src/components/switch.d.ts

package/dist/components/switch.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 
 //#region src/components/switch.d.ts

package/dist/components/textarea.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 
 //#region src/components/textarea.d.ts

package/dist/components/textarea.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 
 //#region src/components/textarea.d.ts