tempest-react-sdk 0.24.0 → 0.26.0

package/dist/components/RefreshIndicator/RefreshIndicator.js

@@ -9,13 +9,13 @@ function s(e, t) {
 	return Math.min(e / 2, n);
 }
 function c({ onRefresh: c, children: l, threshold: u = 80, disabled: d, className: f }) {
-	let p = r(null), m = r(null), [h, g] = i(0), [_, v] = i(!1), y = m.current !== null, b = (e) => {
+	let p = r(null), m = r(null), [h, g] = i(0), [_, v] = i(!1), [y, b] = i(!1), x = (e) => {
 		if (d || _) return;
 		let t = p.current;
 		if (!t || t.scrollTop > 0) return;
 		let n = e.touches[0];
-		n && (m.current = n.clientY);
-	}, x = (e) => {
+		n && (m.current = n.clientY, b(!0));
+	}, S = (e) => {
 		if (d || _) return;
 		let t = m.current;
 		if (t === null) return;
@@ -27,37 +27,37 @@ function c({ onRefresh: c, children: l, threshold: u = 80, disabled: d, classNam
 			return;
 		}
 		g(s(r, u));
-	}, S = () => {
-		m.current = null, g(0);
-	}, C = async () => {
+	}, C = () => {
+		m.current = null, b(!1), g(0);
+	}, w = async () => {
 		if (d || _) {
-			S();
+			C();
 			return;
 		}
 		if (!(m.current !== null && h >= u)) {
-			S();
+			C();
 			return;
 		}
-		m.current = null, v(!0), g(u);
+		m.current = null, b(!1), v(!0), g(u);
 		try {
 			await c();
 		} finally {
 			v(!1), g(0);
 		}
-	}, w = _ || h > 0, T = Math.min(1, h / u);
+	}, T = _ || h > 0, E = Math.min(1, h / u);
 	return /* @__PURE__ */ o("div", {
 		ref: p,
 		className: e(n.wrapper, f),
 		"data-refreshing": _,
-		onTouchStart: b,
-		onTouchMove: x,
-		onTouchEnd: C,
+		onTouchStart: x,
+		onTouchMove: S,
+		onTouchEnd: w,
 		children: [/* @__PURE__ */ a("div", {
 			className: n.indicator,
-			"aria-hidden": !w,
+			"aria-hidden": !T,
 			style: {
-				opacity: _ ? 1 : T,
-				transform: `translateX(-50%) translateY(${w ? h : 0}px) rotate(${T * 360}deg)`
+				opacity: _ ? 1 : E,
+				transform: `translateX(-50%) translateY(${T ? h : 0}px) rotate(${E * 360}deg)`
 			},
 			children: /* @__PURE__ */ a(t, {
 				size: "sm",
@@ -65,7 +65,7 @@ function c({ onRefresh: c, children: l, threshold: u = 80, disabled: d, classNam
 			})
 		}), /* @__PURE__ */ a("div", {
 			className: e(n.content, (y || _) && n.dragging),
-			style: { transform: `translateY(${w ? h : 0}px)` },
+			style: { transform: `translateY(${T ? h : 0}px)` },
 			children: l
 		})]
 	});

package/dist/components/RefreshIndicator/RefreshIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshIndicator.js","names":[],"sources":["../../../src/components/RefreshIndicator/RefreshIndicator.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode, type TouchEvent } from \"react\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./RefreshIndicator.module.css\";\n\nexport interface RefreshIndicatorProps {\n    /** Invoked when the user pulls past `threshold` and releases. May be async. */\n    onRefresh: () => void | Promise<void>;\n    /** Scrollable content to wrap. */\n    children: ReactNode;\n    /** Pixels the user must pull past to trigger a refresh. Defaults to `80`. */\n    threshold?: number;\n    /** When true, pull-to-refresh is inert. */\n    disabled?: boolean;\n    className?: string;\n}\n\n/** Apply resistance so the content lags behind the finger and the pull never runs away. */\nfunction applyResistance(distance: number, threshold: number): number {\n    const cap = threshold * 1.5;\n    return Math.min(distance / 2, cap);\n}\n\n/**\n * RefreshIndicator — pull-to-refresh wrapper for touch devices.\n *\n * Wraps scrollable `children` and listens for a downward drag that starts while the\n * container is scrolled to the top. Pulling past `threshold` and releasing triggers\n * `onRefresh`; the SDK {@link Spinner} is shown while pulling and during the refresh.\n */\nexport function RefreshIndicator({\n    onRefresh,\n    children,\n    threshold = 80,\n    disabled,\n    className,\n}: RefreshIndicatorProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const startYRef = useRef<number | null>(null);\n    const [pull, setPull] = useState(0);\n    const [refreshing, setRefreshing] = useState(false);\n\n    const engaged = startYRef.current !== null;\n\n    const handleTouchStart = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const container = containerRef.current;\n        if (!container || container.scrollTop > 0) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        startYRef.current = touch.clientY;\n    };\n\n    const handleTouchMove = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const startY = startYRef.current;\n        if (startY === null) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        const delta = touch.clientY - startY;\n        if (delta <= 0) {\n            setPull(0);\n            return;\n        }\n        setPull(applyResistance(delta, threshold));\n    };\n\n    const reset = (): void => {\n        startYRef.current = null;\n        setPull(0);\n    };\n\n    const handleTouchEnd = async (): Promise<void> => {\n        if (disabled || refreshing) {\n            reset();\n            return;\n        }\n        const startY = startYRef.current;\n        const triggered = startY !== null && pull >= threshold;\n        if (!triggered) {\n            reset();\n            return;\n        }\n        startYRef.current = null;\n        setRefreshing(true);\n        setPull(threshold);\n        try {\n            await onRefresh();\n        } finally {\n            setRefreshing(false);\n            setPull(0);\n        }\n    };\n\n    const showIndicator = refreshing || pull > 0;\n    const progress = Math.min(1, pull / threshold);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.wrapper, className)}\n            data-refreshing={refreshing}\n            onTouchStart={handleTouchStart}\n            onTouchMove={handleTouchMove}\n            onTouchEnd={handleTouchEnd}\n        >\n            <div\n                className={styles.indicator}\n                aria-hidden={!showIndicator}\n                style={{\n                    opacity: refreshing ? 1 : progress,\n                    transform: `translateX(-50%) translateY(${showIndicator ? pull : 0}px) rotate(${progress * 360}deg)`,\n                }}\n            >\n                <Spinner size=\"sm\" label=\"Atualizando\" />\n            </div>\n            <div\n                className={cn(styles.content, (engaged || refreshing) && styles.dragging)}\n                style={{ transform: `translateY(${showIndicator ? pull : 0}px)` }}\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAkBA,SAAS,EAAgB,GAAkB,GAA2B;CAClE,IAAM,IAAM,IAAY;CACxB,OAAO,KAAK,IAAI,IAAW,GAAG,CAAG;AACrC;AASA,SAAgB,EAAiB,EAC7B,cACA,aACA,eAAY,IACZ,aACA,gBACsB;CACtB,IAAM,IAAe,EAAuB,IAAI,GAC1C,IAAY,EAAsB,IAAI,GACtC,CAAC,GAAM,KAAW,EAAS,CAAC,GAC5B,CAAC,GAAY,KAAiB,EAAS,EAAK,GAE5C,IAAU,EAAU,YAAY,MAEhC,KAAoB,MAA4C;EAClE,IAAI,KAAY,GAAY;EAC5B,IAAM,IAAY,EAAa;EAC/B,IAAI,CAAC,KAAa,EAAU,YAAY,GAAG;EAC3C,IAAM,IAAQ,EAAM,QAAQ;EACvB,MACL,EAAU,UAAU,EAAM;CAC9B,GAEM,KAAmB,MAA4C;EACjE,IAAI,KAAY,GAAY;EAC5B,IAAM,IAAS,EAAU;EACzB,IAAI,MAAW,MAAM;EACrB,IAAM,IAAQ,EAAM,QAAQ;EAC5B,IAAI,CAAC,GAAO;EACZ,IAAM,IAAQ,EAAM,UAAU;EAC9B,IAAI,KAAS,GAAG;GACZ,EAAQ,CAAC;GACT;EACJ;EACA,EAAQ,EAAgB,GAAO,CAAS,CAAC;CAC7C,GAEM,UAAoB;EAEtB,AADA,EAAU,UAAU,MACpB,EAAQ,CAAC;CACb,GAEM,IAAiB,YAA2B;EAC9C,IAAI,KAAY,GAAY;GACxB,EAAM;GACN;EACJ;EAGA,IAAI,EAFW,EAAU,YACI,QAAQ,KAAQ,IAC7B;GACZ,EAAM;GACN;EACJ;EAGA,AAFA,EAAU,UAAU,MACpB,EAAc,EAAI,GAClB,EAAQ,CAAS;EACjB,IAAI;GACA,MAAM,EAAU;EACpB,UAAU;GAEN,AADA,EAAc,EAAK,GACnB,EAAQ,CAAC;EACb;CACJ,GAEM,IAAgB,KAAc,IAAO,GACrC,IAAW,KAAK,IAAI,GAAG,IAAO,CAAS;CAE7C,OACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,EAAO,SAAS,CAAS;EACvC,mBAAiB;EACjB,cAAc;EACd,aAAa;EACb,YAAY;YANhB,CAQI,kBAAC,OAAD;GACI,WAAW,EAAO;GAClB,eAAa,CAAC;GACd,OAAO;IACH,SAAS,IAAa,IAAI;IAC1B,WAAW,+BAA+B,IAAgB,IAAO,EAAE,aAAa,IAAW,IAAI;GACnG;aAEA,kBAAC,GAAD;IAAS,MAAK;IAAK,OAAM;GAAe,CAAA;EACvC,CAAA,GACL,kBAAC,OAAD;GACI,WAAW,EAAG,EAAO,UAAU,KAAW,MAAe,EAAO,QAAQ;GACxE,OAAO,EAAE,WAAW,cAAc,IAAgB,IAAO,EAAE,KAAK;GAE/D;EACA,CAAA,CACJ;;AAEb"}
+{"version":3,"file":"RefreshIndicator.js","names":[],"sources":["../../../src/components/RefreshIndicator/RefreshIndicator.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode, type TouchEvent } from \"react\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./RefreshIndicator.module.css\";\n\nexport interface RefreshIndicatorProps {\n    /** Invoked when the user pulls past `threshold` and releases. May be async. */\n    onRefresh: () => void | Promise<void>;\n    /** Scrollable content to wrap. */\n    children: ReactNode;\n    /** Pixels the user must pull past to trigger a refresh. Defaults to `80`. */\n    threshold?: number;\n    /** When true, pull-to-refresh is inert. */\n    disabled?: boolean;\n    className?: string;\n}\n\n/** Apply resistance so the content lags behind the finger and the pull never runs away. */\nfunction applyResistance(distance: number, threshold: number): number {\n    const cap = threshold * 1.5;\n    return Math.min(distance / 2, cap);\n}\n\n/**\n * RefreshIndicator — pull-to-refresh wrapper for touch devices.\n *\n * Wraps scrollable `children` and listens for a downward drag that starts while the\n * container is scrolled to the top. Pulling past `threshold` and releasing triggers\n * `onRefresh`; the SDK {@link Spinner} is shown while pulling and during the refresh.\n */\nexport function RefreshIndicator({\n    onRefresh,\n    children,\n    threshold = 80,\n    disabled,\n    className,\n}: RefreshIndicatorProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const startYRef = useRef<number | null>(null);\n    const [pull, setPull] = useState(0);\n    const [refreshing, setRefreshing] = useState(false);\n    /**\n     * Whether a drag is in progress. Kept in state, not derived from\n     * `startYRef.current`: a ref is not reactive, so reading it during render ties\n     * the rendered class to a value React never re-renders for — it only looked\n     * correct here because the touch handlers happen to call `setPull` too.\n     */\n    const [engaged, setEngaged] = useState(false);\n\n    const handleTouchStart = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const container = containerRef.current;\n        if (!container || container.scrollTop > 0) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        startYRef.current = touch.clientY;\n        setEngaged(true);\n    };\n\n    const handleTouchMove = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const startY = startYRef.current;\n        if (startY === null) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        const delta = touch.clientY - startY;\n        if (delta <= 0) {\n            setPull(0);\n            return;\n        }\n        setPull(applyResistance(delta, threshold));\n    };\n\n    const reset = (): void => {\n        startYRef.current = null;\n        setEngaged(false);\n        setPull(0);\n    };\n\n    const handleTouchEnd = async (): Promise<void> => {\n        if (disabled || refreshing) {\n            reset();\n            return;\n        }\n        const startY = startYRef.current;\n        const triggered = startY !== null && pull >= threshold;\n        if (!triggered) {\n            reset();\n            return;\n        }\n        startYRef.current = null;\n        setEngaged(false);\n        setRefreshing(true);\n        setPull(threshold);\n        try {\n            await onRefresh();\n        } finally {\n            setRefreshing(false);\n            setPull(0);\n        }\n    };\n\n    const showIndicator = refreshing || pull > 0;\n    const progress = Math.min(1, pull / threshold);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.wrapper, className)}\n            data-refreshing={refreshing}\n            onTouchStart={handleTouchStart}\n            onTouchMove={handleTouchMove}\n            onTouchEnd={handleTouchEnd}\n        >\n            <div\n                className={styles.indicator}\n                aria-hidden={!showIndicator}\n                style={{\n                    opacity: refreshing ? 1 : progress,\n                    transform: `translateX(-50%) translateY(${showIndicator ? pull : 0}px) rotate(${progress * 360}deg)`,\n                }}\n            >\n                <Spinner size=\"sm\" label=\"Atualizando\" />\n            </div>\n            <div\n                className={cn(styles.content, (engaged || refreshing) && styles.dragging)}\n                style={{ transform: `translateY(${showIndicator ? pull : 0}px)` }}\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAkBA,SAAS,EAAgB,GAAkB,GAA2B;CAClE,IAAM,IAAM,IAAY;CACxB,OAAO,KAAK,IAAI,IAAW,GAAG,CAAG;AACrC;AASA,SAAgB,EAAiB,EAC7B,cACA,aACA,eAAY,IACZ,aACA,gBACsB;CACtB,IAAM,IAAe,EAAuB,IAAI,GAC1C,IAAY,EAAsB,IAAI,GACtC,CAAC,GAAM,KAAW,EAAS,CAAC,GAC5B,CAAC,GAAY,KAAiB,EAAS,EAAK,GAO5C,CAAC,GAAS,KAAc,EAAS,EAAK,GAEtC,KAAoB,MAA4C;EAClE,IAAI,KAAY,GAAY;EAC5B,IAAM,IAAY,EAAa;EAC/B,IAAI,CAAC,KAAa,EAAU,YAAY,GAAG;EAC3C,IAAM,IAAQ,EAAM,QAAQ;EACvB,MACL,EAAU,UAAU,EAAM,SAC1B,EAAW,EAAI;CACnB,GAEM,KAAmB,MAA4C;EACjE,IAAI,KAAY,GAAY;EAC5B,IAAM,IAAS,EAAU;EACzB,IAAI,MAAW,MAAM;EACrB,IAAM,IAAQ,EAAM,QAAQ;EAC5B,IAAI,CAAC,GAAO;EACZ,IAAM,IAAQ,EAAM,UAAU;EAC9B,IAAI,KAAS,GAAG;GACZ,EAAQ,CAAC;GACT;EACJ;EACA,EAAQ,EAAgB,GAAO,CAAS,CAAC;CAC7C,GAEM,UAAoB;EAGtB,AAFA,EAAU,UAAU,MACpB,EAAW,EAAK,GAChB,EAAQ,CAAC;CACb,GAEM,IAAiB,YAA2B;EAC9C,IAAI,KAAY,GAAY;GACxB,EAAM;GACN;EACJ;EAGA,IAAI,EAFW,EAAU,YACI,QAAQ,KAAQ,IAC7B;GACZ,EAAM;GACN;EACJ;EAIA,AAHA,EAAU,UAAU,MACpB,EAAW,EAAK,GAChB,EAAc,EAAI,GAClB,EAAQ,CAAS;EACjB,IAAI;GACA,MAAM,EAAU;EACpB,UAAU;GAEN,AADA,EAAc,EAAK,GACnB,EAAQ,CAAC;EACb;CACJ,GAEM,IAAgB,KAAc,IAAO,GACrC,IAAW,KAAK,IAAI,GAAG,IAAO,CAAS;CAE7C,OACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,EAAO,SAAS,CAAS;EACvC,mBAAiB;EACjB,cAAc;EACd,aAAa;EACb,YAAY;YANhB,CAQI,kBAAC,OAAD;GACI,WAAW,EAAO;GAClB,eAAa,CAAC;GACd,OAAO;IACH,SAAS,IAAa,IAAI;IAC1B,WAAW,+BAA+B,IAAgB,IAAO,EAAE,aAAa,IAAW,IAAI;GACnG;aAEA,kBAAC,GAAD;IAAS,MAAK;IAAK,OAAM;GAAe,CAAA;EACvC,CAAA,GACL,kBAAC,OAAD;GACI,WAAW,EAAG,EAAO,UAAU,KAAW,MAAe,EAAO,QAAQ;GACxE,OAAO,EAAE,WAAW,cAAc,IAAgB,IAAO,EAAE,KAAK;GAE/D;EACA,CAAA,CACJ;;AAEb"}

package/dist/components/SignaturePad/SignaturePad.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../Button/Button.cjs"),n=require("./SignaturePad.module.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({width:a=400,height:o=160,penColor:s,penWidth:c=2,disabled:l=!1,label:u=`Signature`,onBegin:d,onEnd:f,onEmptyChange:p,showActions:m=!0,clearLabel:h=`Clear`,undoLabel:g=`Undo`,className:_},v){let y=(0,r.useRef)(null),b=(0,r.useRef)([]),x=(0,r.useRef)(!1),[S,C]=(0,r.useState)(!0),w=(0,r.useCallback)(()=>{if(s)return s;let e=y.current;return!e||typeof window>`u`?`#101828`:window.getComputedStyle(e).color||`#101828`},[s]),T=(0,r.useCallback)(()=>{let e=y.current,t=e?.getContext(`2d`);if(!e||!t)return;let n=typeof window>`u`?1:window.devicePixelRatio||1;e.width=a*n,e.height=o*n,t.setTransform(n,0,0,n,0,0),t.clearRect(0,0,a,o),t.lineWidth=c,t.lineCap=`round`,t.lineJoin=`round`,t.strokeStyle=w();for(let e of b.current)if(e.length!==0){t.beginPath(),t.moveTo(e[0].x,e[0].y);for(let n of e.slice(1))t.lineTo(n.x,n.y);e.length===1&&t.lineTo(e[0].x,e[0].y),t.stroke()}},[o,c,w,a]);(0,r.useEffect)(()=>{T()},[T]);let E=(0,r.useCallback)(e=>{C(t=>(t!==e&&p?.(e),e))},[p]),D=(0,r.useCallback)(e=>{let t=y.current?.getBoundingClientRect();return{x:e.clientX-(t?.left??0),y:e.clientY-(t?.top??0)}},[]),O=(0,r.useCallback)(e=>{l||(x.current=!0,b.current=[...b.current,[D(e)]],y.current?.setPointerCapture?.(e.pointerId),d?.(),E(!1),T())},[l,d,D,T,E]),k=(0,r.useCallback)(e=>{if(!x.current||l)return;let t=b.current;t[t.length-1].push(D(e)),T()},[l,D,T]),A=(0,r.useCallback)(e=>{x.current&&(x.current=!1,y.current?.releasePointerCapture?.(e.pointerId),f?.(y.current?.toDataURL()??``))},[f]),j=(0,r.useCallback)(()=>{b.current=[],E(!0),T()},[T,E]),M=(0,r.useCallback)(()=>{b.current=b.current.slice(0,-1),E(b.current.length===0),T()},[T,E]);return(0,r.useImperativeHandle)(v,()=>({clear:j,undo:M,isEmpty:()=>b.current.length===0,toDataURL:(e,t)=>y.current?.toDataURL(e,t)??``,toBlob:(e,t)=>new Promise(n=>{let r=y.current;if(!r?.toBlob){n(null);return}r.toBlob(e=>n(e),e,t)})}),[j,M]),(0,i.jsxs)(`div`,{className:e.cn(n.default.pad,l&&n.default.disabled,_),children:[(0,i.jsx)(`canvas`,{ref:y,role:`img`,"aria-label":u,"aria-disabled":l||void 0,className:n.default.canvas,style:{width:a,height:o,touchAction:`none`},onPointerDown:O,onPointerMove:k,onPointerUp:A,onPointerLeave:A}),m?(0,i.jsxs)(`div`,{className:n.default.actions,children:[(0,i.jsx)(t.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:M,disabled:l||S,children:g}),(0,i.jsx)(t.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:j,disabled:l||S,children:h})]}):null]})});exports.SignaturePad=a;
+//# sourceMappingURL=SignaturePad.cjs.map

