@epilot/spark-ui 0.18.2 → 0.20.0

package/dist/components/number-flow.d.cts

@@ -1,4 +1,14 @@
 "use client";
 
-import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.cjs";
-export { type Format, type NumberFlowProps, NumberFlow as default };
+import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
+
+//#region src/components/number-flow.d.ts
+declare function NumberFlow({
+  locales,
+  prefix,
+  suffix,
+  ...props
+}: NumberFlowProps$1): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type Format, type NumberFlowProps, NumberFlow as default };
+//# sourceMappingURL=number-flow.d.cts.map

package/dist/components/number-flow.d.ts

@@ -1,4 +1,14 @@
 "use client";
 
-import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.js";
-export { type Format, type NumberFlowProps, NumberFlow as default };
+import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
+
+//#region src/components/number-flow.d.ts
+declare function NumberFlow({
+  locales,
+  prefix,
+  suffix,
+  ...props
+}: NumberFlowProps$1): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type Format, type NumberFlowProps, NumberFlow as default };
+//# sourceMappingURL=number-flow.d.ts.map

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, "color" | "styleVariant" | "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, "color" | "styleVariant" | "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/period-tabs.cjs

@@ -5,40 +5,25 @@ let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/period-tabs.tsx
-/**
-* Outer container for a period picker — typically wraps a tabs row on top of
-* a date stepper.
-*/
 const PeriodTabs = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, cnfast.cn)("flex flex-col items-center gap-2", className),
 		...rest
 	});
 };
-/**
-* Date stepper row — renders prev / label / next children inline. Pair with
-* any icon button + `PeriodStepperLabel` (or custom content) inside.
-*/
 const PeriodStepper = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, cnfast.cn)("flex items-center gap-2 text-gray-light", className),
 		...rest
 	});
 };
-/** Centered label between the stepper buttons. Has a fixed min-width so the
-* stepper doesn't jump as the label text changes length. */
 const PeriodStepperLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: (0, cnfast.cn)("min-w-40 text-center text-sm font-medium text-gray", className),
 		...rest
 	});
 };
-/**
-* Previous-period button — chevron-left icon button with sensible defaults
-* (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
-* styling that matches the next button).
-*/
-const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel = "Previous period", ...rest }) => {
+const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
 		"aria-label": ariaLabel,
 		className: (0, cnfast.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),
@@ -49,12 +34,7 @@ const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel = "Previou
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ChevronLeft, {})
 	});
 };
-/**
-* Next-period button — chevron-right icon button with sensible defaults
-* (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
-* styling that matches the previous button).
-*/
-const PeriodStepperButtonNext = ({ className, "aria-label": ariaLabel = "Next period", ...rest }) => {
+const PeriodStepperButtonNext = ({ className, "aria-label": ariaLabel, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
 		"aria-label": ariaLabel,
 		className: (0, cnfast.cn)("disabled:text-gray-light/60 disabled:opacity-40", className),

package/dist/components/period-tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"period-tabs.cjs","names":["Button","ChevronLeft","ChevronRight"],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\n/**\n * Outer container for a period picker — typically wraps a tabs row on top of\n * a date stepper.\n */\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Date stepper row — renders prev / label / next children inline. Pair with\n * any icon button + `PeriodStepperLabel` (or custom content) inside.\n */\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Centered label between the stepper buttons. Has a fixed min-width so the\n * stepper doesn't jump as the label text changes length. */\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Previous-period button — chevron-left icon button with sensible defaults\n * (`styleVariant=\"ghost\"`, `color=\"neutral\"`, `size=\"icon-small\"`, accessible label, and disabled-state\n * styling that matches the next button).\n */\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel = 'Previous period',\n  ...rest\n}: Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children'>) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronLeft />\n    </Button>\n  )\n}\n\n/**\n * Next-period button — chevron-right icon button with sensible defaults\n * (`styleVariant=\"ghost\"`, `color=\"neutral\"`, `size=\"icon-small\"`, accessible label, and disabled-state\n * styling that matches the previous button).\n */\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel = 'Next period',\n  ...rest\n}: Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children'>) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronRight />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;;;AAIA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,mBAC1B,GAAG,WACoE;CACvE,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA;CACR,CAAA;AAEZ;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,eAC1B,GAAG,WACoE;CACvE,OACE,iBAAA,GAAA,kBAAA,KAACD,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ"}
+{"version":3,"file":"period-tabs.cjs","names":["Button","ChevronLeft","ChevronRight"],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype PeriodStepperButtonProps = Omit<\n  ButtonProps,\n  'styleVariant' | 'color' | 'size' | 'children' | 'aria-label'\n> & {\n  'aria-label': string\n}\n\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronLeft />\n    </Button>\n  )\n}\n\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronRight />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA;CACR,CAAA;AAEZ;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACD,0BAAAA,QAAD;EACE,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ"}

