@prosopo/procaptcha-react 2.11.2 → 2.12.0

package/dist/components/{CaptchaComponent.d.ts → captchaComponent.d.ts}

@@ -1,3 +1,5 @@
+import type { Translator } from "@prosopo/locale";
+import { type Component } from "@prosopo/procaptcha-common";
 import type { CaptchaResponseBody } from "@prosopo/types";
 export interface CaptchaComponentProps {
     challenge: CaptchaResponseBody;
@@ -9,7 +11,7 @@ export interface CaptchaComponentProps {
     onNext: () => void;
     onReload: () => void;
     themeColor: "light" | "dark";
+    translator: Translator;
 }
-declare const CaptchaComponent: ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, onReload, themeColor, }: CaptchaComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default CaptchaComponent;
-//# sourceMappingURL=CaptchaComponent.d.ts.map
+export declare const mountCaptchaComponent: (container: HTMLElement, initialProps: CaptchaComponentProps) => Component<CaptchaComponentProps>;
+//# sourceMappingURL=captchaComponent.d.ts.map

package/dist/components/captchaComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"captchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/captchaComponent.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,KAAK,SAAS,EAMd,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO1D,MAAM,WAAW,qBAAqB;IACrC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;CACvB;AA8CD,eAAO,MAAM,qBAAqB,cACtB,WAAW,gBACR,qBAAqB,KACjC,SAAS,CAAC,qBAAqB,CAuMjC,CAAC"}

package/dist/components/captchaComponent.js

