@prosopo/procaptcha-puzzle 2.13.2 → 2.14.0

package/vite.test.config.ts

@@ -16,12 +16,11 @@ import { defineConfig, mergeConfig } from "vitest/config";
 
 process.env.NODE_ENV = "test";
 
-// The widgets render into the DOM and the manager clears its timeouts through
-// `window`, so jsdom is required; the setup file tells React it is under test
-// so act() flushes renders synchronously.
+// The widgets build real DOM and the manager clears its timeouts through
+// `window`, so jsdom is required.
 export default mergeConfig(
 	ViteTestConfig(),
 	defineConfig({
-		test: { environment: "jsdom", setupFiles: ["./src/tests/setup.ts"] },
+		test: { environment: "jsdom" },
 	}),
 );

package/dist/cjs/components/ProcaptchaPuzzle.cjs

@@ -1,7 +0,0 @@
-let react = require("react");
-let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
-//#region src/components/ProcaptchaPuzzle.tsx
-var ProcaptchaWidget = (0, react.lazy)(async () => Promise.resolve().then(() => require("./ProcaptchaWidget.cjs")));
-var ProcaptchaPuzzle = (props) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ProcaptchaWidget, { ...props }) });
-//#endregion
-exports.ProcaptchaPuzzle = ProcaptchaPuzzle;

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -1,206 +0,0 @@
-const require_Manager = require("../services/Manager.cjs");
-const require_PuzzleCanvas = require("./PuzzleCanvas.cjs");
-let _prosopo_locale = require("@prosopo/locale");
-let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
-let _prosopo_types = require("@prosopo/types");
-let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
-let react = require("react");
-let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
-//#region src/components/ProcaptchaWidget.tsx
-var PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
-var Procaptcha = (props) => {
-	const { t, ready: isTranslationReady } = (0, _prosopo_locale.useTranslation)();
-	const config = props.config;
-	const i18n = props.i18n;
-	const theme = "light" === config.theme ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
-	const frictionlessState = props.frictionlessState;
-	const callbacks = props.callbacks || {};
-	const [state, _updateState] = (0, _prosopo_procaptcha_common.useProcaptcha)(react.useState, react.useRef);
-	const [loading, setLoading] = (0, react.useState)(false);
-	const [puzzlePhase, setPuzzlePhase] = (0, react.useState)("checkbox");
-	const [challengeData, setChallengeData] = (0, react.useState)(null);
-	const [showRetry, setShowRetry] = (0, react.useState)(false);
-	const updateState = (0, _prosopo_procaptcha_common.buildUpdateState)(state, _updateState);
-	const hpRef = (0, react.useRef)(null);
-	const manager = (0, react.useRef)(require_Manager.Manager(config, state, updateState, callbacks, frictionlessState, () => hpRef.current?.value || void 0));
-	const lastCoordsRef = (0, react.useRef)(null);
-	const sessionInvalidatedFiredRef = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		if (!config.language) return;
-		if (i18n) {
-			if (i18n.language !== config.language) i18n.changeLanguage(config.language);
-			return;
-		}
-		(0, _prosopo_locale.loadI18next)(false, config.language);
-	}, [i18n, config.language]);
-	(0, react.useEffect)(() => {
-		if (!props.autoStart) return;
-		setLoading(true);
-		setShowRetry(false);
-		const coords = props.startCoords;
-		lastCoordsRef.current = coords ?? null;
-		manager.current.start(coords?.x ?? 0, coords?.y ?? 0).then((challenge) => {
-			if (challenge) {
-				setChallengeData(challenge);
-				setPuzzlePhase("dragging");
-			}
-			setLoading(false);
-		}, () => setLoading(false));
-	}, [props.autoStart, props.startCoords]);
-	(0, react.useEffect)(() => {
-		if (!state.error) return void 0;
-		setLoading(false);
-		setPuzzlePhase("checkbox");
-		setChallengeData(null);
-		setShowRetry(false);
-		if (state.error.key !== "CAPTCHA.NO_SESSION_FOUND") return void 0;
-		if (props.onSessionInvalidated && !sessionInvalidatedFiredRef.current) {
-			sessionInvalidatedFiredRef.current = true;
-			const coords = lastCoordsRef.current;
-			props.onSessionInvalidated(coords?.x, coords?.y);
-			return;
-		}
-		if (frictionlessState) {
-			const timer = setTimeout(() => {
-				frictionlessState.restart();
-			}, 100);
-			return () => clearTimeout(timer);
-		}
-	}, [
-		state.error,
-		frictionlessState,
-		props.onSessionInvalidated
-	]);
-	(0, react.useEffect)(() => {
-		const handleExecuteEvent = async () => {
-			if (loading) return;
-			setLoading(true);
-			setShowRetry(false);
-			try {
-				const challenge = await manager.current.start();
-				if (challenge) {
-					setChallengeData(challenge);
-					setPuzzlePhase("dragging");
-				}
-			} catch (error) {
-				callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
-			} finally {
-				setLoading(false);
-			}
-		};
-		const container = props.container;
-		const invisible = config.mode === _prosopo_types.ModeEnum.invisible;
-		container?.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-		if (invisible) document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-		return () => {
-			container?.removeEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-			if (invisible) document.removeEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-		};
-	}, [
-		config.mode,
-		callbacks.onError,
-		loading,
-		props.container
-	]);
-	const handlePuzzleComplete = (0, react.useCallback)(async (finalX, finalY, puzzleEvents) => {
-		setPuzzlePhase("submitting");
-		let verified = false;
-		try {
-			verified = await manager.current.submitSolution(finalX, finalY, puzzleEvents);
-		} catch (error) {
-			callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
-		}
-		if (verified) {
-			setPuzzlePhase("checkbox");
-			setChallengeData(null);
-			setShowRetry(false);
-			setLoading(false);
-			return;
-		}
-		setShowRetry(true);
-		setPuzzlePhase("dragging");
-		try {
-			const newChallenge = await manager.current.start();
-			if (newChallenge) setChallengeData(newChallenge);
-			else {
-				setPuzzlePhase("checkbox");
-				setChallengeData(null);
-				setShowRetry(false);
-			}
-		} catch {
-			setPuzzlePhase("checkbox");
-			setChallengeData(null);
-			setShowRetry(false);
-		}
-		setLoading(false);
-	}, [callbacks.onError]);
-	const isInvisible = config.mode === _prosopo_types.ModeEnum.invisible;
-	const handleDismiss = (0, react.useCallback)(() => {
-		setPuzzlePhase("checkbox");
-		setChallengeData(null);
-		setShowRetry(false);
-		setLoading(false);
-	}, []);
-	const showPuzzleOverlay = (puzzlePhase === "dragging" || puzzlePhase === "submitting") && challengeData;
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
-		frictionlessState?.hp && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.Honeypot, {
-			ref: hpRef,
-			encodedQuestion: frictionlessState.hp
-		}),
-		showPuzzleOverlay && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_PuzzleCanvas.PuzzleCanvas, {
-			originX: challengeData.originX,
-			originY: challengeData.originY,
-			background: challengeData.background,
-			piece: challengeData.piece,
-			pieceSize: challengeData.pieceSize,
-			onComplete: handlePuzzleComplete,
-			showRetry,
-			submitting: puzzlePhase === "submitting",
-			theme,
-			placement: config.placement,
-			anchor: props.container,
-			onDismiss: handleDismiss
-		}),
-		!isInvisible && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.Checkbox, {
-			checked: state.isHuman,
-			theme,
-			onChange: async (event) => {
-				if (loading) return;
-				setLoading(true);
-				setShowRetry(false);
-				let x = 0;
-				let y = 0;
-				const mouseOrTouchEvent = event.nativeEvent;
-				if (!(0, _prosopo_procaptcha_common.isEventTrusted)(mouseOrTouchEvent)) {} else if ("touches" in mouseOrTouchEvent && mouseOrTouchEvent.touches.length > 0 && mouseOrTouchEvent.touches[0]) {
-					x = mouseOrTouchEvent.touches[0].clientX;
-					y = mouseOrTouchEvent.touches[0].clientY;
-				} else if ("clientX" in mouseOrTouchEvent && "clientY" in mouseOrTouchEvent) {
-					x = mouseOrTouchEvent.clientX;
-					y = mouseOrTouchEvent.clientY;
-				}
-				lastCoordsRef.current = {
-					x,
-					y
-				};
-				try {
-					const challenge = await manager.current.start(x, y);
-					if (challenge) {
-						setChallengeData(challenge);
-						setPuzzlePhase("dragging");
-					}
-				} catch (error) {
-					callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
-				} finally {
-					setLoading(false);
-				}
-			},
-			labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "",
-			error: state.error?.message,
-			"aria-label": "human checkbox",
-			loadingText: t("WIDGET.CHECKING", { defaultValue: "Checking that you are human" }),
-			loading: loading || puzzlePhase === "submitting"
-		})
-	] });
-};
-//#endregion
-exports.default = Procaptcha;

