@tarsis/toolkit 0.7.1 → 0.7.2

package/dist/index.cjs

@@ -9,7 +9,7 @@ const require_animation = require("./animation-BauloIgQ.cjs");
 const require_assets = require("./assets-BMqH4phf.cjs");
 const require_SelectBase = require("./SelectBase-BC6WKZVF.cjs");
 const require_Container = require("./Container-BVX2MW1U.cjs");
-const require_tokens = require("./tokens-DlMougUi.cjs");
+const require_tokens = require("./tokens-Nhzxtwvl.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx);
 let react = require("react");
@@ -766,31 +766,31 @@ var BubblyParticlesButton = () => {
 	});
 };
 var BurningButton_module_default = {
-	root: "_root_7dhw5_1",
-	button: "_button_7dhw5_11",
-	p: "_p_7dhw5_24",
-	text: "_text_7dhw5_24",
-	rise1: "_rise1_7dhw5_1",
-	rise2: "_rise2_7dhw5_1",
-	rise3: "_rise3_7dhw5_1",
-	rise4: "_rise4_7dhw5_1",
-	rise5: "_rise5_7dhw5_1",
-	rise6: "_rise6_7dhw5_1",
-	rise7: "_rise7_7dhw5_1",
-	rise8: "_rise8_7dhw5_1",
-	rise9: "_rise9_7dhw5_1",
-	rise10: "_rise10_7dhw5_1",
-	rise11: "_rise11_7dhw5_1",
-	rise12: "_rise12_7dhw5_1",
-	rise13: "_rise13_7dhw5_1",
-	rise14: "_rise14_7dhw5_1",
-	rise15: "_rise15_7dhw5_1",
-	rise16: "_rise16_7dhw5_1",
-	rise17: "_rise17_7dhw5_1",
-	rise18: "_rise18_7dhw5_1",
-	rise19: "_rise19_7dhw5_1",
-	rise20: "_rise20_7dhw5_1",
-	effects: "_effects_7dhw5_238"
+	root: "_root_1mtdb_1",
+	button: "_button_1mtdb_11",
+	p: "_p_1mtdb_24",
+	text: "_text_1mtdb_24",
+	rise1: "_rise1_1mtdb_1",
+	rise2: "_rise2_1mtdb_1",
+	rise3: "_rise3_1mtdb_1",
+	rise4: "_rise4_1mtdb_1",
+	rise5: "_rise5_1mtdb_1",
+	rise6: "_rise6_1mtdb_1",
+	rise7: "_rise7_1mtdb_1",
+	rise8: "_rise8_1mtdb_1",
+	rise9: "_rise9_1mtdb_1",
+	rise10: "_rise10_1mtdb_1",
+	rise11: "_rise11_1mtdb_1",
+	rise12: "_rise12_1mtdb_1",
+	rise13: "_rise13_1mtdb_1",
+	rise14: "_rise14_1mtdb_1",
+	rise15: "_rise15_1mtdb_1",
+	rise16: "_rise16_1mtdb_1",
+	rise17: "_rise17_1mtdb_1",
+	rise18: "_rise18_1mtdb_1",
+	rise19: "_rise19_1mtdb_1",
+	rise20: "_rise20_1mtdb_1",
+	effects: "_effects_1mtdb_238"
 };
 //#endregion
 //#region src/components/Buttons/BurningButton/BurningButton.tsx
@@ -3842,10 +3842,10 @@ var NeonButton = ({ className, ...rest }) => {
 	});
 };
 var NoisyButton_module_default = {
-	root: "_root_hepo2_2",
-	i: "_i_hepo2_22",
-	noise: "_noise_hepo2_1",
-	text: "_text_hepo2_482"
+	root: "_root_1nssk_2",
+	i: "_i_1nssk_22",
+	noise: "_noise_1nssk_1",
+	text: "_text_1nssk_482"
 };
 //#endregion
 //#region src/components/Buttons/NoisyButton/NoisyButton.tsx