@@ -0,0 +1,210 @@
+import addDataAttr from "../util/index.js";
+import { mountButton } from "./button.js";
+import { mountCaptchaWidget } from "./captchaWidget.js";
+import { applyAttributes, applyStyles, createElement, mountReloadButton } from "@prosopo/procaptcha-common";
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { at } from "@prosopo/util";
+//#region src/components/captchaComponent.ts
+var outerStyle = (theme) => ({
+	overflowX: "auto",
+	overflowY: "auto",
+	maxWidth: "500px",
+	maxHeight: "100%",
+	display: "flex",
+	flexDirection: "column",
+	border: `1px solid ${theme.palette.border}`,
+	boxShadow: theme.elevation.card,
+	borderRadius: theme.shape.card,
+	backgroundColor: theme.palette.background.default,
+	userSelect: "none",
+	touchAction: "none",
+	overscrollBehavior: "none"
+});
+var promptStyle = (theme) => ({
+	...theme.typography.titleMedium,
+	color: theme.palette.primaryContainer.contrastText,
+	margin: 0
+});
+var hintStyle = (theme) => ({
+	...theme.typography.bodyMedium,
+	color: theme.palette.onSurfaceVariant,
+	margin: "4px 0 0 0"
+});
+var targetStyle = (theme) => ({
+	color: theme.palette.titleAccent,
+	fontWeight: 700
+});
+var columnStyle = {
+	position: "relative",
+	flexGrow: 1,
+	flexBasis: "calc(33.333% - 10px)"
+};
+var mountCaptchaComponent = (container, initialProps) => {
+	let props = initialProps;
+	const themeOf = (themeColor) => "light" === themeColor ? lightTheme : darkTheme;
+	const currentCaptcha = () => at(props.challenge.captchas, props.index, { noWrap: true });
+	const currentSolution = () => at(props.solutions, props.index, { noWrap: true });
+	const isLastRound = () => props.index >= props.challenge.captchas.length - 1;
+	const theme = themeOf(props.themeColor);
+	const doubleSpacing = `${theme.spacing.unit * 2}px`;
+	const fullSpacing = `${theme.spacing.unit}px`;
+	const targetLabel = createElement("span", { style: targetStyle(theme) });
+	const promptText = createElement("p", { style: promptStyle(theme) });
+	const hintText = createElement("p", { style: hintStyle(theme) });
+	const header = createElement("div", {
+		style: {
+			padding: "12px 14px",
+			fontFamily: theme.font.fontFamily
+		},
+		children: [promptText, hintText]
+	});
+	const headerBar = createElement("div", {
+		style: {
+			backgroundColor: theme.palette.primaryContainer.main,
+			borderRadius: theme.shape.header,
+			width: "100%",
+			marginTop: fullSpacing
+		},
+		children: [header]
+	});
+	const headerRow = createElement("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			width: "100%"
+		},
+		children: [headerBar]
+	});
+	const gridHost = createElement("div", {
+		style: { overflow: "hidden" },
+		attributes: addDataAttr({ dev: { cy: `captcha-${props.index}` } })
+	});
+	const cancelHost = createElement("div", { style: columnStyle });
+	const reloadHost = createElement("div", { style: columnStyle });
+	const nextHost = createElement("div", { style: columnStyle });
+	const controls = createElement("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			flexDirection: "row",
+			justifyContent: "space-between",
+			gap: "10px"
+		},
+		children: [
+			cancelHost,
+			reloadHost,
+			nextHost
+		]
+	});
+	const controlsRow = createElement("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			lineHeight: 1.75,
+			padding: `${fullSpacing} 0 ${doubleSpacing} 0`
+		},
+		children: [controls]
+	});
+	const inner = createElement("div", {
+		style: {
+			backgroundColor: theme.palette.background.default,
+			display: "flex",
+			flexDirection: "column",
+			minWidth: "300px",
+			marginLeft: fullSpacing,
+			marginRight: fullSpacing,
+			justifyContent: "center"
+		},
+		children: [
+			headerRow,
+			gridHost,
+			controlsRow
+		]
+	});
+	const root = createElement("div", {
+		style: outerStyle(theme),
+		children: [inner]
+	});
+	const grid = mountCaptchaWidget(gridHost, {
+		challenge: currentCaptcha(),
+		solution: currentSolution(),
+		onClick: props.onClick,
+		themeColor: props.themeColor
+	});
+	const cancelButton = mountButton(cancelHost, {
+		themeColor: props.themeColor,
+		buttonType: "cancel",
+		onClick: () => props.onCancel(),
+		text: props.translator.t("WIDGET.CANCEL")
+	});
+	const reloadButton = mountReloadButton(reloadHost, {
+		themeColor: props.themeColor,
+		onReload: () => props.onReload()
+	});
+	const nextButton = mountButton(nextHost, {
+		themeColor: props.themeColor,
+		buttonType: "next",
+		onClick: () => isLastRound() ? props.onSubmit() : props.onNext(),
+		text: props.translator.t("WIDGET.SUBMIT")
+	});
+	const render = () => {
+		const activeTheme = themeOf(props.themeColor);
+		applyStyles(root, outerStyle(activeTheme));
+		applyStyles(inner, { backgroundColor: activeTheme.palette.background.default });
+		applyStyles(headerBar, {
+			backgroundColor: activeTheme.palette.primaryContainer.main,
+			borderRadius: activeTheme.shape.header
+		});
+		applyStyles(header, { fontFamily: activeTheme.font.fontFamily });
+		applyStyles(promptText, promptStyle(activeTheme));
+		applyStyles(hintText, hintStyle(activeTheme));
+		applyStyles(targetLabel, targetStyle(activeTheme));
+		const t = props.translator.t;
+		targetLabel.textContent = `${currentCaptcha().target} `;
+		promptText.textContent = `${t("WIDGET.SELECT_ALL")}:\u00a0`;
+		promptText.appendChild(targetLabel);
+		hintText.textContent = t("WIDGET.IF_NONE_CLICK_NEXT");
+		applyAttributes(gridHost, addDataAttr({ dev: { cy: `captcha-${props.index}` } }));
+		grid.update({
+			challenge: currentCaptcha(),
+			solution: currentSolution(),
+			onClick: props.onClick,
+			themeColor: props.themeColor
+		});
+		cancelButton.update({
+			themeColor: props.themeColor,
+			buttonType: "cancel",
+			onClick: () => props.onCancel(),
+			text: t("WIDGET.CANCEL")
+		});
+		reloadButton.update({
+			themeColor: props.themeColor,
+			onReload: () => props.onReload()
+		});
+		nextButton.update({
+			themeColor: props.themeColor,
+			buttonType: "next",
+			onClick: () => isLastRound() ? props.onSubmit() : props.onNext(),
+			text: isLastRound() ? t("WIDGET.SUBMIT") : t("WIDGET.NEXT")
+		});
+	};
+	render();
+	container.appendChild(root);
+	return {
+		update: (nextProps) => {
+			props = nextProps;
+			render();
+		},
+		destroy: () => {
+			grid.destroy();
+			cancelButton.destroy();
+			reloadButton.destroy();
+			nextButton.destroy();
+			root.parentNode?.removeChild(root);
+		}
+	};
+};
+//#endregion
+export { mountCaptchaComponent };

