@epilot/spark-ui 0.19.0 → 0.20.1

package/dist/components/stepper.d.ts

@@ -22,10 +22,10 @@ interface StepperProps {
   commitDelayMs?: number;
   /** Accessible label, e.g. "Sunshare percentage". */
   'aria-label'?: string;
-  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
-  decreaseLabel?: string;
-  /** Accessible label for the increment button. Defaults to `"Increase"`. */
-  increaseLabel?: string;
+  /** Accessible label for the decrement button. */
+  decreaseLabel: string;
+  /** Accessible label for the increment button. */
+  increaseLabel: string;
 }
 declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/stepper.js

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
-const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel = "Decrease", increaseLabel = "Increase" }, ref) => {
+const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel, increaseLabel }, ref) => {
 	const commitTimerRef = React$1.useRef(null);
 	React$1.useEffect(() => () => {
 		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);

package/dist/components/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":["React"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronLeft className=\"[--spark-icon-size:16px]\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronRight className=\"[--spark-icon-size:16px]\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;AA6BA,MAAM,UAAUA,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,IACF;CAEA,QAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,SACF;YAPF;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,CAAA;GACR,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"stepper.js","names":["React"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. */\n  decreaseLabel: string\n  /** Accessible label for the increment button. */\n  increaseLabel: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel,\n      increaseLabel,\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronLeft className=\"[--spark-icon-size:16px]\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronRight className=\"[--spark-icon-size:16px]\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;AA6BA,MAAM,UAAUA,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,eACA,iBAEF,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,IACF;CAEA,QAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,SACF;YAPF;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,CAAA;GACR,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/dist/components/textarea.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/components/tooltip.cjs

@@ -62,7 +62,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	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": ariaLabel ?? label,
-			className: "focus-visible:ring-primary touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Info, { className: "text-sm!" })

package/dist/components/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","Info"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport { Info } from '@epilot/spark-icons'\nimport * as React from 'react'\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 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-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <Info className=\"text-sm!\" />\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;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,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,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,MAAD,EAAM,WAAU,WAAY,CAAA;CACd,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","Info"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport { Info } from '@epilot/spark-icons'\nimport * as React from 'react'\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 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-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <Info className=\"text-sm!\" />\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;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,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,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,MAAD,EAAM,WAAU,WAAY,CAAA;CACd,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/tooltip.js

@@ -59,7 +59,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
 			"aria-label": ariaLabel ?? label,
-			className: "focus-visible:ring-primary touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ jsx(Info, { className: "text-sm!" })

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 { Info } from '@epilot/spark-icons'\nimport * as React from 'react'\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 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-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <Info className=\"text-sm!\" />\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;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,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,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;CACd,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport { Info } from '@epilot/spark-icons'\nimport * as React from 'react'\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 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-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"touch-target inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <Info className=\"text-sm!\" />\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;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,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,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;CACd,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/typography.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/typography.tsx
-const PowerValue = ({ "aria-label": ariaLabel = "Live power draw reported by the device", ...props }) => {
+const PowerValue = ({ "aria-label": ariaLabel, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 		className: "text-3xl font-bold text-gray tabular-nums",
 		"aria-label": ariaLabel,

package/dist/components/typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.cjs","names":[],"sources":["../../src/components/typography.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst PowerValue = ({\n  'aria-label': ariaLabel = 'Live power draw reported by the device',\n  ...props\n}: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className=\"text-3xl font-bold text-gray tabular-nums\"\n      aria-label={ariaLabel}\n      {...props}\n    />\n  )\n}\n\nconst PageTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className={cn('text-xl font-bold wrap-break-word', className)}\n      {...props}\n    />\n  )\n}\n\nconst SectionTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h3 className={cn('text-base font-bold text-gray', className)} {...props} />\n  )\n}\n\nconst SectionDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...props} />\n}\n\nconst SectionSubtitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h3'>) => {\n  return (\n    <h4\n      className={cn(\n        'text-sm font-bold tracking-wider text-gray-light uppercase',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst StateValue = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xl font-black tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PowerValue,\n  PageTitle,\n  SectionTitle,\n  SectionDescription,\n  SectionSubtitle,\n  StateValue,\n}\n"],"mappings":";;;;;AAEA,MAAM,cAAc,EAClB,cAAc,YAAY,0CAC1B,GAAG,YAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;CAC/B,OAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IACE,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"typography.cjs","names":[],"sources":["../../src/components/typography.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\ntype PowerValueProps = Omit<React.ComponentProps<'h2'>, 'aria-label'> & {\n  'aria-label': string\n}\n\nconst PowerValue = ({ 'aria-label': ariaLabel, ...props }: PowerValueProps) => {\n  return (\n    <h2\n      className=\"text-3xl font-bold text-gray tabular-nums\"\n      aria-label={ariaLabel}\n      {...props}\n    />\n  )\n}\n\nconst PageTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className={cn('text-xl font-bold wrap-break-word', className)}\n      {...props}\n    />\n  )\n}\n\nconst SectionTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h3 className={cn('text-base font-bold text-gray', className)} {...props} />\n  )\n}\n\nconst SectionDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...props} />\n}\n\nconst SectionSubtitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h3'>) => {\n  return (\n    <h4\n      className={cn(\n        'text-sm font-bold tracking-wider text-gray-light uppercase',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst StateValue = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xl font-black tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PowerValue,\n  PageTitle,\n  SectionTitle,\n  SectionDescription,\n  SectionSubtitle,\n  StateValue,\n}\n"],"mappings":";;;;;AAMA,MAAM,cAAc,EAAE,cAAc,WAAW,GAAG,YAA6B;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;CAC/B,OAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IACE,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/typography.d.cts

@@ -1,10 +1,13 @@
 "use client";
 
 //#region src/components/typography.d.ts
+type PowerValueProps = Omit<React.ComponentProps<'h2'>, 'aria-label'> & {
+  'aria-label': string;
+};
 declare const PowerValue: ({
   "aria-label": ariaLabel,
   ...props
-}: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+}: PowerValueProps) => import("react/jsx-runtime").JSX.Element;
 declare const PageTitle: ({
   className,
   ...props

package/dist/components/typography.d.ts

@@ -1,10 +1,13 @@
 "use client";
 
 //#region src/components/typography.d.ts
+type PowerValueProps = Omit<React.ComponentProps<'h2'>, 'aria-label'> & {
+  'aria-label': string;
+};
 declare const PowerValue: ({
   "aria-label": ariaLabel,
   ...props
-}: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+}: PowerValueProps) => import("react/jsx-runtime").JSX.Element;
 declare const PageTitle: ({
   className,
   ...props

package/dist/components/typography.js

@@ -2,7 +2,7 @@
 import { cn } from "../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/typography.tsx
-const PowerValue = ({ "aria-label": ariaLabel = "Live power draw reported by the device", ...props }) => {
+const PowerValue = ({ "aria-label": ariaLabel, ...props }) => {
 	return /* @__PURE__ */ jsx("h2", {
 		className: "text-3xl font-bold text-gray tabular-nums",
 		"aria-label": ariaLabel,

package/dist/components/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":[],"sources":["../../src/components/typography.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst PowerValue = ({\n  'aria-label': ariaLabel = 'Live power draw reported by the device',\n  ...props\n}: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className=\"text-3xl font-bold text-gray tabular-nums\"\n      aria-label={ariaLabel}\n      {...props}\n    />\n  )\n}\n\nconst PageTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className={cn('text-xl font-bold wrap-break-word', className)}\n      {...props}\n    />\n  )\n}\n\nconst SectionTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h3 className={cn('text-base font-bold text-gray', className)} {...props} />\n  )\n}\n\nconst SectionDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...props} />\n}\n\nconst SectionSubtitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h3'>) => {\n  return (\n    <h4\n      className={cn(\n        'text-sm font-bold tracking-wider text-gray-light uppercase',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst StateValue = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xl font-black tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PowerValue,\n  PageTitle,\n  SectionTitle,\n  SectionDescription,\n  SectionSubtitle,\n  StateValue,\n}\n"],"mappings":";;;;AAEA,MAAM,cAAc,EAClB,cAAc,YAAY,0CAC1B,GAAG,YAC6B;CAChC,OACE,oBAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;CACzE,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;CAC5E,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;CAC/B,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;CAChC,OACE,oBAAC,MAAD;EACE,WAAW,GACT,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;CAC5E,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"typography.js","names":[],"sources":["../../src/components/typography.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\ntype PowerValueProps = Omit<React.ComponentProps<'h2'>, 'aria-label'> & {\n  'aria-label': string\n}\n\nconst PowerValue = ({ 'aria-label': ariaLabel, ...props }: PowerValueProps) => {\n  return (\n    <h2\n      className=\"text-3xl font-bold text-gray tabular-nums\"\n      aria-label={ariaLabel}\n      {...props}\n    />\n  )\n}\n\nconst PageTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h2\n      className={cn('text-xl font-bold wrap-break-word', className)}\n      {...props}\n    />\n  )\n}\n\nconst SectionTitle = ({ className, ...props }: React.ComponentProps<'h2'>) => {\n  return (\n    <h3 className={cn('text-base font-bold text-gray', className)} {...props} />\n  )\n}\n\nconst SectionDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...props} />\n}\n\nconst SectionSubtitle = ({\n  className,\n  ...props\n}: React.ComponentProps<'h3'>) => {\n  return (\n    <h4\n      className={cn(\n        'text-sm font-bold tracking-wider text-gray-light uppercase',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst StateValue = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xl font-black tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PowerValue,\n  PageTitle,\n  SectionTitle,\n  SectionDescription,\n  SectionSubtitle,\n  StateValue,\n}\n"],"mappings":";;;;AAMA,MAAM,cAAc,EAAE,cAAc,WAAW,GAAG,YAA6B;CAC7E,OACE,oBAAC,MAAD;EACE,WAAU;EACV,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,aAAa,EAAE,WAAW,GAAG,YAAwC;CACzE,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAwC;CAC5E,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAC4B;CAC/B,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,YAC6B;CAChC,OACE,oBAAC,MAAD;EACE,WAAW,GACT,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA0C;CAC5E,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/wizard-layout.cjs

@@ -0,0 +1,57 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/wizard-layout.tsx
+const WizardLayout = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*6)]", className),
+		...rest
+	});
+};
+const WizardLayoutHeader = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*3)] pt-4", className),
+		...rest
+	});
+};
+const WizardLayoutHeading = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*1)]", className),
+		...rest
+	});
+};
+const WizardLayoutTitleRow = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-between", className),
+		...rest
+	});
+};
+const WizardLayoutTitle = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		className: (0, cnfast.cn)("text-lg font-bold text-gray", className),
+		...rest
+	});
+};
+const WizardLayoutDescription = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: (0, cnfast.cn)("text-sm text-gray-light", className),
+		...rest
+	});
+};
+const WizardLayoutFooter = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-between", className),
+		...rest
+	});
+};
+//#endregion
+exports.WizardLayout = WizardLayout;
+exports.WizardLayoutDescription = WizardLayoutDescription;
+exports.WizardLayoutFooter = WizardLayoutFooter;
+exports.WizardLayoutHeader = WizardLayoutHeader;
+exports.WizardLayoutHeading = WizardLayoutHeading;
+exports.WizardLayoutTitle = WizardLayoutTitle;
+exports.WizardLayoutTitleRow = WizardLayoutTitleRow;
+
+//# sourceMappingURL=wizard-layout.cjs.map