@@ -4730,16 +4730,18 @@ var ShimmeringBorderGradient = () => {
 	});
 };
 //#endregion
-//#region src/components/Buttons/ShinyButton/MacCursor.tsx
-var MacCursor = () => {
+//#region src/components/Buttons/ReflectiveButton/MacCursor.tsx
+function MacCursor() {
+	const filterId = (0, react.useId)().replace(/:/g, "");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		width: "22",
 		height: "22",
 		viewBox: "0 0 22 22",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
-			filter: "url(#filter0_d_3664_1573)",
+			filter: `url(#${filterId})`,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 					fillRule: "evenodd",
@@ -4776,7 +4778,7 @@ var MacCursor = () => {
 				})
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
-			id: "filter0_d_3664_1573",
+			id: filterId,
 			x: "0.733344",
 			y: "0.4",
 			width: "21.2",
@@ -4814,173 +4816,384 @@ var MacCursor = () => {
 			]
 		}) })]
 	});
-};
+}
 //#endregion
-//#region src/components/Buttons/ShinyButton/ShinyButton.helpers.ts
+//#region src/components/Buttons/ReflectiveButton/ReflectiveButton.helpers.ts
 var scale$2 = (number, inMin, inMax, outMin, outMax) => {
 	return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
 };
-var ShinyButton_module_default = {
-	root: "_root_yozjp_1",
-	buttonContainer: "_buttonContainer_yozjp_7",
-	pressed: "_pressed_yozjp_14",
-	button: "_button_yozjp_7",
-	shadow: "_shadow_yozjp_33",
-	text: "_text_yozjp_49",
-	buttonReflection: "_buttonReflection_yozjp_68",
-	surfaceReflection: "_surfaceReflection_yozjp_77",
-	detailsContainer: "_detailsContainer_yozjp_95",
-	hackyCursorInnerDiv: "_hackyCursorInnerDiv_yozjp_108",
-	cursor: "_cursor_yozjp_119",
-	fingerprint: "_fingerprint_yozjp_129"
-};
-//#endregion
-//#region src/components/Buttons/ShinyButton/ShinyButton.tsx
-var ShinyButton = () => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: ShinyButton_module_default.root,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-			roughness: .2,
-			offset: -200,
-			children: "Button"
-		})
-	});
+function getDefaultReflectiveButtonVideoConstraints() {
+	return {
+		audio: false,
+		video: {
+			width: { ideal: 600 },
+			height: { ideal: 600 },
+			facingMode: "user"
+		}
+	};
+}
+var ReflectiveButton_module_default = {
+	root: "_root_1xtu1_1",
+	buttonContainer: "_buttonContainer_1xtu1_6",
+	pressed: "_pressed_1xtu1_13",
+	button: "_button_1xtu1_6",
+	shadow: "_shadow_1xtu1_55",
+	text: "_text_1xtu1_71",
+	buttonReflection: "_buttonReflection_1xtu1_88",
+	surfaceReflection: "_surfaceReflection_1xtu1_96",
+	detailsContainer: "_detailsContainer_1xtu1_113",
+	playfulLayersClip: "_playfulLayersClip_1xtu1_125",
+	cursor: "_cursor_1xtu1_135",
+	visuallyHidden: "_visuallyHidden_1xtu1_144",
+	fingerprint: "_fingerprint_1xtu1_156"
+};
+//#endregion
+//#region src/components/Buttons/ReflectiveButton/useUserMediaVideo.ts
+function mapGetUserMediaError(e) {
+	const error = e instanceof DOMException ? e : e instanceof Error ? e : new Error(String(e));
+	if (e instanceof DOMException && e.name === "NotAllowedError") return {
+		status: "denied",
+		error
+	};
+	return {
+		status: "unavailable",
+		error
+	};
+}
+function useUserMediaVideo(constraints, options) {
+	const optsRef = (0, react.useRef)(options);
+	const constraintsRef = (0, react.useRef)(constraints);
+	(0, react.useEffect)(() => {
+		optsRef.current = options;
+	}, [options]);
+	(0, react.useEffect)(() => {
+		constraintsRef.current = constraints;
+	}, [constraints]);
+	const [status, setStatus] = (0, react.useState)("idle");
+	const [stream, setStream] = (0, react.useState)(null);
+	const requestGenerationRef = (0, react.useRef)(0);
+	const streamRef = (0, react.useRef)(null);
+	const setStatusAndNotify = (0, react.useCallback)((next) => {
+		setStatus(next);
+		optsRef.current?.onStatusChange?.(next);
+	}, []);
+	const stopTracksInternal = (0, react.useCallback)(() => {
+		const s = streamRef.current;
+		if (s) s.getTracks().forEach((t) => {
+			t.stop();
+		});
+		streamRef.current = null;
+		setStream(null);
+	}, []);
+	const stop = (0, react.useCallback)(() => {
+		requestGenerationRef.current += 1;
+		stopTracksInternal();
+		setStatusAndNotify("idle");
+	}, [setStatusAndNotify, stopTracksInternal]);
+	const start = (0, react.useCallback)(() => {
+		if (typeof navigator === "undefined") {
+			const err = /* @__PURE__ */ new Error("navigator is not available");
+			setStatusAndNotify("unavailable");
+			optsRef.current?.onError?.(err);
+			return;
+		}
+		const mediaDevices = navigator.mediaDevices;
+		if (!mediaDevices?.getUserMedia) {
+			const err = /* @__PURE__ */ new Error("getUserMedia is not supported");
+			setStatusAndNotify("unavailable");
+			optsRef.current?.onError?.(err);
+			return;
+		}
+		const myGeneration = ++requestGenerationRef.current;
+		stopTracksInternal();
+		setStatusAndNotify("pending");
+		mediaDevices.getUserMedia(constraintsRef.current).then((mediaStream) => {
+			if (myGeneration !== requestGenerationRef.current) {
+				mediaStream.getTracks().forEach((t) => {
+					t.stop();
+				});
+				return;
+			}
+			streamRef.current = mediaStream;
+			setStream(mediaStream);
+			setStatusAndNotify("live");
+		}).catch((e) => {
+			if (myGeneration !== requestGenerationRef.current) return;
+			const { status: nextStatus, error } = mapGetUserMediaError(e);
+			setStatusAndNotify(nextStatus);
+			optsRef.current?.onError?.(error);
+		});
+	}, [setStatusAndNotify, stopTracksInternal]);
+	(0, react.useEffect)(() => {
+		return () => {
+			requestGenerationRef.current += 1;
+			const s = streamRef.current;
+			if (s) s.getTracks().forEach((t) => {
+				t.stop();
+			});
+			streamRef.current = null;
+		};
+	}, []);
+	return {
+		status,
+		stream,
+		start,
+		stop
+	};
+}
+//#endregion
+//#region src/components/Buttons/ReflectiveButton/ReflectiveButton.tsx
+var FINGERPRINT_MAX = 12;
+var defaultFeatures = {
+	fingerprints: true,
+	macCursor: true
 };