package/dist/components/period-tabs.d.cts

@@ -3,48 +3,31 @@
 import { ButtonProps } from "./button.cjs";
 
 //#region src/components/period-tabs.d.ts
-/**
- * Outer container for a period picker — typically wraps a tabs row on top of
- * a date stepper.
- */
+type PeriodStepperButtonProps = Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children' | 'aria-label'> & {
+  'aria-label': string;
+};
 declare const PeriodTabs: ({
   className,
   ...rest
 }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-/**
- * Date stepper row — renders prev / label / next children inline. Pair with
- * any icon button + `PeriodStepperLabel` (or custom content) inside.
- */
 declare const PeriodStepper: ({
   className,
   ...rest
 }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-/** Centered label between the stepper buttons. Has a fixed min-width so the
- * stepper doesn't jump as the label text changes length. */
 declare const PeriodStepperLabel: ({
   className,
   ...rest
 }: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-/**
- * Previous-period button — chevron-left icon button with sensible defaults
- * (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
- * styling that matches the next button).
- */
 declare const PeriodStepperButtonPrev: ({
   className,
   "aria-label": ariaLabel,
   ...rest
-}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => import("react/jsx-runtime").JSX.Element;
-/**
- * Next-period button — chevron-right icon button with sensible defaults
- * (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
- * styling that matches the previous button).
- */
+}: PeriodStepperButtonProps) => import("react/jsx-runtime").JSX.Element;
 declare const PeriodStepperButtonNext: ({
   className,
   "aria-label": ariaLabel,
   ...rest
-}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => import("react/jsx-runtime").JSX.Element;
+}: PeriodStepperButtonProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { PeriodStepper, PeriodStepperButtonNext, PeriodStepperButtonPrev, PeriodStepperLabel, PeriodTabs };
 //# sourceMappingURL=period-tabs.d.cts.map

package/dist/components/period-tabs.d.ts

@@ -3,48 +3,31 @@
 import { ButtonProps } from "./button.js";
 
 //#region src/components/period-tabs.d.ts
-/**
- * Outer container for a period picker — typically wraps a tabs row on top of
- * a date stepper.
- */
+type PeriodStepperButtonProps = Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children' | 'aria-label'> & {
+  'aria-label': string;
+};
 declare const PeriodTabs: ({
   className,
   ...rest
 }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-/**
- * Date stepper row — renders prev / label / next children inline. Pair with
- * any icon button + `PeriodStepperLabel` (or custom content) inside.
- */
 declare const PeriodStepper: ({
   className,
   ...rest
 }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-/** Centered label between the stepper buttons. Has a fixed min-width so the
- * stepper doesn't jump as the label text changes length. */
 declare const PeriodStepperLabel: ({
   className,
   ...rest
 }: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-/**
- * Previous-period button — chevron-left icon button with sensible defaults
- * (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
- * styling that matches the next button).
- */
 declare const PeriodStepperButtonPrev: ({
   className,
   "aria-label": ariaLabel,
   ...rest
-}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => import("react/jsx-runtime").JSX.Element;
-/**
- * Next-period button — chevron-right icon button with sensible defaults
- * (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
- * styling that matches the previous button).
- */
+}: PeriodStepperButtonProps) => import("react/jsx-runtime").JSX.Element;
 declare const PeriodStepperButtonNext: ({
   className,
   "aria-label": ariaLabel,
   ...rest
-}: Omit<ButtonProps, "styleVariant" | "color" | "size" | "children">) => import("react/jsx-runtime").JSX.Element;
+}: PeriodStepperButtonProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { PeriodStepper, PeriodStepperButtonNext, PeriodStepperButtonPrev, PeriodStepperLabel, PeriodTabs };
 //# sourceMappingURL=period-tabs.d.ts.map

package/dist/components/period-tabs.js

@@ -4,40 +4,25 @@ import { Button } from "./button.js";
 import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/period-tabs.tsx
-/**
-* Outer container for a period picker — typically wraps a tabs row on top of
-* a date stepper.
-*/
 const PeriodTabs = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-col items-center gap-2", className),
 		...rest
 	});
 };
