@epilot/spark-ui 0.10.0

package/dist/components/money-saved-block.cjs

@@ -0,0 +1,86 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_typography = require("./typography.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/money-saved-block.tsx
+const MoneySavedContainer = ({ children, ariaLabel = "Money saved today" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": ariaLabel,
+		className: "flex items-center justify-between gap-4",
+		children
+	});
+};
+const MoneySavedContent = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col gap-1",
+		children
+	});
+};
+const MoneySavedTitle = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children });
+};
+const MoneySavedValue = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.StateValue, { children });
+};
+const MoneySavedDelta = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-end gap-1 text-sm text-base-success-solid",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "rotate-180 text-[14px]",
+			name: "swap_vert"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "tabular-nums",
+			children
+		})]
+	});
+};
+const MoneySavedGaugeContainer = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "relative top-2 flex flex-col items-end gap-1",
+		children
+	});
+};
+const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption = "Autarky", gaugeWidth, gaugeHeight, gaugeArcPath, gaugeStrokeWidth }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			className: "h-[44px] w-[76px]",
+			viewBox: `0 0 ${gaugeWidth} ${gaugeHeight}`,
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: gaugeArcPath,
+				fill: "none",
+				stroke: "var(--neutral-a5)",
+				strokeWidth: gaugeStrokeWidth,
+				strokeLinecap: "round",
+				pathLength: 1
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: gaugeArcPath,
+				fill: "none",
+				stroke: "var(--green-a9)",
+				strokeWidth: gaugeStrokeWidth,
+				strokeLinecap: "round",
+				pathLength: 1,
+				strokeDasharray: `${autarkyProgress} 1`
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray",
+			children: autarkyLabel
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "mx-auto text-xs text-gray-light",
+			children: autarkyCaption
+		})
+	] });
+};
+//#endregion
+exports.MoneySavedContainer = MoneySavedContainer;
+exports.MoneySavedContent = MoneySavedContent;
+exports.MoneySavedDelta = MoneySavedDelta;
+exports.MoneySavedGaugeContainer = MoneySavedGaugeContainer;
+exports.MoneySavedGaugeContent = MoneySavedGaugeContent;
+exports.MoneySavedTitle = MoneySavedTitle;
+exports.MoneySavedValue = MoneySavedValue;
+
+//# sourceMappingURL=money-saved-block.cjs.map

package/dist/components/money-saved-block.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;CACE,CAAA;AAET;AAEA,MAAM,qBAAqB,EAAE,eAA8C;CACzE,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC7D;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,SAAuB,CAAA;AAC/C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,SAAqB,CAAA;AAC3C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;EAAa,CAAA,GACrE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;EAAe,CAAA,CAC3C;;AAEV;AAEA,MAAM,4BAA4B,EAChC,eAGI;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;CACJ,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;GACb,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;GACrC,CAAA,CACE;;EACL,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;EAAqB,CAAA;CACxE,EAAA,CAAA;AAEN"}

package/dist/components/money-saved-block.d.cts