-function Button({ roughness = 0, offset = 0, children }) {
+function ReflectiveButton({ children, className, style, disabled = false, roughness = .2, offset = -200, camera = "on-interaction", features: featuresProp, videoConstraints, onCameraError, onCameraStateChange, cameraHandleRef, onPointerDown, onClick, onFocus, onBlur, ref, ...rest }) {
+	const features = {
+		...defaultFeatures,
+		...featuresProp
+	};
+	const showPlayfulLayers = !require_hooks.useReducedMotion() && (features.macCursor || features.fingerprints);
 	const reflectionRef = (0, react.useRef)(null);
 	const surfaceReflectionRef = (0, react.useRef)(null);
-	const detailsContainerRef = (0, react.useRef)(null);
+	const buttonElementRef = (0, react.useRef)(null);
+	const interactionCameraStartedRef = (0, react.useRef)(false);
+	const fingerprintIdRef = (0, react.useRef)(0);
+	const pointerClientRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const rafIdRef = (0, react.useRef)(null);
 	const [cursorPosition, setCursorPosition] = (0, react.useState)({
 		x: 0,
 		y: 0
 	});
-	const [buttonFocus, setButtonFocus] = (0, react.useState)(false);
+	const [pointerOverRoot, setPointerOverRoot] = (0, react.useState)(false);
+	const [buttonKeyboardFocus, setButtonKeyboardFocus] = (0, react.useState)(false);
 	const [buttonPressed, setButtonPressed] = (0, react.useState)(false);
 	const [fingerprints, setFingerprints] = (0, react.useState)([]);
-	const [inBrowser] = (0, react.useState)(() => typeof window !== "undefined");
-	const mappedRoughness = Math.round(scale$2(roughness, 0, 1, 0, 16));
-	const [showBorderRadius] = (0, react.useState)(() => !navigator.userAgent.includes("Chrome"));
+	const mergedButtonRef = require_useMergeRefs.useMergeRefs(ref, buttonElementRef);
+	const { status, stream, start, stop } = useUserMediaVideo((0, react.useMemo)(() => {
+		const base = getDefaultReflectiveButtonVideoConstraints();
+		if (!videoConstraints) return base;
+		return {
+			...base,
+			video: {
+				...base.video,
+				...videoConstraints
+			}
+		};
+	}, [videoConstraints]), {
+		onError: onCameraError,
+		onStatusChange: onCameraStateChange
+	});
+	const cameraStatusMessage = status === "denied" ? "Camera access denied" : status === "unavailable" ? "Camera unavailable" : null;
+	(0, react.useImperativeHandle)(cameraHandleRef, () => ({
+		requestCamera: start,
+		stopCamera: stop
+	}), [start, stop]);
 	(0, react.useEffect)(() => {
-		if (!reflectionRef.current || !surfaceReflectionRef.current || !inBrowser) return;
-		try {
-			navigator.mediaDevices.getUserMedia({
-				audio: false,
-				video: {
-					width: { ideal: 600 },
-					height: { ideal: 600 },
-					facingMode: "user"
-				}
-			}).then((stream) => {
-				const video = reflectionRef.current;
-				if (!video) return;
-				video.setAttribute("playsinline", "true");
-				video.srcObject = stream;
-				video.onloadedmetadata = () => {
-					video.play();
-				};
-				const surface = surfaceReflectionRef.current;
-				if (!surface) return;
-				surface.setAttribute("playsinline", "true");
-				surface.srcObject = stream;
-				surface.onloadedmetadata = () => {
-					surface.play();
-				};
-			}).catch((e) => console.error(e));
-		} catch (e) {
-			console.error(e);
-		}
+		interactionCameraStartedRef.current = false;
+	}, [camera, disabled]);
+	(0, react.useEffect)(() => {
+		if (disabled) stop();
+	}, [disabled, stop]);
+	(0, react.useEffect)(() => {
+		if (camera !== "on-mount" || disabled) return;
+		start();
+		return () => {
+			stop();
+		};
 	}, [
-		reflectionRef,
-		surfaceReflectionRef,
-		inBrowser
+		camera,
+		disabled,
+		start,
+		stop
 	]);
 	(0, react.useEffect)(() => {
-		if (!detailsContainerRef.current || !inBrowser) return;
-		const handleMouseMove = (event) => {
-			const rect = detailsContainerRef.current?.getBoundingClientRect();
+		const face = reflectionRef.current;
+		const surface = surfaceReflectionRef.current;
+		const clearVideo = (el) => {
+			if (!el) return;
+			el.onloadedmetadata = null;
+			el.srcObject = null;
+		};
+		if (!stream) {
+			clearVideo(face);
+			clearVideo(surface);
+			return;
+		}
+		const attach = (el) => {
+			if (!el) return;
+			el.setAttribute("playsinline", "true");
+			el.muted = true;
+			el.srcObject = stream;
+			el.onloadedmetadata = () => {
+				el.play().catch(() => {});
+			};
+		};
+		attach(face);
+		attach(surface);
+		return () => {
+			clearVideo(face);
+			clearVideo(surface);
+		};
+	}, [stream]);
+	(0, react.useEffect)(() => {
+		if (!showPlayfulLayers || !features.macCursor) return;
+		const flushCursor = () => {
+			rafIdRef.current = null;
+			const rect = buttonElementRef.current?.getBoundingClientRect();
 			if (!rect) return;
+			const { x: clientX, y: clientY } = pointerClientRef.current;
 			setCursorPosition({
-				x: event.clientX - rect.x,
-				y: event.clientY - rect.y
+				x: clientX - rect.x,
+				y: clientY - rect.y
 			});
 		};
+		const handleMouseMove = (event) => {
+			pointerClientRef.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (rafIdRef.current === null) rafIdRef.current = window.requestAnimationFrame(flushCursor);
+		};
 		window.addEventListener("mousemove", handleMouseMove);
 		return () => {
 			window.removeEventListener("mousemove", handleMouseMove);
+			if (rafIdRef.current !== null) {
+				window.cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = null;
+			}
 		};
-	}, [inBrowser]);
-	const handleMouseDown = (e) => {
+	}, [features.macCursor, showPlayfulLayers]);
+	const mappedRoughness = Math.round(scale$2(roughness, 0, 1, 0, 16));
+	const tryStartInteractionCamera = (0, react.useCallback)(() => {
+		if (camera !== "on-interaction" || disabled) return;
+		if (interactionCameraStartedRef.current) return;
+		interactionCameraStartedRef.current = true;
+		start();
+	}, [
+		camera,
+		disabled,
+		start
+	]);
+	const addFingerprintFromClient = (0, react.useCallback)((clientX, clientY) => {
+		if (!features.fingerprints || !showPlayfulLayers) return;
+		const rect = buttonElementRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		fingerprintIdRef.current += 1;
+		const id = String(fingerprintIdRef.current);
+		setFingerprints((prev) => [...prev, {
+			id,
+			x: clientX - rect.x,
+			y: clientY - rect.y
+		}].slice(-FINGERPRINT_MAX));
+	}, [features.fingerprints, showPlayfulLayers]);
+	const endPress = (0, react.useCallback)(() => setButtonPressed(false), []);
+	const handleButtonFocus = (0, react.useCallback)((e) => {
+		onFocus?.(e);
+		setButtonKeyboardFocus(true);
+	}, [onFocus]);
+	const handleButtonBlur = (0, react.useCallback)((e) => {
+		onBlur?.(e);
+		setButtonKeyboardFocus(false);
+	}, [onBlur]);
+	const handlePointerDown = (0, react.useCallback)((e) => {
+		onPointerDown?.(e);
+		if (e.defaultPrevented) return;
+		tryStartInteractionCamera();
 		setButtonPressed(true);
-		if (!detailsContainerRef.current) return;
-		const rect = detailsContainerRef.current.getBoundingClientRect();
-		const fingerprint = {
-			x: e.clientX - rect.x,
-			y: e.clientY - rect.y
-		};
-		setFingerprints((fingerprints) => [...fingerprints, fingerprint]);
-	};
-	const handleTouchStart = (e) => {
-		if (e.touches.length > 0 && detailsContainerRef.current) {
-			const touch = e.touches[0];
-			const rect = detailsContainerRef.current.getBoundingClientRect();
-			const fingerprint = {
-				x: touch.clientX - rect.x,
-				y: touch.clientY - rect.y
-			};
-			setButtonPressed(true);
-			setFingerprints((fingerprints) => [...fingerprints, fingerprint]);
-		}
-	};
-	if (!inBrowser) return null;
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		addFingerprintFromClient(e.clientX, e.clientY);
+	}, [
+		addFingerprintFromClient,
+		onPointerDown,
+		tryStartInteractionCamera
+	]);
+	const handleClick = (0, react.useCallback)((e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		tryStartInteractionCamera();
+	}, [onClick, tryStartInteractionCamera]);
+	const showMacCursorAffordance = pointerOverRoot || buttonKeyboardFocus;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		onMouseEnter: () => setButtonFocus(true),
-		onMouseLeave: () => setButtonFocus(false),
-		className: (0, clsx.default)(ShinyButton_module_default.buttonContainer, { [ShinyButton_module_default.pressed]: buttonPressed }),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: ShinyButton_module_default.detailsContainer,
-				ref: detailsContainerRef,
-				style: { borderRadius: showBorderRadius ? "var(--border-radius)" : 0 },
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: ShinyButton_module_default.hackyCursorInnerDiv,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: ShinyButton_module_default.cursor,
-						style: {
-							transform: `translate(${cursorPosition.x}px, ${cursorPosition.y}px) translate(-50%, -50%)`,
-							opacity: buttonFocus ? 1 : 0
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MacCursor, {})
-					})
-				}), fingerprints.map((el, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: ShinyButton_module_default.fingerprint,
-					style: { transform: `translate(${el.x}px, ${el.y}px) translate(-50%, -50%)` }
-				}, i))]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-				ref: surfaceReflectionRef,
-				className: (0, clsx.default)(ShinyButton_module_default.surfaceReflection, { [ShinyButton_module_default.pressed]: buttonPressed })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)(ShinyButton_module_default.button, { [ShinyButton_module_default.pressed]: buttonPressed }),
-				onMouseDown: handleMouseDown,
-				onTouchStart: handleTouchStart,
-				onMouseUp: () => setButtonPressed(false),
-				onTouchEnd: () => setButtonPressed(false),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-					ref: reflectionRef,
-					playsInline: true,
-					className: ShinyButton_module_default.buttonReflection,
-					style: {
-						filter: `blur(${mappedRoughness}px) saturate(0.4) brightness(1.1)`,
-						objectPosition: `0px ${offset}px`
-					}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: ShinyButton_module_default.shadow })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: ShinyButton_module_default.text,
-				children
-			})
-		]
+		className: (0, clsx.default)(ReflectiveButton_module_default.root, className),
+		style,
+		onMouseEnter: () => setPointerOverRoot(true),
+		onMouseLeave: () => setPointerOverRoot(false),
+		children: [cameraStatusMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: ReflectiveButton_module_default.visuallyHidden,
+			role: "status",
+			"aria-live": "polite",
+			children: cameraStatusMessage
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)(ReflectiveButton_module_default.buttonContainer, { [ReflectiveButton_module_default.pressed]: buttonPressed }),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: ReflectiveButton_module_default.detailsContainer,
+					children: showPlayfulLayers && (features.macCursor || features.fingerprints) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: ReflectiveButton_module_default.playfulLayersClip,
+						children: [features.macCursor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: ReflectiveButton_module_default.cursor,
+							style: {
+								transform: `translate(${cursorPosition.x}px, ${cursorPosition.y}px) translate(-50%, -50%)`,
+								opacity: showMacCursorAffordance ? 1 : 0
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MacCursor, {})
+						}) : null, features.fingerprints ? fingerprints.map((fp) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: ReflectiveButton_module_default.fingerprint,
+							style: { transform: `translate(${fp.x}px, ${fp.y}px) translate(-50%, -50%)` }
+						}, fp.id)) : null]
+					}) : null
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+					ref: surfaceReflectionRef,
+					className: (0, clsx.default)(ReflectiveButton_module_default.surfaceReflection, { [ReflectiveButton_module_default.pressed]: buttonPressed }),
+					"aria-hidden": true,
+					muted: true,
+					playsInline: true
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					ref: mergedButtonRef,
+					disabled,
+					className: (0, clsx.default)(ReflectiveButton_module_default.button, { [ReflectiveButton_module_default.pressed]: buttonPressed }),
+					"aria-busy": status === "pending" || void 0,
+					onPointerDown: handlePointerDown,
+					onPointerUp: endPress,
+					onPointerCancel: endPress,
+					onLostPointerCapture: endPress,
+					onClick: handleClick,
+					onFocus: handleButtonFocus,
+					onBlur: handleButtonBlur,
+					...rest,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+							ref: reflectionRef,
+							playsInline: true,
+							className: ReflectiveButton_module_default.buttonReflection,
+							"aria-hidden": true,
+							muted: true,
+							style: {
+								filter: `blur(${mappedRoughness}px) saturate(0.4) brightness(1.1)`,
+								objectPosition: `0px ${offset}px`
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: ReflectiveButton_module_default.shadow,
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: ReflectiveButton_module_default.text,
+							children
+						})
+					]
+				})
+			]
+		})]
 	});
 }
 //#endregion
