@prosopo/procaptcha-react 2.11.3 → 2.12.0

package/.turbo/turbo-build$colon$cjs.log

@@ -1,5 +1,5 @@
 
-> @prosopo/procaptcha-react@2.11.3 build:cjs
+> @prosopo/procaptcha-react@2.12.0 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -47,18 +47,18 @@ ViteCommonJSConfig: .
 vite v8.1.5 building ssr environment for production...
 Bundle build started
 
-✓ 10 modules transformed.
+✓ 11 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/cjs/components/index.cjs             0.35 kB │ gzip: 0.12 kB
-dist/cjs/index.cjs                        0.46 kB │ gzip: 0.18 kB
-dist/cjs/components/Procaptcha.cjs        0.49 kB │ gzip: 0.27 kB
-dist/cjs/util/index.cjs                   0.50 kB │ gzip: 0.32 kB
-dist/cjs/_virtual/_rolldown/runtime.cjs   1.00 kB │ gzip: 0.50 kB
-dist/cjs/components/Modal.cjs             1.18 kB │ gzip: 0.60 kB
-dist/cjs/components/Button.cjs            2.86 kB │ gzip: 1.18 kB
-dist/cjs/components/CaptchaWidget.cjs     4.52 kB │ gzip: 1.68 kB
-dist/cjs/components/CaptchaComponent.cjs  6.18 kB │ gzip: 1.57 kB
-dist/cjs/components/ProcaptchaWidget.cjs  6.95 kB │ gzip: 2.02 kB
+dist/cjs/util/index.cjs                   0.56 kB │ gzip: 0.35 kB
+dist/cjs/components/procaptcha.cjs        0.75 kB │ gzip: 0.41 kB
+dist/cjs/components/index.cjs             0.89 kB │ gzip: 0.22 kB
+dist/cjs/index.cjs                        1.04 kB │ gzip: 0.28 kB
+dist/cjs/components/modal.cjs             1.10 kB │ gzip: 0.55 kB
+dist/cjs/components/collector.cjs         1.53 kB │ gzip: 0.68 kB
+dist/cjs/components/button.cjs            3.31 kB │ gzip: 1.23 kB
+dist/cjs/components/procaptchaWidget.cjs  6.33 kB │ gzip: 2.06 kB
+dist/cjs/components/captchaWidget.cjs     6.47 kB │ gzip: 2.29 kB
+dist/cjs/components/captchaComponent.cjs  7.25 kB │ gzip: 1.89 kB
 
-✓ built in 60ms
+✓ built in 48ms

package/.turbo/turbo-build$colon$tsc.log

@@ -1,8 +1,8 @@
 
-> @prosopo/procaptcha-react@2.11.3 build:tsc
+> @prosopo/procaptcha-react@2.12.0 build:tsc
 > tsc --build --verbose
 
-2:43:00 PM - Projects in this build: 
+11:04:34 AM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../locale/tsconfig.json
     * ../util/tsconfig.json
@@ -22,41 +22,41 @@
     * ../procaptcha/tsconfig.json
     * tsconfig.json
 
-2:43:01 PM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/webpack/webpack.config.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/vite/NodejsPolarsDirnamePlugin.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/process.ts' is older than output '../locale/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/ofLen.ts' is older than output '../util/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../util-crypto/tsconfig.json' is up to date because newest input '../util-crypto/src/types.ts' is older than output '../util-crypto/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../util-crypto/tsconfig.json' is up to date because newest input '../util-crypto/src/types.ts' is older than output '../util-crypto/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../types/tsconfig.json' is up to date because newest input '../types/src/types.test-d.ts' is older than output '../types/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../types/tsconfig.json' is up to date because newest input '../types/src/types.test-d.ts' is older than output '../types/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/utils/batches.ts' is older than output '../common/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/utils/batches.ts' is older than output '../common/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/index.ts' is older than output '../datasets/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/index.ts' is older than output '../datasets/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/tests/productionProviderList.unit.test.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/balancer.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/webComponent/createWebComponent.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/index.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/browser.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/async.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/pair/decode.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/keyring/keyring.test.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/workers/cryptoWorker.ts' is older than output '../account/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/custom.d.ts' is older than output '../account/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/tests/challengeSurfaceRender.unit.test.tsx' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/tests/challengeSurfaceRender.unit.test.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project '../procaptcha/tsconfig.json' is up to date because newest input '../procaptcha/src/modules/Manager.ts' is older than output '../procaptcha/tsconfig.tsbuildinfo'
+11:04:34 AM - Project '../procaptcha/tsconfig.json' is up to date because newest input '../procaptcha/src/modules/Manager.ts' is older than output '../procaptcha/tsconfig.tsbuildinfo'
 
