@prosopo/procaptcha-react 2.11.3 → 2.13.0

package/dist/cjs/components/captchaWidget.cjs

@@ -0,0 +1,210 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+let _prosopo_common = require("@prosopo/common");
+//#region src/components/captchaWidget.ts
+var getHash = (item) => {
+	if (!item.hash) throw new _prosopo_common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+	return item.hash;
+};
+var cellStyle = (gap) => ({
+	flexGrow: 1,
+	flexBasis: (0, _prosopo_procaptcha_common.threeColumnBasis)(gap),
+	boxSizing: "border-box"
+});
+var MIN_GRID_GAP = 8;
+var MAX_GRID_GAP = 15;
+var GRID_PADDING_JITTER = 4;
+var MIN_WRAPPER_DEPTH = 0;
+var MAX_WRAPPER_DEPTH = 2;
+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 ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
+/** Drawn once per mounted grid, so tile centres move between page loads. */
+var generateMetrics = (theme) => ({
+	gap: (0, _prosopo_widget_skeleton.randomInt)(MIN_GRID_GAP, MAX_GRID_GAP),
+	paddingTop: Math.max(0, theme.spacing.unit + (0, _prosopo_widget_skeleton.randomInt)(-GRID_PADDING_JITTER, GRID_PADDING_JITTER)),
+	paddingBottom: Math.max(0, theme.spacing.unit + (0, _prosopo_widget_skeleton.randomInt)(-GRID_PADDING_JITTER, GRID_PADDING_JITTER))
+});
+var gridStyle = (metrics) => ({
+	width: "100%",
+	height: "100%",
+	display: "flex",
+	flexDirection: "row",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	paddingTop: `${metrics.paddingTop}px`,
+	paddingBottom: `${metrics.paddingBottom}px`,
+	gap: `${metrics.gap}px`
+});
+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 _prosopo_procaptcha_common.Teardown();
+	let props = initialProps;
+	let renderedChallenge;
+	let tiles = [];
+	let focusedHash = null;
+	const metrics = generateMetrics(themeOf(initialProps.themeColor));
+	const grid = (0, _prosopo_procaptcha_common.createElement)("div", { style: gridStyle(metrics) });
+	const buildTile = (item, index) => {
+		const hash = getHash(item);
+		const theme = themeOf(props.themeColor);
+		const image = (0, _prosopo_procaptcha_common.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 = (0, _prosopo_procaptcha_common.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",
+				"aria-hidden": "true",
+				viewBox: "0 0 24 24"
+			},
+			children: [(0, _prosopo_procaptcha_common.createSvgElement)("path", { attributes: { d: CHECK_ICON_PATH } })]
+		});
+		const overlay = (0, _prosopo_procaptcha_common.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 = (0, _prosopo_procaptcha_common.createControl)(teardown, {
+			style: {
+				position: "relative",
+				cursor: "pointer",
+				height: "100%",
+				width: "100%",
+				padding: 0,
+				margin: 0,
+				border: "none",
+				background: "none",
+				appearance: "none",
+				display: "block"
+			},
+			children: [image, overlay],
+			onActivate: (event) => {
+				const fromPointer = "clientX" in event;
+				props.onClick(hash, fromPointer ? event.clientX : 0, fromPointer ? event.clientY : 0);
+			}
+		});
+		teardown.addEventListener(clickable, "focus", () => {
+			focusedHash = clickable.matches(":focus-visible") ? hash : null;
+			applyFocusRing();
+		});
+		teardown.addEventListener(clickable, "blur", () => {
+			focusedHash = null;
+			applyFocusRing();
+		});
+		const cell = (0, _prosopo_procaptcha_common.createElement)("div", {
+			style: cellStyle(metrics.gap),
+			children: [clickable]
+		});
+		grid.appendChild((0, _prosopo_procaptcha_common.wrapRandomly)(cell, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH));
+		return {
+			hash,
+			image,
+			overlay,
+			clickable
+		};
+	};
+	const applyFocusRing = () => {
+		const theme = themeOf(props.themeColor);
+		for (const tile of tiles) (0, _prosopo_procaptcha_common.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 _prosopo_procaptcha_common.Teardown();
+		(0, _prosopo_procaptcha_common.clearElement)(grid);
+		(0, _prosopo_procaptcha_common.applyStyles)(grid, gridStyle(metrics));
+		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);
+			(0, _prosopo_procaptcha_common.applyStyles)(tile.image, selectionStyle(theme, selected));
+			(0, _prosopo_procaptcha_common.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
+exports.mountCaptchaWidget = mountCaptchaWidget;

package/dist/cjs/components/collector.cjs

@@ -0,0 +1,49 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_procaptcha = require("@prosopo/procaptcha");
+//#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);
+	};
+};
+var mountCollector = (container, initialProps) => {
+	let props = initialProps;
+	const mouseEvents = [];
+	const touchEvents = [];
+	const keyboardEvents = [];
+	const root = (0, _prosopo_procaptcha_common.createElement)("div");
+	container.appendChild(root);
+	(0, _prosopo_procaptcha.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
+exports.default = mountCollector;
+exports.mountCollector = mountCollector;

package/dist/cjs/components/index.cjs

@@ -1,6 +1,15 @@
-const require_CaptchaWidget = require("./CaptchaWidget.cjs");
-const require_ProcaptchaWidget = require("./ProcaptchaWidget.cjs");
-const require_Procaptcha = require("./Procaptcha.cjs");
-exports.CaptchaWidget = require_CaptchaWidget.CaptchaWidget;
-exports.Procaptcha = require_Procaptcha.default;
-exports.ProcaptchaWidget = require_ProcaptchaWidget.default;
+const require_button = require("./button.cjs");
+const require_modal = require("./modal.cjs");
+const require_captchaWidget = require("./captchaWidget.cjs");
+const require_captchaComponent = require("./captchaComponent.cjs");
+const require_collector = require("./collector.cjs");
+const require_procaptchaWidget = require("./procaptchaWidget.cjs");
+const require_procaptcha = require("./procaptcha.cjs");
+exports.loadProcaptcha = require_procaptcha.loadProcaptcha;
+exports.mountButton = require_button.mountButton;
+exports.mountCaptchaComponent = require_captchaComponent.mountCaptchaComponent;
+exports.mountCaptchaWidget = require_captchaWidget.mountCaptchaWidget;
+exports.mountCollector = require_collector.default;
+exports.mountModal = require_modal.mountModal;
+exports.mountProcaptcha = require_procaptcha.mountProcaptcha;
+exports.mountProcaptchaImageWidget = require_procaptchaWidget.default;

package/dist/cjs/components/modal.cjs

@@ -0,0 +1,39 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+//#region src/components/modal.ts
+var MIN_WRAPPER_DEPTH = 1;
+var MAX_WRAPPER_DEPTH = 3;
+/**
+* The image captcha's dialog frame; positioning lives in `ChallengeSurface`.
+*/
+var mountModal = (initialProps) => {
+	const inner = (0, _prosopo_procaptcha_common.createElement)("div", { className: (0, _prosopo_widget_skeleton.randomToken)() });
+	(0, _prosopo_procaptcha_common.applyStyles)(inner, {
+		maxWidth: "500px",
+		maxHeight: "100%",
+		backgroundColor: "transparent",
+		border: "none",
+		borderRadius: "28px",
+		alignSelf: "center",
+		boxSizing: "border-box"
+	});
+	const outerClassName = (0, _prosopo_widget_skeleton.randomToken)();
+	const surfaceProps = (props) => ({
+		show: props.show,
+		placement: props.placement,
+		anchor: props.anchor,
+		onDismiss: props.onDismiss,
+		scrim: "none",
+		className: outerClassName,
+		dialogLabel: props.dialogLabel
+	});
+	const surface = (0, _prosopo_procaptcha_common.mountChallengeSurface)(surfaceProps(initialProps));
+	surface.content.appendChild((0, _prosopo_procaptcha_common.wrapRandomly)(inner, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH));
+	return {
+		content: inner,
+		update: (props) => surface.update(surfaceProps(props)),
+		destroy: () => surface.destroy()
+	};
+};
+//#endregion
+exports.mountModal = mountModal;

package/dist/cjs/components/procaptcha.cjs

@@ -0,0 +1,23 @@
+//#region src/components/procaptcha.ts
+var loadProcaptcha = async () => (await Promise.resolve().then(() => require("./procaptchaWidget.cjs"))).mountProcaptchaImageWidget;
+/**
+* Mount without awaiting the chunk. Nothing renders until the import lands,
+* matching `<Suspense>` with no fallback; destroying before then cancels the
+* mount rather than leaving an orphan behind.
+*/
+var mountProcaptcha = (container, props) => {
+	let destroyed = false;
+	let inner;
+	loadProcaptcha().then((mount) => {
+		if (destroyed) return;
+		inner = mount(container, props);
+	});
+	return { destroy: () => {
+		destroyed = true;
+		inner?.destroy();
+		inner = void 0;
+	} };
+};
+//#endregion
+exports.loadProcaptcha = loadProcaptcha;
+exports.mountProcaptcha = mountProcaptcha;

package/dist/cjs/components/procaptchaWidget.cjs

@@ -0,0 +1,166 @@
+const require_modal = require("./modal.cjs");
+const require_captchaComponent = require("./captchaComponent.cjs");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+let _prosopo_procaptcha = require("@prosopo/procaptcha");
+let _prosopo_locale = require("@prosopo/locale");
+let _prosopo_types = require("@prosopo/types");
+//#region src/components/procaptchaWidget.ts
+var PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+var mountProcaptchaImageWidget = (container, props) => {
+	const teardown = new _prosopo_procaptcha_common.Teardown();
+	const config = _prosopo_types.ProcaptchaConfigSchema.parse(props.config);
+	const frictionlessState = props.frictionlessState;
+	const i18n = props.i18n;
+	const callbacks = props.callbacks || {};
+	const translator = (0, _prosopo_locale.createTranslator)(i18n);
+	const isInvisible = "invisible" === config.mode;
+	const store = (0, _prosopo_procaptcha_common.createProcaptchaState)();
+	let loading = false;
+	let lastError = store.state.error;
+	let lastCoords = null;
+	let sessionInvalidatedFired = false;
+	let honeypot;
+	let captcha;
+	let checkbox;
+	const delegatesReload = Boolean(props.onReload);
+	const manager = (0, _prosopo_procaptcha.Manager)(config, store.state, store.update, callbacks, frictionlessState, () => honeypot?.getValue(), delegatesReload ? (x, y) => props.onReload?.(x, y) : void 0);
+	const root = (0, _prosopo_procaptcha_common.createElement)("div", { className: isInvisible ? void 0 : "image-captcha" });
+	container.appendChild(root);
+	if (frictionlessState?.hp) honeypot = (0, _prosopo_procaptcha_common.mountHoneypot)(root, { encodedQuestion: frictionlessState.hp });
+	const modalProps = () => ({
+		show: store.state.showModal,
+		placement: config.placement,
+		anchor: props.container,
+		onDismiss: manager.cancel,
+		dialogLabel: translator.t("WIDGET.IMAGE_DIALOG_LABEL", { defaultValue: "Image challenge" })
+	});
+	const modal = require_modal.mountModal(modalProps());
+	const emptyChallenge = (0, _prosopo_procaptcha_common.createElement)("div", { text: "No challenge set." });
+	const banner = isInvisible ? void 0 : (0, _prosopo_procaptcha_common.mountTestModeBanner)(root, { siteKey: config.account.address ?? "" });
+	const captchaProps = (challenge) => ({
+		challenge,
+		index: store.state.index,
+		solutions: store.state.solutions,
+		onSubmit: manager.submit,
+		onCancel: manager.cancel,
+		onClick: manager.select,
+		onNext: manager.nextRound,
+		onReload: manager.reload,
+		themeColor: config.theme ?? "light",
+		translator
+	});
+	const renderModal = () => {
+		modal.update(modalProps());
+		const challenge = store.state.challenge;
+		if (void 0 !== challenge) {
+			emptyChallenge.parentNode?.removeChild(emptyChallenge);
+			if (void 0 === captcha) captcha = require_captchaComponent.mountCaptchaComponent(modal.content, captchaProps(challenge));
+			else captcha.update(captchaProps(challenge));
+			return;
+		}
+		captcha?.destroy();
+		captcha = void 0;
+		if (!isInvisible && emptyChallenge.parentNode !== modal.content) modal.content.appendChild(emptyChallenge);
+	};
+	const runErrorEffect = () => {
+		if (store.state.error === lastError) return;
+		lastError = store.state.error;
+		if (!store.state.error) return;
+		loading = false;
+		if ("CAPTCHA.NO_SESSION_FOUND" !== store.state.error.key) return;
+		if (props.onSessionInvalidated && !sessionInvalidatedFired) {
+			sessionInvalidatedFired = true;
+			props.onSessionInvalidated(lastCoords?.x, lastCoords?.y);
+			return;
+		}
+		if (frictionlessState) {
+			const timer = setTimeout(() => {
+				frictionlessState.restart();
+			}, 100);
+			teardown.add(() => clearTimeout(timer));
+		}
+	};
+	const render = () => {
+		runErrorEffect();
+		renderModal();
+		checkbox?.update(checkboxProps());
+	};
+	const scheduler = (0, _prosopo_procaptcha_common.createRenderScheduler)(render);
+	const checkboxProps = () => ({
+		theme: "light" === props.config.theme ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme,
+		checked: store.state.isHuman,
+		labelText: translator.isReady() ? translator.t("WIDGET.I_AM_HUMAN") : "",
+		error: store.state.error?.message,
+		loadingText: translator.t("WIDGET.CHECKING", { defaultValue: "Checking that you are human" }),
+		loading,
+		onChange: async (event) => {
+			if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
+			if (loading) return;
+			loading = true;
+			scheduler.schedule();
+			let x = 0;
+			let y = 0;
+			if ("clientX" in event && "clientY" in event) {
+				x = event.clientX;
+				y = event.clientY;
+			}
+			lastCoords = {
+				x,
+				y
+			};
+			try {
+				await manager.start(x, y);
+			} catch (error) {
+				console.error("Error starting verification:", error);
+			} finally {
+				loading = false;
+				scheduler.schedule();
+			}
+		}
+	});
+	if (!isInvisible) checkbox = (0, _prosopo_procaptcha_common.mountCheckbox)(root, checkboxProps());
+	teardown.add(scheduler.cancel);
+	teardown.add(store.subscribe(scheduler.schedule));
+	teardown.add(translator.subscribe(scheduler.schedule));
+	const handleExecute = () => {
+		store.update({ showModal: true });
+		if (!store.state.challenge) {
+			console.log("No challenge set, attempting to start verification");
+			try {
+				manager.start();
+			} catch (error) {
+				console.error("Error starting verification:", error);
+			}
+		}
+	};
+	teardown.addEventListener(document, PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (props.container) teardown.addEventListener(props.container, PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (config.language) if (i18n) {
+		if (i18n.language !== config.language) i18n.changeLanguage(config.language);
+	} else (0, _prosopo_locale.loadI18next)(false, config.language);
+	if (props.autoStart) {
+		loading = true;
+		const coords = props.startCoords;
+		lastCoords = coords ?? null;
+		scheduler.schedule();
+		const clearLoading = () => {
+			loading = false;
+			scheduler.schedule();
+		};
+		manager.start(coords?.x ?? 0, coords?.y ?? 0).then(clearLoading, clearLoading);
+	}
+	render();
+	return { destroy: () => {
+		teardown.run();
+		captcha?.destroy();
+		modal.destroy();
+		checkbox?.destroy();
+		banner?.destroy();
+		honeypot?.destroy();
+		root.parentNode?.removeChild(root);
+	} };
+};
+//#endregion
+exports.default = mountProcaptchaImageWidget;
+exports.mountProcaptchaImageWidget = mountProcaptchaImageWidget;

package/dist/cjs/index.cjs

@@ -1,7 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_CaptchaWidget = require("./components/CaptchaWidget.cjs");
-const require_ProcaptchaWidget = require("./components/ProcaptchaWidget.cjs");
-const require_Procaptcha = require("./components/Procaptcha.cjs");
-exports.CaptchaWidget = require_CaptchaWidget.CaptchaWidget;
-exports.Procaptcha = require_Procaptcha.default;
-exports.ProcaptchaWidget = require_ProcaptchaWidget.default;
+const require_button = require("./components/button.cjs");
+const require_modal = require("./components/modal.cjs");
+const require_captchaWidget = require("./components/captchaWidget.cjs");
+const require_captchaComponent = require("./components/captchaComponent.cjs");
+const require_collector = require("./components/collector.cjs");
+const require_procaptchaWidget = require("./components/procaptchaWidget.cjs");
+const require_procaptcha = require("./components/procaptcha.cjs");
+exports.loadProcaptcha = require_procaptcha.loadProcaptcha;
+exports.mountButton = require_button.mountButton;
+exports.mountCaptchaComponent = require_captchaComponent.mountCaptchaComponent;
+exports.mountCaptchaWidget = require_captchaWidget.mountCaptchaWidget;
+exports.mountCollector = require_collector.default;
+exports.mountModal = require_modal.mountModal;
+exports.mountProcaptcha = require_procaptcha.mountProcaptcha;
+exports.mountProcaptchaImageWidget = require_procaptchaWidget.default;

package/dist/cjs/util/index.cjs

@@ -1,9 +1,11 @@
 //#region src/util/index.ts
 function renameKeysForDataAttr(data = {}) {
-	return Object.keys(data).reduce((prev, curr) => ({
-		...prev,
-		[`data-${curr}`]: data[curr]
-	}), {});
+	const renamed = {};
+	for (const key of Object.keys(data)) {
+		const value = data[key];
+		if (void 0 !== value) renamed[`data-${key}`] = value;
+	}
+	return renamed;
 }
 /**
 * maps any data to data attributes (mapped to { data-[key]: value })

package/dist/components/button.d.ts

@@ -0,0 +1,9 @@
+import { type Component } from "@prosopo/procaptcha-common";
+export interface ButtonProps {
+    themeColor: "light" | "dark";
+    buttonType: "cancel" | "next";
+    onClick: () => void;
+    text: string;
+}
+export declare const mountButton: (container: HTMLElement, initialProps: ButtonProps) => Component<ButtonProps>;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAaA,OAAO,EACN,KAAK,SAAS,EAMd,MAAM,4BAA4B,CAAC;AAIpC,MAAM,WAAW,WAAW;IAC3B,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;AA6BD,eAAO,MAAM,WAAW,cACZ,WAAW,gBACR,WAAW,KACvB,SAAS,CAAC,WAAW,CAiGvB,CAAC"}

package/dist/components/button.js

@@ -0,0 +1,98 @@
+import addDataAttr from "../util/index.js";
+import { Teardown, applyAttributes, applyStyles, createControl } from "@prosopo/procaptcha-common";
+import { darkTheme, lightTheme, withAlpha } from "@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 Teardown();
+	let props = initialProps;
+	let hover = false;
+	let focusVisible = false;
+	const button = createControl(teardown, { onActivate: (event) => {
+		event.preventDefault();
+		props.onClick();
+	} });
+	const buttonStyle = () => {
+		const theme = "light" === props.themeColor ? lightTheme : 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 ? 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 ${withAlpha(theme.palette.primary.contrastText, theme.stateLayer.hover)}` : theme.elevation.buttonPrimary
+		};
+	};
+	const render = () => {
+		applyStyles(button, buttonStyle());
+		applyAttributes(button, {
+			...addDataAttr({ 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
+export { mountButton };

package/dist/components/button.js.map

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