@@ -9589,16 +9802,16 @@ var playAudio = (src, onError) => {
 	});
 };
 var DockMotion_module_default = {
-	root: "_root_ofkv2_1",
-	container: "_container_ofkv2_18",
-	containerGlass: "_containerGlass_ofkv2_32",
-	glossyXLine: "_glossyXLine_ofkv2_39",
-	items: "_items_ofkv2_49",
-	child: "_child_ofkv2_89",
-	divider: "_divider_ofkv2_95",
-	glassFilter: "_glassFilter_ofkv2_106",
-	glassOverlay: "_glassOverlay_ofkv2_118",
-	glassSpecular: "_glassSpecular_ofkv2_127"
+	root: "_root_1b5vk_1",
+	container: "_container_1b5vk_18",
+	containerGlass: "_containerGlass_1b5vk_32",
+	glossyXLine: "_glossyXLine_1b5vk_39",
+	items: "_items_1b5vk_49",
+	child: "_child_1b5vk_89",
+	divider: "_divider_1b5vk_95",
+	glassFilter: "_glassFilter_1b5vk_106",
+	glassOverlay: "_glassOverlay_1b5vk_118",
+	glassSpecular: "_glassSpecular_1b5vk_127"
 };
 //#endregion
 //#region src/components/Docks/DockMotion/DockMotionDivider.tsx
