@epilot/spark-ui 0.11.1 → 0.12.1

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["React"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  containerChrome,\n  containerInteractiveClasses,\n  containerPaddingX,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype CardRadius = ContainerRadius\n\nconst cardVariants = cva('relative flex w-full flex-col gap-1 py-3', {\n  variants: {\n    variant: {\n      ambient: cn(containerChrome.ambient, containerPaddingX.ambient),\n      soft: cn(containerChrome.soft, containerPaddingX.soft),\n      surface: cn(containerChrome.surface, containerPaddingX.surface),\n      outline: cn(containerChrome.outline, containerPaddingX.outline),\n      ghost: cn(containerChrome.ghost, containerPaddingX.ghost),\n      solid: cn(containerChrome.solid, containerPaddingX.solid),\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `2xl`, today's fixed behaviour. */\n  radius?: CardRadius\n  /**\n   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, radius = '2xl', render, ...props }, ref) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          radiusClasses[radius],\n          interactive && containerInteractiveClasses(resolved),\n          className,\n        ),\n        ref,\n        ...props,\n      },\n    })\n  },\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-2xl bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps, CardRadius }\n"],"mappings":";;;;;;;;AAeA,MAAM,eAAe,IAAI,4CAA4C;CACnE,UAAU,EACR,SAAS;EACP,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,MAAM,GAAG,gBAAgB,MAAM,kBAAkB,IAAI;EACrD,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;EACxD,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;CAC1D,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAoBD,MAAM,OAAOA,QAAM,YAChB,EAAE,WAAW,SAAS,OAAO,SAAS,OAAO,QAAQ,GAAG,SAAS,QAAQ;CACxE,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,WAAW,GACT,aAAa,EAAE,QAAQ,CAAC,GACxB,cAAc,SACd,eAAe,4BAA4B,QAAQ,GACnD,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,QAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACE,WAAW,GACT,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACE,WAAW,GACT,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,QAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAW,GAAG,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,qBAAC,OAAD;CACE,WAAW,GACT,kFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}
+{"version":3,"file":"card.js","names":["React"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingX,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype CardRadius = ContainerRadius\n\nconst cardVariants = cva('relative flex w-full flex-col gap-1 py-3', {\n  variants: {\n    variant: {\n      ambient: cn(containerChrome.ambient, containerPaddingX.ambient),\n      soft: cn(containerChrome.soft, containerPaddingX.soft),\n      surface: cn(containerChrome.surface, containerPaddingX.surface),\n      outline: cn(containerChrome.outline, containerPaddingX.outline),\n      ghost: cn(containerChrome.ghost, containerPaddingX.ghost),\n      solid: cn(containerChrome.solid, containerPaddingX.solid),\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `2xl`, today's fixed behaviour. */\n  radius?: CardRadius\n  /**\n   * Lift the card off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n  /**\n   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant, color, radius = '2xl', elevated, render, ...props },\n    ref,\n  ) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n        ref,\n        ...props,\n      },\n    })\n  },\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-2xl bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps, CardRadius }\n"],"mappings":";;;;;;;;AAgBA,MAAM,eAAe,IAAI,4CAA4C;CACnE,UAAU,EACR,SAAS;EACP,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,MAAM,GAAG,gBAAgB,MAAM,kBAAkB,IAAI;EACrD,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;EACxD,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;CAC1D,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AA0BD,MAAM,OAAOA,QAAM,YAEf,EAAE,WAAW,SAAS,OAAO,SAAS,OAAO,UAAU,QAAQ,GAAG,SAClE,QACG;CACH,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,WAAW,GACT,aAAa,EAAE,QAAQ,CAAC,GACxB,cAAc,SACd,YAAA,kLACA,eAAe,4BAA4B,UAAU,QAAQ,GAC7D,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,QAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACE,WAAW,GACT,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACE,WAAW,GACT,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,QAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAW,GAAG,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,qBAAC,OAAD;CACE,WAAW,GACT,kFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}

package/dist/components/checkbox.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
 import * as React$1 from "react";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 

package/dist/components/checkbox.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
 import * as React$1 from "react";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 

package/dist/components/field.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkLabelPosition, i as SparkInputStyle, r as SparkInputColor } from "../theme-types-1yB0d8mp.cjs";
+import { a as SparkInputStyle, i as SparkInputColor, o as SparkLabelPosition } from "../theme-types-Bn5E15-P.cjs";
 import * as React$1 from "react";
 
 //#region src/components/field.d.ts

package/dist/components/field.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkLabelPosition, i as SparkInputStyle, r as SparkInputColor } from "../theme-types-1yB0d8mp.js";
+import { a as SparkInputStyle, i as SparkInputColor, o as SparkLabelPosition } from "../theme-types-Bn5E15-P.js";
 import * as React$1 from "react";
 
 //#region src/components/field.d.ts

package/dist/components/icon.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/icon.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { accentByColor } from "../lib/accent-colors.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx

package/dist/components/input-group.cjs

@@ -130,7 +130,7 @@ const inputGroupAddonVariants = (0, class_variance_authority.cva)("flex h-auto c
 });
 function InputGroupAddon({ className, align = "inline-start", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "group",
+		role: "presentation",
 		"data-slot": "input-group-addon",
 		"data-align": align,
 		className: (0, cnfast.cn)(inputGroupAddonVariants({ align }), className),

package/dist/components/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","names":["useFieldContext","useTheme","React","Input"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        data-slot=\"input\"\n        variant=\"none\"\n        className={cn('flex-1', className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,sBAAA,GAAA,yBAAA,KACJ,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,UAAU;GAClC,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAM;EACnD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAKA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQA,yBAAAA,gBAAgB;CAC9B,MAAM,QAAQC,yBAAAA,SAAS;CACvB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,YAAA,GAAA,OAAA,IACE,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;EAAW,CAAC,GACrD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;CAChB,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,UAAU;GAClB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;GACrD,MAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,kBAAkBC,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,OAAD;EACE,aAAU;EACV,SAAQ;EACR,YAAA,GAAA,OAAA,IAAc,UAAU,SAAS;EAC5B;EACL,GAAI;CACL,CAAA;AAEL,CACF"}
+{"version":3,"file":"input-group.cjs","names":["useFieldContext","useTheme","React","Input"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      // chrome, not a control: the click only forwards focus to the input the\n      // way a label would, and Tab already reaches that input directly\n      role=\"presentation\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        data-slot=\"input\"\n        variant=\"none\"\n        className={cn('flex-1', className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,sBAAA,GAAA,yBAAA,KACJ,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,UAAU;GAClC,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAM;EACnD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAKA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQA,yBAAAA,gBAAgB;CAC9B,MAAM,QAAQC,yBAAAA,SAAS;CACvB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,YAAA,GAAA,OAAA,IACE,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;EAAW,CAAC,GACrD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;CAChB,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAGE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,UAAU;GAClB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;GACrD,MAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,kBAAkBC,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,OAAD;EACE,aAAU;EACV,SAAQ;EACR,YAAA,GAAA,OAAA,IAAc,UAAU,SAAS;EAC5B;EACL,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/input-group.js

@@ -127,7 +127,7 @@ const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justif
 });
 function InputGroupAddon({ className, align = "inline-start", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		role: "group",
+		role: "presentation",
 		"data-slot": "input-group-addon",
 		"data-align": align,
 		className: cn(inputGroupAddonVariants({ align }), className),

package/dist/components/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":["React"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        data-slot=\"input\"\n        variant=\"none\"\n        className={cn('flex-1', className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,qBAAqB,IACzB,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,UAAU;GAClC,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAM;EACnD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAKA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAE5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;EAAW,CAAC,GACrD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;CAChB,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,UAAU;GAClB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;GACrD,MAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,kBAAkBA,QAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,SAAQ;EACR,WAAW,GAAG,UAAU,SAAS;EAC5B;EACL,GAAI;CACL,CAAA;AAEL,CACF"}
+{"version":3,"file":"input-group.js","names":["React"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      // chrome, not a control: the click only forwards focus to the input the\n      // way a label would, and Tab already reaches that input directly\n      role=\"presentation\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        data-slot=\"input\"\n        variant=\"none\"\n        className={cn('flex-1', className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,qBAAqB,IACzB,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,UAAU;GAClC,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAM;EACnD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAKA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAE5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;EAAW,CAAC,GACrD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;CAChB,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EAGE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,UAAU;GAClB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;GACrD,MAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,kBAAkBA,QAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,SAAQ;EACR,WAAW,GAAG,UAAU,SAAS;EAC5B;EACL,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/input.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.cjs";
+import { a as SparkInputStyle } from "../theme-types-Bn5E15-P.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-1yB0d8mp.js";
+import { a as SparkInputStyle } from "../theme-types-Bn5E15-P.js";
 import * as React$1 from "react";
 
 //#region src/components/input.d.ts

package/dist/components/line-chart.cjs

@@ -5,8 +5,8 @@ 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_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 const require_components_chart = require("./chart.cjs");
+const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/line-chart.js

@@ -1,11 +1,11 @@
 "use client";
 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 { buildTimeTicks } from "../utils/chart-time-ticks.js";
-import { cn } from "../utils/cn.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
+import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/list.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { n as SparkCardVariant, t as SparkCardColor } from "../theme-types-1yB0d8mp.cjs";
+import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-Bn5E15-P.cjs";
 import { ContainerRadius } from "../lib/container-chrome.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";

package/dist/components/list.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { n as SparkCardVariant, t as SparkCardColor } from "../theme-types-1yB0d8mp.js";
+import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-Bn5E15-P.js";
 import { ContainerRadius } from "../lib/container-chrome.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";

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?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "default" | "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?: "default" | "separator" | "border" | null | undefined;
+  variant?: "separator" | "default" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/pill.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,24 +17,31 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 	const clickable = !disabled && onClick !== void 0;
 	const removable = !disabled && onRemove !== void 0;
 	const focusable = clickable || removable;
+	const hasLook = styleVariant !== void 0 || color !== void 0;
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (clickable && (event.key === "Enter" || event.key === " ")) {
+			if (event.key === " ") event.preventDefault();
+			onClick?.(event);
+		}
+		if (removable && (event.key === "Delete" || event.key === "Backspace")) onRemove?.(event);
+	};
+	const interaction = {
+		onKeyDown: handleKeyDown,
+		...clickable && {
+			role: "button",
+			onClick
+		},
+		...focusable && { tabIndex: 0 }
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		"aria-disabled": disabled || void 0,
 		"aria-keyshortcuts": removable ? "Delete" : void 0,
 		"data-slot": "pill",
-		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-style": hasLook ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		onClick: clickable ? onClick : void 0,
-		onKeyDown: (event) => {
-			onKeyDown?.(event);
-			if (clickable && (event.key === "Enter" || event.key === " ")) {
-				if (event.key === " ") event.preventDefault();
-				onClick?.(event);
-			}
-			if (removable && (event.key === "Delete" || event.key === "Backspace")) onRemove?.(event);
-		},
+		...interaction,
 		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(--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", {

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(--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"}
+{"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  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(--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;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,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAjBN,CAmBG,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-1yB0d8mp.cjs";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.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-1yB0d8mp.js";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
 import { SparkAccentColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 

package/dist/components/pill.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { accentByColor } from "../lib/accent-colors.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pill.tsx
@@ -14,24 +14,31 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 	const clickable = !disabled && onClick !== void 0;
 	const removable = !disabled && onRemove !== void 0;
 	const focusable = clickable || removable;
+	const hasLook = styleVariant !== void 0 || color !== void 0;
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (clickable && (event.key === "Enter" || event.key === " ")) {
+			if (event.key === " ") event.preventDefault();
+			onClick?.(event);
+		}
+		if (removable && (event.key === "Delete" || event.key === "Backspace")) onRemove?.(event);
+	};
+	const interaction = {
+		onKeyDown: handleKeyDown,
+		...clickable && {
+			role: "button",
+			onClick
+		},
+		...focusable && { tabIndex: 0 }
+	};
 	return /* @__PURE__ */ jsxs("span", {
 		"aria-disabled": disabled || void 0,
 		"aria-keyshortcuts": removable ? "Delete" : void 0,
 		"data-slot": "pill",
-		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-style": hasLook ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? accentByColor[color] : void 0,
-		onClick: clickable ? onClick : void 0,
-		onKeyDown: (event) => {
-			onKeyDown?.(event);
-			if (clickable && (event.key === "Enter" || event.key === " ")) {
-				if (event.key === " ") event.preventDefault();
-				onClick?.(event);
-			}
-			if (removable && (event.key === "Delete" || event.key === "Backspace")) onRemove?.(event);
-		},
+		...interaction,
 		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(--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", {

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(--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"}
+{"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  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(--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;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,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAjBN,CAmBG,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

@@ -6,10 +6,10 @@ const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cj
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
-const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.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_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

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

@@ -1,14 +1,14 @@
 "use client";
 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 { buildTimeTicks } from "../utils/chart-time-ticks.js";
-import { cn } from "../utils/cn.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
+import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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-9 transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) 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-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(--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"}

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-9 transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) 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-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(--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"}