package/dist/components/SignaturePad/SignaturePad.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.cjs","names":[],"sources":["../../../src/components/SignaturePad/SignaturePad.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button\";\nimport styles from \"./SignaturePad.module.css\";\n\n/** A single sampled point of a stroke, in CSS pixels relative to the canvas. */\ninterface Point {\n    x: number;\n    y: number;\n}\n\n/** Imperative handle exposed through `ref`. */\nexport interface SignaturePadHandle {\n    /** Drop every stroke. */\n    clear: () => void;\n    /** Drop the last stroke. */\n    undo: () => void;\n    /** `true` while nothing has been drawn. */\n    isEmpty: () => boolean;\n    /** Export as a data URL. Returns `\"\"` when the canvas is unavailable. */\n    toDataURL: (type?: string, quality?: number) => string;\n    /** Export as a `Blob` — what you actually upload. `null` when unavailable. */\n    toBlob: (type?: string, quality?: number) => Promise<Blob | null>;\n}\n\nexport interface SignaturePadProps {\n    /** Drawing surface width in CSS pixels. Default `400`. */\n    width?: number;\n    /** Drawing surface height in CSS pixels. Default `160`. */\n    height?: number;\n    /**\n     * Stroke color. Defaults to the canvas' computed `color`, which the\n     * stylesheet binds to `--tempest-text` — so the signature follows the theme\n     * (including dark mode) instead of being hardcoded black.\n     */\n    penColor?: string;\n    /** Stroke width in CSS pixels. Default `2`. */\n    penWidth?: number;\n    /** Blocks drawing and dims the surface. */\n    disabled?: boolean;\n    /** Accessible name of the surface. Default `\"Signature\"`. */\n    label?: string;\n    /** Called on the first move of each stroke. */\n    onBegin?: () => void;\n    /** Called when a stroke ends, with the current image as a data URL. */\n    onEnd?: (dataUrl: string) => void;\n    /** Called whenever the emptiness changes — wire it to a submit button. */\n    onEmptyChange?: (isEmpty: boolean) => void;\n    /** Renders the Clear/Undo buttons. Default `true`. */\n    showActions?: boolean;\n    clearLabel?: string;\n    undoLabel?: string;\n    className?: string;\n}\n\n/**\n * Signature capture on a canvas — the \"sign here\" field of a delivery receipt,\n * a service order, a term of acceptance.\n *\n * Strokes are kept as point lists and the canvas is **redrawn** from them, which\n * is what makes `undo` possible at all: a canvas holds pixels, not history, so\n * removing the last stroke means replaying the rest.\n *\n * The backing store is scaled by `devicePixelRatio`, so the line is crisp on a\n * phone instead of the blurry 1x bitmap a naive canvas produces.\n *\n * @example\n * ```tsx\n * const pad = useRef<SignaturePadHandle>(null);\n * const [empty, setEmpty] = useState(true);\n *\n * async function submit() {\n *   const blob = await pad.current?.toBlob(\"image/png\");\n *   if (blob) await api.upload(\"/receipts/42/signature\", blob);\n * }\n *\n * <SignaturePad ref={pad} label=\"Assinatura do cliente\" onEmptyChange={setEmpty} />\n * <Button disabled={empty} onClick={submit}>Enviar</Button>\n * ```\n */\nexport const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(\n    {\n        width = 400,\n        height = 160,\n        penColor,\n        penWidth = 2,\n        disabled = false,\n        label = \"Signature\",\n        onBegin,\n        onEnd,\n        onEmptyChange,\n        showActions = true,\n        clearLabel = \"Clear\",\n        undoLabel = \"Undo\",\n        className,\n    },\n    ref,\n) {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const strokesRef = useRef<Point[][]>([]);\n    const drawingRef = useRef(false);\n    const [isEmpty, setIsEmpty] = useState(true);\n\n    const resolvePenColor = useCallback((): string => {\n        if (penColor) return penColor;\n        const canvas = canvasRef.current;\n        if (!canvas || typeof window === \"undefined\") return \"#101828\";\n        return window.getComputedStyle(canvas).color || \"#101828\";\n    }, [penColor]);\n\n    /**\n     * Repaint the whole surface from the stroke list, honouring the pixel ratio.\n     *\n     * A one-point stroke (a tap) gets a line back to its own origin: `stroke()`\n     * over a path with a single point paints nothing, so without it a tap would\n     * silently produce no dot while still counting as \"not empty\".\n     */\n    const redraw = useCallback((): void => {\n        const canvas = canvasRef.current;\n        const context = canvas?.getContext(\"2d\");\n        if (!canvas || !context) return;\n\n        const ratio = typeof window === \"undefined\" ? 1 : window.devicePixelRatio || 1;\n        canvas.width = width * ratio;\n        canvas.height = height * ratio;\n        context.setTransform(ratio, 0, 0, ratio, 0, 0);\n        context.clearRect(0, 0, width, height);\n\n        context.lineWidth = penWidth;\n        context.lineCap = \"round\";\n        context.lineJoin = \"round\";\n        context.strokeStyle = resolvePenColor();\n\n        for (const stroke of strokesRef.current) {\n            if (stroke.length === 0) continue;\n            context.beginPath();\n            context.moveTo(stroke[0].x, stroke[0].y);\n            for (const point of stroke.slice(1)) {\n                context.lineTo(point.x, point.y);\n            }\n            if (stroke.length === 1) context.lineTo(stroke[0].x, stroke[0].y);\n            context.stroke();\n        }\n    }, [height, penWidth, resolvePenColor, width]);\n\n    useEffect(() => {\n        redraw();\n    }, [redraw]);\n\n    const setEmptiness = useCallback(\n        (next: boolean): void => {\n            setIsEmpty((current) => {\n                if (current !== next) onEmptyChange?.(next);\n                return next;\n            });\n        },\n        [onEmptyChange],\n    );\n\n    const pointFrom = useCallback((event: ReactPointerEvent<HTMLCanvasElement>): Point => {\n        const rect = canvasRef.current?.getBoundingClientRect();\n        return {\n            x: event.clientX - (rect?.left ?? 0),\n            y: event.clientY - (rect?.top ?? 0),\n        };\n    }, []);\n\n    const handlePointerDown = useCallback(\n        (event: ReactPointerEvent<HTMLCanvasElement>): void => {\n            if (disabled) return;\n            drawingRef.current = true;\n            strokesRef.current = [...strokesRef.current, [pointFrom(event)]];\n            canvasRef.current?.setPointerCapture?.(event.pointerId);\n            onBegin?.();\n            setEmptiness(false);\n            redraw();\n        },\n        [disabled, onBegin, pointFrom, redraw, setEmptiness],\n    );\n\n    const handlePointerMove = useCallback(\n        (event: ReactPointerEvent<HTMLCanvasElement>): void => {\n            if (!drawingRef.current || disabled) return;\n            const strokes = strokesRef.current;\n            strokes[strokes.length - 1].push(pointFrom(event));\n            redraw();\n        },\n        [disabled, pointFrom, redraw],\n    );\n\n    const handlePointerUp = useCallback(\n        (event: ReactPointerEvent<HTMLCanvasElement>): void => {\n            if (!drawingRef.current) return;\n            drawingRef.current = false;\n            canvasRef.current?.releasePointerCapture?.(event.pointerId);\n            onEnd?.(canvasRef.current?.toDataURL() ?? \"\");\n        },\n        [onEnd],\n    );\n\n    const clear = useCallback((): void => {\n        strokesRef.current = [];\n        setEmptiness(true);\n        redraw();\n    }, [redraw, setEmptiness]);\n\n    const undo = useCallback((): void => {\n        strokesRef.current = strokesRef.current.slice(0, -1);\n        setEmptiness(strokesRef.current.length === 0);\n        redraw();\n    }, [redraw, setEmptiness]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            clear,\n            undo,\n            isEmpty: () => strokesRef.current.length === 0,\n            toDataURL: (type, quality) => canvasRef.current?.toDataURL(type, quality) ?? \"\",\n            toBlob: (type, quality) =>\n                new Promise((resolve) => {\n                    const canvas = canvasRef.current;\n                    if (!canvas?.toBlob) {\n                        resolve(null);\n                        return;\n                    }\n                    canvas.toBlob((blob) => resolve(blob), type, quality);\n                }),\n        }),\n        [clear, undo],\n    );\n\n    return (\n        <div className={cn(styles.pad, disabled && styles.disabled, className)}>\n            <canvas\n                ref={canvasRef}\n                role=\"img\"\n                aria-label={label}\n                aria-disabled={disabled || undefined}\n                className={styles.canvas}\n                style={{ width, height, touchAction: \"none\" }}\n                onPointerDown={handlePointerDown}\n                onPointerMove={handlePointerMove}\n                onPointerUp={handlePointerUp}\n                onPointerLeave={handlePointerUp}\n            />\n            {showActions ? (\n                <div className={styles.actions}>\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={undo}\n                        disabled={disabled || isEmpty}\n                    >\n                        {undoLabel}\n                    </Button>\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={clear}\n                        disabled={disabled || isEmpty}\n                    >\n                        {clearLabel}\n                    </Button>\n                </div>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}

