@prosopo/procaptcha-react 2.11.3 → 2.13.0

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

@@ -1,5 +1,5 @@
 
-> @prosopo/procaptcha-react@2.11.3 build:cjs
+> @prosopo/procaptcha-react@2.13.0 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -7,8 +7,8 @@ ViteCommonJSConfig: .
   tsConfigPaths: [
     '/home/runner/work/captcha/captcha/packages/common/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/locale/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/types/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util-crypto/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/procaptcha/tsconfig.json',
@@ -27,8 +27,8 @@ ViteCommonJSConfig: .
   externals: [
     '@prosopo/common',
     '@prosopo/locale',
-    '@prosopo/logger',
     '@prosopo/util',
+    '@prosopo/logger',
     '@prosopo/types',
     '@prosopo/util-crypto',
     '@prosopo/procaptcha',
@@ -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.39 kB │ gzip: 0.64 kB
+dist/cjs/components/collector.cjs         1.53 kB │ gzip: 0.68 kB
+dist/cjs/components/button.cjs            3.22 kB │ gzip: 1.21 kB
+dist/cjs/components/procaptchaWidget.cjs  6.33 kB │ gzip: 2.06 kB
+dist/cjs/components/captchaWidget.cjs     7.05 kB │ gzip: 2.48 kB
+dist/cjs/components/captchaComponent.cjs  8.29 kB │ gzip: 2.17 kB
 
-✓ built in 60ms
+✓ built in 53ms

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

@@ -1,11 +1,11 @@
 
-> @prosopo/procaptcha-react@2.11.3 build:tsc
+> @prosopo/procaptcha-react@2.13.0 build:tsc
 > tsc --build --verbose
 
-2:43:00 PM - Projects in this build: 
+3:28:58 PM - Projects in this build: 
     * ../../dev/config/tsconfig.json
-    * ../locale/tsconfig.json
     * ../util/tsconfig.json
+    * ../locale/tsconfig.json
     * ../logger/tsconfig.json
     * ../util-crypto/tsconfig.json
     * ../types/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'
+3:28:58 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'
 
-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'
+3:28:58 PM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/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'
+3:28:58 PM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/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'
+3:28:58 PM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/logger.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'
+3:28:58 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'
 
-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'
+3:28:58 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'
 
-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'
+3:28:58 PM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/index.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'
+3:28:58 PM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/tests/dataset.unit.test.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'
+3:28:58 PM - 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'
+3:28:58 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'
 
-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'
+3:28:58 PM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/theme.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'
+3:28:58 PM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/browser.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'
+3:28:58 PM - 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'
+3:28:58 PM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/index.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'
+3:28:58 PM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/index.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'
+3:28:58 PM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/extensionLoader.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'
+3:28:58 PM - 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
+3:28:58 PM - 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'...
+3:28:58 PM - 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.13.0 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/procaptcha-react@2.11.3 build:cross-env
+> @prosopo/procaptcha-react@2.13.0 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -11,8 +11,8 @@ ViteEsmConfig: .
   tsConfigPaths: [
     '/home/runner/work/captcha/captcha/packages/common/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/locale/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/types/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util-crypto/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/procaptcha/tsconfig.json',
@@ -31,8 +31,8 @@ ViteEsmConfig: .
   externals: [
     '@prosopo/common',
     '@prosopo/locale',
-    '@prosopo/logger',
     '@prosopo/util',
+    '@prosopo/logger',
     '@prosopo/types',
     '@prosopo/util-crypto',
     '@prosopo/procaptcha',
@@ -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.22 kB │ gzip: 0.61 kB
+dist/components/collector.js         1.44 kB │ gzip: 0.66 kB
+dist/components/button.js            2.99 kB │ gzip: 1.19 kB
+dist/components/procaptchaWidget.js  6.00 kB │ gzip: 2.05 kB
+dist/components/captchaWidget.js     6.48 kB │ gzip: 2.45 kB
+dist/components/captchaComponent.js  7.28 kB │ gzip: 2.13 kB
 
-✓ built in 71ms
+✓ built in 33ms

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @prosopo/procaptcha-react
 
+## 2.13.0
+### Minor Changes
+
+- 5e5fb9e: Give the image challenge dialog different class names, a different DOM shape, different element types for its controls and slightly different spacing on every page load, so a solver script cannot hardcode a way to find or click anything inside it.
+  
+  This is the same treatment the checkbox got. Until now the dialog was identical for every user, forever: the panel was always `.prosopo-modalInner` inside `.prosopo-modalOuter` inside `.prosopo-challenge-content`, every tile and every action was a `<button>`, the grid gap was always 10px, and the whole thing sat at the same offsets. The end-to-end suite was itself finding the images by climbing four parents and stepping sideways from the instruction line — which is the clearest possible evidence that the markup was a reliable handle.
+  
+  Four things now change, all drawn fresh each time a challenge mounts:
+  
+  - **The names.** Every class the dialog renders — the two modal layers, the challenge surface and its panel, the reload control — is an 8-character token drawn at mount. Selectors scraped from one page load are dead on the next. The challenge surface is shared with the puzzle, so the puzzle gets this too. Nothing in the widget's own CSS referenced these names, but a site that had written its own rules against `.prosopo-modalOuter`, `.prosopo-modalInner`, `.prosopo-challenge-content` or `.reload-button` will find they no longer match. `image-captcha` on the widget root stays fixed, as `prosopo-checkbox` did, because that one sits in the embedding page's light DOM.
+  - **The shape.** The panel, the header, the grid, the action row, each action and each tile sit inside a random number of randomly named `div` or `span` wrappers. The wrappers are `display: contents`, so they generate no boxes and cannot move anything: depth varies, layout does not. Only elements with no accessible role are used, so nothing new is announced to a screen reader.
+  - **The element each control is made of.** Every tile and every action is now randomly either a real `<button>` or a `<div role="button" tabindex="0">`, so `button` no longer finds them all. The generic variant is given by hand what the button gave for free: it is in the tab order, it activates on Enter and on Space, Space does not scroll the dialog, and it carries the same `aria-pressed` state. The surface's focus trap already matched `[tabindex]:not([tabindex="-1"])`, so both variants are trapped and tabbable alike.
+  - **The spacing.** The grid gap, the grid's and the header's padding, the action row's padding and the panel's own margins are each nudged a few pixels, so tile centres are not where they were last time. Each of these changes the panel's size rather than moving the panel, so the surface still centres it and a panel taller than the viewport still scrolls to its own edges. The tile and action widths are now derived from the gap they were drawn with — three columns fit only if each cell gives up two thirds of a gap, and the old hardcoded basis would have wrapped the row at the wide end of the range.
+  
+  Three related fixes come with it:
+  
+  - The tick badge on a selected tile was shipping `data-testid="CheckIcon"` to production, plus an `aria-label` on an `aria-hidden` element that nothing could ever read and a stray `color="#fff"` attribute. All three are gone.
+  - The reload button acted on any click, including one a script dispatched. It now takes the same trusted-event gate every other control in the widget has.
+  - The end-to-end suite no longer depends on the markup at all. It uses `data-cy` hooks — the instruction line, the challenge panel, the round, the reload control — that are withheld from production builds, exactly as the checkbox withholds `captcha-checkbox`.
+  
+  Note what this does not do. The dialog still says it is a dialog, the tiles still expose the button role and their pressed state, and the images still carry alt text. A script that looks for what these things mean rather than what they are called will still find them. That is the price of the challenge being usable with a screen reader, and it is the right price; the point here is to kill the cheap selector, not to claim the dialog is unfindable.
+
+### Patch Changes
+
+- Updated dependencies [94929c3]
+- Updated dependencies [a9141c3]
+- Updated dependencies [a9141c3]
+- Updated dependencies [a9141c3]
+- Updated dependencies [e180281]
+- Updated dependencies [5e5fb9e]
+  - @prosopo/procaptcha-common@2.17.0
+  - @prosopo/locale@3.6.0
+  - @prosopo/common@3.1.59
+  - @prosopo/types@5.10.0
+  - @prosopo/util@3.3.11
+  - @prosopo/widget-skeleton@2.9.0
+  - @prosopo/procaptcha@2.11.18
+
+## 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,98 @@
+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.createControl)(teardown, { onActivate: (event) => {
+		event.preventDefault();
+		props.onClick();
+	} });
+	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();
+	});
+	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,225 @@
+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 = (gap) => ({
+	position: "relative",
+	flexGrow: 1,
+	flexBasis: (0, _prosopo_procaptcha_common.threeColumnBasis)(gap)
+});
+var SPACING_JITTER = 4;
+var MIN_CONTROL_GAP = 6;
+var MAX_CONTROL_GAP = 14;
+var HEADER_PADDING_Y = 12;
+var HEADER_PADDING_X = 14;
+var HEADER_PADDING_JITTER = 3;
+var MIN_WRAPPER_DEPTH = 0;
+var MAX_WRAPPER_DEPTH = 2;
+var decoy = (element) => (0, _prosopo_procaptcha_common.wrapRandomly)(element, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH);
+/** A spacing token moved by a few pixels, never below zero. */
+var jittered = (base, jitter = SPACING_JITTER) => Math.max(0, base + (0, _prosopo_widget_skeleton.randomInt)(-jitter, jitter));
+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 controlGap = (0, _prosopo_widget_skeleton.randomInt)(MIN_CONTROL_GAP, MAX_CONTROL_GAP);
+	const column = columnStyle(controlGap);
+	const targetLabel = (0, _prosopo_procaptcha_common.createElement)("span", { style: targetStyle(theme) });
+	const promptText = (0, _prosopo_procaptcha_common.createElement)("p", {
+		style: promptStyle(theme),
+		attributes: require_index.default({ dev: { cy: "captcha-prompt" } })
+	});
+	const hintText = (0, _prosopo_procaptcha_common.createElement)("p", { style: hintStyle(theme) });
+	const header = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			padding: `${jittered(HEADER_PADDING_Y, HEADER_PADDING_JITTER)}px ${jittered(HEADER_PADDING_X, HEADER_PADDING_JITTER)}px`,
+			fontFamily: theme.font.fontFamily
+		},
+		children: [decoy(promptText), decoy(hintText)]
+	});
+	const headerBar = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			backgroundColor: theme.palette.primaryContainer.main,
+			borderRadius: theme.shape.header,
+			width: "100%",
+			marginTop: `${jittered(theme.spacing.unit)}px`
+		},
+		children: [decoy(header)]
+	});
+	const headerRow = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			width: "100%"
+		},
+		children: [decoy(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: column });
+	const reloadHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: column });
+	const nextHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: column });
+	const controls = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			flexDirection: "row",
+			justifyContent: "space-between",
+			gap: `${controlGap}px`
+		},
+		children: [
+			decoy(cancelHost),
+			decoy(reloadHost),
+			decoy(nextHost)
+		]
+	});
+	const controlsRow = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			lineHeight: 1.75,
+			padding: `${jittered(theme.spacing.unit)}px 0 ${jittered(theme.spacing.unit * 2)}px 0`
+		},
+		children: [decoy(controls)]
+	});
+	const inner = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			backgroundColor: theme.palette.background.default,
+			display: "flex",
+			flexDirection: "column",
+			minWidth: "300px",
+			marginLeft: `${jittered(theme.spacing.unit)}px`,
+			marginRight: `${jittered(theme.spacing.unit)}px`,
+			justifyContent: "center"
+		},
+		children: [
+			decoy(headerRow),
+			decoy(gridHost),
+			decoy(controlsRow)
+		]
+	});
+	const root = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: outerStyle(theme),
+		attributes: require_index.default({ dev: { cy: "captcha-panel" } }),
+		children: [decoy(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;