@@ -10040,16 +10253,16 @@ var TooltipRangeSlider = () => {
 	});
 };
 var DockMotionItem_module_default = {
-	root: "_root_1aw22_1",
-	expanded: "_expanded_1aw22_15",
-	rootGlass: "_rootGlass_1aw22_24",
-	item: "_item_1aw22_28",
-	itemGlass: "_itemGlass_1aw22_44",
-	content: "_content_1aw22_52",
-	gloss: "_gloss_1aw22_63",
-	glassFilter: "_glassFilter_1aw22_73",
-	glassOverlay: "_glassOverlay_1aw22_85",
-	glassSpecular: "_glassSpecular_1aw22_94"
+	root: "_root_5hf3i_1",
+	expanded: "_expanded_5hf3i_17",
+	rootGlass: "_rootGlass_5hf3i_26",
+	item: "_item_5hf3i_30",
+	itemGlass: "_itemGlass_5hf3i_56",
+	content: "_content_5hf3i_64",
+	gloss: "_gloss_5hf3i_75",
+	glassFilter: "_glassFilter_5hf3i_85",
+	glassOverlay: "_glassOverlay_5hf3i_97",
+	glassSpecular: "_glassSpecular_5hf3i_106"
 };
 //#endregion
 //#region src/components/Docks/DockMotion/DockMotionItem.tsx