package/dist/components/captchaComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captchaComponent.js","sourceRoot":"","sources":["../../src/components/captchaComponent.ts"],"names":[],"mappings":"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"}

package/dist/components/{CaptchaWidget.d.ts → captchaWidget.d.ts}

@@ -1,3 +1,4 @@
+import { type Component } from "@prosopo/procaptcha-common";
 import type { Captcha } from "@prosopo/types";
 export interface CaptchaWidgetProps {
     challenge: Captcha;
@@ -5,5 +6,5 @@ export interface CaptchaWidgetProps {
     onClick: (hash: string, x: number, y: number) => void;
     themeColor: "light" | "dark";
 }
-export declare const CaptchaWidget: ({ challenge, solution, onClick, themeColor, }: CaptchaWidgetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=CaptchaWidget.d.ts.map
+export declare const mountCaptchaWidget: (container: HTMLElement, initialProps: CaptchaWidgetProps) => Component<CaptchaWidgetProps>;
+//# sourceMappingURL=captchaWidget.d.ts.map

package/dist/components/captchaWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"captchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/captchaWidget.ts"],"names":[],"mappings":"AAcA,OAAO,EACN,KAAK,SAAS,EAQd,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAc,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAkED,eAAO,MAAM,kBAAkB,cACnB,WAAW,gBACR,kBAAkB,KAC9B,SAAS,CAAC,kBAAkB,CAsN9B,CAAC"}

package/dist/components/captchaWidget.js