package/dist/components/SignaturePad/SignaturePad.js

@@ -0,0 +1,115 @@
+import { cn as e } from "../../utils/cn.js";
+import { Button as t } from "../Button/Button.js";
+import n from "./SignaturePad.module.js";
+import { forwardRef as r, useCallback as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/SignaturePad/SignaturePad.tsx
+var d = r(function({ width: r = 400, height: d = 160, penColor: f, penWidth: p = 2, disabled: m = !1, label: h = "Signature", onBegin: g, onEnd: _, onEmptyChange: v, showActions: y = !0, clearLabel: b = "Clear", undoLabel: x = "Undo", className: S }, C) {
+	let w = s(null), T = s([]), E = s(!1), [D, O] = c(!0), k = i(() => {
+		if (f) return f;
+		let e = w.current;
+		return !e || typeof window > "u" ? "#101828" : window.getComputedStyle(e).color || "#101828";
+	}, [f]), A = i(() => {
+		let e = w.current, t = e?.getContext("2d");
+		if (!e || !t) return;
+		let n = typeof window > "u" ? 1 : window.devicePixelRatio || 1;
+		e.width = r * n, e.height = d * n, t.setTransform(n, 0, 0, n, 0, 0), t.clearRect(0, 0, r, d), t.lineWidth = p, t.lineCap = "round", t.lineJoin = "round", t.strokeStyle = k();
+		for (let e of T.current) if (e.length !== 0) {
+			t.beginPath(), t.moveTo(e[0].x, e[0].y);
+			for (let n of e.slice(1)) t.lineTo(n.x, n.y);
+			e.length === 1 && t.lineTo(e[0].x, e[0].y), t.stroke();
+		}
+	}, [
+		d,
+		p,
+		k,
+		r
+	]);
+	a(() => {
+		A();
+	}, [A]);
+	let j = i((e) => {
+		O((t) => (t !== e && v?.(e), e));
+	}, [v]), M = i((e) => {
+		let t = w.current?.getBoundingClientRect();
+		return {
+			x: e.clientX - (t?.left ?? 0),
+			y: e.clientY - (t?.top ?? 0)
+		};
+	}, []), N = i((e) => {
+		m || (E.current = !0, T.current = [...T.current, [M(e)]], w.current?.setPointerCapture?.(e.pointerId), g?.(), j(!1), A());
+	}, [
+		m,
+		g,
+		M,
+		A,
+		j
+	]), P = i((e) => {
+		if (!E.current || m) return;
+		let t = T.current;
+		t[t.length - 1].push(M(e)), A();
+	}, [
+		m,
+		M,
+		A
+	]), F = i((e) => {
+		E.current && (E.current = !1, w.current?.releasePointerCapture?.(e.pointerId), _?.(w.current?.toDataURL() ?? ""));
+	}, [_]), I = i(() => {
+		T.current = [], j(!0), A();
+	}, [A, j]), L = i(() => {
+		T.current = T.current.slice(0, -1), j(T.current.length === 0), A();
+	}, [A, j]);
+	return o(C, () => ({
+		clear: I,
+		undo: L,
+		isEmpty: () => T.current.length === 0,
+		toDataURL: (e, t) => w.current?.toDataURL(e, t) ?? "",
+		toBlob: (e, t) => new Promise((n) => {
+			let r = w.current;
+			if (!r?.toBlob) {
+				n(null);
+				return;
+			}
+			r.toBlob((e) => n(e), e, t);
+		})
+	}), [I, L]), /* @__PURE__ */ u("div", {
+		className: e(n.pad, m && n.disabled, S),
+		children: [/* @__PURE__ */ l("canvas", {
+			ref: w,
+			role: "img",
+			"aria-label": h,
+			"aria-disabled": m || void 0,
+			className: n.canvas,
+			style: {
+				width: r,
+				height: d,
+				touchAction: "none"
+			},
+			onPointerDown: N,
+			onPointerMove: P,
+			onPointerUp: F,
+			onPointerLeave: F
+		}), y ? /* @__PURE__ */ u("div", {
+			className: n.actions,
+			children: [/* @__PURE__ */ l(t, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				onClick: L,
+				disabled: m || D,
+				children: x
+			}), /* @__PURE__ */ l(t, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				onClick: I,
+				disabled: m || D,
+				children: b
+			})]
+		}) : null]
+	});
+});
+//#endregion
+export { d as SignaturePad };
+
+//# sourceMappingURL=SignaturePad.js.map