package/dist/cjs/components/PuzzleCanvas.cjs

@@ -1,476 +0,0 @@
-let _prosopo_locale = require("@prosopo/locale");
-let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
-let react = require("react");
-let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
-//#region src/components/PuzzleCanvas.tsx
-var CONTAINER_WIDTH = 300;
-var CONTAINER_HEIGHT = 200;
-var PIECE_CSS_CLASS = "prosopo-puzzle-piece";
-var STEP_PX = 10;
-var FINE_STEP_PX = 2;
-var ANNOUNCE_DEBOUNCE_MS = 400;
-var VISUALLY_HIDDEN = {
-	position: "absolute",
-	width: "1px",
-	height: "1px",
-	padding: 0,
-	margin: "-1px",
-	overflow: "hidden",
-	clip: "rect(0, 0, 0, 0)",
-	clipPath: "inset(50%)",
-	whiteSpace: "nowrap",
-	border: 0
-};
-var stylesheet = (focusRingColor) => `
-@keyframes prosopo-puzzle-shake {
-	0%, 100% { transform: translateX(0); }
-	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
-	20%, 40%, 60%, 80% { transform: translateX(4px); }
-}
-.${PIECE_CSS_CLASS}:focus-visible {
-	outline: 3px solid ${focusRingColor};
-	outline-offset: 2px;
-}
-`;
-var PuzzleCanvas = ({ originX, originY, background, piece, pieceSize, onComplete, showRetry, submitting, theme, placement, anchor, onDismiss }) => {
-	const [posX, setPosX] = (0, react.useState)(originX);
-	const [posY, setPosY] = (0, react.useState)(originY);
-	const isDragging = (0, react.useRef)(false);
-	const [dragging, setDragging] = (0, react.useState)(false);
-	const puzzleEvents = (0, react.useRef)([]);
-	const containerRef = (0, react.useRef)(null);
-	const offsetRef = (0, react.useRef)({
-		x: 0,
-		y: 0
-	});
-	const [visible, setVisible] = (0, react.useState)(false);
-	const [shaking, setShaking] = (0, react.useState)(false);
-	const { t } = (0, _prosopo_locale.useTranslation)();
-	const baseId = (0, react.useId)();
-	const instructionId = `${baseId}-instruction`;
-	const keyboardHintId = `${baseId}-keyboard-hint`;
-	const keyboardDragging = (0, react.useRef)(false);
-	const [announcement, setAnnouncement] = (0, react.useState)("");
-	const announceTimer = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		setPosX(originX);
-		setPosY(originY);
-		keyboardDragging.current = false;
-	}, [originX, originY]);
-	(0, react.useEffect)(() => {
-		const frame = requestAnimationFrame(() => setVisible(true));
-		return () => cancelAnimationFrame(frame);
-	}, []);
-	(0, react.useEffect)(() => {
-		if (showRetry) {
-			setShaking(true);
-			const timer = setTimeout(() => setShaking(false), 500);
-			return () => clearTimeout(timer);
-		}
-		return () => {};
-	}, [showRetry]);
-	const clamp = (0, react.useCallback)((value, min, max) => {
-		return Math.max(min, Math.min(max, value));
-	}, []);
-	const announce = (0, react.useCallback)((message, delayMs = 0) => {
-		if (announceTimer.current) {
-			clearTimeout(announceTimer.current);
-			announceTimer.current = null;
-		}
-		if (delayMs === 0) {
-			setAnnouncement(message);
-			return;
-		}
-		announceTimer.current = setTimeout(() => setAnnouncement(message), delayMs);
-	}, []);
-	(0, react.useEffect)(() => () => {
-		if (announceTimer.current) clearTimeout(announceTimer.current);
-	}, []);
-	const describePosition = (0, react.useCallback)((x, y) => t("WIDGET.PUZZLE.POSITION", {
-		defaultValue: "{{x}} percent across, {{y}} percent down",
-		x: Math.round(x / CONTAINER_WIDTH * 100),
-		y: Math.round(y / CONTAINER_HEIGHT * 100)
-	}), [t]);
-	const getContainerOffset = (0, react.useCallback)(() => {
-		if (containerRef.current) {
-			const rect = containerRef.current.getBoundingClientRect();
-			return {
-				x: rect.left,
-				y: rect.top
-			};
-		}
-		return {
-			x: 0,
-			y: 0
-		};
-	}, []);
-	const handleMoveEvent = (0, react.useCallback)((clientX, clientY) => {
-		if (!isDragging.current) return;
-		const containerOffset = getContainerOffset();
-		const newX = clamp(clientX - containerOffset.x - offsetRef.current.x, 0, CONTAINER_WIDTH);
-		const newY = clamp(clientY - containerOffset.y - offsetRef.current.y, 0, CONTAINER_HEIGHT);
-		setPosX(newX);
-		setPosY(newY);
-		puzzleEvents.current.push({
-			x: newX,
-			y: newY,
-			t: Date.now()
-		});
-	}, [clamp, getContainerOffset]);
-	const complete = (0, react.useCallback)((finalX, finalY) => {
-		onComplete(finalX, finalY, [...puzzleEvents.current]);
-	}, [onComplete]);
-	const handleEndEvent = (0, react.useCallback)(() => {
-		if (!isDragging.current) return;
-		isDragging.current = false;
-		setDragging(false);
-		const lastEvent = puzzleEvents.current[puzzleEvents.current.length - 1];
-		complete(lastEvent ? lastEvent.x : originX, lastEvent ? lastEvent.y : originY);
-	}, [
-		complete,
-		originX,
-		originY
-	]);
-	const handleMouseMove = (0, react.useCallback)((event) => {
-		handleMoveEvent(event.clientX, event.clientY);
-	}, [handleMoveEvent]);
-	const handleTouchMove = (0, react.useCallback)((event) => {
-		const touch = event.touches[0];
-		if (touch) handleMoveEvent(touch.clientX, touch.clientY);
-	}, [handleMoveEvent]);
-	const handleMouseUp = (0, react.useCallback)(() => {
-		handleEndEvent();
-	}, [handleEndEvent]);
-	const handleTouchEnd = (0, react.useCallback)(() => {
-		handleEndEvent();
-	}, [handleEndEvent]);
-	(0, react.useEffect)(() => {
-		document.addEventListener("mousemove", handleMouseMove);
-		document.addEventListener("mouseup", handleMouseUp);
-		document.addEventListener("touchmove", handleTouchMove);
-		document.addEventListener("touchend", handleTouchEnd);
-		return () => {
-			document.removeEventListener("mousemove", handleMouseMove);
-			document.removeEventListener("mouseup", handleMouseUp);
-			document.removeEventListener("touchmove", handleTouchMove);
-			document.removeEventListener("touchend", handleTouchEnd);
-		};
-	}, [
-		handleMouseMove,
-		handleMouseUp,
-		handleTouchMove,
-		handleTouchEnd
-	]);
-	const handlePieceMouseDown = (0, react.useCallback)((event) => {
-		if (submitting) return;
-		isDragging.current = true;
-		keyboardDragging.current = false;
-		setDragging(true);
-		puzzleEvents.current = [];
-		const containerOffset = getContainerOffset();
-		offsetRef.current = {
-			x: event.clientX - containerOffset.x - posX,
-			y: event.clientY - containerOffset.y - posY
-		};
-	}, [
-		getContainerOffset,
-		posX,
-		posY,
-		submitting
-	]);
-	const handlePieceTouchStart = (0, react.useCallback)((event) => {
-		if (submitting) return;
-		const touch = event.touches[0];
-		if (touch) {
-			isDragging.current = true;
-			keyboardDragging.current = false;
-			setDragging(true);
-			puzzleEvents.current = [];
-			const containerOffset = getContainerOffset();
-			offsetRef.current = {
-				x: touch.clientX - containerOffset.x - posX,
-				y: touch.clientY - containerOffset.y - posY
-			};
-		}
-	}, [
-		getContainerOffset,
-		posX,
-		posY,
-		submitting
-	]);
-	const moveByKeyboard = (0, react.useCallback)((deltaX, deltaY) => {
-		if (!keyboardDragging.current) {
-			keyboardDragging.current = true;
-			puzzleEvents.current = [];
-		}
-		const nextX = clamp(posX + deltaX, 0, CONTAINER_WIDTH);
-		const nextY = clamp(posY + deltaY, 0, CONTAINER_HEIGHT);
-		setPosX(nextX);
-		setPosY(nextY);
-		puzzleEvents.current.push({
-			x: nextX,
-			y: nextY,
-			t: Date.now()
-		});
-		announce(describePosition(nextX, nextY), ANNOUNCE_DEBOUNCE_MS);
-	}, [
-		announce,
-		clamp,
-		describePosition,
-		posX,
-		posY
-	]);
-	const handlePieceKeyDown = (0, react.useCallback)((event) => {
-		if (submitting) return;
-		if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
-		const step = event.shiftKey ? FINE_STEP_PX : STEP_PX;
-		const move = {
-			ArrowLeft: [-step, 0],
-			ArrowRight: [step, 0],
-			ArrowUp: [0, -step],
-			ArrowDown: [0, step],
-			Home: [originX - posX, originY - posY]
-		}[event.key];
-		if (move) {
-			event.preventDefault();
-			moveByKeyboard(move[0], move[1]);
-			return;
-		}
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			keyboardDragging.current = false;
-			complete(posX, posY);
-		}
-	}, [
-		complete,
-		moveByKeyboard,
-		originX,
-		originY,
-		posX,
-		posY,
-		submitting
-	]);
-	const handlePieceFocus = (0, react.useCallback)(() => {
-		announce(describePosition(posX, posY));
-	}, [
-		announce,
-		describePosition,
-		posX,
-		posY
-	]);
-	const instructionText = showRetry ? t("WIDGET.PUZZLE.RETRY", { defaultValue: "Not quite — try again" }) : t("WIDGET.PUZZLE.DRAG", { defaultValue: "Drag the piece to the target" });
-	const keyboardHintText = t("WIDGET.PUZZLE.KEYBOARD_HINT", { defaultValue: "Use the arrow keys to move the piece, holding shift for smaller steps. Press Enter to submit it, Home to put it back at the start, or Escape to cancel." });
-	(0, react.useEffect)(() => {
-		if (!submitting) return;
-		announce(t("WIDGET.PUZZLE.CHECKING", { defaultValue: "Checking your answer" }));
-	}, [
-		submitting,
-		announce,
-		t
-	]);
-	(0, react.useEffect)(() => {
-		if (!showRetry) return;
-		announce(t("WIDGET.PUZZLE.RETRY_ANNOUNCEMENT", { defaultValue: "Not quite. A new puzzle has loaded and the piece is back at the start." }));
-	}, [
-		showRetry,
-		announce,
-		t
-	]);
-	const headerBorderColor = showRetry ? theme.palette.error.main : "transparent";
-	const headerTextColor = showRetry ? theme.palette.error.main : theme.palette.onSurface;
-	const puzzleAreaBg = `linear-gradient(135deg, ${theme.palette.surface} 0%, ${theme.palette.primaryContainer.main} 50%, ${theme.palette.surface} 100%)`;
-	const deltaX = posX - originX;
-	const deltaY = posY - originY;
-	const dragDistance = Math.hypot(deltaX, deltaY);
-	const PARALLAX_FACTOR = .08;
-	const bgTranslateX = dragging ? -deltaX * PARALLAX_FACTOR : 0;
-	const bgTranslateY = dragging ? -deltaY * PARALLAX_FACTOR : 0;
-	const bgScale = dragging ? 1.03 : 1;
-	const hueShift = dragging ? Math.max(-18, Math.min(18, deltaX * .12)) : 0;
-	const satBoost = dragging ? 1 + Math.min(.25, dragDistance * .0035) : 1;
-	const brightness = dragging ? 1 - Math.min(.06, dragDistance * 8e-4) : 1;
-	const bgFilter = `hue-rotate(${hueShift.toFixed(2)}deg) saturate(${satBoost.toFixed(3)}) brightness(${brightness.toFixed(3)})`;
-	const bgTransform = `translate(${bgTranslateX.toFixed(2)}px, ${bgTranslateY.toFixed(2)}px) scale(${bgScale.toFixed(3)})`;
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_prosopo_procaptcha_common.ChallengeSurface, {
-		show: true,
-		placement,
-		anchor,
-		onDismiss,
-		scrim: visible ? "dim" : "none",
-		dialogLabel: t("WIDGET.PUZZLE.DIALOG_LABEL", { defaultValue: "Puzzle challenge" }),
-		children: [
-			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("style", { children: stylesheet(theme.palette.primary.main) }),
-			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("output", {
-				"aria-live": "polite",
-				"aria-atomic": "true",
-				style: VISUALLY_HIDDEN,
-				children: announcement
-			}),
-			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-				id: keyboardHintId,
-				style: VISUALLY_HIDDEN,
-				children: keyboardHintText
-			}),
-			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
-				style: {
-					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					gap: "0",
-					opacity: visible ? 1 : 0,
-					transform: visible ? "scale(1)" : "scale(0.9)",
-					transition: "opacity 0.3s ease, transform 0.3s ease",
-					animation: shaking ? "prosopo-puzzle-shake 0.5s ease" : "none"
-				},
-				children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-					id: instructionId,
-					style: {
-						backgroundColor: theme.palette.surface,
-						borderRadius: "20px 20px 0 0",
-						padding: "12px 20px",
-						width: `${CONTAINER_WIDTH}px`,
-						boxSizing: "border-box",
-						textAlign: "center",
-						fontFamily: theme.font.fontFamily,
-						fontSize: "14px",
-						fontWeight: 500,
-						color: headerTextColor,
-						borderBottom: `2px solid ${headerBorderColor}`,
-						transition: "color 0.3s ease, border-color 0.3s ease"
-					},
-					children: instructionText
-				}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
-					ref: containerRef,
-					style: {
-						position: "relative",
-						width: `${CONTAINER_WIDTH}px`,
-						height: `${CONTAINER_HEIGHT}px`,
-						background: puzzleAreaBg,
-						borderRadius: "0 0 20px 20px",
-						overflow: "hidden",
-						userSelect: "none",
-						opacity: submitting ? .6 : 1,
-						pointerEvents: submitting ? "none" : "auto",
-						transition: "opacity 0.2s ease"
-					},
-					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-						style: {
-							position: "absolute",
-							left: `-${CONTAINER_WIDTH}px`,
-							top: `-${CONTAINER_HEIGHT}px`,
-							width: `${CONTAINER_WIDTH * 3}px`,
-							height: `${CONTAINER_HEIGHT * 3}px`,
-							pointerEvents: "none",
-							userSelect: "none",
-							transform: bgTransform,
-							transformOrigin: "center center",
-							filter: bgFilter,
-							transition: dragging ? "none" : "transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease",
-							willChange: "transform, filter"
-						},
-						children: [
-							[
-								0,
-								0,
-								-1,
-								-1
-							],
-							[
-								1,
-								0,
-								1,
-								-1
-							],
-							[
-								2,
-								0,
-								-1,
-								-1
-							],
-							[
-								0,
-								1,
-								-1,
-								1
-							],
-							[
-								1,
-								1,
-								1,
-								1
-							],
-							[
-								2,
-								1,
-								-1,
-								1
-							],
-							[
-								0,
-								2,
-								-1,
-								-1
-							],
-							[
-								1,
-								2,
-								1,
-								-1
-							],
-							[
-								2,
-								2,
-								-1,
-								-1
-							]
-						].map(([col, row, sx, sy]) => {
-							const key = `${col}-${row}`;
-							return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("img", {
-								src: background,
-								alt: "",
-								draggable: false,
-								style: {
-									position: "absolute",
-									left: `${(col ?? 0) * CONTAINER_WIDTH}px`,
-									top: `${(row ?? 0) * CONTAINER_HEIGHT}px`,
-									width: `${CONTAINER_WIDTH}px`,
-									height: `${CONTAINER_HEIGHT}px`,
-									transform: `scale(${sx}, ${sy})`,
-									pointerEvents: "none",
-									userSelect: "none"
-								}
-							}, key);
-						})
-					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-						...process.env.NODE_ENV !== "production" && { "data-cy": "prosopo-puzzle-piece" },
-						className: PIECE_CSS_CLASS,
-						role: "application",
-						"aria-roledescription": t("WIDGET.PUZZLE.PIECE_ROLE", { defaultValue: "draggable puzzle piece" }),
-						"aria-label": t("WIDGET.PUZZLE.PIECE_LABEL", { defaultValue: "Puzzle piece" }),
-						"aria-describedby": `${instructionId} ${keyboardHintId}`,
-						tabIndex: submitting ? -1 : 0,
-						onFocus: handlePieceFocus,
-						onKeyDown: handlePieceKeyDown,
-						onMouseDown: handlePieceMouseDown,
-						onTouchStart: handlePieceTouchStart,
-						style: {
-							position: "absolute",
-							left: `${posX - pieceSize / 2}px`,
-							top: `${posY - pieceSize / 2}px`,
-							width: `${pieceSize}px`,
-							height: `${pieceSize}px`,
-							backgroundImage: `url(${piece})`,
-							backgroundSize: "100% 100%",
-							touchAction: "none",
-							cursor: submitting ? "default" : isDragging.current ? "grabbing" : "grab",
-							filter: isDragging.current ? "drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45))" : "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35))",
-							transition: isDragging.current ? "none" : "filter 0.2s ease, left 0.3s ease, top 0.3s ease"
-						}
-					})]
-				})]
-			})
-		]
-	});
-};
-//#endregion
-exports.PuzzleCanvas = PuzzleCanvas;