@epilot/spark-ui 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/components/theme.js

@@ -1,4 +1,4 @@
 "use client";
 "use client";
-import { n as useTheme, t as Theme } from "../theme-B3WtiByA.js";
+import { n as useTheme, t as Theme } from "../theme-8PDO9E0S.js";
 export { Theme, useTheme };

package/dist/components/time-picker.cjs

@@ -16,7 +16,7 @@ const TimePicker = react.forwardRef(({ "aria-label": ariaLabel, className, disab
 		disabled,
 		onChange: (event) => onValueChange(event.target.value),
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
+		className: (0, cnfast.cn)("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
 	});
 });
 TimePicker.displayName = "TimePicker";

package/dist/components/time-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;;;;AAeA,MAAM,aAAaA,MAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,4OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,0BAA0B,UAAU;YAAvD,CACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}
+{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;;;;AAeA,MAAM,aAAaA,MAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,8OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,0BAA0B,UAAU;YAAvD,CACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}

package/dist/components/time-picker.js

@@ -13,7 +13,7 @@ const TimePicker = React$1.forwardRef(({ "aria-label": ariaLabel, className, dis
 		disabled,
 		onChange: (event) => onValueChange(event.target.value),
 		"aria-label": ariaLabel,
-		className: cn("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
+		className: cn("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
 	});
 });
 TimePicker.displayName = "TimePicker";

package/dist/components/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;AAeA,MAAM,aAAaA,QAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,oBAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,WAAW,GACT,4OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;YAAvD,CACE,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}
+{"version":3,"file":"time-picker.js","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;AAeA,MAAM,aAAaA,QAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,oBAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,WAAW,GACT,8OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;YAAvD,CACE,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}

package/dist/components/tooltip.cjs

@@ -52,7 +52,7 @@ const InfoTooltip = ({ content, label }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			"aria-label": `About ${label}`,
-			className: "focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {

package/dist/components/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/components/tooltip.js

@@ -49,7 +49,7 @@ const InfoTooltip = ({ content, label }) => {
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
 			"aria-label": `About ${label}`,
-			className: "focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ jsx(MaterialSymbol, {

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/hooks/use-reduced-motion.cjs

@@ -0,0 +1,22 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+//#region src/hooks/use-reduced-motion.ts
+const QUERY = "(prefers-reduced-motion: reduce)";
+function getQuery() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
+}
+function subscribe(onChange) {
+	const query = getQuery();
+	if (!query) return () => {};
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function useReducedMotion() {
+	return (0, react.useSyncExternalStore)(subscribe, () => getQuery()?.matches ?? false, () => false);
+}
+//#endregion
+exports.useReducedMotion = useReducedMotion;
+
+//# sourceMappingURL=use-reduced-motion.cjs.map

package/dist/hooks/use-reduced-motion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.cjs","names":[],"sources":["../../src/hooks/use-reduced-motion.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\nconst QUERY = '(prefers-reduced-motion: reduce)'\n\nfunction getQuery() {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n    ? window.matchMedia(QUERY)\n    : null\n}\n\nfunction subscribe(onChange: () => void) {\n  const query = getQuery()\n  if (!query) return () => {}\n  query.addEventListener('change', onChange)\n  return () => query.removeEventListener('change', onChange)\n}\n\nfunction useReducedMotion() {\n  return useSyncExternalStore(\n    subscribe,\n    () => getQuery()?.matches ?? false,\n    () => false,\n  )\n}\n\nexport { useReducedMotion }\n"],"mappings":";;;;;AAEA,MAAM,QAAQ;AAEd,SAAS,WAAW;AAClB,QAAO,OAAO,WAAW,eACvB,OAAO,OAAO,eAAe,aAC3B,OAAO,WAAW,MAAM,GACxB;;AAGN,SAAS,UAAU,UAAsB;CACvC,MAAM,QAAQ,UAAU;AACxB,KAAI,CAAC,MAAO,cAAa;AACzB,OAAM,iBAAiB,UAAU,SAAS;AAC1C,cAAa,MAAM,oBAAoB,UAAU,SAAS;;AAG5D,SAAS,mBAAmB;AAC1B,SAAA,GAAA,MAAA,sBACE,iBACM,UAAU,EAAE,WAAW,aACvB,MACP"}

package/dist/hooks/use-reduced-motion.d.cts

@@ -0,0 +1,7 @@
+"use client";
+
+//#region src/hooks/use-reduced-motion.d.ts
+declare function useReducedMotion(): boolean;
+//#endregion
+export { useReducedMotion };
+//# sourceMappingURL=use-reduced-motion.d.cts.map

package/dist/hooks/use-reduced-motion.d.ts

@@ -0,0 +1,7 @@
+"use client";
+
+//#region src/hooks/use-reduced-motion.d.ts
+declare function useReducedMotion(): boolean;
+//#endregion
+export { useReducedMotion };
+//# sourceMappingURL=use-reduced-motion.d.ts.map

package/dist/hooks/use-reduced-motion.js

@@ -0,0 +1,20 @@
+"use client";
+import { useSyncExternalStore } from "react";
+//#region src/hooks/use-reduced-motion.ts
+const QUERY = "(prefers-reduced-motion: reduce)";
+function getQuery() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
+}
+function subscribe(onChange) {
+	const query = getQuery();
+	if (!query) return () => {};
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function useReducedMotion() {
+	return useSyncExternalStore(subscribe, () => getQuery()?.matches ?? false, () => false);
+}
+//#endregion
+export { useReducedMotion };
+
+//# sourceMappingURL=use-reduced-motion.js.map

package/dist/hooks/use-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.js","names":[],"sources":["../../src/hooks/use-reduced-motion.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\nconst QUERY = '(prefers-reduced-motion: reduce)'\n\nfunction getQuery() {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n    ? window.matchMedia(QUERY)\n    : null\n}\n\nfunction subscribe(onChange: () => void) {\n  const query = getQuery()\n  if (!query) return () => {}\n  query.addEventListener('change', onChange)\n  return () => query.removeEventListener('change', onChange)\n}\n\nfunction useReducedMotion() {\n  return useSyncExternalStore(\n    subscribe,\n    () => getQuery()?.matches ?? false,\n    () => false,\n  )\n}\n\nexport { useReducedMotion }\n"],"mappings":";;;AAEA,MAAM,QAAQ;AAEd,SAAS,WAAW;AAClB,QAAO,OAAO,WAAW,eACvB,OAAO,OAAO,eAAe,aAC3B,OAAO,WAAW,MAAM,GACxB;;AAGN,SAAS,UAAU,UAAsB;CACvC,MAAM,QAAQ,UAAU;AACxB,KAAI,CAAC,MAAO,cAAa;AACzB,OAAM,iBAAiB,UAAU,SAAS;AAC1C,cAAa,MAAM,oBAAoB,UAAU,SAAS;;AAG5D,SAAS,mBAAmB;AAC1B,QAAO,qBACL,iBACM,UAAU,EAAE,WAAW,aACvB,MACP"}

package/dist/{input-box-variants-Dr1K7uYE.js → input-box-variants-DcajYXvo.js}

@@ -25,4 +25,4 @@ const boxChrome = {
 //#endregion
 export { boxChrome as n, GHOST_UNDERLINE as t };
 
-//# sourceMappingURL=input-box-variants-Dr1K7uYE.js.map
+//# sourceMappingURL=input-box-variants-DcajYXvo.js.map

package/dist/{input-box-variants-Dr1K7uYE.js.map → input-box-variants-DcajYXvo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants-Dr1K7uYE.js","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,uFACD;EACD,MAAM,GACJ,WACA,6EACD;EACF;CACD,SAAS;EACP,OAAO,GACL,UACA,oGACD;EACD,MAAM,GACJ,UACA,iGACD;EACF;CACD,UAAU;EACR,OAAO,GACL,UACA,6EACD;EACD,MAAM,GACJ,UACA,4EACD;EACF;CACD,OAAO;EACL,OAAO,GAAG,iBAAiB,iBAAiB;EAC5C,MAAM,GAAG,iBAAiB,sBAAsB;EACjD;CACF"}
+{"version":3,"file":"input-box-variants-DcajYXvo.js","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,uFACD;EACD,MAAM,GACJ,WACA,6EACD;EACF;CACD,SAAS;EACP,OAAO,GACL,UACA,oGACD;EACD,MAAM,GACJ,UACA,iGACD;EACF;CACD,UAAU;EACR,OAAO,GACL,UACA,6EACD;EACD,MAAM,GACJ,UACA,4EACD;EACF;CACD,OAAO;EACL,OAAO,GAAG,iBAAiB,iBAAiB;EAC5C,MAAM,GAAG,iBAAiB,sBAAsB;EACjD;CACF"}

package/dist/{input-box-variants-BMDdwvqg.cjs → input-box-variants-ZCtgs-1S.cjs}

@@ -37,4 +37,4 @@ Object.defineProperty(exports, "boxChrome", {
 	}
 });
 
-//# sourceMappingURL=input-box-variants-BMDdwvqg.cjs.map
+//# sourceMappingURL=input-box-variants-ZCtgs-1S.cjs.map

package/dist/{input-box-variants-BMDdwvqg.cjs.map → input-box-variants-ZCtgs-1S.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants-BMDdwvqg.cjs","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,OAAA,IACE,WACA,uFACD;EACD,OAAA,GAAA,OAAA,IACE,WACA,6EACD;EACF;CACD,SAAS;EACP,QAAA,GAAA,OAAA,IACE,UACA,oGACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,iGACD;EACF;CACD,UAAU;EACR,QAAA,GAAA,OAAA,IACE,UACA,6EACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,4EACD;EACF;CACD,OAAO;EACL,QAAA,GAAA,OAAA,IAAU,iBAAiB,iBAAiB;EAC5C,OAAA,GAAA,OAAA,IAAS,iBAAiB,sBAAsB;EACjD;CACF"}
+{"version":3,"file":"input-box-variants-ZCtgs-1S.cjs","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,OAAA,IACE,WACA,uFACD;EACD,OAAA,GAAA,OAAA,IACE,WACA,6EACD;EACF;CACD,SAAS;EACP,QAAA,GAAA,OAAA,IACE,UACA,oGACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,iGACD;EACF;CACD,UAAU;EACR,QAAA,GAAA,OAAA,IACE,UACA,6EACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,4EACD;EACF;CACD,OAAO;EACL,QAAA,GAAA,OAAA,IAAU,iBAAiB,iBAAiB;EAC5C,OAAA,GAAA,OAAA,IAAS,iBAAiB,sBAAsB;EACjD;CACF"}

package/dist/{number-flow-DSbucQ_K.d.ts → number-flow-D9zsxH0-.d.ts}

@@ -12,4 +12,4 @@ declare function NumberFlow({
 }: NumberFlowProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
-//# sourceMappingURL=number-flow-DSbucQ_K.d.ts.map
+//# sourceMappingURL=number-flow-D9zsxH0-.d.ts.map

package/dist/styles/index.css

@@ -4,6 +4,9 @@
 @import '@radix-ui/colors/red.css' layer(base);
 @import '@radix-ui/colors/orange.css' layer(base);
 @import '@radix-ui/colors/pink.css' layer(base);
+@import '@radix-ui/colors/cyan.css' layer(base);
+@import '@radix-ui/colors/tomato.css' layer(base);
+@import '@radix-ui/colors/amber.css' layer(base);
 
 /* Solid Light Alpha */
 @import '@radix-ui/colors/green-alpha.css' layer(base);
@@ -11,6 +14,9 @@
 @import '@radix-ui/colors/red-alpha.css' layer(base);
 @import '@radix-ui/colors/orange-alpha.css' layer(base);
 @import '@radix-ui/colors/pink-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-alpha.css' layer(base);
 
 /* Solid Dark */
 @import '@radix-ui/colors/green-dark.css' layer(base);
@@ -18,6 +24,9 @@
 @import '@radix-ui/colors/red-dark.css' layer(base);
 @import '@radix-ui/colors/orange-dark.css' layer(base);
 @import '@radix-ui/colors/pink-dark.css' layer(base);
+@import '@radix-ui/colors/cyan-dark.css' layer(base);
+@import '@radix-ui/colors/tomato-dark.css' layer(base);
+@import '@radix-ui/colors/amber-dark.css' layer(base);
 
 /* Solid Dark Alpha */
 @import '@radix-ui/colors/green-dark-alpha.css' layer(base);
@@ -25,6 +34,9 @@
 @import '@radix-ui/colors/red-dark-alpha.css' layer(base);
 @import '@radix-ui/colors/orange-dark-alpha.css' layer(base);
 @import '@radix-ui/colors/pink-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-dark-alpha.css' layer(base);
 
 /* Grays Light */
 @import '@radix-ui/colors/gray.css' layer(base);
@@ -74,6 +86,33 @@
 /* Tailwind animate plugin */
 @import 'tw-animate-css';
 
+/*
+ * Portal parity: ECP ships a contrast-fixed light green-a11 (opaque, darker
+ * than Radix stock #00713fde) for readable success-light text. Declared here
+ * (after the imports, directly in layer base) -- inside spark-default.css it
+ * would land in the nested base.base sub-layer and lose to Radix's direct
+ * base rules (a layer's direct rules act as its implicit final sub-layer).
+ */
+@layer base {
+  /* :where(:not(...)) keeps a dark root on the Radix dark value: a bare :root
+     here would beat the earlier .dark import at equal specificity */
+  :root:where(:not(.dark, .dark-theme)),
+  .light,
+  .light-theme {
+    --green-a11: #06784c;
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root:where(:not(.dark, .dark-theme)),
+      .light,
+      .light-theme {
+        --green-a11: color(display-p3 0.21 0.46 0.31);
+      }
+    }
+  }
+}
+
 /* Hit area utilities — Kian Bazarjani <https://bazza.dev> */
 @utility hit-area-debug {
   position: relative;

package/dist/styles/spark-default.css

@@ -51,9 +51,20 @@
     --red-contrast: #fff;
     --red-on-solid: #fff;
     --red-surface: var(--red-2);
+    --green-contrast: #fff;
+    --green-on-solid: #fff;
+    --green-surface: var(--green-2);
+    --orange-contrast: #fff;
+    --orange-on-solid: #fff;
+    --orange-surface: var(--orange-2);
     --neutral-contrast: var(--neutral-12);
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
+
+    /* theme.css maps --color-{white,black}-contrast to these; Radix's alpha
+       scales don't define them (portal parity: ECP's generator used #fff). */
+    --white-contrast: #ffffff;
+    --black-contrast: #ffffff;
   }
 
   @supports (color: color(display-p3 1 1 1)) {
@@ -99,12 +110,12 @@
 
   .dark,
   .dark-theme {
-    --spark-1: #07121f;
-    --spark-2: #0b1929;
-    --spark-3: #002650;
-    --spark-4: #002f6f;
-    --spark-5: #003b83;
-    --spark-6: #004996;
+    --spark-1: #000;
+    --spark-2: #051222;
+    --spark-3: #00234c;
+    --spark-4: #002d6d;
+    --spark-5: #003a82;
+    --spark-6: #004895;
     --spark-7: #0058ae;
     --spark-8: #0069cf;
     --spark-9: #005eb4;
@@ -112,29 +123,35 @@
     --spark-11: #71b8ff;
     --spark-12: #c5e4ff;
 
-    --spark-a1: #0025ff0d;
-    --spark-a2: #0066fd18;
-    --spark-a3: #0062ff42;
-    --spark-a4: #005efd64;
-    --spark-a5: #0069fd7a;
-    --spark-a6: #0075ff8e;
-    --spark-a7: #007dffa8;
-    --spark-a8: #007ffecc;
-    --spark-a9: #0082ffae;
-    --spark-a10: #007cfe96;
+    --spark-a1: #00000000;
+    --spark-a2: #2687ff22;
+    --spark-a3: #0076ff4c;
+    --spark-a4: #006aff6d;
+    --spark-a5: #0072ff82;
+    --spark-a6: #007cff95;
+    --spark-a7: #0081ffae;
+    --spark-a8: #0081ffcf;
+    --spark-a9: #0085ffb4;
+    --spark-a10: #0082ff9d;
     --spark-a11: #71b8ff;
     --spark-a12: #c5e4ff;
 
     --spark-contrast: #fff;
     --spark-on-solid: #fff;
-    --spark-surface: #06213f80;
-    --spark-background: #111113;
+    --spark-surface: #0a244480;
+    --spark-background: #000;
     --spark-indicator: #005eb4;
     --spark-track: #005eb4;
 
     --red-contrast: #fff;
     --red-on-solid: #fff;
     --red-surface: var(--red-2);
+    --green-contrast: #fff;
+    --green-on-solid: #fff;
+    --green-surface: var(--green-2);
+    --orange-contrast: #fff;
+    --orange-on-solid: #fff;
+    --orange-surface: var(--orange-2);
     --neutral-contrast: var(--neutral-12);
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
@@ -144,36 +161,36 @@
     @media (color-gamut: p3) {
       .dark,
       .dark-theme {
-        --spark-1: oklch(17.9% 0.0326 254.2);
-        --spark-2: oklch(20.9% 0.0382 254.2);
-        --spark-3: oklch(27.2% 0.0872 254.2);
-        --spark-4: oklch(31.7% 0.126 254.2);
-        --spark-5: oklch(36.4% 0.1378 254.2);
-        --spark-6: oklch(41.2% 0.144 254.2);
-        --spark-7: oklch(46.8% 0.1556 254.2);
-        --spark-8: oklch(53% 0.1789 254.2);
+        --spark-1: oklch(0% 0.0326 254.2);
+        --spark-2: oklch(18% 0.0382 254.2);
+        --spark-3: oklch(25.8% 0.0872 254.2);
+        --spark-4: oklch(30.9% 0.126 254.2);
+        --spark-5: oklch(35.9% 0.1378 254.2);
+        --spark-6: oklch(41% 0.144 254.2);
+        --spark-7: oklch(46.6% 0.1556 254.2);
+        --spark-8: oklch(52.9% 0.1789 254.2);
         --spark-9: oklch(48.6% 0.1556 254.2);
         --spark-10: oklch(43.5% 0.144 254.2);
         --spark-11: oklch(77.1% 0.1674 254.2);
         --spark-12: oklch(90.8% 0.0614 254.2);
 
-        --spark-a1: color(display-p3 0 0.1529 0.9961 / 0.047);
-        --spark-a2: color(display-p3 0 0.4196 1 / 0.089);
-        --spark-a3: color(display-p3 0 0.3882 1 / 0.246);
-        --spark-a4: color(display-p3 0.0588 0.3725 1 / 0.373);
-        --spark-a5: color(display-p3 0.1137 0.4235 1 / 0.454);
-        --spark-a6: color(display-p3 0.149 0.4706 1 / 0.534);
-        --spark-a7: color(display-p3 0.1882 0.502 1 / 0.632);
-        --spark-a8: color(display-p3 0.2039 0.5059 1 / 0.767);
-        --spark-a9: color(display-p3 0.1961 0.5137 0.9961 / 0.657);
-        --spark-a10: color(display-p3 0.1725 0.498 1 / 0.564);
-        --spark-a11: color(display-p3 0.5176 0.7333 1 / 0.975);
-        --spark-a12: color(display-p3 0.8039 0.902 1 / 0.988);
+        --spark-a1: color(display-p3 0 0 0 / 0);
+        --spark-a2: color(display-p3 0.2431 0.5451 0.9961 / 0.13);
+        --spark-a3: color(display-p3 0.1373 0.4667 1 / 0.287);
+        --spark-a4: color(display-p3 0.1451 0.4196 1 / 0.412);
+        --spark-a5: color(display-p3 0.1686 0.4588 1 / 0.491);
+        --spark-a6: color(display-p3 0.1961 0.4941 1 / 0.565);
+        --spark-a7: color(display-p3 0.2157 0.5176 1 / 0.659);
+        --spark-a8: color(display-p3 0.2196 0.5137 1 / 0.785);
+        --spark-a9: color(display-p3 0.2235 0.5294 1 / 0.683);
+        --spark-a10: color(display-p3 0.2118 0.5216 1 / 0.597);
+        --spark-a11: color(display-p3 0.5176 0.7294 1 / 0.977);
+        --spark-a12: color(display-p3 0.8039 0.902 1 / 0.989);
 
         --spark-contrast: #fff;
         --spark-on-solid: #fff;
-        --spark-surface: color(display-p3 0.0431 0.1176 0.2353 / 0.5);
-        --spark-background: #111113;
+        --spark-surface: color(display-p3 0.0627 0.1412 0.2588 / 0.5);
+        --spark-background: #000;
         --spark-indicator: oklch(48.6% 0.1556 254.2);
         --spark-track: oklch(48.6% 0.1556 254.2);
       }
@@ -604,6 +621,72 @@
     --spark-track: var(--red-9);
   }
 
+  [data-accent-color='green'],
+  :where([data-accent-color='green'] .spark-theme) {
+    --spark-1: var(--green-1);
+    --spark-2: var(--green-2);
+    --spark-3: var(--green-3);
+    --spark-4: var(--green-4);
+    --spark-5: var(--green-5);
+    --spark-6: var(--green-6);
+    --spark-7: var(--green-7);
+    --spark-8: var(--green-8);
+    --spark-9: var(--green-9);
+    --spark-10: var(--green-10);
+    --spark-11: var(--green-11);
+    --spark-12: var(--green-12);
+    --spark-a1: var(--green-a1);
+    --spark-a2: var(--green-a2);
+    --spark-a3: var(--green-a3);
+    --spark-a4: var(--green-a4);
+    --spark-a5: var(--green-a5);
+    --spark-a6: var(--green-a6);
+    --spark-a7: var(--green-a7);
+    --spark-a8: var(--green-a8);
+    --spark-a9: var(--green-a9);
+    --spark-a10: var(--green-a10);
+    --spark-a11: var(--green-a11);
+    --spark-a12: var(--green-a12);
+    --spark-contrast: var(--green-contrast);
+    --spark-on-solid: var(--green-on-solid);
+    --spark-surface: var(--green-surface);
+    --spark-indicator: var(--green-9);
+    --spark-track: var(--green-9);
+  }
+
+  [data-accent-color='orange'],
+  :where([data-accent-color='orange'] .spark-theme) {
+    --spark-1: var(--orange-1);
+    --spark-2: var(--orange-2);
+    --spark-3: var(--orange-3);
+    --spark-4: var(--orange-4);
+    --spark-5: var(--orange-5);
+    --spark-6: var(--orange-6);
+    --spark-7: var(--orange-7);
+    --spark-8: var(--orange-8);
+    --spark-9: var(--orange-9);
+    --spark-10: var(--orange-10);
+    --spark-11: var(--orange-11);
+    --spark-12: var(--orange-12);
+    --spark-a1: var(--orange-a1);
+    --spark-a2: var(--orange-a2);
+    --spark-a3: var(--orange-a3);
+    --spark-a4: var(--orange-a4);
+    --spark-a5: var(--orange-a5);
+    --spark-a6: var(--orange-a6);
+    --spark-a7: var(--orange-a7);
+    --spark-a8: var(--orange-a8);
+    --spark-a9: var(--orange-a9);
+    --spark-a10: var(--orange-a10);
+    --spark-a11: var(--orange-a11);
+    --spark-a12: var(--orange-a12);
+    --spark-contrast: var(--orange-contrast);
+    --spark-on-solid: var(--orange-on-solid);
+    --spark-surface: var(--orange-surface);
+    --spark-indicator: var(--orange-9);
+    --spark-track: var(--orange-9);
+  }
+
   /*
    * Card container chrome — a CONTAINER-only knob (contract §11). Everything here
    * writes only --spark-card-* / --spark-card-c-*, tokens read EXCLUSIVELY by <Card>;