package/dist/components/wizard-layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-layout.cjs","names":[],"sources":["../../src/components/wizard-layout.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst WizardLayout = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*6)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*3)] pt-4',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*1)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutTitleRow = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between', className)}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'h2'>) => {\n  return (\n    <h2 className={cn('text-lg font-bold text-gray', className)} {...rest} />\n  )\n}\n\nconst WizardLayoutDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...rest} />\n}\n\nconst WizardLayoutFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between', className)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  WizardLayout,\n  WizardLayoutHeader,\n  WizardLayoutHeading,\n  WizardLayoutTitleRow,\n  WizardLayoutTitle,\n  WizardLayoutDescription,\n  WizardLayoutFooter,\n}\n"],"mappings":";;;;;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,4DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,wBAAwB,EAC5B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE5E;AAEA,MAAM,2BAA2B,EAC/B,WACA,GAAG,WAC4B;CAC/B,OAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/wizard-layout.d.cts

@@ -0,0 +1,34 @@
+"use client";
+
+//#region src/components/wizard-layout.d.ts
+declare const WizardLayout: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutHeader: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutHeading: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutTitleRow: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutTitle: ({
+  className,
+  ...rest
+}: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutDescription: ({
+  className,
+  ...rest
+}: React.ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutFooter: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { WizardLayout, WizardLayoutDescription, WizardLayoutFooter, WizardLayoutHeader, WizardLayoutHeading, WizardLayoutTitle, WizardLayoutTitleRow };
+//# sourceMappingURL=wizard-layout.d.cts.map

package/dist/components/wizard-layout.d.ts

@@ -0,0 +1,34 @@
+"use client";
+
+//#region src/components/wizard-layout.d.ts
+declare const WizardLayout: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutHeader: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutHeading: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutTitleRow: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutTitle: ({
+  className,
+  ...rest
+}: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutDescription: ({
+  className,
+  ...rest
+}: React.ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+declare const WizardLayoutFooter: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { WizardLayout, WizardLayoutDescription, WizardLayoutFooter, WizardLayoutHeader, WizardLayoutHeading, WizardLayoutTitle, WizardLayoutTitleRow };
+//# sourceMappingURL=wizard-layout.d.ts.map

package/dist/components/wizard-layout.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/wizard-layout.tsx
+const WizardLayout = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*6)]", className),
+		...rest
+	});
+};
+const WizardLayoutHeader = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*3)] pt-4", className),
+		...rest
+	});
+};
+const WizardLayoutHeading = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*1)]", className),
+		...rest
+	});
+};
+const WizardLayoutTitleRow = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-between", className),
+		...rest
+	});
+};
+const WizardLayoutTitle = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("h2", {
+		className: cn("text-lg font-bold text-gray", className),
+		...rest
+	});
+};
+const WizardLayoutDescription = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm text-gray-light", className),
+		...rest
+	});
+};
+const WizardLayoutFooter = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-between", className),
+		...rest
+	});
+};
+//#endregion
+export { WizardLayout, WizardLayoutDescription, WizardLayoutFooter, WizardLayoutHeader, WizardLayoutHeading, WizardLayoutTitle, WizardLayoutTitleRow };
+
+//# sourceMappingURL=wizard-layout.js.map