-/**
-* Date stepper row — renders prev / label / next children inline. Pair with
-* any icon button + `PeriodStepperLabel` (or custom content) inside.
-*/
 const PeriodStepper = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center gap-2 text-gray-light", className),
 		...rest
 	});
 };
-/** Centered label between the stepper buttons. Has a fixed min-width so the
-* stepper doesn't jump as the label text changes length. */
 const PeriodStepperLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: cn("min-w-40 text-center text-sm font-medium text-gray", className),
 		...rest
 	});
 };
-/**
-* Previous-period button — chevron-left icon button with sensible defaults
-* (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
-* styling that matches the next button).
-*/
-const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel = "Previous period", ...rest }) => {
+const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel, ...rest }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		"aria-label": ariaLabel,
 		className: cn("disabled:text-gray-light/60 disabled:opacity-40", className),
@@ -48,12 +33,7 @@ const PeriodStepperButtonPrev = ({ className, "aria-label": ariaLabel = "Previou
 		children: /* @__PURE__ */ jsx(ChevronLeft, {})
 	});
 };
-/**
-* Next-period button — chevron-right icon button with sensible defaults
-* (`styleVariant="ghost"`, `color="neutral"`, `size="icon-small"`, accessible label, and disabled-state
-* styling that matches the previous button).
-*/
-const PeriodStepperButtonNext = ({ className, "aria-label": ariaLabel = "Next period", ...rest }) => {
+const PeriodStepperButtonNext = ({ className, "aria-label": ariaLabel, ...rest }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		"aria-label": ariaLabel,
 		className: cn("disabled:text-gray-light/60 disabled:opacity-40", className),

package/dist/components/period-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"period-tabs.js","names":[],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\n/**\n * Outer container for a period picker — typically wraps a tabs row on top of\n * a date stepper.\n */\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Date stepper row — renders prev / label / next children inline. Pair with\n * any icon button + `PeriodStepperLabel` (or custom content) inside.\n */\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Centered label between the stepper buttons. Has a fixed min-width so the\n * stepper doesn't jump as the label text changes length. */\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Previous-period button — chevron-left icon button with sensible defaults\n * (`styleVariant=\"ghost\"`, `color=\"neutral\"`, `size=\"icon-small\"`, accessible label, and disabled-state\n * styling that matches the next button).\n */\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel = 'Previous period',\n  ...rest\n}: Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children'>) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronLeft />\n    </Button>\n  )\n}\n\n/**\n * Next-period button — chevron-right icon button with sensible defaults\n * (`styleVariant=\"ghost\"`, `color=\"neutral\"`, `size=\"icon-small\"`, accessible label, and disabled-state\n * styling that matches the previous button).\n */\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel = 'Next period',\n  ...rest\n}: Omit<ButtonProps, 'styleVariant' | 'color' | 'size' | 'children'>) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronRight />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;;;;;AAQA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;;;AAIA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,mBAC1B,GAAG,WACoE;CACvE,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,aAAD,CAAc,CAAA;CACR,CAAA;AAEZ;;;;;;AAOA,MAAM,2BAA2B,EAC/B,WACA,cAAc,YAAY,eAC1B,GAAG,WACoE;CACvE,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ"}
+{"version":3,"file":"period-tabs.js","names":[],"sources":["../../src/components/period-tabs.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype PeriodStepperButtonProps = Omit<\n  ButtonProps,\n  'styleVariant' | 'color' | 'size' | 'children' | 'aria-label'\n> & {\n  'aria-label': string\n}\n\nconst PeriodTabs = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col items-center gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepper = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-2 text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'min-w-40 text-center text-sm font-medium text-gray',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst PeriodStepperButtonPrev = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronLeft />\n    </Button>\n  )\n}\n\nconst PeriodStepperButtonNext = ({\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: PeriodStepperButtonProps) => {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={cn(\n        'disabled:text-gray-light/60 disabled:opacity-40',\n        className,\n      )}\n      size=\"icon-small\"\n      styleVariant=\"ghost\"\n      color=\"neutral\"\n      {...rest}\n    >\n      <ChevronRight />\n    </Button>\n  )\n}\n\nexport {\n  PeriodTabs,\n  PeriodStepper,\n  PeriodStepperLabel,\n  PeriodStepperButtonPrev,\n  PeriodStepperButtonNext,\n}\n"],"mappings":";;;;;;AAWA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,sDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,aAAD,CAAc,CAAA;CACR,CAAA;AAEZ;AAEA,MAAM,2BAA2B,EAC/B,WACA,cAAc,WACd,GAAG,WAC2B;CAC9B,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GACT,mDACA,SACF;EACA,MAAK;EACL,cAAa;EACb,OAAM;EACN,GAAI;YAEJ,oBAAC,cAAD,CAAe,CAAA;CACT,CAAA;AAEZ"}