@@ -0,0 +1,203 @@
+import { Teardown, applyStyles, clearElement, createElement, createSvgElement, isEventTrusted } from "@prosopo/procaptcha-common";
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { ProsopoDatasetError } from "@prosopo/common";
+//#region src/components/captchaWidget.ts
+var getHash = (item) => {
+	if (!item.hash) throw new ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+	return item.hash;
+};
+var imageStyle = {
+	flexGrow: 1,
+	flexBasis: "calc(33.333% - 10px)",
+	boxSizing: "border-box"
+};
+var CHECK_ICON_PATH = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+var themeOf = (themeColor) => "light" === themeColor ? lightTheme : darkTheme;
+var gridStyle = (theme) => ({
+	width: "100%",
+	height: "100%",
+	display: "flex",
+	flexDirection: "row",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	paddingTop: `${theme.spacing.unit}px`,
+	paddingBottom: `${theme.spacing.unit}px`,
+	gap: "10px"
+});
+var selectionStyle = (theme, selected) => ({
+	borderRadius: selected ? theme.shape.tileSelected : theme.shape.tile,
+	transform: selected ? "scale(0.9)" : "none"
+});
+/**
+* The selectable image grid.
+*
+* Tiles are rebuilt only when the round's `Captcha` changes identity. Every
+* other update just flips overlay visibility — re-creating `<img>` elements on
+* each selection would restart the image loads and flash the grid, which is the
+* one place the old React reconciler was earning its keep.
+*/
+var mountCaptchaWidget = (container, initialProps) => {
+	let teardown = new Teardown();
+	let props = initialProps;
+	let renderedChallenge;
+	let tiles = [];
+	let focusedHash = null;
+	const grid = createElement("div", { style: gridStyle(themeOf(initialProps.themeColor)) });
+	const buildTile = (item, index) => {
+		const hash = getHash(item);
+		const theme = themeOf(props.themeColor);
+		const image = createElement("img", {
+			style: {
+				width: "100%",
+				display: "block",
+				objectFit: "cover",
+				aspectRatio: "1/1",
+				height: "auto",
+				overflow: "hidden",
+				borderStyle: "solid",
+				borderWidth: "1px",
+				borderColor: theme.palette.tile.border,
+				transition: "transform 200ms cubic-bezier(0.2, 0, 0, 1), border-radius 200ms"
+			},
+			attributes: {
+				src: item.data,
+				alt: `Captcha image ${index + 1}`
+			}
+		});
+		teardown.addEventListener(image, "error", () => {
+			const retryCount = Number(image.dataset.retryCount ?? "0") + 1;
+			image.dataset.retryCount = String(retryCount);
+			if (retryCount <= 3) image.src = `${item.data}?retry=${Date.now()}`;
+		});
+		const icon = createSvgElement("svg", {
+			style: {
+				backgroundColor: theme.palette.checkbox.fill,
+				display: "block",
+				width: "34px",
+				height: "34px",
+				padding: "7px",
+				borderRadius: "50%",
+				boxSizing: "border-box",
+				transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+				userSelect: "none",
+				fill: theme.palette.checkbox.tick
+			},
+			attributes: {
+				focusable: "false",
+				color: "#fff",
+				"aria-hidden": "true",
+				viewBox: "0 0 24 24",
+				"data-testid": "CheckIcon",
+				"aria-label": "Check icon"
+			},
+			children: [createSvgElement("path", { attributes: { d: CHECK_ICON_PATH } })]
+		});
+		const overlay = createElement("div", {
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				bottom: 0,
+				right: 0,
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				backgroundColor: theme.palette.overlay,
+				borderRadius: theme.shape.tileSelected,
+				visibility: "hidden"
+			},
+			children: [icon]
+		});
+		const clickable = createElement("button", {
+			style: {
+				position: "relative",
+				cursor: "pointer",
+				height: "100%",
+				width: "100%",
+				padding: 0,
+				margin: 0,
+				border: "none",
+				background: "none",
+				appearance: "none",
+				display: "block"
+			},
+			attributes: { type: "button" },
+			children: [image, overlay]
+		});
+		teardown.addEventListener(clickable, "click", (event) => {
+			if (!isEventTrusted(event)) return;
+			const mouseEvent = event;
+			props.onClick(hash, mouseEvent.clientX, mouseEvent.clientY);
+		});
+		teardown.addEventListener(clickable, "focus", () => {
+			focusedHash = clickable.matches(":focus-visible") ? hash : null;
+			applyFocusRing();
+		});
+		teardown.addEventListener(clickable, "blur", () => {
+			focusedHash = null;
+			applyFocusRing();
+		});
+		const cell = createElement("div", {
+			style: imageStyle,
+			children: [clickable]
+		});
+		grid.appendChild(cell);
+		return {
+			hash,
+			image,
+			overlay,
+			clickable
+		};
+	};
+	const applyFocusRing = () => {
+		const theme = themeOf(props.themeColor);
+		for (const tile of tiles) applyStyles(tile.clickable, focusedHash === tile.hash ? {
+			outline: `3px solid ${theme.palette.primary.main}`,
+			outlineOffset: "2px"
+		} : {
+			outline: "none",
+			outlineOffset: void 0
+		});
+	};
+	const rebuild = () => {
+		teardown.run();
+		teardown = new Teardown();
+		clearElement(grid);
+		applyStyles(grid, gridStyle(themeOf(props.themeColor)));
+		tiles = props.challenge.items.map(buildTile);
+		renderedChallenge = props.challenge;
+	};
+	const applySelection = () => {
+		const theme = themeOf(props.themeColor);
+		for (const tile of tiles) {
+			const selected = props.solution.some((entry) => entry[0] === tile.hash);
+			applyStyles(tile.image, selectionStyle(theme, selected));
+			applyStyles(tile.overlay, { visibility: selected ? "visible" : "hidden" });
+			tile.clickable.setAttribute("aria-pressed", String(selected));
+		}
+	};
+	rebuild();
+	applySelection();
+	applyFocusRing();
+	container.appendChild(grid);
+	return {
+		update: (nextProps) => {
+			const needsRebuild = nextProps.challenge !== renderedChallenge || nextProps.themeColor !== props.themeColor;
+			props = nextProps;
+			if (needsRebuild) {
+				focusedHash = null;
+				rebuild();
+			}
+			applySelection();
+			applyFocusRing();
+		},
+		destroy: () => {
+			teardown.run();
+			grid.parentNode?.removeChild(grid);
+		}
+	};
+};
+//#endregion
+export { mountCaptchaWidget };

package/dist/components/captchaWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captchaWidget.js","sourceRoot":"","sources":["../../src/components/captchaWidget.ts"],"names":[],"mappings":"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"}

package/dist/components/collector.d.ts

@@ -1,9 +1,10 @@
+import { type Component } from "@prosopo/procaptcha-common";
 import type { Account, StoredEvents } from "@prosopo/types";
