@prosopo/procaptcha-react 2.9.101 → 2.9.103

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

@@ -1,5 +1,5 @@
 
-> @prosopo/procaptcha-react@2.9.101 build:cjs
+> @prosopo/procaptcha-react@2.9.103 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -55,10 +55,10 @@ 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.55 kB │ gzip: 0.79 kB
-dist/cjs/components/Button.cjs            2.33 kB │ gzip: 1.06 kB
-dist/cjs/components/CaptchaWidget.cjs     3.50 kB │ gzip: 1.40 kB
-dist/cjs/components/CaptchaComponent.cjs  5.95 kB │ gzip: 1.50 kB
-dist/cjs/components/ProcaptchaWidget.cjs  6.01 kB │ gzip: 1.79 kB
+dist/cjs/components/Modal.cjs             1.54 kB │ gzip: 0.80 kB
+dist/cjs/components/Button.cjs            2.86 kB │ gzip: 1.18 kB
+dist/cjs/components/CaptchaWidget.cjs     4.03 kB │ gzip: 1.50 kB
+dist/cjs/components/ProcaptchaWidget.cjs  6.05 kB │ gzip: 1.80 kB
+dist/cjs/components/CaptchaComponent.cjs  6.18 kB │ gzip: 1.57 kB
 
-✓ built in 64ms
+✓ built in 52ms

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

@@ -1,8 +1,8 @@
 
-> @prosopo/procaptcha-react@2.9.101 build:tsc
+> @prosopo/procaptcha-react@2.9.103 build:tsc
 > tsc --build --verbose
 
-1:57:41 PM - Projects in this build: 
+7:05:39 AM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../locale/tsconfig.json
     * ../util/tsconfig.json
@@ -22,41 +22,41 @@
     * ../procaptcha/tsconfig.json
     * tsconfig.json
 
-1:57:41 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'
+7:05:39 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/vite/vite-plugin-copy.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/logger.ts' is older than output '../logger/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
 
-1:57:41 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'
+7:05:39 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'
 
-1:57:41 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'
+7:05:39 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'
 
-1:57:41 PM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/index.ts' is older than output '../common/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/index.ts' is older than output '../common/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/tests/mocks/data/captchas.ts' is older than output '../datasets/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/index.ts' is older than output '../datasets/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/tests/api.test-d.ts' is older than output '../api/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/index.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
+7:05:39 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'
 
-1:57:41 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'
+7:05:39 AM - 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'
 
-1:57:41 PM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/browser.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/sources/webgl.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/index.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/index.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/tests/cryptoWorker.unit.test.ts' is older than output '../account/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/index.ts' is older than output '../account/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/tests/defaultEvents.test.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/simdReadings.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project '../procaptcha/tsconfig.json' is up to date because newest input '../procaptcha/src/modules/Manager.ts' is older than output '../procaptcha/tsconfig.tsbuildinfo'
+7:05:39 AM - Project '../procaptcha/tsconfig.json' is up to date because newest input '../procaptcha/src/tests/manager.unit.test.ts' is older than output '../procaptcha/tsconfig.tsbuildinfo'
 
-1:57:41 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+7:05:39 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-1:57:41 PM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-react/tsconfig.json'...
+7:05:39 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.9.101 build
+> @prosopo/procaptcha-react@2.9.103 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/procaptcha-react@2.9.101 build:cross-env
+> @prosopo/procaptcha-react@2.9.103 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -59,10 +59,10 @@ 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             1.28 kB │ gzip: 0.70 kB
-dist/components/Button.js            2.19 kB │ gzip: 1.03 kB
-dist/components/CaptchaWidget.js     3.18 kB │ gzip: 1.36 kB
-dist/components/CaptchaComponent.js  5.04 kB │ gzip: 1.45 kB
-dist/components/ProcaptchaWidget.js  5.34 kB │ gzip: 1.75 kB
+dist/components/Modal.js             1.26 kB │ gzip: 0.72 kB
+dist/components/Button.js            2.62 kB │ gzip: 1.15 kB
+dist/components/CaptchaWidget.js     3.66 kB │ gzip: 1.46 kB
+dist/components/CaptchaComponent.js  5.27 kB │ gzip: 1.52 kB
+dist/components/ProcaptchaWidget.js  5.36 kB │ gzip: 1.76 kB
 