package/dist/components/wizard-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-layout.js","names":[],"sources":["../../src/components/wizard-layout.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst WizardLayout = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*6)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*3)] pt-4',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-[calc(var(--spark-layout-gap)*1)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutTitleRow = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between', className)}\n      {...rest}\n    />\n  )\n}\n\nconst WizardLayoutTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'h2'>) => {\n  return (\n    <h2 className={cn('text-lg font-bold text-gray', className)} {...rest} />\n  )\n}\n\nconst WizardLayoutDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...rest} />\n}\n\nconst WizardLayoutFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between', className)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  WizardLayout,\n  WizardLayoutHeader,\n  WizardLayoutHeading,\n  WizardLayoutTitleRow,\n  WizardLayoutTitle,\n  WizardLayoutDescription,\n  WizardLayoutFooter,\n}\n"],"mappings":";;;;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,4DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,wBAAwB,EAC5B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC6B;CAChC,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE5E;AAEA,MAAM,2BAA2B,EAC/B,WACA,GAAG,WAC4B;CAC/B,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}

package/dist/lib/accent-colors.cjs

@@ -3,10 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/lib/accent-colors.ts
 const accentByColor = {
 	accent: void 0,
+	primary: void 0,
 	neutral: "gray",
 	success: "green",
 	warning: "orange",
-	danger: "red"
+	danger: "red",
+	destructive: "red",
+	error: "red"
 };
 //#endregion
 exports.accentByColor = accentByColor;