@@ -0,0 +1,55 @@
+"use client";
+
+//#region src/components/money-saved-block.d.ts
+declare const MoneySavedContainer: ({
+  children,
+  ariaLabel
+}: {
+  children: React.ReactNode; /** Override the accessible label for the container. Defaults to `"Money saved today"`. */
+  ariaLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedContent: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedTitle: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedValue: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedDelta: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedGaugeContainer: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedGaugeContent: ({
+  autarkyProgress,
+  autarkyLabel,
+  autarkyCaption,
+  gaugeWidth,
+  gaugeHeight,
+  gaugeArcPath,
+  gaugeStrokeWidth
+}: {
+  autarkyProgress: number;
+  autarkyLabel: string; /** Override the caption shown beneath the gauge. Defaults to `"Autarky"`. */
+  autarkyCaption?: React.ReactNode;
+  gaugeWidth: number;
+  gaugeHeight: number;
+  gaugeArcPath: string;
+  gaugeStrokeWidth: number;
+}) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MoneySavedContainer, MoneySavedContent, MoneySavedDelta, MoneySavedGaugeContainer, MoneySavedGaugeContent, MoneySavedTitle, MoneySavedValue };
+//# sourceMappingURL=money-saved-block.d.cts.map

package/dist/components/money-saved-block.d.ts

@@ -0,0 +1,55 @@
+"use client";
+
+//#region src/components/money-saved-block.d.ts
+declare const MoneySavedContainer: ({
+  children,
+  ariaLabel
+}: {
+  children: React.ReactNode; /** Override the accessible label for the container. Defaults to `"Money saved today"`. */
+  ariaLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedContent: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedTitle: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedValue: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedDelta: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedGaugeContainer: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const MoneySavedGaugeContent: ({
+  autarkyProgress,
+  autarkyLabel,
+  autarkyCaption,
+  gaugeWidth,
+  gaugeHeight,
+  gaugeArcPath,
+  gaugeStrokeWidth
+}: {
+  autarkyProgress: number;
+  autarkyLabel: string; /** Override the caption shown beneath the gauge. Defaults to `"Autarky"`. */
+  autarkyCaption?: React.ReactNode;
+  gaugeWidth: number;
+  gaugeHeight: number;
+  gaugeArcPath: string;
+  gaugeStrokeWidth: number;
+}) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MoneySavedContainer, MoneySavedContent, MoneySavedDelta, MoneySavedGaugeContainer, MoneySavedGaugeContent, MoneySavedTitle, MoneySavedValue };
+//# sourceMappingURL=money-saved-block.d.ts.map

package/dist/components/money-saved-block.js

@@ -0,0 +1,79 @@
+"use client";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { SectionTitle, StateValue } from "./typography.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/money-saved-block.tsx
+const MoneySavedContainer = ({ children, ariaLabel = "Money saved today" }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": ariaLabel,
+		className: "flex items-center justify-between gap-4",
+		children
+	});
+};
+const MoneySavedContent = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1",
+		children
+	});
+};
+const MoneySavedTitle = ({ children }) => {
+	return /* @__PURE__ */ jsx(SectionTitle, { children });
+};
+const MoneySavedValue = ({ children }) => {
+	return /* @__PURE__ */ jsx(StateValue, { children });
+};
+const MoneySavedDelta = ({ children }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-end gap-1 text-sm text-base-success-solid",
+		children: [/* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "rotate-180 text-[14px]",
+			name: "swap_vert"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children
+		})]
+	});
+};
+const MoneySavedGaugeContainer = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative top-2 flex flex-col items-end gap-1",
+		children
+	});
+};
+const MoneySavedGaugeContent = ({ autarkyProgress, autarkyLabel, autarkyCaption = "Autarky", gaugeWidth, gaugeHeight, gaugeArcPath, gaugeStrokeWidth }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("svg", {
+			className: "h-[44px] w-[76px]",
+			viewBox: `0 0 ${gaugeWidth} ${gaugeHeight}`,
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: gaugeArcPath,
+				fill: "none",
+				stroke: "var(--neutral-a5)",
+				strokeWidth: gaugeStrokeWidth,
+				strokeLinecap: "round",
+				pathLength: 1
+			}), /* @__PURE__ */ jsx("path", {
+				d: gaugeArcPath,
+				fill: "none",
+				stroke: "var(--green-a9)",
+				strokeWidth: gaugeStrokeWidth,
+				strokeLinecap: "round",
+				pathLength: 1,
+				strokeDasharray: `${autarkyProgress} 1`
+			})]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray",
+			children: autarkyLabel
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "mx-auto text-xs text-gray-light",
+			children: autarkyCaption
+		})
+	] });
+};
+//#endregion
+export { MoneySavedContainer, MoneySavedContent, MoneySavedDelta, MoneySavedGaugeContainer, MoneySavedGaugeContent, MoneySavedTitle, MoneySavedValue };
+
+//# sourceMappingURL=money-saved-block.js.map