package/dist/components/SignaturePad/SignaturePad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.js","names":[],"sources":["../../../src/components/SignaturePad/SignaturePad.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button\";\nimport styles from \"./SignaturePad.module.css\";\n\n/** A single sampled point of a stroke, in CSS pixels relative to the canvas. */\ninterface Point {\n    x: number;\n    y: number;\n}\n\n/** Imperative handle exposed through `ref`. */\nexport interface SignaturePadHandle {\n    /** Drop every stroke. */\n    clear: () => void;\n    /** Drop the last stroke. */\n    undo: () => void;\n    /** `true` while nothing has been drawn. */\n    isEmpty: () => boolean;\n    /** Export as a data URL. Returns `\"\"` when the canvas is unavailable. */\n    toDataURL: (type?: string, quality?: number) => string;\n    /** Export as a `Blob` — what you actually upload. `null` when unavailable. */\n    toBlob: (type?: string, quality?: number) => Promise<Blob | null>;\n}\n\nexport interface SignaturePadProps {\n    /** Drawing surface width in CSS pixels. Default `400`. */\n    width?: number;\n    /** Drawing surface height in CSS pixels. Default `160`. */\n    height?: number;\n    /**\n     * Stroke color. Defaults to the canvas' computed `color`, which the\n     * stylesheet binds to `--tempest-text` — so the signature follows the theme\n     * (including dark mode) instead of being hardcoded black.\n     */\n    penColor?: string;\n    /** Stroke width in CSS pixels. Default `2`. */\n    penWidth?: number;\n    /** Blocks drawing and dims the surface. */\n    disabled?: boolean;\n    /** Accessible name of the surface. Default `\"Signature\"`. */\n    label?: string;\n    /** Called on the first move of each stroke. */\n    onBegin?: () => void;\n    /** Called when a stroke ends, with the current image as a data URL. */\n    onEnd?: (dataUrl: string) => void;\n    /** Called whenever the emptiness changes — wire it to a submit button. */\n    onEmptyChange?: (isEmpty: boolean) => void;\n    /** Renders the Clear/Undo buttons. Default `true`. */\n    showActions?: boolean;\n    clearLabel?: string;\n    undoLabel?: string;\n    className?: string;\n}\n\n/**\n * Signature capture on a canvas — the \"sign here\" field of a delivery receipt,\n * a service order, a term of acceptance.\n *\n * Strokes are kept as point lists and the canvas is **redrawn** from them, which\n * is what makes `undo` possible at all: a canvas holds pixels, not history, so\n * removing the last stroke means replaying the rest.\n *\n * The backing store is scaled by `devicePixelRatio`, so the line is crisp on a\n * phone instead of the blurry 1x bitmap a naive canvas produces.\n *\n * @example\n * ```tsx\n * const pad = useRef<SignaturePadHandle>(null);\n * const [empty, setEmpty] = useState(true);\n *\n * async function submit() {\n *   const blob = await pad.current?.toBlob(\"image/png\");\n *   if (blob) await api.upload(\"/receipts/42/signature\", blob);\n * }\n *\n * <SignaturePad ref={pad} label=\"Assinatura do cliente\" onEmptyChange={setEmpty} />\n * <Button disabled={empty} onClick={submit}>Enviar</Button>\n * ```\n */\nexport const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(\n    {\n        width = 400,\n        height = 160,\n        penColor,\n        penWidth = 2,\n        disabled = false,\n        label = \"Signature\",\n        onBegin,\n        onEnd,\n        onEmptyChange,\n        showActions = true,\n        clearLabel = \"Clear\",\n        undoLabel = \"Undo\",\n        className,\n    },\n    ref,\n) {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const strokesRef = useRef<Point[][]>([]);\n    const drawingRef = useRef(false);\n    const [isEmpty, setIsEmpty] = useState(true);\n\n    const resolvePenColor = useCallback((): string => {\n        if (penColor) return penColor;\n        const canvas = canvasRef.current;\n        if (!canvas || typeof window === \"undefined\") return \"#101828\";\n        return window.getComputedStyle(canvas).color || \"#101828\";\n    }, [penColor]);\n\n    /**\n     * Repaint the whole surface from the stroke list, honouring the pixel ratio.\n     *\n     * A one-point stroke (a tap) gets a line back to its own origin: `stroke()`\n     * over a path with a single point paints nothing, so without it a tap would\n     * silently produce no dot while still counting as \"not empty\".\n     */\n    const redraw = useCallback((): void => {\n        const canvas = canvasRef.current;\n        const context = canvas?.getContext(\"2d\");\n        if (!canvas || !context) return;\n\n        const ratio = typeof window === \"undefined\" ? 1 : window.devicePixelRatio || 1;\n        canvas.width = width * ratio;\n        canvas.height = height * ratio;\n        context.setTransform(ratio, 0, 0, ratio, 0, 0);\n        context.clearRect(0, 0, width, height);\n\n        context.lineWidth = penWidth;\n        context.lineCap = \"round\";\n        context.lineJoin = \"round\";\n        context.strokeStyle = resolvePenColor();\n\n        for (const stroke of strokesRef.current) {\n            if (stroke.length === 0) continue;\n            context.beginPath();\n            context.moveTo(stroke[0].x, stroke[0].y);\n            for (const point of stroke.slice(1)) {\n                context.lineTo(point.x, point.y);\n            }\n            if (stroke.length === 1) context.lineTo(stroke[0].x, stroke[0].y);\n            context.stroke();\n        }\n    }, [height, penWidth, resolvePenColor, width]);\n\n    useEffect(() => {\n        redraw();\n    }, [redraw]);\n\n    const setEmptiness = useCallback(\n        (next: boolean): void => {\n            setIsEmpty((current) => {\n                if (current !== next) onEmptyChange?.(next);\n                return next;\n            });\n        },\n        [onEmptyChange],\n    );\n\n    const pointFrom = useCallback((event: ReactPointerEvent<HTMLCanvasElement>): Point => {\n        const rect = canvasRef.current?.getBoundingClientRect();\n        return {\n            x: event.clientX - (rect?.left ?? 0),\n            y: event.clientY - (rect?.top ?? 0),\n        };\n    }, []);\n\n    const handlePointerDown = useCallback(\n        (event: ReactPointerEvent<HTMLCanvasElement>): void => {\n            if (disabled) return;\n            drawingRef.current = true;\n            strokesRef.current = [...strokesRef.current, [pointFrom(event)]];\n            canvasRef.current?.setPointerCapture?.(event.pointerId);\n            onBegin?.();\n            setEmptiness(false);\n            redraw();\n        },\n        [disabled, onBegin, pointFrom, redraw, setEmptiness],\n    );\n\n    const handlePointerMove = useCallback(\n        (event: ReactPointerEvent<HTMLCanvasElement>): void => {\n            if (!drawingRef.current || disabled) return;\n            const strokes = strokesRef.current;\n            strokes[strokes.length - 1].push(pointFrom(event));\n            redraw();\n        },\n        [disabled, pointFrom, redraw],\n    );\n\n    const handlePointerUp = useCallback(\n        (event: ReactPointerEvent<HTMLCanvasElement>): void => {\n            if (!drawingRef.current) return;\n            drawingRef.current = false;\n            canvasRef.current?.releasePointerCapture?.(event.pointerId);\n            onEnd?.(canvasRef.current?.toDataURL() ?? \"\");\n        },\n        [onEnd],\n    );\n\n    const clear = useCallback((): void => {\n        strokesRef.current = [];\n        setEmptiness(true);\n        redraw();\n    }, [redraw, setEmptiness]);\n\n    const undo = useCallback((): void => {\n        strokesRef.current = strokesRef.current.slice(0, -1);\n        setEmptiness(strokesRef.current.length === 0);\n        redraw();\n    }, [redraw, setEmptiness]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            clear,\n            undo,\n            isEmpty: () => strokesRef.current.length === 0,\n            toDataURL: (type, quality) => canvasRef.current?.toDataURL(type, quality) ?? \"\",\n            toBlob: (type, quality) =>\n                new Promise((resolve) => {\n                    const canvas = canvasRef.current;\n                    if (!canvas?.toBlob) {\n                        resolve(null);\n                        return;\n                    }\n                    canvas.toBlob((blob) => resolve(blob), type, quality);\n                }),\n        }),\n        [clear, undo],\n    );\n\n    return (\n        <div className={cn(styles.pad, disabled && styles.disabled, className)}>\n            <canvas\n                ref={canvasRef}\n                role=\"img\"\n                aria-label={label}\n                aria-disabled={disabled || undefined}\n                className={styles.canvas}\n                style={{ width, height, touchAction: \"none\" }}\n                onPointerDown={handlePointerDown}\n                onPointerMove={handlePointerMove}\n                onPointerUp={handlePointerUp}\n                onPointerLeave={handlePointerUp}\n            />\n            {showActions ? (\n                <div className={styles.actions}>\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={undo}\n                        disabled={disabled || isEmpty}\n                    >\n                        {undoLabel}\n                    </Button>\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={clear}\n                        disabled={disabled || isEmpty}\n                    >\n                        {clearLabel}\n                    </Button>\n                </div>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}