@@ -12518,7 +12731,7 @@ var SignatureAnimation = ({ className, onChange }) => {
 			return;
 		}
 		const digitData = DIGIT_BANK[key];
-		let charInfo = null;
+		let charInfo;
 		let className;
 		let charKey;
 		if (digitData) {
@@ -19534,12 +19747,12 @@ var ScrambledText = ({ children, reveal = false }) => {
 	});
 };
 var ScramblingLetters_module_default = {
-	root: "_root_1xkae_1",
-	line: "_line_1xkae_9",
-	word: "_word_1xkae_14",
-	link: "_link_1xkae_18",
-	letter: "_letter_1xkae_22",
-	wobble: "_wobble_1xkae_1"
+	root: "_root_m9eu9_1",
+	line: "_line_m9eu9_9",
+	word: "_word_m9eu9_14",
+	link: "_link_m9eu9_18",
+	letter: "_letter_m9eu9_22",
+	wobble: "_wobble_m9eu9_1"
 };
 //#endregion
 //#region src/components/Texts/ScramblingLetters/ScramblingLetters.tsx
@@ -19830,17 +20043,24 @@ function resolveThemeMode(mode) {
 function syncThemeToDom({ backgroundColor, colorSpace, resolvedTheme }) {
 	if (typeof document === "undefined") return;
 	const root = document.documentElement;
+	const body = document.body;
 	root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
 	root.style.colorScheme = resolvedTheme;
-	if (colorSpace) root.setAttribute(COLOR_SPACE_ATTRIBUTE, colorSpace === "p3" ? "true" : "false");
-	else root.removeAttribute(COLOR_SPACE_ATTRIBUTE);
+	if (body) body.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
+	if (colorSpace) {
+		root.setAttribute(COLOR_SPACE_ATTRIBUTE, colorSpace === "p3" ? "true" : "false");
+		if (body) body.setAttribute(COLOR_SPACE_ATTRIBUTE, colorSpace === "p3" ? "true" : "false");
+	} else {
+		root.removeAttribute(COLOR_SPACE_ATTRIBUTE);
+		if (body) body.removeAttribute(COLOR_SPACE_ATTRIBUTE);
+	}
 	if (backgroundColor) root.style.backgroundColor = backgroundColor;
 	else root.style.removeProperty("background-color");
 }
 //#endregion
 //#region src/components/primitives/ThemeProvider/ThemeProvider.tsx
 var STORAGE_KEY = "theme-mode";
-var ThemeProvider = ({ children, defaultMode = "system", mode: controlledMode, onModeChange, storageKey = STORAGE_KEY }) => {
+var ThemeProvider = ({ children, defaultMode = "system", mode: controlledMode, onModeChange, storageKey = STORAGE_KEY, syncDomExtras }) => {
 	const isControlled = controlledMode !== void 0;
 	const [uncontrolledMode, setUncontrolledMode] = (0, react.useState)(() => {
 		if (isControlled) return controlledMode;
@@ -19860,8 +20080,11 @@ var ThemeProvider = ({ children, defaultMode = "system", mode: controlledMode, o
 		return () => mql.removeEventListener("change", handler);
 	}, [mode]);
 	(0, react.useEffect)(() => {
-		syncThemeToDom({ resolvedTheme });
-	}, [resolvedTheme]);
+		syncThemeToDom({
+			resolvedTheme,
+			...syncDomExtras
+		});
+	}, [resolvedTheme, syncDomExtras]);
 	const setMode = (0, react.useCallback)((next) => {
 		if (!isControlled) {
 			setUncontrolledMode(next);
@@ -26526,6 +26749,7 @@ exports.RadioSlidingFocus = RadioSlidingFocus;
 exports.RaysBackground = RaysBackground;
 exports.RealisticSmoke = RealisticSmoke;
 exports.RedirectPage = RedirectPage;
+exports.ReflectiveButton = ReflectiveButton;
 exports.RegularLink = RegularLink;
 exports.RepostButton = RepostButton;
 exports.RevealImageAnimation = RevealImageAnimation;
@@ -26559,7 +26783,6 @@ exports.ShimmeringBorderGradient = ShimmeringBorderGradient;
 exports.ShineAnimation = ShineAnimation;
 exports.ShineCard = ShineCard;
 exports.ShiningText = ShiningText;
-exports.ShinyButton = ShinyButton;
 exports.ShinyCtaButton = ShinyCtaButton;
 exports.SignatureAnimation = SignatureAnimation;
 exports.SinglePopoverMenu = SinglePopoverMenu;