@epilot/spark-ui 0.19.0 → 0.20.0

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