package/dist/components/SignaturePad/SignaturePad.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_pad_mrFAb`,t=`tempest_canvas_Jbknm`,n=`tempest_actions_iM9T-`,r=`tempest_disabled_0E3Fa`,i={pad:e,canvas:t,actions:n,disabled:r};exports.actions=n,exports.canvas=t,exports.default=i,exports.disabled=r,exports.pad=e;
+//# sourceMappingURL=SignaturePad.module.cjs.map

package/dist/components/SignaturePad/SignaturePad.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.module.cjs","names":[],"sources":["../../../src/components/SignaturePad/SignaturePad.module.css"],"sourcesContent":[".pad {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n}\n\n.canvas {\n    color: var(--tempest-text);\n    background-color: var(--tempest-bg);\n    border: 1px dashed var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-md);\n    cursor: crosshair;\n}\n\n.canvas:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n}\n\n.disabled .canvas {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--tempest-surface-2);\n}\n"],"mappings":""}

package/dist/components/SignaturePad/SignaturePad.module.js

@@ -0,0 +1,11 @@
+//#region src/components/SignaturePad/SignaturePad.module.css
+var e = "tempest_pad_mrFAb", t = "tempest_canvas_Jbknm", n = "tempest_actions_iM9T-", r = "tempest_disabled_0E3Fa", i = {
+	pad: e,
+	canvas: t,
+	actions: n,
+	disabled: r
+};
+//#endregion
+export { n as actions, t as canvas, i as default, r as disabled, e as pad };
+
+//# sourceMappingURL=SignaturePad.module.js.map

package/dist/components/SignaturePad/SignaturePad.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.module.js","names":[],"sources":["../../../src/components/SignaturePad/SignaturePad.module.css"],"sourcesContent":[".pad {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n}\n\n.canvas {\n    color: var(--tempest-text);\n    background-color: var(--tempest-bg);\n    border: 1px dashed var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-md);\n    cursor: crosshair;\n}\n\n.canvas:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n}\n\n.disabled .canvas {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--tempest-surface-2);\n}\n"],"mappings":""}

package/dist/components/Stepper/Stepper.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Stepper.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({steps:i,current:a,orientation:o=`horizontal`,className:s}){return(0,r.jsx)(`ol`,{className:e.cn(t.default.stepper,o===`vertical`&&t.default.vertical,s),children:i.map((o,s)=>{let c=s<a,l=s===a;return(0,r.jsxs)(n.Fragment,{children:[(0,r.jsxs)(`li`,{className:e.cn(t.default.step,c&&t.default.completed,l&&t.default.active),"aria-current":l?`step`:void 0,children:[(0,r.jsx)(`span`,{className:t.default.dot,children:c?`✓`:s+1}),(0,r.jsx)(`span`,{className:t.default.label,children:o.label})]}),s<i.length-1&&(0,r.jsx)(`span`,{className:e.cn(t.default.connector,c&&t.default.completed),"aria-hidden":!0})]},s)})})}exports.Stepper=i;
+const e=require("../../utils/cn.cjs"),t=require("./Stepper.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({steps:i,current:a,orientation:o=`horizontal`,onStepClick:s,className:c}){return(0,r.jsx)(`ol`,{className:e.cn(t.default.stepper,o===`vertical`&&t.default.vertical,c),children:i.map((o,c)=>{let l=c<a,u=c===a;return(0,r.jsxs)(n.Fragment,{children:[(0,r.jsx)(`li`,{className:e.cn(t.default.step,l&&t.default.completed,u&&t.default.active),"aria-current":u?`step`:void 0,children:s?(0,r.jsxs)(`button`,{type:`button`,className:t.default.trigger,"aria-current":u?`step`:void 0,onClick:()=>s(c),children:[(0,r.jsx)(`span`,{className:t.default.dot,children:l?`✓`:c+1}),(0,r.jsxs)(`span`,{className:t.default.labelGroup,children:[(0,r.jsx)(`span`,{className:t.default.label,children:o.label}),o.description?(0,r.jsx)(`span`,{className:t.default.description,children:o.description}):null]})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`span`,{className:t.default.dot,children:l?`✓`:c+1}),(0,r.jsxs)(`span`,{className:t.default.labelGroup,children:[(0,r.jsx)(`span`,{className:t.default.label,children:o.label}),o.description?(0,r.jsx)(`span`,{className:t.default.description,children:o.description}):null]})]})}),c<i.length-1&&(0,r.jsx)(`span`,{className:e.cn(t.default.connector,l&&t.default.completed),"aria-hidden":!0})]},c)})})}exports.Stepper=i;
 //# sourceMappingURL=Stepper.cjs.map

package/dist/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Stepper.module.css\";\n\nexport interface StepItem {\n    label: ReactNode;\n}\n\nexport interface StepperProps {\n    steps: StepItem[];\n    /** Index of the currently active step (0-based). */\n    current: number;\n    orientation?: \"horizontal\" | \"vertical\";\n    className?: string;\n}\n\n/**\n * Linear progress indicator for multi-step flows. Steps before `current`\n * render as completed; the step at `current` is active; later steps are\n * upcoming.\n */\nexport function Stepper({ steps, current, orientation = \"horizontal\", className }: StepperProps) {\n    return (\n        <ol\n            className={cn(styles.stepper, orientation === \"vertical\" && styles.vertical, className)}\n        >\n            {steps.map((step, index) => {\n                const completed = index < current;\n                const active = index === current;\n                return (\n                    <Fragment key={index}>\n                        <li\n                            className={cn(\n                                styles.step,\n                                completed && styles.completed,\n                                active && styles.active,\n                            )}\n                            aria-current={active ? \"step\" : undefined}\n                        >\n                            <span className={styles.dot}>{completed ? \"✓\" : index + 1}</span>\n                            <span className={styles.label}>{step.label}</span>\n                        </li>\n                        {index < steps.length - 1 && (\n                            <span\n                                className={cn(styles.connector, completed && styles.completed)}\n                                aria-hidden\n                            />\n                        )}\n                    </Fragment>\n                );\n            })}\n        </ol>\n    );\n}\n"],"mappings":"8HAsBA,SAAgB,EAAQ,CAAE,QAAO,UAAS,cAAc,aAAc,aAA2B,CAC7F,OACI,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,IAAgB,YAAc,EAAA,QAAO,SAAU,CAAS,WAErF,EAAM,KAAK,EAAM,IAAU,CACxB,IAAM,EAAY,EAAQ,EACpB,EAAS,IAAU,EACzB,OACI,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAA,SAAA,EACI,EAAA,EAAA,KAAA,CAAC,KAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,KACP,GAAa,EAAA,QAAO,UACpB,GAAU,EAAA,QAAO,MACrB,EACA,eAAc,EAAS,OAAS,IAAA,YANpC,EAQI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aAAM,EAAY,IAAM,EAAQ,CAAQ,CAAA,GAChE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAK,KAAY,CAAA,CACjD,IACH,EAAQ,EAAM,OAAS,IACpB,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,UAAW,GAAa,EAAA,QAAO,SAAS,EAC7D,cAAA,EACH,CAAA,CAEC,CAAA,EAlBK,CAkBL,CAElB,CAAC,CACD,CAAA,CAEZ"}
+{"version":3,"file":"Stepper.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Stepper.module.css\";\n\nexport interface StepItem {\n    label: ReactNode;\n    /** Secondary line under the label — a hint, or \"optional\". */\n    description?: ReactNode;\n}\n\nexport interface StepperProps {\n    steps: StepItem[];\n    /** Index of the currently active step (0-based). */\n    current: number;\n    orientation?: \"horizontal\" | \"vertical\";\n    /**\n     * Makes each step activatable. Without it the steps are a read-only\n     * indicator, which is the right default — in a gated flow, jumping ahead\n     * would skip the gates.\n     */\n    onStepClick?: (index: number) => void;\n    className?: string;\n}\n\n/**\n * Linear progress indicator for multi-step flows. Steps before `current`\n * render as completed; the step at `current` is active; later steps are\n * upcoming.\n */\nexport function Stepper({\n    steps,\n    current,\n    orientation = \"horizontal\",\n    onStepClick,\n    className,\n}: StepperProps) {\n    return (\n        <ol\n            className={cn(styles.stepper, orientation === \"vertical\" && styles.vertical, className)}\n        >\n            {steps.map((step, index) => {\n                const completed = index < current;\n                const active = index === current;\n                return (\n                    <Fragment key={index}>\n                        <li\n                            className={cn(\n                                styles.step,\n                                completed && styles.completed,\n                                active && styles.active,\n                            )}\n                            aria-current={active ? \"step\" : undefined}\n                        >\n                            {onStepClick ? (\n                                <button\n                                    type=\"button\"\n                                    className={styles.trigger}\n                                    aria-current={active ? \"step\" : undefined}\n                                    onClick={() => onStepClick(index)}\n                                >\n                                    <span className={styles.dot}>\n                                        {completed ? \"✓\" : index + 1}\n                                    </span>\n                                    <span className={styles.labelGroup}>\n                                        <span className={styles.label}>{step.label}</span>\n                                        {step.description ? (\n                                            <span className={styles.description}>\n                                                {step.description}\n                                            </span>\n                                        ) : null}\n                                    </span>\n                                </button>\n                            ) : (\n                                <>\n                                    <span className={styles.dot}>\n                                        {completed ? \"✓\" : index + 1}\n                                    </span>\n                                    <span className={styles.labelGroup}>\n                                        <span className={styles.label}>{step.label}</span>\n                                        {step.description ? (\n                                            <span className={styles.description}>\n                                                {step.description}\n                                            </span>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </li>\n                        {index < steps.length - 1 && (\n                            <span\n                                className={cn(styles.connector, completed && styles.completed)}\n                                aria-hidden\n                            />\n                        )}\n                    </Fragment>\n                );\n            })}\n        </ol>\n    );\n}\n"],"mappings":"8HA8BA,SAAgB,EAAQ,CACpB,QACA,UACA,cAAc,aACd,cACA,aACa,CACb,OACI,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,IAAgB,YAAc,EAAA,QAAO,SAAU,CAAS,WAErF,EAAM,KAAK,EAAM,IAAU,CACxB,IAAM,EAAY,EAAQ,EACpB,EAAS,IAAU,EACzB,OACI,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,KACP,GAAa,EAAA,QAAO,UACpB,GAAU,EAAA,QAAO,MACrB,EACA,eAAc,EAAS,OAAS,IAAA,YAE/B,GACG,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,eAAc,EAAS,OAAS,IAAA,GAChC,YAAe,EAAY,CAAK,WAJpC,EAMI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aACnB,EAAY,IAAM,EAAQ,CACzB,CAAA,GACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,oBAAxB,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAK,KAAY,CAAA,EAChD,EAAK,aACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBACnB,EAAK,WACJ,CAAA,EACN,IACF,GACF,KAER,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aACnB,EAAY,IAAM,EAAQ,CACzB,CAAA,GACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,oBAAxB,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAK,KAAY,CAAA,EAChD,EAAK,aACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBACnB,EAAK,WACJ,CAAA,EACN,IACF,GACR,CAAA,CAAA,CAEN,CAAA,EACH,EAAQ,EAAM,OAAS,IACpB,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,UAAW,GAAa,EAAA,QAAO,SAAS,EAC7D,cAAA,EACH,CAAA,CAEC,CAAA,EAlDK,CAkDL,CAElB,CAAC,CACD,CAAA,CAEZ"}

package/dist/components/Stepper/Stepper.js

@@ -1,31 +1,55 @@
 import { cn as e } from "../../utils/cn.js";
 import t from "./Stepper.module.js";
 import { Fragment as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/Stepper/Stepper.tsx
-function a({ steps: a, current: o, orientation: s = "horizontal", className: c }) {
-	return /* @__PURE__ */ r("ol", {
-		className: e(t.stepper, s === "vertical" && t.vertical, c),
-		children: a.map((s, c) => {
-			let l = c < o, u = c === o;
-			return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("li", {
-				className: e(t.step, l && t.completed, u && t.active),
-				"aria-current": u ? "step" : void 0,
-				children: [/* @__PURE__ */ r("span", {
+function o({ steps: o, current: s, orientation: c = "horizontal", onStepClick: l, className: u }) {
+	return /* @__PURE__ */ i("ol", {
+		className: e(t.stepper, c === "vertical" && t.vertical, u),
+		children: o.map((c, u) => {
+			let d = u < s, f = u === s;
+			return /* @__PURE__ */ a(n, { children: [/* @__PURE__ */ i("li", {
+				className: e(t.step, d && t.completed, f && t.active),
+				"aria-current": f ? "step" : void 0,
+				children: l ? /* @__PURE__ */ a("button", {
+					type: "button",
+					className: t.trigger,
+					"aria-current": f ? "step" : void 0,
+					onClick: () => l(u),
+					children: [/* @__PURE__ */ i("span", {
+						className: t.dot,
+						children: d ? "✓" : u + 1
+					}), /* @__PURE__ */ a("span", {
+						className: t.labelGroup,
+						children: [/* @__PURE__ */ i("span", {
+							className: t.label,
+							children: c.label
+						}), c.description ? /* @__PURE__ */ i("span", {
+							className: t.description,
+							children: c.description
+						}) : null]
+					})]
+				}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
 					className: t.dot,
-					children: l ? "✓" : c + 1
-				}), /* @__PURE__ */ r("span", {
-					className: t.label,
-					children: s.label
-				})]
-			}), c < a.length - 1 && /* @__PURE__ */ r("span", {
-				className: e(t.connector, l && t.completed),
+					children: d ? "✓" : u + 1
+				}), /* @__PURE__ */ a("span", {
+					className: t.labelGroup,
+					children: [/* @__PURE__ */ i("span", {
+						className: t.label,
+						children: c.label
+					}), c.description ? /* @__PURE__ */ i("span", {
+						className: t.description,
+						children: c.description
+					}) : null]
+				})] })
+			}), u < o.length - 1 && /* @__PURE__ */ i("span", {
+				className: e(t.connector, d && t.completed),
 				"aria-hidden": !0
-			})] }, c);
+			})] }, u);
 		})
 	});
 }
 //#endregion
-export { a as Stepper };
+export { o as Stepper };
 
 //# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Stepper.module.css\";\n\nexport interface StepItem {\n    label: ReactNode;\n}\n\nexport interface StepperProps {\n    steps: StepItem[];\n    /** Index of the currently active step (0-based). */\n    current: number;\n    orientation?: \"horizontal\" | \"vertical\";\n    className?: string;\n}\n\n/**\n * Linear progress indicator for multi-step flows. Steps before `current`\n * render as completed; the step at `current` is active; later steps are\n * upcoming.\n */\nexport function Stepper({ steps, current, orientation = \"horizontal\", className }: StepperProps) {\n    return (\n        <ol\n            className={cn(styles.stepper, orientation === \"vertical\" && styles.vertical, className)}\n        >\n            {steps.map((step, index) => {\n                const completed = index < current;\n                const active = index === current;\n                return (\n                    <Fragment key={index}>\n                        <li\n                            className={cn(\n                                styles.step,\n                                completed && styles.completed,\n                                active && styles.active,\n                            )}\n                            aria-current={active ? \"step\" : undefined}\n                        >\n                            <span className={styles.dot}>{completed ? \"✓\" : index + 1}</span>\n                            <span className={styles.label}>{step.label}</span>\n                        </li>\n                        {index < steps.length - 1 && (\n                            <span\n                                className={cn(styles.connector, completed && styles.completed)}\n                                aria-hidden\n                            />\n                        )}\n                    </Fragment>\n                );\n            })}\n        </ol>\n    );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAQ,EAAE,UAAO,YAAS,iBAAc,cAAc,gBAA2B;CAC7F,OACI,kBAAC,MAAD;EACI,WAAW,EAAG,EAAO,SAAS,MAAgB,cAAc,EAAO,UAAU,CAAS;YAErF,EAAM,KAAK,GAAM,MAAU;GACxB,IAAM,IAAY,IAAQ,GACpB,IAAS,MAAU;GACzB,OACI,kBAAC,GAAD,EAAA,UAAA,CACI,kBAAC,MAAD;IACI,WAAW,EACP,EAAO,MACP,KAAa,EAAO,WACpB,KAAU,EAAO,MACrB;IACA,gBAAc,IAAS,SAAS,KAAA;cANpC,CAQI,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAM,IAAY,MAAM,IAAQ;IAAQ,CAAA,GAChE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ,EAAK;IAAY,CAAA,CACjD;OACH,IAAQ,EAAM,SAAS,KACpB,kBAAC,QAAD;IACI,WAAW,EAAG,EAAO,WAAW,KAAa,EAAO,SAAS;IAC7D,eAAA;GACH,CAAA,CAEC,EAAA,GAlBK,CAkBL;EAElB,CAAC;CACD,CAAA;AAEZ"}
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Stepper.module.css\";\n\nexport interface StepItem {\n    label: ReactNode;\n    /** Secondary line under the label — a hint, or \"optional\". */\n    description?: ReactNode;\n}\n\nexport interface StepperProps {\n    steps: StepItem[];\n    /** Index of the currently active step (0-based). */\n    current: number;\n    orientation?: \"horizontal\" | \"vertical\";\n    /**\n     * Makes each step activatable. Without it the steps are a read-only\n     * indicator, which is the right default — in a gated flow, jumping ahead\n     * would skip the gates.\n     */\n    onStepClick?: (index: number) => void;\n    className?: string;\n}\n\n/**\n * Linear progress indicator for multi-step flows. Steps before `current`\n * render as completed; the step at `current` is active; later steps are\n * upcoming.\n */\nexport function Stepper({\n    steps,\n    current,\n    orientation = \"horizontal\",\n    onStepClick,\n    className,\n}: StepperProps) {\n    return (\n        <ol\n            className={cn(styles.stepper, orientation === \"vertical\" && styles.vertical, className)}\n        >\n            {steps.map((step, index) => {\n                const completed = index < current;\n                const active = index === current;\n                return (\n                    <Fragment key={index}>\n                        <li\n                            className={cn(\n                                styles.step,\n                                completed && styles.completed,\n                                active && styles.active,\n                            )}\n                            aria-current={active ? \"step\" : undefined}\n                        >\n                            {onStepClick ? (\n                                <button\n                                    type=\"button\"\n                                    className={styles.trigger}\n                                    aria-current={active ? \"step\" : undefined}\n                                    onClick={() => onStepClick(index)}\n                                >\n                                    <span className={styles.dot}>\n                                        {completed ? \"✓\" : index + 1}\n                                    </span>\n                                    <span className={styles.labelGroup}>\n                                        <span className={styles.label}>{step.label}</span>\n                                        {step.description ? (\n                                            <span className={styles.description}>\n                                                {step.description}\n                                            </span>\n                                        ) : null}\n                                    </span>\n                                </button>\n                            ) : (\n                                <>\n                                    <span className={styles.dot}>\n                                        {completed ? \"✓\" : index + 1}\n                                    </span>\n                                    <span className={styles.labelGroup}>\n                                        <span className={styles.label}>{step.label}</span>\n                                        {step.description ? (\n                                            <span className={styles.description}>\n                                                {step.description}\n                                            </span>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </li>\n                        {index < steps.length - 1 && (\n                            <span\n                                className={cn(styles.connector, completed && styles.completed)}\n                                aria-hidden\n                            />\n                        )}\n                    </Fragment>\n                );\n            })}\n        </ol>\n    );\n}\n"],"mappings":";;;;;AA8BA,SAAgB,EAAQ,EACpB,UACA,YACA,iBAAc,cACd,gBACA,gBACa;CACb,OACI,kBAAC,MAAD;EACI,WAAW,EAAG,EAAO,SAAS,MAAgB,cAAc,EAAO,UAAU,CAAS;YAErF,EAAM,KAAK,GAAM,MAAU;GACxB,IAAM,IAAY,IAAQ,GACpB,IAAS,MAAU;GACzB,OACI,kBAAC,GAAD,EAAA,UAAA,CACI,kBAAC,MAAD;IACI,WAAW,EACP,EAAO,MACP,KAAa,EAAO,WACpB,KAAU,EAAO,MACrB;IACA,gBAAc,IAAS,SAAS,KAAA;cAE/B,IACG,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,gBAAc,IAAS,SAAS,KAAA;KAChC,eAAe,EAAY,CAAK;eAJpC,CAMI,kBAAC,QAAD;MAAM,WAAW,EAAO;gBACnB,IAAY,MAAM,IAAQ;KACzB,CAAA,GACN,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAxB,CACI,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAQ,EAAK;MAAY,CAAA,GAChD,EAAK,cACF,kBAAC,QAAD;OAAM,WAAW,EAAO;iBACnB,EAAK;MACJ,CAAA,IACN,IACF;OACF;SAER,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,QAAD;KAAM,WAAW,EAAO;eACnB,IAAY,MAAM,IAAQ;IACzB,CAAA,GACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACI,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAQ,EAAK;KAAY,CAAA,GAChD,EAAK,cACF,kBAAC,QAAD;MAAM,WAAW,EAAO;gBACnB,EAAK;KACJ,CAAA,IACN,IACF;MACR,EAAA,CAAA;GAEN,CAAA,GACH,IAAQ,EAAM,SAAS,KACpB,kBAAC,QAAD;IACI,WAAW,EAAG,EAAO,WAAW,KAAa,EAAO,SAAS;IAC7D,eAAA;GACH,CAAA,CAEC,EAAA,GAlDK,CAkDL;EAElB,CAAC;CACD,CAAA;AAEZ"}

package/dist/components/Stepper/Stepper.module.cjs

@@ -1,2 +1,2 @@
-var e=`tempest_stepper_w3qjQ`,t=`tempest_vertical_d4mOs`,n=`tempest_step_s2nqL`,r=`tempest_dot_d1bSL`,i=`tempest_completed_gcFHM`,a=`tempest_active_kL-CH`,o=`tempest_label_8irAI`,s=`tempest_connector_lyeWp`,c={stepper:e,vertical:t,step:n,dot:r,completed:i,active:a,label:o,connector:s};exports.active=a,exports.completed=i,exports.connector=s,exports.default=c,exports.dot=r,exports.label=o,exports.step=n,exports.stepper=e,exports.vertical=t;
+var e=`tempest_stepper_w3qjQ`,t=`tempest_vertical_d4mOs`,n=`tempest_step_s2nqL`,r=`tempest_dot_d1bSL`,i=`tempest_completed_gcFHM`,a=`tempest_active_kL-CH`,o=`tempest_label_8irAI`,s=`tempest_connector_lyeWp`,c=`tempest_labelGroup_PVn4m`,l=`tempest_description_xHXx3`,u=`tempest_trigger_vcUwl`,d={stepper:e,vertical:t,step:n,dot:r,completed:i,active:a,label:o,connector:s,labelGroup:c,description:l,trigger:u};exports.active=a,exports.completed=i,exports.connector=s,exports.default=d,exports.description=l,exports.dot=r,exports.label=o,exports.labelGroup=c,exports.step=n,exports.stepper=e,exports.trigger=u,exports.vertical=t;
 //# sourceMappingURL=Stepper.module.cjs.map

package/dist/components/Stepper/Stepper.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.module.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".stepper {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.stepper.vertical {\n    flex-direction: column;\n    align-items: stretch;\n}\n\n.step {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1;\n}\n\n.dot {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: 2px solid var(--tempest-border-strong);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text-muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-bold);\n    flex-shrink: 0;\n    transition: var(--tempest-transition-color);\n}\n\n.step.completed .dot {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.step.active .dot {\n    border-color: var(--tempest-primary-on-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: 0 0 0 4px var(--tempest-primary-soft);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n}\n\n.step.active .label,\n.step.completed .label {\n    color: var(--tempest-text);\n}\n\n.connector {\n    flex: 1;\n    height: 2px;\n    background-color: var(--tempest-border);\n    margin: 0 var(--tempest-space-1);\n    transition: background-color var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.connector.completed {\n    background-color: var(--tempest-primary);\n}\n\n.stepper.vertical .connector {\n    width: 2px;\n    height: 24px;\n    margin: 0 0 0 13px;\n}\n\n/* Mobile — horizontal stepper becomes vertical automatically. */\n@media (max-width: 639.98px) {\n    .stepper:not(.vertical) {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .stepper:not(.vertical) .connector {\n        width: 2px;\n        height: 16px;\n        margin: 0 0 0 13px;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Stepper.module.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".stepper {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.stepper.vertical {\n    flex-direction: column;\n    align-items: stretch;\n}\n\n.step {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1;\n}\n\n.dot {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: 2px solid var(--tempest-border-strong);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text-muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-bold);\n    flex-shrink: 0;\n    transition: var(--tempest-transition-color);\n}\n\n.step.completed .dot {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.step.active .dot {\n    border-color: var(--tempest-primary-on-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: 0 0 0 4px var(--tempest-primary-soft);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n}\n\n.step.active .label,\n.step.completed .label {\n    color: var(--tempest-text);\n}\n\n.connector {\n    flex: 1;\n    height: 2px;\n    background-color: var(--tempest-border);\n    margin: 0 var(--tempest-space-1);\n    transition: background-color var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.connector.completed {\n    background-color: var(--tempest-primary);\n}\n\n.stepper.vertical .connector {\n    width: 2px;\n    height: 24px;\n    margin: 0 0 0 13px;\n}\n\n/* Mobile — horizontal stepper becomes vertical automatically. */\n@media (max-width: 639.98px) {\n    .stepper:not(.vertical) {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .stepper:not(.vertical) .connector {\n        width: 2px;\n        height: 16px;\n        margin: 0 0 0 13px;\n    }\n}\n\n.labelGroup {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-subtle);\n}\n\n.trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    padding: 0;\n    background: none;\n    border: 0;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n"],"mappings":""}

package/dist/components/Stepper/Stepper.module.js

@@ -1,5 +1,5 @@
 //#region src/components/Stepper/Stepper.module.css
-var e = "tempest_stepper_w3qjQ", t = "tempest_vertical_d4mOs", n = "tempest_step_s2nqL", r = "tempest_dot_d1bSL", i = "tempest_completed_gcFHM", a = "tempest_active_kL-CH", o = "tempest_label_8irAI", s = "tempest_connector_lyeWp", c = {
+var e = "tempest_stepper_w3qjQ", t = "tempest_vertical_d4mOs", n = "tempest_step_s2nqL", r = "tempest_dot_d1bSL", i = "tempest_completed_gcFHM", a = "tempest_active_kL-CH", o = "tempest_label_8irAI", s = "tempest_connector_lyeWp", c = "tempest_labelGroup_PVn4m", l = "tempest_description_xHXx3", u = "tempest_trigger_vcUwl", d = {
 	stepper: e,
 	vertical: t,
 	step: n,
@@ -7,9 +7,12 @@ var e = "tempest_stepper_w3qjQ", t = "tempest_vertical_d4mOs", n = "tempest_step
 	completed: i,
 	active: a,
 	label: o,
-	connector: s
+	connector: s,
+	labelGroup: c,
+	description: l,
+	trigger: u
 };
 //#endregion
-export { a as active, i as completed, s as connector, c as default, r as dot, o as label, n as step, e as stepper, t as vertical };
+export { a as active, i as completed, s as connector, d as default, l as description, r as dot, o as label, c as labelGroup, n as step, e as stepper, u as trigger, t as vertical };
 
 //# sourceMappingURL=Stepper.module.js.map

package/dist/components/Stepper/Stepper.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.module.js","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".stepper {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.stepper.vertical {\n    flex-direction: column;\n    align-items: stretch;\n}\n\n.step {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1;\n}\n\n.dot {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: 2px solid var(--tempest-border-strong);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text-muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-bold);\n    flex-shrink: 0;\n    transition: var(--tempest-transition-color);\n}\n\n.step.completed .dot {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.step.active .dot {\n    border-color: var(--tempest-primary-on-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: 0 0 0 4px var(--tempest-primary-soft);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n}\n\n.step.active .label,\n.step.completed .label {\n    color: var(--tempest-text);\n}\n\n.connector {\n    flex: 1;\n    height: 2px;\n    background-color: var(--tempest-border);\n    margin: 0 var(--tempest-space-1);\n    transition: background-color var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.connector.completed {\n    background-color: var(--tempest-primary);\n}\n\n.stepper.vertical .connector {\n    width: 2px;\n    height: 24px;\n    margin: 0 0 0 13px;\n}\n\n/* Mobile — horizontal stepper becomes vertical automatically. */\n@media (max-width: 639.98px) {\n    .stepper:not(.vertical) {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .stepper:not(.vertical) .connector {\n        width: 2px;\n        height: 16px;\n        margin: 0 0 0 13px;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Stepper.module.js","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".stepper {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.stepper.vertical {\n    flex-direction: column;\n    align-items: stretch;\n}\n\n.step {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1;\n}\n\n.dot {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: 2px solid var(--tempest-border-strong);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text-muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-bold);\n    flex-shrink: 0;\n    transition: var(--tempest-transition-color);\n}\n\n.step.completed .dot {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.step.active .dot {\n    border-color: var(--tempest-primary-on-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: 0 0 0 4px var(--tempest-primary-soft);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n}\n\n.step.active .label,\n.step.completed .label {\n    color: var(--tempest-text);\n}\n\n.connector {\n    flex: 1;\n    height: 2px;\n    background-color: var(--tempest-border);\n    margin: 0 var(--tempest-space-1);\n    transition: background-color var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.connector.completed {\n    background-color: var(--tempest-primary);\n}\n\n.stepper.vertical .connector {\n    width: 2px;\n    height: 24px;\n    margin: 0 0 0 13px;\n}\n\n/* Mobile — horizontal stepper becomes vertical automatically. */\n@media (max-width: 639.98px) {\n    .stepper:not(.vertical) {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .stepper:not(.vertical) .connector {\n        width: 2px;\n        height: 16px;\n        margin: 0 0 0 13px;\n    }\n}\n\n.labelGroup {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-subtle);\n}\n\n.trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    padding: 0;\n    background: none;\n    border: 0;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n"],"mappings":""}

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Tooltip.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({content:i,placement:a=`top`,children:o,disabled:s=!1,openDelay:c=150}){let[l,u]=(0,n.useState)(!1),d=(0,n.useId)(),f=null;function p(){s||(f&&clearTimeout(f),f=setTimeout(()=>u(!0),c))}function m(){f&&=(clearTimeout(f),null),u(!1)}let h=(0,n.cloneElement)(o,{onMouseEnter:p,onMouseLeave:m,onFocus:p,onBlur:m,"aria-describedby":l?d:void 0});return(0,r.jsxs)(`span`,{className:t.default.trigger,children:[h,l&&(0,r.jsx)(`span`,{id:d,role:`tooltip`,className:e.cn(t.default.bubble,t.default[a]),children:i})]})}exports.Tooltip=i;
+const e=require("../../utils/cn.cjs"),t=require("./Tooltip.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({content:i,placement:a=`top`,children:o,disabled:s=!1,openDelay:c=150}){let[l,u]=(0,n.useState)(!1),d=(0,n.useId)(),f=(0,n.useRef)(null);function p(){f.current!==null&&(clearTimeout(f.current),f.current=null)}function m(){s||(p(),f.current=setTimeout(()=>u(!0),c))}function h(){p(),u(!1)}(0,n.useEffect)(()=>()=>{p()},[]);let g=(0,n.cloneElement)(o,{onMouseEnter:m,onMouseLeave:h,onFocus:m,onBlur:h,"aria-describedby":l?d:void 0});return(0,r.jsxs)(`span`,{className:t.default.trigger,children:[g,l&&(0,r.jsx)(`span`,{id:d,role:`tooltip`,className:e.cn(t.default.bubble,t.default[a]),children:i})]})}exports.Tooltip=i;
 //# sourceMappingURL=Tooltip.cjs.map

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n}\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const tooltipId = useId();\n    let timer: ReturnType<typeof setTimeout> | null = null;\n\n    function show(): void {\n        if (disabled) return;\n        if (timer) clearTimeout(timer);\n        timer = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        if (timer) {\n            clearTimeout(timer);\n            timer = null;\n        }\n        setOpen(false);\n    }\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    return (\n        <span className={styles.trigger}>\n            {trigger}\n            {open && (\n                <span\n                    id={tooltipId}\n                    role=\"tooltip\"\n                    className={cn(styles.bubble, styles[placement])}\n                >\n                    {content}\n                </span>\n            )}\n        </span>\n    );\n}\n"],"mappings":"8HAyBA,SAAgB,EAAQ,CACpB,UACA,YAAY,MACZ,WACA,WAAW,GACX,YAAY,KACC,CACb,GAAM,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAA6B,EAAK,EACzC,GAAA,EAAA,EAAA,MAAA,CAAkB,EACpB,EAA8C,KAElD,SAAS,GAAa,CACd,IACA,GAAO,aAAa,CAAK,EAC7B,EAAQ,eAAiB,EAAQ,EAAI,EAAG,CAAS,EACrD,CAEA,SAAS,GAAa,CAClB,AAEI,KADA,aAAa,CAAK,EACV,MAEZ,EAAQ,EAAK,CACjB,CAEA,IAAM,GAAA,EAAA,EAAA,aAAA,CAAuB,EAAU,CACnC,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EACR,mBAAoB,EAAO,EAAY,IAAA,EAC3C,CAA4B,EAE5B,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACK,EACA,IACG,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,GAAI,EACJ,KAAK,UACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,EAAU,WAE7C,CACC,CAAA,CAER,GAEd"}
+{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n}\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    return (\n        <span className={styles.trigger}>\n            {trigger}\n            {open && (\n                <span\n                    id={tooltipId}\n                    role=\"tooltip\"\n                    className={cn(styles.bubble, styles[placement])}\n                >\n                    {content}\n                </span>\n            )}\n        </span>\n    );\n}\n"],"mappings":"8HA2BA,SAAgB,EAAQ,CACpB,UACA,YAAY,MACZ,WACA,WAAW,GACX,YAAY,KACC,CACb,GAAM,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAA6B,EAAK,EACzC,GAAA,EAAA,EAAA,MAAA,CAAkB,EASlB,GAAA,EAAA,EAAA,OAAA,CAAwD,IAAI,EAElE,SAAS,GAAmB,CACpB,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,CAEA,SAAS,GAAa,CACd,IACJ,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,EAChE,CAEA,SAAS,GAAa,CAClB,EAAW,EACX,EAAQ,EAAK,CACjB,EAEA,EAAA,EAAA,UAAA,SACiB,CACT,EAAW,CACf,EACD,CAAC,CAAC,EAEL,IAAM,GAAA,EAAA,EAAA,aAAA,CAAuB,EAAU,CACnC,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EACR,mBAAoB,EAAO,EAAY,IAAA,EAC3C,CAA4B,EAE5B,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACK,EACA,IACG,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,GAAI,EACJ,KAAK,UACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,EAAU,WAE7C,CACC,CAAA,CAER,GAEd"}