package/dist/lib/accent-colors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accent-colors.cjs","names":[],"sources":["../../src/lib/accent-colors.ts"],"sourcesContent":["export type SparkAccentColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\nexport const accentByColor: Record<\n  SparkAccentColor,\n  'gray' | 'red' | 'green' | 'orange' | undefined\n> = {\n  accent: undefined,\n  neutral: 'gray',\n  success: 'green',\n  warning: 'orange',\n  danger: 'red',\n}\n"],"mappings":";;;AAOA,MAAa,gBAGT;CACF,QAAQ,KAAA;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV"}
+{"version":3,"file":"accent-colors.cjs","names":[],"sources":["../../src/lib/accent-colors.ts"],"sourcesContent":["export type SparkAccentColor =\n  | 'accent'\n  | 'primary'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'destructive'\n  | 'error'\n\nexport const accentByColor: Record<\n  SparkAccentColor,\n  'gray' | 'red' | 'green' | 'orange' | undefined\n> = {\n  accent: undefined,\n  primary: undefined,\n  neutral: 'gray',\n  success: 'green',\n  warning: 'orange',\n  danger: 'red',\n  destructive: 'red',\n  error: 'red',\n}\n"],"mappings":";;;AAUA,MAAa,gBAGT;CACF,QAAQ,KAAA;CACR,SAAS,KAAA;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,aAAa;CACb,OAAO;AACT"}