package/dist/components/money-saved-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-saved-block.js","names":[],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;CACJ,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;CACE,CAAA;AAET;AAEA,MAAM,qBAAqB,EAAE,eAA8C;CACzE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC7D;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,oBAAC,cAAD,EAAe,SAAuB,CAAA;AAC/C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,oBAAC,YAAD,EAAa,SAAqB,CAAA;AAC3C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,gBAAD;GAAgB,WAAU;GAAyB,MAAK;EAAa,CAAA,GACrE,oBAAC,QAAD;GAAM,WAAU;GAAgB;EAAe,CAAA,CAC3C;;AAEV;AAEA,MAAM,4BAA4B,EAChC,eAGI;CACJ,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;CACJ,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;GACb,CAAA,GACD,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;GACrC,CAAA,CACE;;EACL,oBAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;EACN,oBAAC,QAAD;GAAM,WAAU;aAAmC;EAAqB,CAAA;CACxE,EAAA,CAAA;AAEN"}

package/dist/components/number-flow.cjs

@@ -0,0 +1,44 @@
+"use client";
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+require("../utils/chars.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _number_flow_react = require("@number-flow/react");
+_number_flow_react = require_chunk.__toESM(_number_flow_react);
+//#region src/components/number-flow.tsx
+function subscribeToDocumentLang(onChange) {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["lang"]
+	});
+	return () => observer.disconnect();
+}
+function getDocumentLang() {
+	return typeof document === "undefined" ? void 0 : document.documentElement.lang || void 0;
+}
+function useDocumentLang() {
+	return (0, react.useSyncExternalStore)(subscribeToDocumentLang, getDocumentLang, () => void 0);
+}
+function withTrailingSeparator(suffix) {
+	if (!suffix || /^\s/.test(suffix)) return suffix;
+	return ` ${suffix}`;
+}
+function withLeadingSeparator(prefix) {
+	if (!prefix || /\s$/.test(prefix)) return prefix;
+	return `${prefix} `;
+}
+function NumberFlow({ locales, prefix, suffix, ...props }) {
+	const documentLang = useDocumentLang();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_number_flow_react.default, {
+		locales: locales ?? documentLang,
+		prefix: withLeadingSeparator(prefix),
+		suffix: withTrailingSeparator(suffix),
+		...props
+	});
+}
+//#endregion
+module.exports = NumberFlow;
+
+//# sourceMappingURL=number-flow.cjs.map