-2:43:01 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+11:04:34 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-2:43:01 PM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-react/tsconfig.json'...
+11:04:34 AM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-react/tsconfig.json'...
 

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @prosopo/procaptcha-react@2.11.3 build
+> @prosopo/procaptcha-react@2.12.0 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/procaptcha-react@2.11.3 build:cross-env
+> @prosopo/procaptcha-react@2.12.0 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -51,18 +51,19 @@ ViteEsmConfig: .
 vite v8.1.5 building ssr environment for production...
 Bundle build started
 
-✓ 10 modules transformed.
+✓ 11 modules transformed.
 rendering chunks...
 computing gzip size...
 dist/_virtual/_rolldown/runtime.js   0.04 kB │ gzip: 0.06 kB
-dist/components/index.js             0.20 kB │ gzip: 0.09 kB
-dist/index.js                        0.27 kB │ gzip: 0.13 kB
-dist/components/Procaptcha.js        0.37 kB │ gzip: 0.24 kB
-dist/util/index.js                   0.50 kB │ gzip: 0.33 kB
-dist/components/Modal.js             0.93 kB │ gzip: 0.53 kB
-dist/components/Button.js            2.62 kB │ gzip: 1.15 kB
-dist/components/CaptchaWidget.js     4.16 kB │ gzip: 1.64 kB
-dist/components/CaptchaComponent.js  5.27 kB │ gzip: 1.52 kB
-dist/components/ProcaptchaWidget.js  6.20 kB │ gzip: 1.97 kB
+dist/components/index.js             0.53 kB │ gzip: 0.19 kB
+dist/util/index.js                   0.56 kB │ gzip: 0.35 kB
+dist/index.js                        0.65 kB │ gzip: 0.21 kB
+dist/components/procaptcha.js        0.68 kB │ gzip: 0.38 kB
+dist/components/modal.js             1.01 kB │ gzip: 0.53 kB
+dist/components/collector.js         1.44 kB │ gzip: 0.66 kB
+dist/components/button.js            3.07 kB │ gzip: 1.21 kB
+dist/components/captchaWidget.js     5.98 kB │ gzip: 2.27 kB
+dist/components/procaptchaWidget.js  6.00 kB │ gzip: 2.05 kB
+dist/components/captchaComponent.js  6.34 kB │ gzip: 1.85 kB
 
-✓ built in 71ms
+✓ built in 45ms

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @prosopo/procaptcha-react
 
+## 2.12.0
+### Minor Changes
+
+- 59c02da: Replace React with vanilla TS/DOM in the widget.
+  
+  The widget packages no longer depend on react, react-dom, @emotion or
+  react-i18next: every component is now a `mount*` function returning a handle
+  with `update`/`destroy`. `useTranslation` is replaced by `createTranslator`,
+  which exposes i18next's `t` plus the events that used to trigger a re-render.
+  The rendered markup, styling and behaviour are unchanged — only the
+  implementation is.
+  
+  Everything the widget has gained since this rewrite started is carried over,
+  so nothing is lost by dropping React: the shared challenge surface (popup and
+  float placement, escape/outside-click dismissal and the dialog focus trap),
+  the image-tile and puzzle-piece keyboard paths, the checkbox's focus handover
+  across the loading swap, the server-rendered puzzle imagery, `startMode:
+  "manual"` with `window.procaptcha.start()`, `data-bind` / targeted
+  `execute(widgetId)`, the Web Bot Auth "authenticated" badge, the client
+  session id, and the bounded session re-mint and reload handling in the
+  frictionless wrapper.
+
+### Patch Changes
+
+- Updated dependencies [59c02da]
+  - @prosopo/procaptcha-common@2.16.0
+  - @prosopo/locale@3.5.0
+  - @prosopo/procaptcha@2.11.17
+  - @prosopo/common@3.1.58
+  - @prosopo/types@5.9.2
+
+## 2.11.4
+### Patch Changes
+
+- Updated dependencies [a22069d]
+  - @prosopo/types@5.9.1
+  - @prosopo/locale@3.4.4
+  - @prosopo/common@3.1.57
+  - @prosopo/procaptcha@2.11.16
+  - @prosopo/procaptcha-common@2.15.1
+
 ## 2.11.3
 ### Patch Changes
 