package/dist/lib/accent-colors.d.cts

@@ -1,7 +1,7 @@
 "use client";
 
 //#region src/lib/accent-colors.d.ts
-type SparkAccentColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+type SparkAccentColor = 'accent' | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'destructive' | 'error';
 declare const accentByColor: Record<SparkAccentColor, 'gray' | 'red' | 'green' | 'orange' | undefined>;
 //#endregion
 export { SparkAccentColor, accentByColor };

package/dist/lib/accent-colors.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 //#region src/lib/accent-colors.d.ts
-type SparkAccentColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+type SparkAccentColor = 'accent' | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'destructive' | 'error';
 declare const accentByColor: Record<SparkAccentColor, 'gray' | 'red' | 'green' | 'orange' | undefined>;
 //#endregion
 export { SparkAccentColor, accentByColor };

package/dist/lib/accent-colors.js

@@ -2,10 +2,13 @@
 //#region src/lib/accent-colors.ts
 const accentByColor = {
 	accent: void 0,
+	primary: void 0,
 	neutral: "gray",
 	success: "green",
 	warning: "orange",
-	danger: "red"
+	danger: "red",
+	destructive: "red",
+	error: "red"
 };
 //#endregion
 export { accentByColor };

package/dist/lib/accent-colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"accent-colors.js","names":[],"sources":["../../src/lib/accent-colors.ts"],"sourcesContent":["export type SparkAccentColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\nexport const accentByColor: Record<\n  SparkAccentColor,\n  'gray' | 'red' | 'green' | 'orange' | undefined\n> = {\n  accent: undefined,\n  neutral: 'gray',\n  success: 'green',\n  warning: 'orange',\n  danger: 'red',\n}\n"],"mappings":";;AAOA,MAAa,gBAGT;CACF,QAAQ,KAAA;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV"}
+{"version":3,"file":"accent-colors.js","names":[],"sources":["../../src/lib/accent-colors.ts"],"sourcesContent":["export type SparkAccentColor =\n  | 'accent'\n  | 'primary'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'destructive'\n  | 'error'\n\nexport const accentByColor: Record<\n  SparkAccentColor,\n  'gray' | 'red' | 'green' | 'orange' | undefined\n> = {\n  accent: undefined,\n  primary: undefined,\n  neutral: 'gray',\n  success: 'green',\n  warning: 'orange',\n  danger: 'red',\n  destructive: 'red',\n  error: 'red',\n}\n"],"mappings":";;AAUA,MAAa,gBAGT;CACF,QAAQ,KAAA;CACR,SAAS,KAAA;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,aAAa;CACb,OAAO;AACT"}

package/dist/lib/accent-theme.cjs

@@ -400,8 +400,8 @@ function readableContrast(step9Hex, native, min) {
 	return all[allRatios.indexOf(Math.max(...allRatios))];
 }
 const RED_A4 = {
-	light: "#ff25002a",
-	dark: "#ff00005a"
+	light: "#ff000824",
+	dark: "#fe0a3b44"
 };
 /**
 * The hover tints a static `--neutral-placeholder` must clear (field.tsx): gray