package/dist/components/number-flow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-flow.cjs","names":["BaseNumberFlow"],"sources":["../../src/components/number-flow.tsx"],"sourcesContent":["import BaseNumberFlow, { type NumberFlowProps } from '@number-flow/react'\nimport { useSyncExternalStore } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\n\nfunction subscribeToDocumentLang(onChange: () => void) {\n  if (typeof document === 'undefined') return () => {}\n  const observer = new MutationObserver(onChange)\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['lang'],\n  })\n  return () => observer.disconnect()\n}\n\nfunction getDocumentLang() {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nfunction useDocumentLang() {\n  return useSyncExternalStore(\n    subscribeToDocumentLang,\n    getDocumentLang,\n    () => undefined,\n  )\n}\n\nfunction withTrailingSeparator(suffix?: string) {\n  if (!suffix || /^\\s/.test(suffix)) return suffix\n  return `${NARROW_NBSP}${suffix}`\n}\n\nfunction withLeadingSeparator(prefix?: string) {\n  if (!prefix || /\\s$/.test(prefix)) return prefix\n  return `${prefix}${NARROW_NBSP}`\n}\n\nexport default function NumberFlow({\n  locales,\n  prefix,\n  suffix,\n  ...props\n}: NumberFlowProps) {\n  const documentLang = useDocumentLang()\n  return (\n    <BaseNumberFlow\n      locales={locales ?? documentLang}\n      prefix={withLeadingSeparator(prefix)}\n      suffix={withTrailingSeparator(suffix)}\n      {...props}\n    />\n  )\n}\n\nexport type { Format, NumberFlowProps } from '@number-flow/react'\n"],"mappings":";;;;;;;;AAIA,SAAS,wBAAwB,UAAsB;CACrD,IAAI,OAAO,aAAa,aAAa,aAAa,CAAC;CACnD,MAAM,WAAW,IAAI,iBAAiB,QAAQ;CAC9C,SAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,MAAM;CAC1B,CAAC;CACD,aAAa,SAAS,WAAW;AACnC;AAEA,SAAS,kBAAkB;CACzB,OAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;AACvC;AAEA,SAAS,kBAAkB;CACzB,QAAA,GAAA,MAAA,sBACE,yBACA,uBACM,KAAA,CACR;AACF;AAEA,SAAS,sBAAsB,QAAiB;CAC9C,IAAI,CAAC,UAAU,MAAM,KAAK,MAAM,GAAG,OAAO;CAC1C,OAAO,IAAiB;AAC1B;AAEA,SAAS,qBAAqB,QAAiB;CAC7C,IAAI,CAAC,UAAU,MAAM,KAAK,MAAM,GAAG,OAAO;CAC1C,OAAO,GAAG;AACZ;AAEA,SAAwB,WAAW,EACjC,SACA,QACA,QACA,GAAG,SACe;CAClB,MAAM,eAAe,gBAAgB;CACrC,OACE,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,SAAD;EACE,SAAS,WAAW;EACpB,QAAQ,qBAAqB,MAAM;EACnC,QAAQ,sBAAsB,MAAM;EACpC,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,4 @@
+"use client";
+
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.cjs";
+export { type Format, type NumberFlowProps, NumberFlow as default };

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

@@ -0,0 +1,4 @@
+"use client";
+
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.js";
+export { type Format, type NumberFlowProps, NumberFlow as default };

package/dist/components/number-flow.js

@@ -0,0 +1,42 @@
+"use client";
+import "../utils/chars.js";
+import { useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import BaseNumberFlow from "@number-flow/react";
+//#region src/components/number-flow.tsx
+function subscribeToDocumentLang(onChange) {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["lang"]
+	});
+	return () => observer.disconnect();
+}
+function getDocumentLang() {
+	return typeof document === "undefined" ? void 0 : document.documentElement.lang || void 0;
+}
+function useDocumentLang() {
+	return useSyncExternalStore(subscribeToDocumentLang, getDocumentLang, () => void 0);
+}
+function withTrailingSeparator(suffix) {
+	if (!suffix || /^\s/.test(suffix)) return suffix;
+	return ` ${suffix}`;
+}
+function withLeadingSeparator(prefix) {
+	if (!prefix || /\s$/.test(prefix)) return prefix;
+	return `${prefix} `;
+}
+function NumberFlow({ locales, prefix, suffix, ...props }) {
+	const documentLang = useDocumentLang();
+	return /* @__PURE__ */ jsx(BaseNumberFlow, {
+		locales: locales ?? documentLang,
+		prefix: withLeadingSeparator(prefix),
+		suffix: withTrailingSeparator(suffix),
+		...props
+	});
+}
+//#endregion
+export { NumberFlow as default };
+
+//# sourceMappingURL=number-flow.js.map