package/dist/components/pill.cjs

@@ -42,7 +42,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
 		...interaction,
 		ref,
-		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(--spark-badge-fg,var(--neutral-a11)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", 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,var(--neutral-a4))", 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(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", 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,var(--color-gray-a4))", 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",
@@ -54,7 +54,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 				event.stopPropagation();
 				onRemove?.(event);
 			},
-			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none",
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--color-gray-a4)) motion-reduce:transition-none",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Close, { className: "[--spark-icon-size:14px]" })
 		})] }) : null]
 	});

package/dist/components/pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pill.cjs","names":["React","accentByColor","Close"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\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  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\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      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        // shared chip ink with Badge: solid leaves --spark-style-fg unset, so without the\n        // --spark-badge-fg link solid text falls through to a11 on the step-9 fill (fails AA)\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n        // surface/outline are defined by their edge; painted inset like Button's so it\n        // costs no layout, unlike Badge's real border\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))',\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,var(--neutral-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\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;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,YAAA,GAAA,OAAA,IACE,0FAGA,4GAGA,kGACA,aACE,iIACF,aACE,sEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAvBN,CAyBG,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,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.cjs","names":["React","accentByColor","Close"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\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  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\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      {...interaction}\n      ref={ref}\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-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))',\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--color-gray-a4))',\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,var(--color-gray-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\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;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,YAAA,GAAA,OAAA,IACE,0FACA,mIACA,kGACA,aACE,iIACF,aACE,yEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAnBN,CAqBG,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,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/pill.js

@@ -39,7 +39,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 		"data-accent-color": color ? accentByColor[color] : void 0,
 		...interaction,
 		ref,
-		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(--spark-badge-fg,var(--neutral-a11)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", 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,var(--neutral-a4))", 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(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))", "shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", 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,var(--color-gray-a4))", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
@@ -51,7 +51,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 				event.stopPropagation();
 				onRemove?.(event);
 			},
-			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--neutral-a4)) motion-reduce:transition-none",
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover,var(--color-gray-a4)) motion-reduce:transition-none",
 			children: /* @__PURE__ */ jsx(Close, { className: "[--spark-icon-size:14px]" })
 		})] }) : null]
 	});

package/dist/components/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\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  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\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      {...interaction}\n      ref={ref}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        // shared chip ink with Badge: solid leaves --spark-style-fg unset, so without the\n        // --spark-badge-fg link solid text falls through to a11 on the step-9 fill (fails AA)\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n        // surface/outline are defined by their edge; painted inset like Button's so it\n        // costs no layout, unlike Badge's real border\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--neutral-a4))',\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,var(--neutral-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\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;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,WAAW,GACT,0FAGA,4GAGA,kGACA,aACE,iIACF,aACE,sEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAvBN,CAyBG,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,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,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 { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\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  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDown?.(event)\n    if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n      if (event.key === ' ') event.preventDefault()\n      onClick?.(event)\n    }\n    if (removable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      onRemove?.(event)\n    }\n  }\n\n  // button role and click handler travel together, so a clickable pill always\n  // answers Enter/Space; a removable-only pill stays generic and answers Delete\n  const interaction = {\n    onKeyDown: handleKeyDown,\n    ...(clickable && { role: 'button' as const, onClick }),\n    ...(focusable && { tabIndex: 0 }),\n  }\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      {...interaction}\n      ref={ref}\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-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))',\n        'shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable &&\n          'cursor-pointer hover:bg-(--spark-style-bg-hover,var(--color-gray-a4))',\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,var(--color-gray-a4)) motion-reduce:transition-none\"\n          >\n            <Close className=\"[--spark-icon-size:14px]\" />\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;CAC/B,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;CAExD,MAAM,iBAAiB,UAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;GAC5C,UAAU,KAAK;EACjB;EACA,IAAI,cAAc,MAAM,QAAQ,YAAY,MAAM,QAAQ,cACxD,WAAW,KAAK;CAEpB;CAIA,MAAM,cAAc;EAClB,WAAW;EACX,GAAI,aAAa;GAAE,MAAM;GAAmB;EAAQ;EACpD,GAAI,aAAa,EAAE,UAAU,EAAE;CACjC;CAEA,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAAY,UAAW,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,GAAI;EACC;EACL,WAAW,GACT,0FACA,mIACA,kGACA,aACE,iIACF,aACE,yEACF,YAAY,kCACZ,SACF;EACA,GAAI;YAnBN,CAqBG,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,OAAD,EAAO,WAAU,2BAA4B,CAAA;EACzC,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/progress.cjs