-type CollectorProps = {
+export interface CollectorProps {
     onProcessData: (data: StoredEvents) => void;
     sendData: boolean;
     account: Account | undefined;
-};
-declare const Collector: ({ onProcessData, sendData, account }: CollectorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default Collector;
+}
+export declare const mountCollector: (container: HTMLElement, initialProps: CollectorProps) => Component<CollectorProps>;
+export default mountCollector;
 //# sourceMappingURL=collector.d.ts.map

package/dist/components/collector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collector.d.ts","sourceRoot":"","sources":["../../src/components/collector.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACX,OAAO,EAIP,YAAY,EACZ,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,SAAS,yCAA0C,cAAc,qDAgCtE,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"collector.d.ts","sourceRoot":"","sources":["../../src/components/collector.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAiB,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,EACX,OAAO,EAIP,YAAY,EACZ,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,cAAc;IAC9B,aAAa,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B;AAkBD,eAAO,MAAM,cAAc,cACf,WAAW,gBACR,cAAc,KAC1B,SAAS,CAAC,cAAc,CAoD1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/collector.js

@@ -1,26 +1,48 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement } from "@prosopo/procaptcha-common";
 import { startCollector } from "@prosopo/procaptcha";
-import { useEffect, useRef, useState } from "react";
-const Collector = ({ onProcessData, sendData, account }) => {
-    const [mouseEvents, setStoredMouseEvents] = useState([]);
-    const [touchEvents, setStoredTouchEvents] = useState([]);
-    const [keyboardEvents, setStoredKeyboardEvents] = useState([]);
-    const ref = useRef(null);
-    useEffect(() => {
-        if (ref?.current) {
-            startCollector(setStoredMouseEvents, setStoredTouchEvents, setStoredKeyboardEvents, ref.current);
-        }
-    }, []);
-    useEffect(() => {
-        const userEvents = {
-            mouseEvents,
-            touchEvents,
-            keyboardEvents,
-        };
-        if (account)
-            onProcessData(userEvents);
-    }, [onProcessData, account]);
-    return _jsx("div", { ref: ref });
+//#region src/components/collector.ts
+/**
+* `startCollector` speaks the React setState shape (value or updater fn), so
+* this adapts a plain array to it rather than changing the collector's
+* signature — it is shared with the direct-consumer entry points.
+*/
+var arrayUpdater = (target) => {
+	return (update) => {
+		const next = "function" === typeof update ? update([...target]) : [...update];
+		target.length = 0;
+		target.push(...next);
+	};
 };
-export default Collector;
-//# sourceMappingURL=collector.js.map
+var mountCollector = (container, initialProps) => {
+	let props = initialProps;
+	const mouseEvents = [];
+	const touchEvents = [];
+	const keyboardEvents = [];
+	const root = createElement("div");
+	container.appendChild(root);
+	startCollector(arrayUpdater(mouseEvents), arrayUpdater(touchEvents), arrayUpdater(keyboardEvents), root);
+	let lastAccount;
+	let lastOnProcessData;
+	const emit = () => {
+		if (props.account === lastAccount && props.onProcessData === lastOnProcessData) return;
+		lastAccount = props.account;
+		lastOnProcessData = props.onProcessData;
+		if (props.account) props.onProcessData({
+			mouseEvents,
+			touchEvents,
+			keyboardEvents
+		});
+	};
+	emit();
+	return {
+		update: (nextProps) => {
+			props = nextProps;
+			emit();
+		},
+		destroy: () => {
+			root.parentNode?.removeChild(root);
+		}
+	};
+};
+//#endregion
+export { mountCollector as default, mountCollector };

package/dist/components/collector.js.map

@@ -1 +1 @@
-{"version":3,"file":"collector.js","sourceRoot":"","sources":["../../src/components/collector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAQrD,OAAO,EAAyB,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ3E,MAAM,SAAS,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAkB,EAAE,EAAE;IAC1E,MAAM,CAAC,WAAW,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,WAAW,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,cAAc,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAExD,EAAE,CAAC,CAAC;IAEN,MAAM,GAAG,GACR,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,GAAG,EAAE,OAAO,EAAE,CAAC;YAClB,cAAc,CACb,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,GAAG,CAAC,OAAO,CACX,CAAC;QACH,CAAC;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAGP,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,UAAU,GAAG;YAClB,WAAW;YACX,WAAW;YACX,cAAc;SACd,CAAC;QACF,IAAI,OAAO;YAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,OAAO,cAAK,GAAG,EAAE,GAAG,GAAI,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"collector.js","sourceRoot":"","sources":["../../src/components/collector.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAkB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAsB3E,MAAM,YAAY,GAAG,CAAI,MAAW,EAAmB,EAAE;IACxD,OAAO,CAAC,MAAsC,EAAE,EAAE;QACjD,MAAM,IAAI,GACT,UAAU,KAAK,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QAClE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAClB,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAC7B,SAAsB,EACtB,YAA4B,EACA,EAAE;IAC9B,IAAI,KAAK,GAAG,YAAY,CAAC;IACzB,MAAM,WAAW,GAAwB,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAwB,EAAE,CAAC;IAC5C,MAAM,cAAc,GAA2B,EAAE,CAAC;IAElD,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAClC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAE5B,cAAc,CACb,YAAY,CAAC,WAAW,CAAC,EACzB,YAAY,CAAC,WAAW,CAAC,EACzB,YAAY,CAAC,cAAc,CAAC,EAC5B,IAAI,CACJ,CAAC;IAKF,IAAI,WAAgC,CAAC;IACrC,IAAI,iBAA8D,CAAC;IAEnE,MAAM,IAAI,GAAG,GAAG,EAAE;QACjB,IACC,KAAK,CAAC,OAAO,KAAK,WAAW;YAC7B,KAAK,CAAC,aAAa,KAAK,iBAAiB,EACxC,CAAC;YACF,OAAO;QACR,CAAC;QACD,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC;QAC5B,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC;QACxC,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YACnB,KAAK,CAAC,aAAa,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,CAAC;QACnE,CAAC;IACF,CAAC,CAAC;IAEF,IAAI,EAAE,CAAC;IAEP,OAAO;QACN,MAAM,EAAE,CAAC,SAAyB,EAAE,EAAE;YACrC,KAAK,GAAG,SAAS,CAAC;YAClB,IAAI,EAAE,CAAC;QACR,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YAMb,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;KACD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
-export * from "./CaptchaWidget.js";
-export * from "./CaptchaComponent.js";
-export { default as ProcaptchaWidget } from "./ProcaptchaWidget.js";
-export { default as Procaptcha } from "./Procaptcha.js";
-export * from "./Procaptcha.js";
+export * from "./button.js";
+export * from "./modal.js";
+export * from "./captchaWidget.js";
+export * from "./captchaComponent.js";
+export * from "./collector.js";
+export * from "./procaptchaWidget.js";
+export * from "./procaptcha.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,8 @@
-import { CaptchaWidget } from "./CaptchaWidget.js";
-import ProcaptchaWidget from "./ProcaptchaWidget.js";
-import Procaptcha from "./Procaptcha.js";
-export { CaptchaWidget, Procaptcha, ProcaptchaWidget };
+import { mountButton } from "./button.js";
+import { mountModal } from "./modal.js";
+import { mountCaptchaWidget } from "./captchaWidget.js";
+import { mountCaptchaComponent } from "./captchaComponent.js";
+import mountCollector from "./collector.js";
+import mountProcaptchaImageWidget from "./procaptchaWidget.js";
+import { loadProcaptcha, mountProcaptcha } from "./procaptcha.js";
+export { loadProcaptcha, mountButton, mountCaptchaComponent, mountCaptchaWidget, mountCollector, mountModal, mountProcaptcha, mountProcaptchaImageWidget };

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC"}

package/dist/components/modal.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from "@prosopo/procaptcha-common";
+import type { PlacementType } from "@prosopo/types";
+export interface ModalProps {
+    show: boolean;
+    placement?: PlacementType;
+    anchor?: HTMLElement | null;
+    onDismiss?: () => void;
+    dialogLabel?: string;
+}
+export interface ModalComponent extends Component<ModalProps> {
+    readonly content: HTMLElement;
+}
+export declare const mountModal: (initialProps: ModalProps) => ModalComponent;
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,UAAU,CAAC;IAE5D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;CAC9B;AAKD,eAAO,MAAM,UAAU,iBAAkB,UAAU,KAAG,cAiCrD,CAAC"}