package/dist/components/number-flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-flow.js","names":[],"sources":["../../src/components/number-flow.tsx"],"sourcesContent":["import BaseNumberFlow, { type NumberFlowProps } from '@number-flow/react'\nimport { useSyncExternalStore } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\n\nfunction subscribeToDocumentLang(onChange: () => void) {\n  if (typeof document === 'undefined') return () => {}\n  const observer = new MutationObserver(onChange)\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['lang'],\n  })\n  return () => observer.disconnect()\n}\n\nfunction getDocumentLang() {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nfunction useDocumentLang() {\n  return useSyncExternalStore(\n    subscribeToDocumentLang,\n    getDocumentLang,\n    () => undefined,\n  )\n}\n\nfunction withTrailingSeparator(suffix?: string) {\n  if (!suffix || /^\\s/.test(suffix)) return suffix\n  return `${NARROW_NBSP}${suffix}`\n}\n\nfunction withLeadingSeparator(prefix?: string) {\n  if (!prefix || /\\s$/.test(prefix)) return prefix\n  return `${prefix}${NARROW_NBSP}`\n}\n\nexport default function NumberFlow({\n  locales,\n  prefix,\n  suffix,\n  ...props\n}: NumberFlowProps) {\n  const documentLang = useDocumentLang()\n  return (\n    <BaseNumberFlow\n      locales={locales ?? documentLang}\n      prefix={withLeadingSeparator(prefix)}\n      suffix={withTrailingSeparator(suffix)}\n      {...props}\n    />\n  )\n}\n\nexport type { Format, NumberFlowProps } from '@number-flow/react'\n"],"mappings":";;;;;;AAIA,SAAS,wBAAwB,UAAsB;CACrD,IAAI,OAAO,aAAa,aAAa,aAAa,CAAC;CACnD,MAAM,WAAW,IAAI,iBAAiB,QAAQ;CAC9C,SAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,MAAM;CAC1B,CAAC;CACD,aAAa,SAAS,WAAW;AACnC;AAEA,SAAS,kBAAkB;CACzB,OAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;AACvC;AAEA,SAAS,kBAAkB;CACzB,OAAO,qBACL,yBACA,uBACM,KAAA,CACR;AACF;AAEA,SAAS,sBAAsB,QAAiB;CAC9C,IAAI,CAAC,UAAU,MAAM,KAAK,MAAM,GAAG,OAAO;CAC1C,OAAO,IAAiB;AAC1B;AAEA,SAAS,qBAAqB,QAAiB;CAC7C,IAAI,CAAC,UAAU,MAAM,KAAK,MAAM,GAAG,OAAO;CAC1C,OAAO,GAAG;AACZ;AAEA,SAAwB,WAAW,EACjC,SACA,QACA,QACA,GAAG,SACe;CAClB,MAAM,eAAe,gBAAgB;CACrC,OACE,oBAAC,gBAAD;EACE,SAAS,WAAW;EACpB,QAAQ,qBAAqB,MAAM;EACnC,QAAQ,sBAAsB,MAAM;EACpC,GAAI;CACL,CAAA;AAEL"}

package/dist/components/on-off-button.cjs

@@ -0,0 +1,35 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/components/on-off-button.tsx
+function OnOffButton({ disabled, isOn, onClick, className }) {
+	const handleClick = (event) => {
+		event.stopPropagation();
+		onClick();
+	};
+	const onOfButtonClassName = (0, class_variance_authority.cva)("focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60", { variants: { isOn: {
+		true: "bg-base-success-soft text-success hover:bg-base-success-soft/80",
+		false: "border border-gray text-gray-light hover:bg-base-gray-soft"
+	} } });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": isOn ? "Turn off" : "Turn on",
+		"aria-pressed": isOn,
+		className: onOfButtonClassName({
+			isOn,
+			className
+		}),
+		disabled,
+		onClick: handleClick,
+		type: "button",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "block text-[16px]! leading-none",
+			name: "power_settings_new"
+		})
+	});
+}
+//#endregion
+exports.OnOffButton = OnOffButton;
+
+//# sourceMappingURL=on-off-button.cjs.map

package/dist/components/on-off-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-off-button.cjs","names":["MaterialSymbol"],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"power_settings_new\"\n      />\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAEA,MAAM,uBAAA,GAAA,yBAAA,KACJ,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF,EACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;EAAU,CAAC;EACxC;EACV,SAAS;EACT,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACK,CAAA;AAEZ"}

package/dist/components/on-off-button.d.cts

@@ -0,0 +1,18 @@
+"use client";
+
+//#region src/components/on-off-button.d.ts
+interface OnOffButtonProps {
+  isOn: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+declare function OnOffButton({
+  disabled,
+  isOn,
+  onClick,
+  className
+}: OnOffButtonProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { OnOffButton };
+//# sourceMappingURL=on-off-button.d.cts.map

package/dist/components/on-off-button.d.ts

@@ -0,0 +1,18 @@
+"use client";
+
+//#region src/components/on-off-button.d.ts
+interface OnOffButtonProps {
+  isOn: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+declare function OnOffButton({
+  disabled,
+  isOn,
+  onClick,
+  className
+}: OnOffButtonProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { OnOffButton };
+//# sourceMappingURL=on-off-button.d.ts.map

package/dist/components/on-off-button.js

@@ -0,0 +1,34 @@
+"use client";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/on-off-button.tsx
+function OnOffButton({ disabled, isOn, onClick, className }) {
+	const handleClick = (event) => {
+		event.stopPropagation();
+		onClick();
+	};
+	const onOfButtonClassName = cva("focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60", { variants: { isOn: {
+		true: "bg-base-success-soft text-success hover:bg-base-success-soft/80",
+		false: "border border-gray text-gray-light hover:bg-base-gray-soft"
+	} } });
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isOn ? "Turn off" : "Turn on",
+		"aria-pressed": isOn,
+		className: onOfButtonClassName({
+			isOn,
+			className
+		}),
+		disabled,
+		onClick: handleClick,
+		type: "button",
+		children: /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "block text-[16px]! leading-none",
+			name: "power_settings_new"
+		})
+	});
+}
+//#endregion
+export { OnOffButton };
+
+//# sourceMappingURL=on-off-button.js.map

