@incodetech/web 2.1.1 → 2.2.0-rc.0

package/dist/{tutorial-CCfPuVKX.js → tutorial-BZZC93Ur.js}

@@ -1,29 +1,21 @@
-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";
+import { i as useTranslation } from "./uiConfig-B5ASPUL4.js";
+import { S as k, _ as y, d as T, h as q, l as A, m as g, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { l as TransitionSpinner, o as Page } from "./incodeComponent-K9ZWg302.js";
+import { a as useAnimationData, n as LoadingIcon, o as Lottie, t as Spacer, u as cn } from "./spacer-CDlQd12V.js";
+import { n as Title } from "./spinner-CLZ2fz4u.js";
+import { n as ErrorIcon, r as Button } from "./incode-logo-rGFjZHqi.js";
+import { v as WarningIcon } from "./icons--ezYG2Fb.js";
+import { t as SuccessIcon } from "./successIcon-Bj8Y9CuI.js";
+import { t as Modal } from "./modal-BjjJFpZu.js";
+import { t as ManualCaptureButton } from "./manualCaptureButton-quGa2ufS.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",
@@ -37,15 +29,12 @@ var ErrorContent = ({ title, description, attemptsRemaining, onButtonClick, "dat
 						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",
+							/* @__PURE__ */ u(Modal.Title, {
+								class: "IncodeErrorContentTitle",
 								children: title
 							}),
 							/* @__PURE__ */ u(Spacer, { size: 12 }),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ u(Modal.Subtitle, {
 								class: "IncodeErrorContentDescription",
 								children: description
 							})
@@ -53,10 +42,10 @@ var ErrorContent = ({ title, description, attemptsRemaining, onButtonClick, "dat
 					}), /* @__PURE__ */ u("div", {
 						class: "IncodeErrorContentAttemptsContainer",
 						children: [
-							!noMoreAttempts ? /* @__PURE__ */ u("p", {
+							!noMoreAttempts ? /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("p", {
 								class: "IncodeErrorContentAttemptsText",
 								children: t("common.attemptsRemaining", { count: attemptsRemaining })
-							}) : null,
+							}), /* @__PURE__ */ u(Spacer, { size: 24 })] }) : null,
 							/* @__PURE__ */ u(Button, {
 								onClick: onButtonClick,
 								children: noMoreAttempts ? t("common.continue") : t("common.tryAgain")
@@ -70,88 +59,6 @@ var ErrorContent = ({ title, description, attemptsRemaining, onButtonClick, "dat
 	});
 };
 //#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
@@ -257,8 +164,12 @@ function replaceLottieColor(animationData, hexColor) {
 }
 //#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]);
+var BaseTutorial = ({ className = "", animationData, title, titleId, subtitle, onContinue, buttonText, disclaimerText, isLoading, stopFramePosition = "middle", recolor = true }) => {
+	const themedAnimationData = T(() => {
+		if (!animationData) return null;
+		if (!recolor) return animationData;
+		return replaceLottieColor(animationData, getCssVariableAsHex("--primitive-color-brand-500"));
+	}, [animationData, recolor]);
 	return /* @__PURE__ */ u(Page, {
 		className: cn("IncodeTutorialPage", className),
 		title,
@@ -283,7 +194,7 @@ var BaseTutorial = ({ className = "", animationData, title, titleId, subtitle, o
 			class: "IncodeBaseTutorialButtonContainer",
 			children: /* @__PURE__ */ u(Button, {
 				onClick: onContinue,
-				class: "m-auto max-w-[420px]",
+				class: "IncodeBaseTutorialButton",
 				isLoading,
 				children: buttonText
 			})
@@ -291,6 +202,198 @@ var BaseTutorial = ({ className = "", animationData, title, titleId, subtitle, o
 	});
 };
 //#endregion
+//#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.eyesClosed"),
+		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
@@ -490,67 +593,9 @@ var ErrorModal = ({ error, attemptsRemaining, 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 { captureStatus, stream, detectionStatus, attemptsRemaining, uploadError, usingBackCamera, ageAssurance, onDeviceMode, obfuscateWithAvatar, avatarCanvas, avatarVariant } = state;
 	const [isManualCapturing, setIsManualCapturing] = d(false);
 	const { t } = useTranslation();
 	const manualCaptureRef = A(null);
@@ -593,10 +638,10 @@ var Capture = ({ manager, state }) => {
 								"aria-hidden": "true",
 								children: stream ? /* @__PURE__ */ u(k, { children: [obfuscateWithAvatar ? /* @__PURE__ */ u(AvatarCanvas, {
 									canvas: avatarCanvas,
-									mirrored: !assistedOnboarding
+									mirrored: !usingBackCamera
 								}) : /* @__PURE__ */ u(Video, {
 									stream,
-									mirrored: !assistedOnboarding
+									mirrored: !usingBackCamera
 								}), obfuscateWithAvatar && avatarVariant !== "privacy-lens" ? null : /* @__PURE__ */ u("div", {
 									class: "IncodeCaptureVideo",
 									children: /* @__PURE__ */ u(FaceOutline, {})
@@ -606,7 +651,8 @@ var Capture = ({ manager, state }) => {
 						/* @__PURE__ */ u(Spacer, { size: 32 }),
 						detectionStatus ? /* @__PURE__ */ u(Notification, {
 							detectionState: detectionStatus,
-							disabled: !!uploadError || isManualCapturing
+							disabled: !!uploadError || isManualCapturing,
+							guideStyle: obfuscateWithAvatar && avatarVariant === "avatar-2d" ? "dottedOutline" : "silhouette"
 						}) : null,
 						detectionStatus === "manualCapture" && !onDeviceMode ? /* @__PURE__ */ u(ManualCaptureButton, {
 							ref: manualCaptureRef,
@@ -680,18 +726,14 @@ var Video = ({ stream, mirrored }) => {
 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 { 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"),
@@ -703,4 +745,4 @@ var Tutorial = ({ manager, ageAssurance = false }) => {
 	});
 };
 //#endregion
-export { ErrorContent as a, Lottie as i, Capture as n, BaseTutorial as r, Tutorial as t };
+export { ErrorContent as i, Capture as n, BaseTutorial as r, Tutorial as t };

package/dist/types/ae-signature.d.ts

@@ -1,9 +1,65 @@
 import { AeSignatureConfig } from '@incodetech/core/ae-signature';
+import { AeSignatureManager } from '@incodetech/core/ae-signature';
+import { DeepPartial } from '@incodetech/core/flow';
 import { FC } from 'preact/compat';
+import { FunctionComponent } from 'preact';
+import { SVGProps } from 'preact/compat';
 
-export declare const AeSignature: FC<AeSignatureModuleProps>;
+export declare const AeSignature: FC<Omit<AeSignatureModuleProps, "config"> & {
+    config?: (Omit<unknown, never> & DeepPartial<Pick<unknown, never>>) | undefined;
+}>;
 
-declare type AeSignatureModuleProps = IncodeModuleProps<AeSignatureConfig>;
+declare type AeSignatureModuleProps = IncodeModuleProps<AeSignatureConfig, void, AeSignatureManager>;
+
+/**
+ * Allowlisted keys for overridable Lottie animations
+ */
+declare type AnimationKey = 'id.tutorial.front' | 'id.tutorial.back' | 'id.tutorial.passport' | 'id.flip' | 'id.processing' | 'selfie.tutorial' | 'loader.spinner';
+
+/**
+ * A customer-supplied replacement for a built-in Lottie animation.
+ *
+ * - `LottieAnimationData` — a parsed Lottie JSON object.
+ * - `{ url }` — fetched and cached at runtime.
+ * - `{ animationData }` — explicit object form.
+ */
+declare type AnimationOverride = LottieAnimationData | {
+    url: string;
+} | {
+    animationData: LottieAnimationData;
+};
+
+declare type AnimationOverrides = Partial<Record<AnimationKey, AnimationOverride>>;
+
+/**
+ * Allowlisted keys for overridable branded SVG illustrations
+ */
+declare type AssetKey = 'faceMatch.success' | 'faceMatch.fail' | 'documentCapture.tutorial' | 'id.uploadScreen' | 'id.ageVerification.dob' | 'id.ageVerification.scan' | 'id.ageVerification.privacy' | 'videoSelfie.success' | 'videoSelfie.fail' | 'videoSelfie.tutorial.permission' | 'videoSelfie.tutorial.selfie' | 'videoSelfie.tutorial.frontId' | 'videoSelfie.tutorial.backId' | 'videoSelfie.tutorial.poa' | 'videoSelfie.tutorial.questions' | 'videoSelfie.tutorial.speech' | 'loader.spinner';
+
+/**
+ * A customer-supplied replacement for a built-in SVG illustration.
+ *
+ * - `string` — a URL, or raw `<svg …>` markup (detected by a leading `<`).
+ * - `{ url }` — fetched and rendered via `<img>`; no script execution.
+ * - `{ raw }` — inline markup; sanitized before injection.
+ * - `{ svg }` — a precompiled component, for build-time integrations.
+ */
+declare type AssetOverride = string | {
+    url: string;
+} | {
+    raw: string;
+} | {
+    svg: SvgComponent;
+};
+
+declare type AssetOverrides = Partial<Record<AssetKey, AssetOverride>>;
+
+/**
+ * A module `config` intersected with the per-instance override maps. Typed at
+ * the UI boundary so core config types (e.g. `IdCaptureConfig`) stay untouched;
+ * `FlowConfig` also declares the maps directly.
+ */
+declare type ConfigWithOverrides<TConfig> = TConfig & InstanceOverrides;
 
 /**
  * Extra context passed to `onFinish` alongside the result. Lets a host decide
@@ -25,12 +81,16 @@ declare type IncodeFinishMeta = {
     sdkOwnsTerminalScreen?: boolean;
 };
 
-declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown> = {
+declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown, TConfigInput = ConfigWithOverrides<TConfig>> = {
     /**
      * Module configuration required to render the flow.
      * For Web Components, this is typically assigned via `element.config = ...`.
+     *
+     * Also carries optional per-instance `assets`/`animations` override maps;
+     * they override the global `setup({ uiConfig })` values for this
+     * element only and are ignored by the core manager.
      */
-    config?: TConfig;
+    config?: TConfigInput;
     /**
      * Optional pre-built manager. When provided, the module does not create or manage the manager lifecycle.
      */
@@ -56,10 +116,36 @@ declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown> = {
     onError?: (error: string | undefined, errorCode?: number, moduleErrorCode?: string) => void;
 };
 
+/**
+ * Per-instance asset/animation overrides for a single mounted SDK module.
+ *
+ * These ride on the module's `config` prop and are published once at the
+ * module root by `registerIncodeModuleElement`, so a deep `<Asset>`/`<AnimatedAsset>`
+ * reads them via {@link useInstanceOverrides} without any prop drilling.
+ */
+declare type InstanceOverrides = {
+    assets?: AssetOverrides;
+    animations?: AnimationOverrides;
+};
+
+declare type LottieAnimationData = {
+    fr: number;
+    v: string;
+    ip: number;
+    op: number;
+    w: number;
+    h: number;
+};
+
+/** An SVG imported as a Preact component (the `?react` import shape). */
+declare type SvgComponent = FunctionComponent<SVGProps<SVGSVGElement>>;
+
 export { }
 
 declare global {
     interface HTMLElementTagNameMap {
-        'incode-ae-signature': HTMLElement & IncodeModuleProps<AeSignatureConfig>;
+        'incode-ae-signature': HTMLElement & IncodeModuleProps<AeSignatureConfig,
+  void,
+  AeSignatureManager>;
     }
 }