@incodetech/web 2.1.0-rc.1 → 2.1.0-rc.3

package/dist/tutorial-CCfPuVKX.js

@@ -0,0 +1,706 @@
+import { r as __toESM } from "./rolldown-runtime--E5BIlTp.js";
+import { n as useTranslation } from "./i18n-CU4xq8qC.js";
+import { _ as y, a as D, d as T, l as A, p as d, v as u, x as k } from "./vendor-preact-DThS2ZQ_.js";
+import { n as cn, r as Spacer, t as LoadingIcon } from "./loadingIcon-B0ysgiNq.js";
+import { t as Page } from "./page-DidH_RkX.js";
+import { t as Title } from "./typography-BZIpjo97.js";
+import { t as TransitionSpinner } from "./transitionSpinner-CuNCqHNi.js";
+import { t as Button } from "./button-Dz6AsbmF.js";
+import { t as ErrorIcon } from "./errorIcon-BA4T6iy-.js";
+import { h as WarningIcon } from "./icons-CJJbIpBq.js";
+import { t as SuccessIcon } from "./successIcon-B5mGvdx1.js";
+import { t as Modal } from "./modal-OxkFuuiR.js";
+import { n as LoadingBorder, r as FaceOutline, t as Notification } from "./capture-CkGvdDNH.js";
+//#region src/shared/errorContent/errorContent.tsx
+var ErrorContent = ({ title, description, attemptsRemaining, onButtonClick, "data-testid": testId }) => {
+	const { t } = useTranslation();
+	const noMoreAttempts = attemptsRemaining <= 0;
+	const titleRef = A(null);
+	y(() => {
+		titleRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ u(Modal.Root, {
+		open: true,
+		dismissible: false,
+		hasBackdrop: false,
+		manageInitialFocus: false,
+		class: "IncodeErrorContent",
+		children: /* @__PURE__ */ u(Modal.Content, {
+			class: "IncodeErrorContentContent",
+			children: /* @__PURE__ */ u(Page, {
+				"data-testid": testId,
+				className: "IncodeErrorContentPage",
+				children: /* @__PURE__ */ u("div", {
+					class: "IncodeErrorContentContainer",
+					children: [/* @__PURE__ */ u("div", {
+						class: "IncodeErrorContentIconContainer",
+						children: [
+							noMoreAttempts ? /* @__PURE__ */ u(ErrorIcon, { size: 32 }) : /* @__PURE__ */ u(WarningIcon, { size: 32 }),
+							/* @__PURE__ */ u(Spacer, { size: 16 }),
+							/* @__PURE__ */ u(Title, {
+								ref: titleRef,
+								id: "incode-modal-title",
+								tabIndex: -1,
+								className: "IncodeErrorContentTitle",
+								children: title
+							}),
+							/* @__PURE__ */ u(Spacer, { size: 12 }),
+							/* @__PURE__ */ u("p", {
+								class: "IncodeErrorContentDescription",
+								children: description
+							})
+						]
+					}), /* @__PURE__ */ u("div", {
+						class: "IncodeErrorContentAttemptsContainer",
+						children: [
+							!noMoreAttempts ? /* @__PURE__ */ u("p", {
+								class: "IncodeErrorContentAttemptsText",
+								children: t("common.attemptsRemaining", { count: attemptsRemaining })
+							}) : null,
+							/* @__PURE__ */ u(Button, {
+								onClick: onButtonClick,
+								children: noMoreAttempts ? t("common.continue") : t("common.tryAgain")
+							}),
+							/* @__PURE__ */ u(Spacer, { size: 16 })
+						]
+					})]
+				})
+			})
+		})
+	});
+};
+//#endregion
+//#region src/shared/lottie/lottie.tsx
+var lottiePromise = null;
+async function loadLottie() {
+	if (lottiePromise) return lottiePromise;
+	lottiePromise = import("./lottie_light-C6B2ec41.js").then((m) => /* @__PURE__ */ __toESM(m.default, 1)).then((mod) => mod.default);
+	return lottiePromise;
+}
+var AUTO_STOP_AFTER_MS = 5e3;
+function Lottie({ animationData, loop = true, autoplay = true, reverse = false, style, className, onComplete, autoStop = false, stopFramePosition }) {
+	const containerRef = A(null);
+	const effectiveAutoplay = reverse ? false : autoplay;
+	const animationOptionsRef = A({
+		container: containerRef.current,
+		renderer: "svg",
+		loop,
+		autoplay: effectiveAutoplay,
+		animationData
+	});
+	y(() => {
+		animationOptionsRef.current = {
+			container: containerRef.current,
+			renderer: "svg",
+			loop,
+			autoplay: effectiveAutoplay,
+			animationData
+		};
+	}, [
+		animationData,
+		loop,
+		effectiveAutoplay
+	]);
+	y(() => {
+		if (!containerRef.current) return;
+		let anim;
+		let stopTimer;
+		let isMounted = true;
+		loadLottie().then((lottie) => {
+			if (!isMounted) return;
+			anim = lottie.loadAnimation(animationOptionsRef.current);
+			if (reverse) {
+				anim.setDirection(-1);
+				anim.goToAndPlay(anim.totalFrames - 1, true);
+			}
+			if (onComplete) anim.addEventListener("complete", onComplete);
+			if (autoStop) stopTimer = window.setTimeout(() => {
+				const current = anim;
+				if (!current) return;
+				if (!stopFramePosition) {
+					current.pause();
+					return;
+				}
+				const totalFrames = current.totalFrames;
+				if (!totalFrames || totalFrames <= 0) {
+					current.stop();
+					return;
+				}
+				const targetFrame = stopFramePosition === "last" ? Math.max(totalFrames - 1, 0) : stopFramePosition === "first" ? 0 : Math.floor((totalFrames - 1) / 2);
+				current.goToAndStop(targetFrame, true);
+			}, AUTO_STOP_AFTER_MS);
+		});
+		return () => {
+			isMounted = false;
+			if (stopTimer !== void 0) window.clearTimeout(stopTimer);
+			if (anim) {
+				if (onComplete) anim.removeEventListener("complete", onComplete);
+				anim.destroy();
+			}
+		};
+	}, [
+		onComplete,
+		reverse,
+		autoStop,
+		stopFramePosition
+	]);
+	return /* @__PURE__ */ u("div", {
+		ref: containerRef,
+		style,
+		className,
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+//#region src/shared/baseTutorial/replaceBaseTutorial.ts
+/**
+* The brand blues baked into the tutorial animations. The selfie oval/shoulders
+* use `#007aff`; the ID/passport tutorials additionally use `#006aff` (the
+* default brand blue) for their accent. Both are re-tinted to the active
+* branding color.
+*
+* Authored as hex and converted to Lottie's normalized `[r, g, b]` (0–1) form.
+* The two greens are ~0.06 apart, comfortably outside `COLOR_MATCH_TOLERANCE`,
+* so they neither cross-match nor catch the (grayscale/white) document and
+* face artwork.
+*/
+var SOURCE_BRAND_COLORS = ["#007aff", "#006aff"].map(hexToRgbUnit).filter((color) => color !== null);
+/**
+* Per-channel tolerance when matching a source color. The baked values are
+* authored as rounded decimals (e.g. `0.48`), so an exact comparison is too
+* brittle; a small tolerance keeps the match robust without catching
+* unrelated colors.
+*/
+var COLOR_MATCH_TOLERANCE = .02;
+/**
+* Reads a CSS custom property off the document root and returns its value.
+* Returns `fallback` (empty by default) when the property is unset or
+* unavailable (e.g. during SSR / tests). With the default empty fallback the
+* recolor no-ops, leaving the animation's authored colors in place — which are
+* the default brand blue, so no theme-specific literal is needed here.
+*/
+function getCssVariableAsHex(variableName, fallback = "") {
+	if (typeof document === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() || fallback;
+}
+function hexToRgbUnit(hex) {
+	let normalized = hex.replace("#", "").trim();
+	if (normalized.length === 3) normalized = normalized.split("").map((char) => char + char).join("");
+	const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalized);
+	if (!result) return null;
+	return [
+		Number.parseInt(result[1], 16) / 255,
+		Number.parseInt(result[2], 16) / 255,
+		Number.parseInt(result[3], 16) / 255
+	];
+}
+function channelMatches(a, b) {
+	return Math.abs(a - b) <= COLOR_MATCH_TOLERANCE;
+}
+function isSourceColor(r, g, b) {
+	return SOURCE_BRAND_COLORS.some(([sr, sg, sb]) => channelMatches(r, sr) && channelMatches(g, sg) && channelMatches(b, sb));
+}
+function isStaticColorArray(value) {
+	return Array.isArray(value) && value.length >= 3 && value.every((entry) => typeof entry === "number");
+}
+function recolorSolid(node, target) {
+	const colorHolder = node.c;
+	if (!colorHolder || typeof colorHolder !== "object") return;
+	const k = colorHolder.k;
+	if (isStaticColorArray(k) && isSourceColor(k[0], k[1], k[2])) {
+		k[0] = target[0];
+		k[1] = target[1];
+		k[2] = target[2];
+	}
+}
+function recolorGradient(node, target) {
+	const gradient = node.g;
+	if (!gradient || typeof gradient !== "object") return;
+	const { p, k } = gradient;
+	const stopCount = typeof p === "number" ? p : 0;
+	const stops = k?.k;
+	if (stopCount <= 0 || !Array.isArray(stops)) return;
+	for (let stop = 0; stop < stopCount; stop++) {
+		const base = stop * 4;
+		const r = stops[base + 1];
+		const g = stops[base + 2];
+		const b = stops[base + 3];
+		if (typeof r === "number" && typeof g === "number" && typeof b === "number" && isSourceColor(r, g, b)) {
+			stops[base + 1] = target[0];
+			stops[base + 2] = target[1];
+			stops[base + 3] = target[2];
+		}
+	}
+}
+function recolorNode(node, target) {
+	if (Array.isArray(node)) {
+		for (const child of node) recolorNode(child, target);
+		return;
+	}
+	if (!node || typeof node !== "object") return;
+	const obj = node;
+	if (obj.ty === "fl" || obj.ty === "st") recolorSolid(obj, target);
+	else if (obj.ty === "gf" || obj.ty === "gs") recolorGradient(obj, target);
+	for (const key of Object.keys(obj)) recolorNode(obj[key], target);
+}
+/**
+* Returns a deep copy of `animationData` with the baked-in brand blue swapped
+* for `hexColor`. The input is never mutated. Unparseable colors leave the
+* animation untouched.
+*/
+function replaceLottieColor(animationData, hexColor) {
+	const target = hexToRgbUnit(hexColor);
+	if (!target) return animationData;
+	const clone = JSON.parse(JSON.stringify(animationData));
+	recolorNode(clone, target);
+	return clone;
+}
+//#endregion
+//#region src/shared/baseTutorial/baseTutorial.tsx
+var BaseTutorial = ({ className = "", animationData, title, titleId, subtitle, onContinue, buttonText, disclaimerText, isLoading, stopFramePosition = "middle" }) => {
+	const themedAnimationData = T(() => animationData ? replaceLottieColor(animationData, getCssVariableAsHex("--primitive-color-brand-500")) : null, [animationData]);
+	return /* @__PURE__ */ u(Page, {
+		className: cn("IncodeTutorialPage", className),
+		title,
+		titleId,
+		subtitle,
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeBaseTutorialContainer",
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeBaseTutorialAnimationContainer",
+				"aria-hidden": "true",
+				children: themedAnimationData ? /* @__PURE__ */ u(Lottie, {
+					animationData: themedAnimationData,
+					className: "IncodeBaseTutorialAnimation",
+					autoStop: true,
+					stopFramePosition
+				}) : null
+			})
+		}), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ u("p", {
+			class: "IncodeBaseTutorialDisclaimer",
+			children: disclaimerText
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeBaseTutorialButtonContainer",
+			children: /* @__PURE__ */ u(Button, {
+				onClick: onContinue,
+				class: "m-auto max-w-[420px]",
+				isLoading,
+				children: buttonText
+			})
+		})] })]
+	});
+};
+//#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);
+	y(() => {
+		const host = hostRef.current;
+		if (!host || !canvas) return void 0;
+		canvas.classList.add("IncodeCaptureAvatarElement");
+		canvas.classList.toggle("IncodeCaptureAvatarMirrored", mirrored);
+		host.appendChild(canvas);
+		return () => {
+			if (canvas.parentElement === host) host.removeChild(canvas);
+		};
+	}, [canvas, mirrored]);
+	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: "Something went wrong",
+	description: "Please try again later"
+};
+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_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_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 titleText = t(title) ?? title;
+	const descriptionText = attemptsRemaining <= 0 ? 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/cameraButton.tsx
+var CameraButton = () => {
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeCameraButton",
+		children: /* @__PURE__ */ u("svg", {
+			width: "64",
+			height: "64",
+			viewBox: "0 0 64 64",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ u("circle", {
+					cx: "32",
+					cy: "32",
+					r: "32",
+					class: "IncodeCameraButtonBackground"
+				}),
+				/* @__PURE__ */ u("path", {
+					d: "M55.5874 31.8191C55.5872 18.6938 44.9464 8.0537 31.821 8.0537C18.6958 8.05385 8.05581 18.6939 8.05566 31.8191C8.05566 44.9444 18.6958 55.5853 31.821 55.5854C44.9465 55.5854 55.5874 44.9445 55.5874 31.8191ZM57.5566 31.8191C57.5566 46.0321 46.034 57.5547 31.821 57.5547C17.6082 57.5545 6.08643 46.032 6.08643 31.8191C6.08657 17.6063 17.6083 6.08462 31.821 6.08447C46.0339 6.08447 57.5565 17.6062 57.5566 31.8191Z",
+					class: "IncodeCameraButtonRing"
+				}),
+				/* @__PURE__ */ u("path", {
+					d: "M35.5186 20.6768C36.887 20.677 37.995 21.777 37.9951 23.1338V24.1045H41.4766C43.0397 24.1052 44.3074 25.3626 44.3076 26.9131V38.5459C44.3076 40.0966 43.0398 41.3535 41.4766 41.3535H21.5381C19.975 41.3533 18.7081 40.0965 18.708 38.5459V26.9131C18.7083 25.3627 19.9751 24.1057 21.5381 24.1055H25.0205V23.1338C25.0206 21.7769 26.1285 20.6768 27.4971 20.6768H35.5186ZM31.5068 26.5273C28.0604 26.5273 25.2559 29.309 25.2559 32.7285C25.2559 36.148 28.0604 38.9297 31.5068 38.9297C34.954 38.9297 37.7588 36.148 37.7588 32.7285C37.7588 29.309 34.954 26.5274 31.5068 26.5273ZM31.5068 28.6348C33.7835 28.6348 35.6357 30.4728 35.6357 32.7305C35.6356 34.9887 33.7833 36.8252 31.5068 36.8252C29.2303 36.8252 27.3791 34.9887 27.3789 32.7305C27.3789 30.4721 29.2302 28.6348 31.5068 28.6348Z",
+					class: "IncodeCameraButtonPath"
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/modules/selfie/manualCaptureButton.tsx
+var ManualCaptureButton = D(({ onClick, disabled }, ref) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeSelfieManualCapture",
+		"data-testid": "manual-capture-button",
+		children: [
+			/* @__PURE__ */ u("p", {
+				id: "manual-capture-instructions",
+				class: "IncodeSelfieManualCaptureText",
+				children: t("selfiev2.manualCapture.instructions")
+			}),
+			/* @__PURE__ */ u(Spacer, { size: 32 }),
+			/* @__PURE__ */ u("div", { children: /* @__PURE__ */ u(Button, {
+				ref,
+				id: "manual-capture-button",
+				variant: "link",
+				onClick,
+				disabled,
+				class: "IncodeSelfieManualCaptureButton",
+				"aria-label": t("selfiev2.manualCapture.captureButton"),
+				children: /* @__PURE__ */ u(CameraButton, {})
+			}) })
+		]
+	});
+});
+//#endregion
+//#region src/modules/selfie/capture.tsx
+var Capture = ({ manager, state }) => {
+	const { captureStatus, stream, detectionStatus, attemptsRemaining, uploadError, assistedOnboarding, 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, { spinnerConfig: { subtitle: t("loadingCircle.preparingCamera") } });
+	if (captureStatus === "detecting") {
+		if (detectionStatus === "offline") return /* @__PURE__ */ u(Page, { title: "No internet connection" });
+		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: !assistedOnboarding
+								}) : /* @__PURE__ */ u(Video, {
+									stream,
+									mirrored: !assistedOnboarding
+								}), 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
+						}) : 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);
+	y(() => {
+		if (ref.current && stream) ref.current.srcObject = stream;
+	}, [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 }) => {
+	const { t } = useTranslation();
+	const [isLoading, setIsLoading] = d(false);
+	const [animationData, setAnimationData] = d(null);
+	y(() => {
+		import("./selfieTutorial-pB-N-fj5.js").then((module) => {
+			setAnimationData(module.default);
+		});
+	}, []);
+	const handleContinue = async () => {
+		setIsLoading(true);
+		await manager.nextStep();
+	};
+	return /* @__PURE__ */ u(BaseTutorial, {
+		animationData,
+		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,
+		className: "IncodeSelfieTutorial"
+	});
+};
+//#endregion
+export { ErrorContent as a, Lottie as i, Capture as n, BaseTutorial as r, Tutorial as t };