package/dist/cjs/components/button.cjs

@@ -0,0 +1,100 @@
+const require_index = require("../util/index.cjs");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+//#region src/components/button.ts
+var buttonStyleBase = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	position: "relative",
+	boxSizing: "border-box",
+	outline: "0px",
+	margin: "0px",
+	cursor: "pointer",
+	userSelect: "none",
+	verticalAlign: "middle",
+	textDecoration: "none",
+	textTransform: "none",
+	minWidth: "64px",
+	minHeight: "40px",
+	borderRadius: "100px",
+	border: "none",
+	transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, filter 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+	backgroundColor: "transparent"
+};
+var mountButton = (container, initialProps) => {
+	const teardown = new _prosopo_procaptcha_common.Teardown();
+	let props = initialProps;
+	let hover = false;
+	let focusVisible = false;
+	const button = (0, _prosopo_procaptcha_common.createElement)("button");
+	const buttonStyle = () => {
+		const theme = "light" === props.themeColor ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
+		const baseStyle = {
+			...buttonStyleBase,
+			...theme.typography.labelLarge,
+			borderRadius: theme.shape.button,
+			fontFamily: theme.font.fontFamily,
+			width: "100%",
+			outline: focusVisible ? `3px solid ${theme.palette.primary.main}` : "0px",
+			outlineOffset: focusVisible ? "2px" : void 0
+		};
+		if ("cancel" === props.buttonType) return {
+			...baseStyle,
+			padding: "8px 12px",
+			backgroundColor: hover ? (0, _prosopo_widget_skeleton.withAlpha)(theme.palette.primary.main, theme.stateLayer.hover) : "transparent",
+			color: theme.palette.primary.main,
+			boxShadow: void 0
+		};
+		return {
+			...baseStyle,
+			padding: "8px 24px",
+			backgroundColor: theme.palette.primary.main,
+			color: theme.palette.primary.contrastText,
+			boxShadow: hover ? `inset 0 0 0 100px ${(0, _prosopo_widget_skeleton.withAlpha)(theme.palette.primary.contrastText, theme.stateLayer.hover)}` : theme.elevation.buttonPrimary
+		};
+	};
+	const render = () => {
+		(0, _prosopo_procaptcha_common.applyStyles)(button, buttonStyle());
+		(0, _prosopo_procaptcha_common.applyAttributes)(button, {
+			...require_index.default({ dev: { cy: `button-${props.buttonType}` } }),
+			"aria-label": props.text
+		});
+		button.textContent = props.text;
+	};
+	teardown.addEventListener(button, "mouseenter", () => {
+		hover = true;
+		render();
+	});
+	teardown.addEventListener(button, "mouseleave", () => {
+		hover = false;
+		render();
+	});
+	teardown.addEventListener(button, "focus", () => {
+		focusVisible = button.matches(":focus-visible");
+		render();
+	});
+	teardown.addEventListener(button, "blur", () => {
+		focusVisible = false;
+		render();
+	});
+	teardown.addEventListener(button, "click", (event) => {
+		if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
+		event.preventDefault();
+		props.onClick();
+	});
+	render();
+	container.appendChild(button);
+	return {
+		update: (nextProps) => {
+			props = nextProps;
+			render();
+		},
+		destroy: () => {
+			teardown.run();
+			button.parentNode?.removeChild(button);
+		}
+	};
+};
+//#endregion
+exports.mountButton = mountButton;