@@ -22,7 +22,7 @@ const Progress = react.forwardRef(({ className, value, max = 100, size = "defaul
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,OAAA,IACE,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,OAAA,IACE,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/progress.js

@@ -19,7 +19,7 @@ const Progress = React$1.forwardRef(({ className, value, max = 100, size = "defa
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--color-primary)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/radio.cjs

@@ -31,7 +31,7 @@ function Radio({ className, styleVariant, color, render, nativeButton, ...props
 		"data-accent-color": dataAccentColor,
 		nativeButton: nativeButton ?? render === void 0,
 		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
-		className: (0, cnfast.cn)("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
+		className: (0, cnfast.cn)("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Indicator, {
 			"data-slot": "radio-indicator",

package/dist/components/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,OAAA,IACE,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,iNAGA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,OAAA,IACE,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/radio.js

@@ -28,7 +28,7 @@ function Radio({ className, styleVariant, color, render, nativeButton, ...props
 		"data-accent-color": dataAccentColor,
 		nativeButton: nativeButton ?? render === void 0,
 		render: render ?? /* @__PURE__ */ jsx("button", {}),
-		className: cn("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
+		className: cn("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Radio$1.Indicator, {
 			"data-slot": "radio-indicator",

package/dist/components/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQ,cAAc,SAAS,KAAA;EAOnD,WAAW,GACT,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,iNAGA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQ,cAAc,SAAS,KAAA;EAOnD,WAAW,GACT,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,iNAGA,qIACA,iFACA,6DACA,+IACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/sankey-chart.cjs

@@ -8,15 +8,6 @@ let _visx_group = require("@visx/group");
 let _visx_sankey = require("@visx/sankey");
 let cnfast = require("cnfast");
 //#region src/components/sankey-chart.tsx
-const SANKEY_CATEGORY_COLORS = {
-	solar: "var(--orange-a9)",
-	battery: "var(--green-a9)",
-	grid: "var(--blue-9)",
-	gridFeedIn: "var(--blue-7)",
-	home: "var(--spark-9)",
-	floor: "var(--neutral-a9)",
-	device: "var(--neutral-a8)"
-};
 const DEFAULT_HEIGHT = 260;
 const DEFAULT_NODE_WIDTH = 12;
 const DEFAULT_NODE_PADDING = 10;
@@ -31,7 +22,7 @@ function resolveNodeColor(node, categoryColors, defaultColor) {
 	if (node.category && categoryColors?.[node.category]) return categoryColors[node.category];
 	return defaultColor;
 }
-function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, keepAtDepthIds, title, className }) {
+function SankeyChart({ nodes, links, categoryColors, defaultColor = DEFAULT_COLOR, valueSuffix, valueFormat, height = DEFAULT_HEIGHT, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, labelPadding = DEFAULT_LABEL_PADDING, keepAtDepthIds, title, className }) {
 	const containerRef = (0, react.useRef)(null);
 	const [width, setWidth] = (0, react.useState)(0);
 	(0, react.useEffect)(() => {
@@ -166,7 +157,6 @@ function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, de
 	});
 }
 //#endregion
-exports.SANKEY_CATEGORY_COLORS = SANKEY_CATEGORY_COLORS;
 exports.SankeyChart = SankeyChart;
 
 //# sourceMappingURL=sankey-chart.cjs.map