-✓ built in 55ms
+✓ built in 48ms

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @prosopo/procaptcha-react
 
+## 2.9.103
+### Patch Changes
+
+- 729349e: Run the cypress suite in firefox as well as chrome whenever the PR is a release
+  PR, via a new cypress-firefox workflow. cypress.yml is untouched.
+  
+  The trusted-event checks scattered across the widget components now go through a
+  single `isEventTrusted()` helper in `@prosopo/procaptcha-common`. Behaviour is
+  unchanged: it still returns early for synthetic input, unless the bundle was
+  built with `PROSOPO_ALLOW_UNTRUSTED_EVENTS=1`, which only the firefox CI leg
+  sets. Production builds pin the define to `false`, so the branch is folded away
+  at build time and the allowance cannot reach a shipped bundle.
+  
+  The allowance exists because cypress-real-events dispatches input over the chrome
+  devtools protocol, which cypress exposes for chromium browsers only — on firefox
+  the specs fall back to cypress' own synthetic clicks.
+- b525956: Refresh the captcha widget appearance with a Material 3 theme across the widget-skeleton, procaptcha-common, procaptcha-react and procaptcha-puzzle packages.
+  
+  - Split the single tinted surface into M3 surface roles: the widget now sits on a white `surface` (surfaceContainerLowest) and the challenge dialog on `surfaceContainerHigh`.
+  - Removed all drop shadows. Separation comes from surface roles and outlines; hover and drag feedback use M3 state layers and outline rings instead.
+  - Added shared `typography` (label large / title medium / body medium) and `stateLayer` (8%/10%/10%) tokens, and aligned the shape scale to M3 steps.
+  - Buttons: M3 label-large type, 40dp height, spec padding, state-layer hover in place of a brightness filter, and no resting elevation on the filled variant.
+  - Added the missing focus indicators (3dp outline, 2dp offset, keyboard-only) to the checkbox, buttons and reload control.
+  - Secondary dialog text now uses the `onSurfaceVariant` role rather than reduced opacity.
+- Updated dependencies [729349e]
+- Updated dependencies [16dbab0]
+- Updated dependencies [b525956]
+- Updated dependencies [9091a78]
+- Updated dependencies [d5e104b]
+- Updated dependencies [063e69d]
+- Updated dependencies [8a4d6ad]
+  - @prosopo/procaptcha-common@2.11.23
+  - @prosopo/types@5.0.3
+  - @prosopo/util@3.3.6
+  - @prosopo/widget-skeleton@2.8.6
+  - @prosopo/locale@3.3.0
+  - @prosopo/procaptcha@2.10.64
+  - @prosopo/common@3.1.50
+
+## 2.9.102
+### Patch Changes
+
+- Updated dependencies [d6cb841]
+  - @prosopo/types@5.0.2
+  - @prosopo/procaptcha@2.10.63
+  - @prosopo/procaptcha-common@2.11.22
+
 ## 2.9.101
 ### Patch Changes
 

package/dist/cjs/components/Button.cjs