package/dist/cjs/components/captchaComponent.cjs

@@ -0,0 +1,210 @@
+const require_index = require("../util/index.cjs");
+const require_button = require("./button.cjs");
+const require_captchaWidget = require("./captchaWidget.cjs");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+let _prosopo_util = require("@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 ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
+	const currentCaptcha = () => (0, _prosopo_util.at)(props.challenge.captchas, props.index, { noWrap: true });
+	const currentSolution = () => (0, _prosopo_util.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 = (0, _prosopo_procaptcha_common.createElement)("span", { style: targetStyle(theme) });
+	const promptText = (0, _prosopo_procaptcha_common.createElement)("p", { style: promptStyle(theme) });
+	const hintText = (0, _prosopo_procaptcha_common.createElement)("p", { style: hintStyle(theme) });
+	const header = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			padding: "12px 14px",
+			fontFamily: theme.font.fontFamily
+		},
+		children: [promptText, hintText]
+	});
+	const headerBar = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			backgroundColor: theme.palette.primaryContainer.main,
+			borderRadius: theme.shape.header,
+			width: "100%",
+			marginTop: fullSpacing
+		},
+		children: [header]
+	});
+	const headerRow = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			width: "100%"
+		},
+		children: [headerBar]
+	});
+	const gridHost = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: { overflow: "hidden" },
+		attributes: require_index.default({ dev: { cy: `captcha-${props.index}` } })
+	});
+	const cancelHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: columnStyle });
+	const reloadHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: columnStyle });
+	const nextHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: columnStyle });
+	const controls = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			flexDirection: "row",
+			justifyContent: "space-between",
+			gap: "10px"
+		},
+		children: [
+			cancelHost,
+			reloadHost,
+			nextHost
+		]
+	});
+	const controlsRow = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			lineHeight: 1.75,
+			padding: `${fullSpacing} 0 ${doubleSpacing} 0`
+		},
+		children: [controls]
+	});
+	const inner = (0, _prosopo_procaptcha_common.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 = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: outerStyle(theme),
+		children: [inner]
+	});
+	const grid = require_captchaWidget.mountCaptchaWidget(gridHost, {
+		challenge: currentCaptcha(),
+		solution: currentSolution(),
+		onClick: props.onClick,
+		themeColor: props.themeColor
+	});
+	const cancelButton = require_button.mountButton(cancelHost, {
+		themeColor: props.themeColor,
+		buttonType: "cancel",
+		onClick: () => props.onCancel(),
+		text: props.translator.t("WIDGET.CANCEL")
+	});
+	const reloadButton = (0, _prosopo_procaptcha_common.mountReloadButton)(reloadHost, {
+		themeColor: props.themeColor,
+		onReload: () => props.onReload()
+	});
+	const nextButton = require_button.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);
+		(0, _prosopo_procaptcha_common.applyStyles)(root, outerStyle(activeTheme));
+		(0, _prosopo_procaptcha_common.applyStyles)(inner, { backgroundColor: activeTheme.palette.background.default });
+		(0, _prosopo_procaptcha_common.applyStyles)(headerBar, {
+			backgroundColor: activeTheme.palette.primaryContainer.main,
+			borderRadius: activeTheme.shape.header
+		});
+		(0, _prosopo_procaptcha_common.applyStyles)(header, { fontFamily: activeTheme.font.fontFamily });
+		(0, _prosopo_procaptcha_common.applyStyles)(promptText, promptStyle(activeTheme));
+		(0, _prosopo_procaptcha_common.applyStyles)(hintText, hintStyle(activeTheme));
+		(0, _prosopo_procaptcha_common.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");
+		(0, _prosopo_procaptcha_common.applyAttributes)(gridHost, require_index.default({ 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
+exports.mountCaptchaComponent = mountCaptchaComponent;