package/dist/components/on-off-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-off-button.js","names":[],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"power_settings_new\"\n      />\n    </button>\n  )\n}\n"],"mappings":";;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAEA,MAAM,sBAAsB,IAC1B,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF,EACF,CACF;CAEA,OACE,oBAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;EAAU,CAAC;EACxC;EACV,SAAS;EACT,MAAK;YAEL,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACK,CAAA;AAEZ"}

package/dist/components/onboarding-layout.cjs

@@ -0,0 +1,67 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/onboarding-layout.tsx
+const OnboardingLayout = ({ 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
+	});
+};
+/**
+* Top section: typically wraps the title row, optional description, and a
+* progress bar.
+*/
+const OnboardingLayoutHeader = ({ 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
+	});
+};
+/** Text-only group inside the header (title row + description). */
+const OnboardingLayoutHeading = ({ 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
+	});
+};
+/** Row that holds the title on the left and (optionally) a step badge on the right. */
+const OnboardingLayoutTitleRow = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-between", className),
+		...rest
+	});
+};
+const OnboardingLayoutTitle = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+		className: (0, cnfast.cn)("text-lg font-bold text-gray", className),
+		...rest
+	});
+};
+const OnboardingLayoutDescription = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: (0, cnfast.cn)("text-sm text-gray-light", className),
+		...rest
+	});
+};
+/**
+* Bottom action row. Use with `justify-between`-aware children — typically a
+* back action on the left and a cancel/primary action on the right.
+*/
+const OnboardingLayoutFooter = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center justify-between", className),
+		...rest
+	});
+};
+//#endregion
+exports.OnboardingLayout = OnboardingLayout;
+exports.OnboardingLayoutDescription = OnboardingLayoutDescription;
+exports.OnboardingLayoutFooter = OnboardingLayoutFooter;
+exports.OnboardingLayoutHeader = OnboardingLayoutHeader;
+exports.OnboardingLayoutHeading = OnboardingLayoutHeading;
+exports.OnboardingLayoutTitle = OnboardingLayoutTitle;
+exports.OnboardingLayoutTitleRow = OnboardingLayoutTitleRow;
+
+//# sourceMappingURL=onboarding-layout.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-layout.cjs","names":[],"sources":["../../src/components/onboarding-layout.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst OnboardingLayout = ({\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)*6)]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Top section: typically wraps the title row, optional description, and a\n * progress bar.\n */\nconst OnboardingLayoutHeader = ({\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\n/** Text-only group inside the header (title row + description). */\nconst OnboardingLayoutHeading = ({\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\n/** Row that holds the title on the left and (optionally) a step badge on the right. */\nconst OnboardingLayoutTitleRow = ({\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 OnboardingLayoutTitle = ({\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 OnboardingLayoutDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<'p'>) => {\n  return <p className={cn('text-sm text-gray-light', className)} {...rest} />\n}\n\n/**\n * Bottom action row. Use with `justify-between`-aware children — typically a\n * back action on the left and a cancel/primary action on the right.\n */\nconst OnboardingLayoutFooter = ({\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  OnboardingLayout,\n  OnboardingLayoutHeader,\n  OnboardingLayoutHeading,\n  OnboardingLayoutTitleRow,\n  OnboardingLayoutTitle,\n  OnboardingLayoutDescription,\n  OnboardingLayoutFooter,\n}\n"],"mappings":";;;;;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,4DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,2BAA2B,EAC/B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,yBAAyB,EAC7B,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,+BAA+B,EACnC,WACA,GAAG,WAC4B;CAC/B,OAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;;;;;AAMA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}