@@ -1,4 +1,5 @@
 const require_index = require("../util/index.cjs");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
 let react = require("react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
@@ -16,36 +17,38 @@ var buttonStyleBase = {
 	verticalAlign: "middle",
 	appearance: void 0,
 	textDecoration: "none",
-	fontWeight: "500",
-	fontSize: "0.875rem",
-	lineHeight: "1.75",
-	letterSpacing: "0.02857em",
-	textTransform: "uppercase",
+	textTransform: "none",
 	minWidth: "64px",
-	padding: "6px 16px",
-	borderRadius: "4px",
-	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, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-	backgroundColor: "#ffffff"
+	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 Button = ({ themeColor, buttonType, text, onClick }) => {
 	const theme = (0, react.useMemo)(() => themeColor === "light" ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme, [themeColor]);
 	const [hover, setHover] = (0, react.useState)(false);
+	const [focusVisible, setFocusVisible] = (0, react.useState)(false);
 	const buttonStyle = (0, react.useMemo)(() => {
 		const baseStyle = {
 			...buttonStyleBase,
-			border: `1px solid ${theme.palette.grey[500]}`,
-			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			...theme.typography.labelLarge,
+			borderRadius: theme.shape.button,
 			fontFamily: theme.font.fontFamily,
-			width: "100%",
-			color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
+			width: "100%"
 		};
 		if (buttonType === "cancel") return {
 			...baseStyle,
-			backgroundColor: hover ? theme.palette.grey[600] : "transparent"
+			padding: "8px 12px",
+			backgroundColor: hover ? (0, _prosopo_widget_skeleton.withAlpha)(theme.palette.primary.main, theme.stateLayer.hover) : "transparent",
+			color: theme.palette.primary.main
 		};
 		return {
 			...baseStyle,
-			backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
+			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
 		};
 	}, [
 		buttonType,
@@ -56,9 +59,17 @@ var Button = ({ themeColor, buttonType, text, onClick }) => {
 		...require_index.default({ dev: { cy: `button-${buttonType}` } }),
 		onMouseEnter: () => setHover(true),
 		onMouseLeave: () => setHover(false),
-		style: buttonStyle,
+		onFocus: (e) => setFocusVisible(e.target.matches(":focus-visible")),
+		onBlur: () => setFocusVisible(false),
+		style: {
+			...buttonStyle,
+			...focusVisible ? {
+				outline: `3px solid ${theme.palette.primary.main}`,
+				outlineOffset: "2px"
+			} : {}
+		},
 		onClick: (e) => {
-			if (!e.isTrusted) return;
+			if (!(0, _prosopo_procaptcha_common.isEventTrusted)(e)) return;
 			e.preventDefault();
 			onClick();
 		},

package/dist/cjs/components/CaptchaComponent.cjs

@@ -1,11 +1,11 @@
 const require_CaptchaWidget = require("./CaptchaWidget.cjs");
 const require_index = require("../util/index.cjs");
 const require_Button = require("./Button.cjs");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
 let react = require("react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let _prosopo_locale = require("@prosopo/locale");
-let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_util = require("@prosopo/util");
 //#region src/components/CaptchaComponent.tsx
 var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, onReload, themeColor }) => {
@@ -25,9 +25,9 @@ var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onCli
 				maxHeight: "100%",
 				display: "flex",
 				flexDirection: "column",
-				border: "1px solid #dddddd",
-				boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
-				borderRadius: "4px",
+				border: `1px solid ${theme.palette.border}`,
+				boxShadow: theme.elevation.card,
+				borderRadius: theme.shape.card,
 				backgroundColor: theme.palette.background.default,
 				userSelect: "none",
 				touchAction: "none",
@@ -52,33 +52,39 @@ var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onCli
 						},
 						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 							style: {
-								backgroundColor: theme.palette.primary.main,
+								backgroundColor: theme.palette.primaryContainer.main,
+								borderRadius: theme.shape.header,
 								width: "100%",
 								marginTop: fullSpacing
 							},
 							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
 								style: {
-									padding: `${theme.spacing.half}px`,
+									padding: "12px 14px",
 									fontFamily: theme.font.fontFamily
 								},
 								children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("p", {
 									style: {
-										color: "#ffffff",
-										fontWeight: 700,
-										lineHeight: 1.5
+										...theme.typography.titleMedium,
+										color: theme.palette.primaryContainer.contrastText,
+										margin: 0
 									},
 									children: [
 										t("WIDGET.SELECT_ALL"),
 										":",
 										"\xA0",
-										/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: `${captcha.target} ` })
+										/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+											style: {
+												color: theme.palette.titleAccent,
+												fontWeight: 700
+											},
+											children: `${captcha.target} `
+										})
 									]
 								}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("p", {
 									style: {
-										color: "#ffffff",
-										fontWeight: 500,
-										lineHeight: .8,
-										fontSize: "0.8rem"
+										...theme.typography.bodyMedium,
+										color: theme.palette.onSurfaceVariant,
+										margin: "4px 0 0 0"
 									},
 									children: t("WIDGET.IF_NONE_CLICK_NEXT")
 								})]

package/dist/cjs/components/CaptchaWidget.cjs

@@ -1,4 +1,5 @@
 let _prosopo_common = require("@prosopo/common");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
 let react = require("react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
@@ -25,6 +26,7 @@ var CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
 		},
 		children: items.map((item, index) => {
 			const hash = getHash(item);
+			const selected = solution.some((s) => s[0] === hash);
 			return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 				style: {
 					flexGrow: 1,
@@ -41,7 +43,7 @@ var CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
 						margin: 0
 					},
 					onClick: (e) => {
-						if (!e.isTrusted) return;
+						if (!(0, _prosopo_procaptcha_common.isEventTrusted)(e)) return;
 						onClick(hash, e.clientX, e.clientY);
 					},
 					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("img", {
@@ -54,7 +56,10 @@ var CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
 							overflow: "hidden",
 							borderStyle: "solid",
 							borderWidth: "1px",
-							borderColor: theme.palette.grey[300]
+							borderColor: theme.palette.tile.border,
+							borderRadius: selected ? theme.shape.tileSelected : theme.shape.tile,
+							transform: selected ? "scale(0.9)" : "none",
+							transition: "transform 200ms cubic-bezier(0.2, 0, 0, 1), border-radius 200ms"
 						},
 						src: item.data,
 						alt: `Captcha image ${index + 1}`,
@@ -76,18 +81,22 @@ var CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
-							backgroundColor: "rgba(0,0,0,0.5)",
-							visibility: solution.some((s) => s[0] === hash) ? "visible" : "hidden"
+							backgroundColor: theme.palette.overlay,
+							borderRadius: theme.shape.tileSelected,
+							visibility: selected ? "visible" : "hidden"
 						},
 						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
 							style: {
-								backgroundColor: "transparent",
+								backgroundColor: theme.palette.checkbox.fill,
 								display: "block",
-								width: "35%",
-								height: "35%",
+								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: "currentcolor"
+								fill: theme.palette.checkbox.tick
 							},
 							focusable: "false",
 							color: "#fff",

package/dist/cjs/components/Modal.cjs

@@ -13,12 +13,11 @@ var ModalInnerDivCSS = _emotion_react.css`
 	max-width: 500px;
 	background-color: transparent;
 	border: none;
-	border-radius: 4px;
+	border-radius: 28px;
 	z-index: 2147483647;
 	align-self: center;
-	box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
-		rgba(0, 0, 0, 0.14) 0px 24px 38px 3px,
-		rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
+	/* Shadowless — the dialog separates from the page via the scrim and its own
+	   surface role, not a drop shadow. */
 	box-sizing: border-box; /* Ensures border is part of width */
 	/* iOS only */
     @supports (-webkit-touch-callout: none) { 

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -1,10 +1,10 @@
 const require_CaptchaComponent = require("./CaptchaComponent.cjs");
 const require_Modal = require("./Modal.cjs");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
 let react = require("react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let _prosopo_locale = require("@prosopo/locale");
-let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_procaptcha = require("@prosopo/procaptcha");
 let _prosopo_types = require("@prosopo/types");
 //#region src/components/ProcaptchaWidget.tsx
@@ -113,7 +113,7 @@ var ProcaptchaWidget = (props) => {
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.Checkbox, {
 				theme,
 				onChange: async (event) => {
-					if (!event.isTrusted) return;
+					if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
 					if (loading) return;
 					setLoading(true);
 					let x = 0;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,OAAO,CAAC;AAGf,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACb;AA4BD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDjC,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,OAAO,CAAC;AAGf,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACb;AA8BD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkFjC,CAAC;AACF,eAAe,MAAM,CAAC"}

package/dist/components/Button.js

@@ -1,5 +1,6 @@
 import addDataAttr from "../util/index.js";
-import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { isEventTrusted } from "@prosopo/procaptcha-common";
+import { darkTheme, lightTheme, withAlpha } from "@prosopo/widget-skeleton";
 import { useMemo, useState } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/Button.tsx
@@ -16,36 +17,38 @@ var buttonStyleBase = {
 	verticalAlign: "middle",
 	appearance: void 0,
 	textDecoration: "none",
-	fontWeight: "500",
-	fontSize: "0.875rem",
-	lineHeight: "1.75",
-	letterSpacing: "0.02857em",
-	textTransform: "uppercase",
+	textTransform: "none",
 	minWidth: "64px",
-	padding: "6px 16px",
-	borderRadius: "4px",
-	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, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-	backgroundColor: "#ffffff"
+	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 Button = ({ themeColor, buttonType, text, onClick }) => {
 	const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
 	const [hover, setHover] = useState(false);
+	const [focusVisible, setFocusVisible] = useState(false);
 	const buttonStyle = useMemo(() => {
 		const baseStyle = {
 			...buttonStyleBase,
-			border: `1px solid ${theme.palette.grey[500]}`,
-			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			...theme.typography.labelLarge,
+			borderRadius: theme.shape.button,
 			fontFamily: theme.font.fontFamily,
-			width: "100%",
-			color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
+			width: "100%"
 		};
 		if (buttonType === "cancel") return {
 			...baseStyle,
-			backgroundColor: hover ? theme.palette.grey[600] : "transparent"
+			padding: "8px 12px",
+			backgroundColor: hover ? withAlpha(theme.palette.primary.main, theme.stateLayer.hover) : "transparent",
+			color: theme.palette.primary.main
 		};
 		return {
 			...baseStyle,
-			backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
+			padding: "8px 24px",
+			backgroundColor: theme.palette.primary.main,
+			color: theme.palette.primary.contrastText,
+			boxShadow: hover ? `inset 0 0 0 100px ${withAlpha(theme.palette.primary.contrastText, theme.stateLayer.hover)}` : theme.elevation.buttonPrimary
 		};
 	}, [
 		buttonType,
@@ -56,9 +59,17 @@ var Button = ({ themeColor, buttonType, text, onClick }) => {
 		...addDataAttr({ dev: { cy: `button-${buttonType}` } }),
 		onMouseEnter: () => setHover(true),
 		onMouseLeave: () => setHover(false),
-		style: buttonStyle,
+		onFocus: (e) => setFocusVisible(e.target.matches(":focus-visible")),
+		onBlur: () => setFocusVisible(false),
+		style: {
+			...buttonStyle,
+			...focusVisible ? {
+				outline: `3px solid ${theme.palette.primary.main}`,
+				outlineOffset: "2px"
+			} : {}
+		},
 		onClick: (e) => {
-			if (!e.isTrusted) return;
+			if (!isEventTrusted(e)) return;
 			e.preventDefault();
 			onClick();
 		},

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAGN,OAAO,EACP,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAS3C,MAAM,eAAe,GAAkB;IACtC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,SAAS;IACrB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,WAAW;IAC1B,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,KAAK;IACnB,UAAU,EACT,+MAA+M;IAChN,eAAe,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,MAAM,GAA0B,CAAC,EACtC,UAAU,EACV,UAAU,EACV,IAAI,EACJ,OAAO,GACM,EAAE,EAAE;IACjB,MAAM,KAAK,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EACvD,CAAC,UAAU,CAAC,CACZ,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,SAAS,GAAG;YACjB,GAAG,eAAe;YAClB,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAC9C,SAAS,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YACvD,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU;YACjC,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,KAAK;gBACX,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;gBACpC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY;SACxC,CAAC;QACF,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO;gBACN,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;aAChE,CAAC;QACH,CAAC;QACD,OAAO;YACN,GAAG,SAAS;YACZ,eAAe,EAAE,KAAK;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;gBAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;SACnC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAE/B,OAAO,CACN,oBACK,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,UAAU,UAAU,EAAE,EAAE,EAAE,CAAC,EACxD,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;gBAClB,OAAO;YACR,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,EAAE,CAAC;QACX,CAAC,gBACW,IAAI,YAEf,IAAI,GACG,CACT,CAAC;AACH,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQ1D,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;CAC7B;AAED,QAAA,MAAM,gBAAgB,gGAUnB,qBAAqB,qDAsLvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQ1D,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;CAC7B;AAED,QAAA,MAAM,gBAAgB,gGAUnB,qBAAqB,qDA+LvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/CaptchaComponent.js

@@ -1,11 +1,11 @@
 import { CaptchaWidget } from "./CaptchaWidget.js";
 import addDataAttr from "../util/index.js";
 import Button from "./Button.js";
+import { ReloadButton } from "@prosopo/procaptcha-common";
 import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
 import { Suspense, useMemo } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useTranslation } from "@prosopo/locale";
-import { ReloadButton } from "@prosopo/procaptcha-common";
 import { at } from "@prosopo/util";
 //#region src/components/CaptchaComponent.tsx
 var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, onReload, themeColor }) => {
@@ -25,9 +25,9 @@ var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onCli
 				maxHeight: "100%",
 				display: "flex",
 				flexDirection: "column",
-				border: "1px solid #dddddd",
-				boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
-				borderRadius: "4px",
+				border: `1px solid ${theme.palette.border}`,
+				boxShadow: theme.elevation.card,
+				borderRadius: theme.shape.card,
 				backgroundColor: theme.palette.background.default,
 				userSelect: "none",
 				touchAction: "none",
@@ -52,33 +52,39 @@ var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onCli
 						},
 						children: /* @__PURE__ */ jsx("div", {
 							style: {
-								backgroundColor: theme.palette.primary.main,
+								backgroundColor: theme.palette.primaryContainer.main,
+								borderRadius: theme.shape.header,
 								width: "100%",
 								marginTop: fullSpacing
 							},
 							children: /* @__PURE__ */ jsxs("div", {
 								style: {
-									padding: `${theme.spacing.half}px`,
+									padding: "12px 14px",
 									fontFamily: theme.font.fontFamily
 								},
 								children: [/* @__PURE__ */ jsxs("p", {
 									style: {
-										color: "#ffffff",
-										fontWeight: 700,
-										lineHeight: 1.5
+										...theme.typography.titleMedium,
+										color: theme.palette.primaryContainer.contrastText,
+										margin: 0
 									},
 									children: [
 										t("WIDGET.SELECT_ALL"),
 										":",
 										"\xA0",
-										/* @__PURE__ */ jsx("span", { children: `${captcha.target} ` })
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: theme.palette.titleAccent,
+												fontWeight: 700
+											},
+											children: `${captcha.target} `
+										})
 									]
 								}), /* @__PURE__ */ jsx("p", {
 									style: {
-										color: "#ffffff",
-										fontWeight: 500,
-										lineHeight: .8,
-										fontSize: "0.8rem"
+										...theme.typography.bodyMedium,
+										color: theme.palette.onSurfaceVariant,
+										margin: "4px 0 0 0"
 									},
 									children: t("WIDGET.IF_NONE_CLICK_NEXT")
 								})]