@incodetech/web 0.0.0-dev-20260909-14ef44cf → 0.0.0-dev-20260910-30fb659a

package/dist/tutorial-R4tGibYC.js

@@ -0,0 +1,574 @@
+import { o as useTranslation } from "./uiConfig-Sd_A0KwB.js";
+import { S as k, _ as y, c as A, f as d, h as q, p as g, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { f as TransitionSpinner, l as Page } from "./incodeComponent-OpYmmHuG.js";
+import { a as useAnimationData, d as cn, n as LoadingIcon, t as Spacer } from "./spacer-CP6nfo3f.js";
+import { n as Title } from "./spinner-1GVajlEK.js";
+import { S as Button, r as SuccessIcon } from "./icons-BTQAPX7h.js";
+import { t as ErrorContent } from "./errorContent-Be-w9xjB.js";
+import { t as ConnectionError } from "./connectionError-TamPptzl.js";
+import { t as useCoverMedia } from "./useCoverMedia-DofxqCtg.js";
+import { t as BaseTutorial } from "./baseTutorial-DdU221rI.js";
+import { t as ManualCaptureButton } from "./manualCaptureButton-DnE00y7z.js";
+//#region src/shared/capture/faceOutline.tsx
+var FaceOutline = () => {
+	return /* @__PURE__ */ u("svg", {
+		width: "292",
+		height: "272",
+		viewBox: "0 0 292 272",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		class: "IncodeFaceOutline",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ u("title", { children: "Outline" }), /* @__PURE__ */ u("path", {
+			opacity: "0.8",
+			d: "M145.633 8.0625C115.606 8.06268 85.6206 26.5984 76.9712 54.293L76.771 54.9492C70.4539 76.1063 75.0139 100.802 76.8687 110.58L77.3628 113.188L75.1528 114.656C66.1187 120.66 63.5861 124.089 62.8472 126.92C62.4669 128.377 62.4644 130.035 62.8003 132.412C63.1635 134.983 63.7533 137.484 64.4233 141.347L64.5142 141.841C65.5056 146.956 68.1062 152.133 71.2749 156.618C74.5527 161.257 78.2056 164.826 80.7349 166.584L82.4517 167.777V169.869C82.4517 177.866 85.3476 186.144 89.6763 194.128C93.9906 202.085 99.5748 209.473 104.623 215.646L105.526 216.751V218.178C105.526 220.891 105.68 223.73 105.801 226.9C105.92 230.011 106.003 233.347 105.828 236.771C105.475 243.652 104.077 251.044 99.7446 258.227C91.1977 272.397 72.1081 284.401 31.8677 291.776L29.936 292.124C-41.1597 304.684 -61.4563 361.617 -63.2153 392.062H145.633V400.062H-71.3638L-71.3462 396.044C-71.2048 364.597 -50.9804 298.295 28.5444 284.246L30.4448 283.904C69.9919 276.654 86.1642 265.253 92.894 254.095C96.3216 248.412 97.5261 242.442 97.8374 236.362C97.9939 233.307 97.9241 230.262 97.8071 227.206C97.7111 224.697 97.5799 222.105 97.5396 219.615C92.5931 213.5 87.048 206.064 82.644 197.941C78.308 189.944 74.9442 181.04 74.5024 171.896C71.3932 169.387 67.8531 165.638 64.7417 161.234C61.1656 156.173 57.9337 149.942 56.6587 143.353L56.5415 142.714C55.9864 139.514 55.2491 136.155 54.8784 133.531C54.4806 130.715 54.3377 127.843 55.106 124.899C56.5344 119.427 60.7885 114.886 68.5259 109.489C66.4692 98.2995 62.7062 74.0938 69.106 52.6602L69.3345 51.9092C79.2266 20.2173 112.853 0.0626788 145.633 0.0625V8.0625ZM145.635 0.0625C178.415 0.0625 212.042 20.2172 221.934 51.9092L222.163 52.6602C228.562 74.0938 224.799 98.2996 222.743 109.489C230.48 114.886 234.734 119.427 236.163 124.899C236.931 127.843 236.788 130.715 236.39 133.531C236.019 136.155 235.282 139.514 234.727 142.714L234.61 143.353C233.335 149.942 230.103 156.173 226.527 161.234C223.415 165.638 219.875 169.387 216.766 171.896C216.324 181.04 212.961 189.944 208.625 197.941C204.221 206.064 198.676 213.5 193.729 219.615C193.689 222.105 193.557 224.697 193.461 227.206C193.344 230.262 193.275 233.307 193.431 236.362C193.742 242.442 194.947 248.412 198.375 254.095C205.104 265.253 221.277 276.654 260.824 283.904L262.724 284.246C342.249 298.294 362.473 364.597 362.615 396.044L362.632 400.062H145.635V392.062H354.484C352.725 361.616 332.429 304.683 261.333 292.124L259.401 291.776C219.161 284.401 200.071 272.397 191.524 258.227C187.192 251.044 185.793 243.652 185.441 236.771C185.266 233.347 185.348 230.011 185.467 226.9C185.589 223.73 185.743 220.891 185.743 218.178V216.751L186.646 215.646C191.694 209.473 197.278 202.085 201.592 194.128C205.921 186.144 208.817 177.866 208.817 169.869V167.777L210.534 166.584C213.063 164.826 216.716 161.257 219.994 156.618C223.162 152.133 225.763 146.956 226.754 141.841L226.845 141.347C227.515 137.484 228.105 134.983 228.468 132.412C228.804 130.034 228.802 128.377 228.421 126.92C227.682 124.089 225.15 120.66 216.116 114.656L213.906 113.188L214.4 110.58C216.255 100.802 220.815 76.1064 214.498 54.9492L214.297 54.293C205.648 26.5983 175.662 8.0625 145.635 8.0625V0.0625Z",
+			fill: "white"
+		})]
+	});
+};
+//#endregion
+//#region src/shared/capture/loadingBorder.tsx
+var IDLE_COLOR = "var(--surface-neutral-100)";
+var getColor = (borderState) => {
+	switch (borderState) {
+		case "success":
+		case "capturing": return "var(--surface-status-positive-500)";
+		case "loading": return "var(--surface-brand-500)";
+		case "error": return "var(--surface-status-negative-500)";
+		case "idle": return IDLE_COLOR;
+	}
+};
+var BorderRing = ({ fill, gradientId, gradientColor }) => /* @__PURE__ */ u("svg", {
+	width: "100%",
+	height: "100%",
+	viewBox: "0 0 335 335",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ u("title", { children: "Loading Border" }),
+		/* @__PURE__ */ u("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M335 167.5C335 260.008 260.008 335 167.5 335C74.9923 335 0 260.008 0 167.5C0 74.9923 74.9923 0 167.5 0C260.008 0 335 74.9923 335 167.5ZM167.5 325C254.485 325 325 254.485 325 167.5C325 80.5152 254.485 10 167.5 10C80.5152 10 10 80.5152 10 167.5C10 254.485 80.5152 325 167.5 325Z",
+			class: "IncodeLoadingBorderPath",
+			fill
+		}),
+		gradientId && gradientColor ? /* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("radialGradient", {
+			id: gradientId,
+			cx: "0",
+			cy: "0",
+			r: "1",
+			gradientUnits: "userSpaceOnUse",
+			gradientTransform: "translate(240.418 17.4369) rotate(115.674) scale(167.087)",
+			children: [/* @__PURE__ */ u("stop", { "stop-color": gradientColor }), /* @__PURE__ */ u("stop", {
+				offset: "1",
+				"stop-color": gradientColor,
+				"stop-opacity": "0"
+			})]
+		}) }) : null
+	]
+});
+var LoadingBorder = ({ borderState = "idle" }) => {
+	const gradientId = g();
+	const isLoadingOrCapturing = borderState === "loading" || borderState === "capturing";
+	const color = getColor(borderState);
+	const fill = isLoadingOrCapturing ? `url(#${gradientId})` : color;
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeLoadingBorder",
+		"aria-hidden": "true",
+		children: [isLoadingOrCapturing ? /* @__PURE__ */ u("div", {
+			class: "IncodeLoadingBorderBase",
+			children: /* @__PURE__ */ u(BorderRing, { fill: IDLE_COLOR })
+		}) : null, /* @__PURE__ */ u("div", {
+			class: cn("IncodeLoadingBorderForeground", { IncodeLoadingBorderSpinning: isLoadingOrCapturing }),
+			children: /* @__PURE__ */ u(BorderRing, {
+				fill,
+				gradientId: isLoadingOrCapturing ? gradientId : void 0,
+				gradientColor: isLoadingOrCapturing ? color : void 0
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/shared/capture/notification.tsx
+var Notification = ({ detectionState, disabled, guideStyle = "silhouette" }) => {
+	const { t } = useTranslation();
+	const liveRef = A(null);
+	const lastAnnouncedRef = A({
+		message: "",
+		at: 0
+	});
+	const prevDetectionStateRef = A(detectionState);
+	const prevDisabledRef = A(disabled);
+	const hasAnnouncedInstructionsRef = A(false);
+	const clearTimerRef = A();
+	const outerTimerRef = A();
+	const dotted = guideStyle === "dottedOutline";
+	const centerFaceText = t(dotted ? "notifications.centerFace" : "notifications.centerFaceV2");
+	const text = {
+		idle: centerFaceText,
+		noFace: t("notifications.faceNotFound"),
+		tooManyFaces: t("notifications.tooManyFaces"),
+		tooClose: t("notifications.moveAway"),
+		tooFar: t("notifications.moveCloser"),
+		blur: t("notifications.onBlur"),
+		dark: t("notifications.onDark"),
+		faceAngle: t(dotted ? "notifications.onFaceAngle" : "notifications.onFaceAngleV2"),
+		headWear: t("notifications.removeHeadwear"),
+		lenses: t("notifications.removeLenses"),
+		eyesClosed: t("notifications.closedEyes"),
+		faceMask: t("notifications.mask"),
+		centerFace: centerFaceText,
+		getReady: t("notifications.getReady"),
+		capturing: t("idv2.capture.takingPhoto"),
+		error: t("common.tryAgain")
+	}[detectionState] ?? "";
+	const announce = q((message) => {
+		const now = Date.now();
+		const last = lastAnnouncedRef.current;
+		if (message === last.message && now - last.at < 200) return;
+		lastAnnouncedRef.current = {
+			message,
+			at: now
+		};
+		const node = liveRef.current;
+		if (!node) return;
+		clearTimeout(clearTimerRef.current);
+		node.textContent = "";
+		outerTimerRef.current = setTimeout(() => {
+			node.textContent = message;
+			clearTimerRef.current = setTimeout(() => {
+				node.textContent = "";
+			}, 3e3);
+		}, 50);
+	}, []);
+	y(() => {
+		const wasDisabled = prevDisabledRef.current;
+		prevDisabledRef.current = disabled;
+		if (disabled || detectionState === "manualCapture") {
+			hasAnnouncedInstructionsRef.current = false;
+			return;
+		}
+		if (hasAnnouncedInstructionsRef.current) return;
+		const timer = setTimeout(() => {
+			hasAnnouncedInstructionsRef.current = true;
+			announce(t("selfiev2.autoCapture.defaultAriaInstructions"));
+		}, wasDisabled ? 1e3 : 500);
+		return () => clearTimeout(timer);
+	}, [
+		detectionState,
+		disabled,
+		announce,
+		t
+	]);
+	y(() => {
+		const prev = prevDetectionStateRef.current;
+		prevDetectionStateRef.current = detectionState;
+		if (disabled) return;
+		if (prev !== "manualCapture" && detectionState === "manualCapture") announce(t("idv2.capture.manualCapture.modeSwitchAriaAnnouncement"));
+	}, [
+		announce,
+		detectionState,
+		t,
+		disabled
+	]);
+	y(() => {
+		if (disabled || !text) return;
+		announce(text);
+	}, [
+		text,
+		announce,
+		disabled
+	]);
+	y(() => {
+		return () => {
+			clearTimeout(outerTimerRef.current);
+			clearTimeout(clearTimerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("div", {
+		ref: liveRef,
+		class: "IncodeCaptureVisuallyHidden",
+		"aria-live": "assertive",
+		"aria-atomic": "true"
+	}), text ? /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("div", {
+		class: "IncodeNotification",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u("p", {
+			class: "IncodeNotificationText",
+			children: text
+		})
+	}), /* @__PURE__ */ u(Spacer, { size: 24 })] }) : null] });
+};
+//#endregion
+//#region src/modules/selfie/avatarCanvas.tsx
+/**
+* Mounts the avatar `<canvas>` in place of the live selfie video. The element
+* is created and rendered to in the infra layer; the UI only hosts it and
+* applies layout + mirror classes (the latter parallels the video's
+* `.IncodeCaptureVideoMirrored`, keeping handedness in one place). Cosmetic
+* only — the capture pipeline runs on the real frames regardless.
+*/
+var AvatarCanvas = ({ canvas, mirrored }) => {
+	const hostRef = A(null);
+	const canvasRef = A(null);
+	y(() => {
+		const host = hostRef.current;
+		if (!host || !canvas) return void 0;
+		canvas.classList.add("IncodeCaptureAvatarElement");
+		canvas.classList.toggle("IncodeCaptureAvatarMirrored", mirrored);
+		host.appendChild(canvas);
+		canvasRef.current = canvas;
+		return () => {
+			if (canvas.parentElement === host) host.removeChild(canvas);
+			if (canvasRef.current === canvas) canvasRef.current = null;
+		};
+	}, [canvas, mirrored]);
+	useCoverMedia(canvasRef, canvas);
+	return /* @__PURE__ */ u("div", {
+		ref: hostRef,
+		class: "IncodeCaptureAvatarHost",
+		"aria-hidden": "true"
+	});
+};
+//#endregion
+//#region src/modules/selfie/captureStatusPage.tsx
+var CaptureStatusPage = ({ icon, title, className, isLoading }) => {
+	const titleRef = A(null);
+	y(() => {
+		titleRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ u(Page, {
+		className: `IncodeCaptureStatusPage ${className ?? ""}`,
+		children: [/* @__PURE__ */ u(Spacer, { size: 40 }), /* @__PURE__ */ u("div", {
+			class: "IncodeCaptureStatusContainer",
+			role: isLoading ? "status" : void 0,
+			"aria-live": isLoading ? "polite" : void 0,
+			children: [
+				/* @__PURE__ */ u(Spacer, { size: 120 }),
+				icon,
+				/* @__PURE__ */ u(Spacer, { size: 16 }),
+				/* @__PURE__ */ u(Title, {
+					ref: titleRef,
+					className: "IncodeCaptureStatusTitle",
+					tabIndex: -1,
+					children: title
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/modules/selfie/errorModal.tsx
+var defaultError = {
+	title: "common.somethingWentWrong",
+	description: "support.tryAgain"
+};
+var errorContent = {
+	MASK_ERROR: {
+		title: "notifications.mask",
+		description: "notifications.maskDescription"
+	},
+	BRIGHTNESS_ERROR: {
+		title: "notifications.brightness",
+		description: "notifications.brightnessDescription"
+	},
+	LIVENESS_ERROR: {
+		title: "notifications.spoof",
+		description: "notifications.spoofDescription"
+	},
+	CLOSED_EYES_ERROR: {
+		title: "notifications.closedEyes",
+		description: "notifications.closedEyesDescription"
+	},
+	HEAD_COVER_ERROR: {
+		title: "notifications.removeHeadwear",
+		description: "notifications.removeHeadwearDescription"
+	},
+	LENSES_ERROR: {
+		title: "notifications.lenses",
+		description: "notifications.lensesDescription"
+	},
+	FACE_NOT_FOUND: {
+		title: "notifications.faceNotFound",
+		description: "notifications.faceNotFoundDescription"
+	},
+	MULTIPLE_FACES: {
+		title: "notifications.multiple",
+		description: "notifications.multipleDescription"
+	},
+	TOO_BLURRY_ERROR: defaultError,
+	TOO_DARK_ERROR: defaultError,
+	SERVER_ERROR: defaultError,
+	FACE_CROPPING_FAILED: defaultError,
+	FACE_TOO_SMALL: defaultError,
+	PROCESSING_ERROR: defaultError,
+	BAD_REQUEST: defaultError,
+	USER_IS_NOT_RECOGNIZED: {
+		title: "notifications.accessDenied",
+		description: "notifications.accessDeniedDescription"
+	},
+	SPOOF_ATTEMPT_DETECTED: {
+		title: "notifications.spoof",
+		description: "notifications.spoofDescription"
+	},
+	FACE_TOO_DARK: {
+		title: "notifications.brightness",
+		description: "notifications.brightnessDescription"
+	},
+	LENSES_DETECTED: {
+		title: "notifications.lenses",
+		description: "notifications.lensesDescription"
+	},
+	FACE_MASK_DETECTED: {
+		title: "notifications.mask",
+		description: "notifications.maskDescription"
+	},
+	CLOSED_EYES_DETECTED: {
+		title: "notifications.closedEyes",
+		description: "notifications.closedEyesDescription"
+	},
+	HEAD_COVER_DETECTED: {
+		title: "notifications.removeHeadwear",
+		description: "notifications.removeHeadwearDescription"
+	},
+	FACE_OCCLUDED: {
+		title: "notifications.faceOccluded",
+		description: "notifications.faceOccludedDescription"
+	},
+	FACE_TOO_BLURRY: {
+		title: "notifications.spoof",
+		description: "notifications.spoofDescription"
+	},
+	BAD_PHOTO_QUALITY: {
+		title: "notifications.lowQualityImage",
+		description: "notifications.lowQualityImageDescription"
+	},
+	NONEXISTENT_CUSTOMER: {
+		title: "notifications.nonexistentCustomer",
+		description: "notifications.nonexistentCustomerDescription"
+	},
+	HINT_NOT_PROVIDED: {
+		title: "notifications.hintNotProvided",
+		description: "notifications.hintNotProvidedDescription"
+	},
+	SELFIE_IMAGE_LOW_QUALITY: {
+		title: "notifications.selfieImageLowQuality",
+		description: "notifications.selfieImageLowQualityDescription"
+	}
+};
+var ERROR_CODES = [
+	"LIVENESS_ERROR",
+	"BRIGHTNESS_ERROR",
+	"LENSES_ERROR",
+	"MASK_ERROR",
+	"CLOSED_EYES_ERROR",
+	"HEAD_COVER_ERROR",
+	"SERVER_ERROR",
+	"FACE_NOT_FOUND",
+	"MULTIPLE_FACES",
+	"TOO_BLURRY_ERROR",
+	"TOO_DARK_ERROR",
+	"USER_IS_NOT_RECOGNIZED",
+	"SPOOF_ATTEMPT_DETECTED",
+	"FACE_TOO_DARK",
+	"LENSES_DETECTED",
+	"FACE_MASK_DETECTED",
+	"CLOSED_EYES_DETECTED",
+	"HEAD_COVER_DETECTED",
+	"FACE_OCCLUDED",
+	"FACE_CROPPING_FAILED",
+	"FACE_TOO_SMALL",
+	"FACE_TOO_BLURRY",
+	"BAD_PHOTO_QUALITY",
+	"PROCESSING_ERROR",
+	"BAD_REQUEST",
+	"NONEXISTENT_CUSTOMER",
+	"HINT_NOT_PROVIDED",
+	"SELFIE_IMAGE_LOW_QUALITY"
+];
+var parseErrorCode = (error) => {
+	const upperError = error.toUpperCase();
+	if (upperError.includes("HTTP 400") || upperError.includes("BAD_REQUEST")) return "BAD_REQUEST";
+	if (upperError.includes("HTTP 500") || upperError.includes("SERVER_ERROR")) return "SERVER_ERROR";
+	for (const code of ERROR_CODES) if (upperError.includes(code)) return code;
+	return null;
+};
+var ErrorModal = ({ error, attemptsRemaining, onTryAgain }) => {
+	const { t } = useTranslation();
+	if (!error) return null;
+	const { title, description } = errorContent[parseErrorCode(error) ?? error] ?? defaultError;
+	const noMoreAttempts = attemptsRemaining <= 0;
+	const titleText = noMoreAttempts ? t("notifications.selfieCaptureFailed") : t(title) ?? title;
+	const descriptionText = noMoreAttempts ? t("notifications.selfieCaptureFailedDescription") : t(description);
+	return /* @__PURE__ */ u(ErrorContent, {
+		"data-testid": "face-capture-error-modal",
+		title: titleText,
+		description: descriptionText,
+		attemptsRemaining,
+		onButtonClick: onTryAgain
+	});
+};
+//#endregion
+//#region src/modules/selfie/capture.tsx
+var Capture = ({ manager, state }) => {
+	const { captureStatus, stream, detectionStatus, attemptsRemaining, uploadError, usingBackCamera, ageAssurance, onDeviceMode, obfuscateWithAvatar, avatarCanvas, avatarVariant } = state;
+	const [isManualCapturing, setIsManualCapturing] = d(false);
+	const { t } = useTranslation();
+	const manualCaptureRef = A(null);
+	const lensLanded = obfuscateWithAvatar && avatarVariant === "privacy-lens" && !!avatarCanvas;
+	y(() => {
+		if (detectionStatus === "manualCapture") manualCaptureRef.current?.focus();
+	}, [detectionStatus]);
+	if (captureStatus === "initializing") return /* @__PURE__ */ u(TransitionSpinner, { subtitleKey: "loadingCircle.preparingCamera" });
+	if (captureStatus === "detecting") {
+		if (detectionStatus === "offline") return /* @__PURE__ */ u(ConnectionError, { onRefresh: () => window.location.reload() });
+		const getBorderState = () => {
+			if (isManualCapturing) return "capturing";
+			if (detectionStatus === "detecting") return "idle";
+			if (detectionStatus === "getReady") return "loading";
+			if (detectionStatus === "getReadyFinished") return "loading";
+			if (detectionStatus === "success") return "success";
+			if (detectionStatus === "error") return "error";
+			return "idle";
+		};
+		return /* @__PURE__ */ u(Page, {
+			"data-testid": "capture-container",
+			children: [
+				/* @__PURE__ */ u(Title, {
+					className: "IncodeCaptureVisuallyHidden",
+					children: t("selfiev2.capture.title")
+				}),
+				/* @__PURE__ */ u(Spacer, { size: 48 }),
+				lensLanded ? /* @__PURE__ */ u("p", {
+					class: "IncodePrivacyLensBanner",
+					children: t("selfiev2.capture.privacyLensMessage")
+				}) : null,
+				/* @__PURE__ */ u("div", {
+					class: "IncodeCaptureContainer",
+					children: [
+						/* @__PURE__ */ u(LoadingBorder, { borderState: getBorderState() }),
+						/* @__PURE__ */ u("div", {
+							class: "IncodeCaptureFrame",
+							children: /* @__PURE__ */ u("div", {
+								class: "IncodeCaptureVideoWrapper",
+								"aria-hidden": "true",
+								children: stream ? /* @__PURE__ */ u(k, { children: [obfuscateWithAvatar ? /* @__PURE__ */ u(AvatarCanvas, {
+									canvas: avatarCanvas,
+									mirrored: !usingBackCamera
+								}) : /* @__PURE__ */ u(Video, {
+									stream,
+									mirrored: !usingBackCamera
+								}), obfuscateWithAvatar && avatarVariant !== "privacy-lens" ? null : /* @__PURE__ */ u("div", {
+									class: "IncodeCaptureVideo",
+									children: /* @__PURE__ */ u(FaceOutline, {})
+								})] }) : null
+							})
+						}),
+						/* @__PURE__ */ u(Spacer, { size: 32 }),
+						detectionStatus ? /* @__PURE__ */ u(Notification, {
+							detectionState: detectionStatus,
+							disabled: !!uploadError || isManualCapturing,
+							guideStyle: obfuscateWithAvatar && avatarVariant === "avatar-2d" ? "dottedOutline" : "silhouette"
+						}) : null,
+						detectionStatus === "manualCapture" && !onDeviceMode ? /* @__PURE__ */ u(ManualCaptureButton, {
+							ref: manualCaptureRef,
+							onClick: () => {
+								setIsManualCapturing(true);
+								manager.capture();
+							},
+							disabled: isManualCapturing
+						}) : null
+					]
+				}),
+				uploadError ? /* @__PURE__ */ u(ErrorModal, {
+					error: uploadError,
+					attemptsRemaining,
+					onTryAgain: () => {
+						manager.retryCapture();
+						setIsManualCapturing(false);
+					}
+				}) : null
+			]
+		});
+	}
+	if (captureStatus === "capturing") return /* @__PURE__ */ u(Page, {
+		className: "IncodeCaptureCapturingPage",
+		title: "Capturing",
+		subtitle: "Taking photo...",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeCaptureCapturingActions",
+			children: /* @__PURE__ */ u(Button, {
+				isLoading: true,
+				children: "Capturing..."
+			})
+		})
+	});
+	if (captureStatus === "uploading") return /* @__PURE__ */ u(CaptureStatusPage, {
+		className: "IncodeCaptureStatusUploading",
+		isLoading: true,
+		icon: /* @__PURE__ */ u(LoadingIcon, { size: 64 }),
+		title: t(ageAssurance ? "idv2.capture.processing.verifying" : "idv2.capture.processing.uploading")
+	});
+	if (captureStatus === "uploadError") return /* @__PURE__ */ u(ErrorModal, {
+		error: uploadError,
+		attemptsRemaining,
+		onTryAgain: () => {
+			manager.retryCapture();
+			setIsManualCapturing(false);
+		}
+	});
+	if (captureStatus === "success") return /* @__PURE__ */ u(CaptureStatusPage, {
+		icon: /* @__PURE__ */ u(SuccessIcon, { size: 64 }),
+		title: t("idv2.capture.processing.success")
+	});
+	return null;
+};
+var Video = ({ stream, mirrored }) => {
+	const ref = A(null);
+	useCoverMedia(ref, stream);
+	y(() => {
+		if (ref.current && stream) {
+			ref.current.srcObject = stream;
+			ref.current.play().catch(() => {});
+		}
+	}, [stream]);
+	return /* @__PURE__ */ u("video", {
+		ref,
+		autoplay: true,
+		playsInline: true,
+		muted: true,
+		"aria-hidden": "true",
+		class: mirrored ? "IncodeCaptureVideoElement IncodeCaptureVideoMirrored" : "IncodeCaptureVideoElement"
+	});
+};
+//#endregion
+//#region src/modules/selfie/tutorial.tsx
+var Tutorial = ({ manager, ageAssurance = false, showManualUploadLink = false }) => {
+	const { t } = useTranslation();
+	const [isLoading, setIsLoading] = d(false);
+	const { data: animationData, isOverride } = useAnimationData("selfie.tutorial");
+	const handleContinue = async () => {
+		setIsLoading(true);
+		await manager.nextStep();
+	};
+	return /* @__PURE__ */ u(BaseTutorial, {
+		animationData,
+		recolor: !isOverride,
+		title: t(ageAssurance ? "face.tutorial.ageAssuranceTitle" : "face.tutorial.title"),
+		titleId: "face-tutorial-heading",
+		subtitle: t(ageAssurance ? "face.tutorial.ageAssuranceSubtitle" : "face.tutorial.subtitle"),
+		onContinue: handleContinue,
+		buttonText: t(ageAssurance ? "face.tutorial.ageAssuranceStartCapture" : "face.tutorial.startCapture"),
+		disclaimerText: t("face.tutorial.autoCapture"),
+		isLoading,
+		secondaryAction: showManualUploadLink ? {
+			label: t("selfiev2.manualUpload.uploadSelfieManually"),
+			onClick: () => manager.goToManualUpload(),
+			testId: "selfie-manual-upload-link"
+		} : void 0,
+		className: "IncodeSelfieTutorial"
+	});
+};
+//#endregion
+export { Capture as n, Tutorial as t };