@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/id/id.es.js

@@ -1,22 +1,27 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { C as k, c as z, d as T, l as A, o as P, p as d, v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { b as useManager, f as useTimeoutHandle, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, u as useFeatureManagement, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { d as cn, i as preloadAnimations, r as AnimatedAsset, s as Asset, t as Spacer } from "../spacer-DLEDuWEx.js";
-import { n as Title, t as Spinner } from "../spinner-CJCOHUKx.js";
-import { n as ErrorIcon, r as Button } from "../incode-logo-DeIDDejm.js";
-import { a as IdNoAttempts, b as ProgressBar, c as useIdExperiment, i as Capture, l as CaptureFrame, n as Chooser, o as IdExpired, r as Tutorial, s as IdError, t as FlipAnimation } from "../extensibility-C5XqL_A3.js";
-import { t as Processing } from "../processing-B2eaSGLu.js";
-import { r as LockIcon, u as ChevronRightIcon } from "../icons-ChHV5iHi.js";
-import { t as SuccessIcon } from "../successIcon-DS8BLsgy.js";
-import { i as ErrorContent } from "../tutorial-LQuJ4dse.js";
-import { n as Permissions } from "../manualCaptureButton-D58WsS-x.js";
-import { t as PdfViewer } from "../pdfViewer-TTZmPABh.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
-import { t as SvgIdBackOfCard } from "../id-back-of-card-C4XViC7W.js";
-import { t as SvgIdBackOfCardVertical } from "../id-back-of-card-vertical-DCz0rj8m.js";
-import { t as SvgIdFrontOfCard } from "../id-front-of-card-CUA1ocVF.js";
-import { t as SvgIdFrontOfCardVertical } from "../id-front-of-card-vertical-Ddm_BwD3.js";
-import { t as Tabs } from "../tabs-BGL1oRLb.js";
+import { o as useTranslation } from "../uiConfig-BcjOx3PY.js";
+import { S as k, _ as y, a as P, c as A, f as d, h as q, s as z, u as T, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, _ as useIsMobileDeviceWidth, b as useModuleTerminalCallbacks, c as Page, d as TransitionSpinner, f as useFeatureManagement, i as withStandaloneModuleBootstrap, l as VerifiedByIncodeLogo, m as useTimeoutHandle, o as useHasResolvedConfig, t as IncodeComponent } from "../incodeComponent-DeVV0gEn.js";
+import { d as cn, i as preloadAnimations, r as AnimatedAsset, s as Asset, t as Spacer } from "../spacer-DZ-t7RMQ.js";
+import { o as TypographyP, t as Title } from "../typography-CYO7ELEl.js";
+import { t as Spinner } from "../spinner-hjbTcmA1.js";
+import { a as LockIcon, b as ErrorIcon, f as ChevronRightIcon, r as SuccessIcon, x as Button } from "../icons-DNXYxUPA.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-CVjuQOGZ.js";
+import { t as Processing } from "../processing-CrNgzN1u.js";
+import { t as Modal } from "../modal-H_YHBjxJ.js";
+import { t as ErrorContent } from "../errorContent-aJuo21I4.js";
+import { t as VerificationResult } from "../verificationResult-Bre5Fb7M.js";
+import { n as ProgressBar } from "../captureFooter-De74TCQi.js";
+import { a as IdNoAttempts, c as canFlipCapturedCard, d as CAMERA_PERMISSION_UX, f as CONTINUING_TUTORIAL_PHASES, g as PERMISSION_DIALOG_STATUS, h as ID_CAPTURE_STATUS, i as Capture, l as CaptureFrame, m as ID_CAPTURE_LOADING_PHASE, n as Chooser, o as IdExpired, p as EXPERIMENT_LIFECYCLE_STATUS, r as Tutorial, s as IdError, t as FlipAnimation, u as useIdExperiment } from "../flipAnimation-BwI4pEJc.js";
+import { t as BottomSheet } from "../bottomSheet-Cixb81_b.js";
+import { i as SvgReloadIcon, n as SvgCheckV2Icon, r as SvgPersonCardIcon } from "../denied-CB1v3PyY.js";
+import { n as PermissionsDialog, t as Permissions } from "../permissions-B0ctl0V9.js";
+import { t as PdfViewer } from "../pdfViewer-DTwxqwSD.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-Do8qpZk7.js";
+import { t as SvgIdBackOfCard } from "../id-back-of-card-B6EcmiCs.js";
+import { t as SvgIdBackOfCardVertical } from "../id-back-of-card-vertical-B3FXhPpj.js";
+import { t as SvgIdFrontOfCard } from "../id-front-of-card-V_BlLaZr.js";
+import { t as SvgIdFrontOfCardVertical } from "../id-front-of-card-vertical-CuZjL8kc.js";
+import { t as Tabs } from "../tabs-C8WsKO4V.js";
 import { ONBOARDING_WEB_SDK_PARAMETER_STORE } from "@incodetech/core/feature-management";
 import { createIdCaptureManager } from "@incodetech/core/id";
 //#region src/shared/fonts/preloadDisplayFont.ts
@@ -228,10 +233,13 @@ var IdFlipCard = ({ manager, direction, imageUrl, orientation }) => {
 * captured photo; control (or passport) keeps `FlipAnimation`.
 */
 var IdFlipTransition = ({ manager, state }) => {
-	const { params } = useIdExperiment({ key: "flipCapturedCard" });
+	const { params } = useIdExperiment({
+		key: "flipCapturedCard",
+		enabled: canFlipCapturedCard(state.mode, state.previewImageUrl)
+	});
 	const shouldFlipCapturedCard = params.shouldFlipCapturedCard;
 	const direction = state.status === "frontFinished" ? "toBack" : "toFront";
-	if (shouldFlipCapturedCard && state.mode !== "passport" && state.previewImageUrl) return /* @__PURE__ */ u(IdFlipCard, {
+	if (shouldFlipCapturedCard) return /* @__PURE__ */ u(IdFlipCard, {
 		manager,
 		direction,
 		imageUrl: state.previewImageUrl,
@@ -336,7 +344,7 @@ var KEY_BY_FAIL_REASON = {
 	NETWORK_ERROR: "idv2.digitalIdUpload.unknownDocumentTypeScreen.errorTitle",
 	GENERIC: "idv2.digitalIdUpload.unknownDocumentTypeScreen.errorTitle"
 };
-var ErrorScreen = ({ manager, state }) => {
+var ErrorScreen$1 = ({ manager, state }) => {
 	const { t } = useTranslation();
 	const failReason = state.failReason ?? "GENERIC";
 	const isTerminal = state.phase === "exhausted" || TERMINAL_REASONS.has(failReason);
@@ -682,7 +690,7 @@ var FileTooLargeScreen = ({ manager }) => {
 };
 //#endregion
 //#region src/modules/id/digitalIdUpload/successScreen.tsx
-var SuccessScreen = ({ manager, state }) => {
+var SuccessScreen$1 = ({ manager, state }) => {
 	const { t } = useTranslation();
 	const fileUrl = useFilePreviewUrl(state.file);
 	return /* @__PURE__ */ u(Page, {
@@ -763,18 +771,206 @@ var DigitalIdUpload = ({ manager, state }) => {
 		state
 	});
 	if (state.phase === "uploading" || state.phase === "holding") return /* @__PURE__ */ u(AnalyzingScreen, { state });
-	if (state.phase === "success") return /* @__PURE__ */ u(SuccessScreen, {
+	if (state.phase === "success") return /* @__PURE__ */ u(SuccessScreen$1, {
 		manager,
 		state
 	});
 	if (state.phase === "fileTooLarge") return /* @__PURE__ */ u(FileTooLargeScreen, { manager });
-	if (state.phase === "error" || state.phase === "exhausted") return /* @__PURE__ */ u(ErrorScreen, {
+	if (state.phase === "error" || state.phase === "exhausted") return /* @__PURE__ */ u(ErrorScreen$1, {
 		manager,
 		state
 	});
 	return null;
 };
 //#endregion
+//#region src/modules/id/deviceWallet/errorScreen.tsx
+/**
+* Failure screen for the device-wallet (mDL) handshake. Renders the shared
+* `VerificationResult` (same look as the digital-ID redirect failure screen)
+* with per-reason copy. Keys are static literals so i18nexus can extract them
+* (author EN + supported locales in i18nexus); the subtitle keys match the
+* core `DEVICE_WALLET_ERROR_KEYS` map, kept local here — like
+* `digitalIdRedirect/failureScreen.tsx` — to avoid a runtime value import
+* from `@incodetech/core`. Failure is non-blocking: retry restarts the
+* handshake, or fall back to the ID-Capture chooser.
+*/
+var COPY_KEYS$1 = {
+	UNSUPPORTED_PLATFORM: {
+		title: "idv2.deviceWallet.unsupportedPlatformTitle",
+		subtitle: "idv2.deviceWallet.unsupportedPlatformDescription"
+	},
+	NO_CREDENTIAL: {
+		title: "idv2.deviceWallet.noCredentialTitle",
+		subtitle: "idv2.deviceWallet.noCredentialDescription"
+	},
+	WALLET_ERROR: {
+		title: "idv2.deviceWallet.errorTitle",
+		subtitle: "idv2.deviceWallet.errorDescription"
+	}
+};
+var GENERIC_KEYS$1 = {
+	title: "idv2.deviceWallet.errorTitle",
+	subtitle: "idv2.deviceWallet.errorDescription"
+};
+var ErrorScreen = ({ failReason, onRetry, onUseAnotherMethod }) => {
+	const { t } = useTranslation();
+	const { title, subtitle } = failReason ? COPY_KEYS$1[failReason] : GENERIC_KEYS$1;
+	const canRetry = failReason !== "UNSUPPORTED_PLATFORM";
+	return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		failureTitle: t(title),
+		errorMessage: t(subtitle),
+		onRetry: canRetry ? onRetry : void 0,
+		retryLabel: t("common.tryAgain"),
+		onSkip: onUseAnotherMethod,
+		skipLabel: t("idv2.deviceWallet.useAnotherMethodButton")
+	});
+};
+//#endregion
+//#region src/modules/id/deviceWallet/deviceWallet.tsx
+/**
+* Device-wallet (mDL) handshake rendered INSIDE ID-Capture as a child machine
+* — mirrors `digitalIdRedirect/digitalIdRedirect.tsx`. The core child owns
+* request → wallet sheet → decrypt; this layer only renders the phase. During
+* `presenting` the OS wallet sheet covers the page, so a spinner is all the
+* page itself needs.
+*/
+var DeviceWallet = ({ manager, state }) => {
+	if (state.phase === "failed") return /* @__PURE__ */ u(ErrorScreen, {
+		failReason: state.failReason,
+		onRetry: () => manager.deviceWalletRetry(),
+		onUseAnotherMethod: () => manager.deviceWalletUseAnotherMethod()
+	});
+	return /* @__PURE__ */ u(TransitionSpinner, { hideText: true });
+};
+//#endregion
+//#region src/modules/id/digitalIdRedirect/failureScreen.tsx
+/**
+* Failure screen for the digital-ID web-redirect (Trinsic iDIN/FTN). Renders the
+* shared `VerificationResult` (same look as ekyc/ekyb) with the module's own
+* per-reason copy. Copy is i18nexus-keyed under
+* `idv2.digitalIdRedirect.failureScreen.*` (add EN, plus NL for iDIN and FI/SV
+* for FTN, in i18nexus). Failure is non-blocking: retry (new session/billing
+* event) or use another method (back to the ID-Capture chooser).
+*
+* The nine `failureReason`s collapse into six copy groups; keys are written as
+* static literals so i18nexus can extract them. A translator can split a group
+* into per-reason copy later without a code change.
+*/
+var COPY_KEYS = {
+	USER_CANCELED: {
+		title: "idv2.digitalIdRedirect.failureScreen.canceled.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.canceled.subtitle"
+	},
+	RP_CANCELED: {
+		title: "idv2.digitalIdRedirect.failureScreen.canceled.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.canceled.subtitle"
+	},
+	AUTHENTICATION_FAILED: {
+		title: "idv2.digitalIdRedirect.failureScreen.authenticationFailed.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.authenticationFailed.subtitle"
+	},
+	VERIFICATION_FAILED: {
+		title: "idv2.digitalIdRedirect.failureScreen.verificationFailed.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.verificationFailed.subtitle"
+	},
+	SESSION_EXPIRED: {
+		title: "idv2.digitalIdRedirect.failureScreen.sessionExpired.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.sessionExpired.subtitle"
+	},
+	SESSION_TOKEN_EXPIRED: {
+		title: "idv2.digitalIdRedirect.failureScreen.sessionExpired.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.sessionExpired.subtitle"
+	},
+	PROVIDER_INTERNAL_ERROR: {
+		title: "idv2.digitalIdRedirect.failureScreen.technicalError.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.technicalError.subtitle"
+	},
+	RESULTS_EXCHANGE_FAILED: {
+		title: "idv2.digitalIdRedirect.failureScreen.technicalError.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.technicalError.subtitle"
+	},
+	INVALID_REDIRECT_RESULT: {
+		title: "idv2.digitalIdRedirect.failureScreen.technicalError.title",
+		subtitle: "idv2.digitalIdRedirect.failureScreen.technicalError.subtitle"
+	}
+};
+var GENERIC_KEYS = {
+	title: "idv2.digitalIdRedirect.failureScreen.generic.title",
+	subtitle: "idv2.digitalIdRedirect.failureScreen.generic.subtitle"
+};
+var FailureScreen = ({ failureReason, onRetry, onUseAnotherMethod }) => {
+	const { t } = useTranslation();
+	const copy = failureReason ? COPY_KEYS[failureReason] : GENERIC_KEYS;
+	return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		failureTitle: t(copy.title),
+		errorMessage: t(copy.subtitle),
+		onRetry,
+		retryLabel: t("common.tryAgain"),
+		onSkip: onUseAnotherMethod,
+		skipLabel: t("idv2.digitalIdRedirect.failureScreen.useAnotherMethod")
+	});
+};
+//#endregion
+//#region src/modules/id/digitalIdRedirect/redirectingScreen.tsx
+/**
+* Performs the full-page redirect out to the identity provider (bank login).
+* Full-page navigation lives in L2, so core stays window-free. The pending
+* verificationId was already persisted by the core child machine (its
+* `persisting` state) before this screen renders, so the return leg can recover
+* it from storage after the reload.
+*/
+var RedirectingScreen = ({ launchUrl }) => {
+	y(() => {
+		if (launchUrl && launchUrl.startsWith("https://")) window.location.assign(launchUrl);
+	}, [launchUrl]);
+	return /* @__PURE__ */ u(TransitionSpinner, { hideText: true });
+};
+//#endregion
+//#region src/modules/id/digitalIdRedirect/successScreen.tsx
+/**
+* Success confirmation for the digital-ID web-redirect (Trinsic iDIN/FTN).
+* Renders the shared `VerificationResult` (same look as ekyc/ekyb) with a manual
+* Continue action — the child machine parks in `succeeded` until the user
+* acknowledges, so the flow does not silently skip past the result.
+*
+* Copy is i18nexus-keyed under `idv2.digitalIdRedirect.successScreen.*`
+* (add EN, plus NL for iDIN and FI/SV for FTN, in i18nexus).
+*/
+var SuccessScreen = ({ onContinue }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u(VerificationResult, {
+		status: "success",
+		successTitle: t("idv2.digitalIdRedirect.successScreen.title"),
+		successSubtitle: t("idv2.digitalIdRedirect.successScreen.subtitle"),
+		onContinue,
+		continueLabel: t("idv2.digitalIdRedirect.successScreen.continue")
+	});
+};
+//#endregion
+//#region src/modules/id/digitalIdRedirect/digitalIdRedirect.tsx
+/**
+* Digital ID web-redirect (Trinsic iDIN/FTN) rendered INSIDE ID-Capture as a
+* child machine — mirrors `digitalIdUpload/digitalIdUpload.tsx`. The core child
+* owns create → persist → redirect (and, on the return leg, submit → poll); this
+* layer only renders the phase and performs the full-page navigation.
+*/
+var DigitalIdRedirect = ({ manager, state }) => {
+	if (state.phase === "redirecting") return /* @__PURE__ */ u(RedirectingScreen, { launchUrl: state.launchUrl ?? "" });
+	if (state.phase === "success") return /* @__PURE__ */ u(SuccessScreen, { onContinue: () => manager.digitalIdRedirectContinue() });
+	if (state.phase === "failed") return /* @__PURE__ */ u(FailureScreen, {
+		failureReason: state.failureReason,
+		onRetry: () => manager.digitalIdRedirectRetry(),
+		onUseAnotherMethod: () => manager.digitalIdRedirectUseAnotherMethod()
+	});
+	if (state.phase === "error") return /* @__PURE__ */ u(FailureScreen, {
+		onRetry: () => manager.digitalIdRedirectRetry(),
+		onUseAnotherMethod: () => manager.digitalIdRedirectUseAnotherMethod()
+	});
+	return /* @__PURE__ */ u(TransitionSpinner, { hideText: true });
+};
+//#endregion
 //#region src/modules/id/manualUpload/manualUploadError.tsx
 /**
 * Inline validation message for the manual-upload flow. Rendered directly
@@ -971,27 +1167,23 @@ var UploadTab = ({ mode, manager, state, errorMessageId }) => {
 	const isUploadingBack = state.uploadingSide === "back";
 	return /* @__PURE__ */ u("div", {
 		class: "IncodeManualUploadTab",
-		children: [
-			/* @__PURE__ */ u(UploadButton, {
-				icon: /* @__PURE__ */ u(IdFrontIcon, {}),
-				label: slotLabel("front", isUploadingFront, state.frontUploaded),
-				uploaded: state.frontUploaded,
-				uploading: isUploadingFront,
-				testId: "manual-upload-front",
-				onFile: (file) => manager.manualUploadSelectFile("front", file),
-				...slotErrorProps("front")
-			}),
-			slotError("front"),
-			state.showBackSlot && /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u(UploadButton, {
-				icon: /* @__PURE__ */ u(IdBackIcon, {}),
-				label: slotLabel("back", isUploadingBack, state.backUploaded),
-				uploaded: state.backUploaded,
-				uploading: isUploadingBack,
-				testId: "manual-upload-back",
-				onFile: (file) => manager.manualUploadSelectFile("back", file),
-				...slotErrorProps("back")
-			}), slotError("back")] })
-		]
+		children: [state.showFrontSlot !== false && /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u(UploadButton, {
+			icon: /* @__PURE__ */ u(IdFrontIcon, {}),
+			label: slotLabel("front", isUploadingFront, state.frontUploaded),
+			uploaded: state.frontUploaded,
+			uploading: isUploadingFront,
+			testId: "manual-upload-front",
+			onFile: (file) => manager.manualUploadSelectFile("front", file),
+			...slotErrorProps("front")
+		}), slotError("front")] }), state.showBackSlot && /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u(UploadButton, {
+			icon: /* @__PURE__ */ u(IdBackIcon, {}),
+			label: slotLabel("back", isUploadingBack, state.backUploaded),
+			uploaded: state.backUploaded,
+			uploading: isUploadingBack,
+			testId: "manual-upload-back",
+			onFile: (file) => manager.manualUploadSelectFile("back", file),
+			...slotErrorProps("back")
+		}), slotError("back")] })]
 	});
 };
 //#endregion
@@ -1099,17 +1291,307 @@ function preloadIdTutorialAssets() {
 		"id.tutorial.back",
 		"id.tutorial.passport"
 	]);
-	import("../id-tutorial-BOOsXlAJ.js");
-	import("../back-tutorial-BHyRHyET.js");
-	import("../passport-tutorial-CeSup6m9.js");
-	import("../id-back-of-card-C4XViC7W.js").then((n) => n.n);
-	import("../id-back-of-card-vertical-DCz0rj8m.js").then((n) => n.n);
-	import("../id-front-of-card-CUA1ocVF.js").then((n) => n.n);
-	import("../id-front-of-card-vertical-Ddm_BwD3.js").then((n) => n.n);
+	preloadAnimations(["id.processing"], "horizontal");
+	preloadAnimations(["id.processing"], "vertical");
+	import("../id-tutorial-IhmAzrIF.js");
+	import("../back-tutorial-XdmQ0Wml.js");
+	import("../passport-tutorial-61vlloJS.js");
+	import("../id-back-of-card-B6EcmiCs.js").then((n) => n.n);
+	import("../id-back-of-card-vertical-B3FXhPpj.js").then((n) => n.n);
+	import("../id-front-of-card-V_BlLaZr.js").then((n) => n.n);
+	import("../id-front-of-card-vertical-CuZjL8kc.js").then((n) => n.n);
+}
+//#endregion
+//#region src/modules/id/tutorialWithPermissions/howItWorksOverlay.constants.ts
+var HOW_IT_WORKS_TITLE_ID = "how-it-works-title";
+var HOW_IT_WORKS_INSTRUCTIONS_LABELS = {
+	TITLE: "idv2.tutorial.howItWorks.title",
+	SUBTITLE: "idv2.tutorial.howItWorks.subtitle",
+	STEP_1: "idv2.tutorial.howItWorks.instructions.step1",
+	STEP_2: "idv2.tutorial.howItWorks.instructions.step2",
+	STEP_3: "idv2.tutorial.howItWorks.instructions.step3",
+	START_SCAN: "idv2.tutorial.startScan"
+};
+var HOW_IT_WORKS_INSTRUCTIONS = [
+	{
+		icon: SvgReloadIcon,
+		labelKey: HOW_IT_WORKS_INSTRUCTIONS_LABELS.STEP_1
+	},
+	{
+		icon: SvgPersonCardIcon,
+		labelKey: HOW_IT_WORKS_INSTRUCTIONS_LABELS.STEP_2
+	},
+	{
+		icon: SvgCheckV2Icon,
+		labelKey: HOW_IT_WORKS_INSTRUCTIONS_LABELS.STEP_3
+	}
+];
+//#endregion
+//#region src/modules/id/tutorialWithPermissions/howItWorksOverlay.tsx
+function HowItWorksContent({ onContinue, isLoading }) {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeHowItWorksOverlay",
+		"data-testid": "how-it-works-overlay",
+		children: [
+			/* @__PURE__ */ u("div", {
+				class: "IncodeHowItWorksOverlayHeader",
+				children: [/* @__PURE__ */ u(AutoFocusTitle, {
+					id: HOW_IT_WORKS_TITLE_ID,
+					className: "IncodeHowItWorksOverlayTitle",
+					children: t(HOW_IT_WORKS_INSTRUCTIONS_LABELS.TITLE)
+				}), /* @__PURE__ */ u(TypographyP, {
+					className: "IncodeHowItWorksOverlaySubtitle",
+					children: t(HOW_IT_WORKS_INSTRUCTIONS_LABELS.SUBTITLE)
+				})]
+			}),
+			/* @__PURE__ */ u("ul", {
+				class: "IncodeHowItWorksOverlayInstructions",
+				children: HOW_IT_WORKS_INSTRUCTIONS.map(({ icon: Icon, labelKey }) => /* @__PURE__ */ u("li", {
+					class: "IncodeHowItWorksOverlayInstruction",
+					children: [/* @__PURE__ */ u("div", {
+						class: "IncodeHowItWorksOverlayInstructionIcon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ u(Icon, {
+							height: 24,
+							width: 24
+						})
+					}), /* @__PURE__ */ u("span", { children: t(labelKey) })]
+				}, labelKey))
+			}),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeHowItWorksOverlayActions",
+				children: /* @__PURE__ */ u(Button, {
+					onClick: onContinue,
+					disabled: isLoading,
+					isLoading,
+					class: "IncodeHowItWorksOverlayActionButton",
+					children: t(HOW_IT_WORKS_INSTRUCTIONS_LABELS.START_SCAN)
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeHowItWorksOverlayFooter",
+				children: /* @__PURE__ */ u(VerifiedByIncodeLogo, {})
+			})
+		]
+	});
+}
+var HowItWorksOverlay = ({ isOpen, onClose, onContinue, isLoading = false }) => {
+	const isMobileWidth = useIsMobileDeviceWidth();
+	const handleClose = isLoading ? void 0 : onClose;
+	if (!isOpen) return null;
+	if (isMobileWidth) return /* @__PURE__ */ u(BottomSheet, {
+		isOpen: true,
+		labelledById: HOW_IT_WORKS_TITLE_ID,
+		manageInitialFocus: false,
+		onClose: handleClose,
+		"data-testid": "how-it-works-sheet",
+		children: /* @__PURE__ */ u(HowItWorksContent, {
+			onContinue,
+			isLoading
+		})
+	});
+	return /* @__PURE__ */ u(Modal.Root, {
+		open: true,
+		dismissible: !isLoading,
+		labelledById: HOW_IT_WORKS_TITLE_ID,
+		manageInitialFocus: false,
+		onOpenChange: (open) => {
+			if (!open) handleClose?.();
+		},
+		children: /* @__PURE__ */ u(Modal.Content, { children: /* @__PURE__ */ u(HowItWorksContent, {
+			onContinue,
+			isLoading
+		}) })
+	});
+};
+//#endregion
+//#region src/modules/id/tutorialWithPermissions/tutorialWithPermissions.tsx
+/**
+* Variant-specific overlay / CTA slots for the permission UX family.
+* Layer exclusivity means only one of IDC-01 / IDC-02 is active — `else if`
+* keeps that invariant in the UI composition.
+*/
+function createSlots({ manager, stage, howItWorksOpen, onOpenHowItWorks, onCloseHowItWorks, onContinue, t }) {
+	let permissionDialog = null;
+	let howItWorksOverlay = null;
+	let actions = null;
+	if (stage.ux.id === CAMERA_PERMISSION_UX.PERMISSION_SHEET && stage.permissionStatus) permissionDialog = /* @__PURE__ */ u(PermissionsDialog, {
+		manager,
+		permissionStatus: stage.permissionStatus,
+		isDismissible: true
+	});
+	else if (stage.ux.id === CAMERA_PERMISSION_UX.HOW_IT_WORKS) {
+		const isRequesting = stage.permissionStatus === PERMISSION_DIALOG_STATUS.REQUESTING;
+		actions = /* @__PURE__ */ u(Button, {
+			variant: "link",
+			onClick: onOpenHowItWorks,
+			children: t("idv2.tutorial.howItWorks.link")
+		});
+		howItWorksOverlay = /* @__PURE__ */ u(HowItWorksOverlay, {
+			isOpen: howItWorksOpen,
+			onClose: onCloseHowItWorks,
+			onContinue,
+			isLoading: isRequesting
+		});
+	}
+	return {
+		permissionDialog,
+		howItWorksOverlay,
+		actions
+	};
+}
+var TutorialWithPermissions = ({ manager, stage }) => {
+	const { t } = useTranslation();
+	const [howItWorksOpen, setHowItWorksOpen] = d(false);
+	const isHowItWorks = stage.ux.id === CAMERA_PERMISSION_UX.HOW_IT_WORKS;
+	const isCtaLoading = stage.tutorialPhase !== null ? CONTINUING_TUTORIAL_PHASES.has(stage.tutorialPhase) || stage.ux.id === CAMERA_PERMISSION_UX.PENDING : true;
+	const requestPermissionFromTutorial = () => manager.requestPermission();
+	function handleContinue() {
+		if (isHowItWorks) {
+			requestPermissionFromTutorial();
+			return;
+		}
+		manager.nextStep();
+	}
+	const slots = createSlots({
+		manager,
+		stage,
+		howItWorksOpen,
+		onOpenHowItWorks: () => setHowItWorksOpen(true),
+		onCloseHowItWorks: () => setHowItWorksOpen(false),
+		onContinue: handleContinue,
+		t
+	});
+	let disclaimerText = void 0;
+	if (isHowItWorks) disclaimerText = t("idv2.tutorial.v2.allowCameraAccessDisclaimer");
+	return /* @__PURE__ */ u(k, { children: [
+		/* @__PURE__ */ u(Tutorial, {
+			manager,
+			documentType: stage.documentType,
+			mode: stage.mode,
+			isLoading: isCtaLoading,
+			actionsSlot: slots.actions,
+			onContinue: handleContinue,
+			disclaimerText,
+			shouldScaleAnimationContainer: true
+		}),
+		slots.permissionDialog,
+		slots.howItWorksOverlay
+	] });
+};
+//#endregion
+//#region src/modules/id/experiments/useCameraPermissionUx.ts
+/** Permission surfaces the treatment can alter — the dialog ones, not the full-screen ones. */
+function isPermissionDialogSurface(state) {
+	return state.status === ID_CAPTURE_STATUS.PERMISSIONS && (state.permissionStatus === PERMISSION_DIALOG_STATUS.IDLE || state.permissionStatus === PERMISSION_DIALOG_STATUS.MOTION_ONLY || state.permissionStatus === PERMISSION_DIALOG_STATUS.REQUESTING);
+}
+/**
+* `permissions.idle` collapsed into `status: 'loading'` — the silent
+* re-check between the tutorial CTA and the permission dialog. It remains a
+* treatment surface so the tutorial can stay mounted while that check runs.
+*/
+function isPermissionsIdleBlip(state) {
+	return state.status === ID_CAPTURE_STATUS.LOADING && state.phase === ID_CAPTURE_LOADING_PHASE.PERMISSIONS_IDLE;
+}
+function isCameraDocumentType(documentType) {
+	return documentType === "id" || documentType === "passport";
+}
+/**
+* Positive population rule shared by every observable camera-path state.
+* Core supplies an effective document type for direct-entry flows, while
+* explicit manual and Digital-ID selections stay non-camera and are excluded.
+*/
+function getCameraPermissionExperimentContext(state) {
+	switch (state.status) {
+		case ID_CAPTURE_STATUS.TUTORIAL:
+		case ID_CAPTURE_STATUS.LOADING:
+		case ID_CAPTURE_STATUS.PERMISSIONS:
+		case ID_CAPTURE_STATUS.CAPTURE: break;
+		default: return;
+	}
+	if (!isCameraDocumentType(state.selectedDocumentType)) return;
+	return { tutorialEnabled: state.status === ID_CAPTURE_STATUS.TUTORIAL ? true : state.tutorialEnabled };
+}
+function isCameraPermissionTreatmentSurface(state) {
+	if (state.status === ID_CAPTURE_STATUS.TUTORIAL) return true;
+	if (isPermissionsIdleBlip(state)) return state.tutorialEnabled;
+	return isPermissionDialogSurface(state) && state.tutorialEnabled;
+}
+function collapseCameraPermissionUx(showHowItWorks, showPermissionSheet) {
+	if (showHowItWorks) return { id: CAMERA_PERMISSION_UX.HOW_IT_WORKS };
+	if (showPermissionSheet) return { id: CAMERA_PERMISSION_UX.PERMISSION_SHEET };
+	return { id: CAMERA_PERMISSION_UX.CONTROL };
+}
+function useCameraPermissionUx(state) {
+	const experimentContext = getCameraPermissionExperimentContext(state);
+	const experimentEnabled = experimentContext !== void 0;
+	const onTreatmentSurface = experimentEnabled && isCameraPermissionTreatmentSurface(state);
+	const howItWorksExperiment = useIdExperiment({
+		key: "cameraPermissionHowItWorks",
+		enabled: experimentEnabled,
+		conditions: experimentContext
+	});
+	const permissionSheetExperiment = useIdExperiment({
+		key: "cameraPermissionSheet",
+		enabled: experimentEnabled,
+		conditions: experimentContext
+	});
+	if (!onTreatmentSurface) return { id: CAMERA_PERMISSION_UX.CONTROL };
+	if (howItWorksExperiment.status === EXPERIMENT_LIFECYCLE_STATUS.PENDING || permissionSheetExperiment.status === EXPERIMENT_LIFECYCLE_STATUS.PENDING) return { id: CAMERA_PERMISSION_UX.PENDING };
+	return collapseCameraPermissionUx(howItWorksExperiment.params.showHowItWorks, permissionSheetExperiment.params.showPermissionSheet);
+}
+//#endregion
+//#region src/modules/id/useIdTutorialWithPermissionsUxStage.ts
+/**
+* Which arm-specific permission statuses keep the tutorial mounted as a
+* backdrop behind the dialog surface. IDC-01 shows its sheet across the
+* whole idle/motionOnly/requesting range; IDC-02 has no dialog of its own —
+* only the native prompt (`requesting`) sits over the tutorial. Dismissing
+* that prompt (→ `waitingForUser`) falls through to the standard full-screen
+* explainer instead of leaving IDC-02 on a dead-end tutorial.
+*/
+function isDialogBackdropStatus(ux, permissionStatus) {
+	if (ux.id === CAMERA_PERMISSION_UX.HOW_IT_WORKS) return permissionStatus === PERMISSION_DIALOG_STATUS.REQUESTING;
+	if (ux.id === CAMERA_PERMISSION_UX.PERMISSION_SHEET) return permissionStatus === PERMISSION_DIALOG_STATUS.IDLE || permissionStatus === PERMISSION_DIALOG_STATUS.MOTION_ONLY || permissionStatus === PERMISSION_DIALOG_STATUS.REQUESTING;
+	return false;
+}
+/**
+* Resolves when `TutorialWithPermissions` should render instead of the plain
+* tutorial or permissions screens.
+*
+* - Default (non-experimental): `state.status === 'tutorial'`.
+* - Camera-permission experiment: permissions dialog with tutorial backdrop
+*   when `tutorialEnabled` and the treatment is not control.
+*/
+function useIdTutorialWithPermissionsUxStage(state) {
+	const ux = useCameraPermissionUx(state);
+	if (state.status === ID_CAPTURE_STATUS.LOADING && state.phase === "permissionsIdle" && state.tutorialEnabled && ux.id !== CAMERA_PERMISSION_UX.CONTROL && ux.id !== CAMERA_PERMISSION_UX.PENDING) return {
+		documentType: state.selectedDocumentType,
+		mode: state.currentMode,
+		ux,
+		tutorialPhase: null,
+		permissionStatus: "checking"
+	};
+	if (state.status === ID_CAPTURE_STATUS.TUTORIAL) return {
+		documentType: state.selectedDocumentType,
+		mode: state.currentMode,
+		ux,
+		tutorialPhase: state.phase,
+		permissionStatus: null
+	};
+	if (state.status === ID_CAPTURE_STATUS.PERMISSIONS && state.tutorialEnabled && isDialogBackdropStatus(ux, state.permissionStatus)) return {
+		documentType: state.selectedDocumentType,
+		mode: state.currentMode,
+		ux,
+		tutorialPhase: null,
+		permissionStatus: state.permissionStatus
+	};
+	return null;
 }
 //#endregion
 //#region src/modules/id/id.tsx
-var MandatoryConsent = z(() => import("../mandatoryConsent-CxShVycM.js").then((module) => ({ default: module.MandatoryConsent })));
+var MandatoryConsent = z(() => import("../mandatoryConsent-BJcDf3s-.js").then((module) => ({ default: module.MandatoryConsent })));
 var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 	usePreloadDisplayFont();
 	y(() => {
@@ -1129,19 +1611,26 @@ var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 		onFinish,
 		onError
 	});
+	const tutorialWithPermissionsUxStage = useIdTutorialWithPermissionsUxStage(state);
+	const isPreparingCameraLoader = state.status === "loading" && tutorialWithPermissionsUxStage?.ux.id !== CAMERA_PERMISSION_UX.PERMISSION_SHEET;
+	const { params: darkCameraLoadingParams } = useIdExperiment({
+		key: "darkCameraLoading",
+		enabled: isPreparingCameraLoader
+	});
 	if (state.status === "idle") return /* @__PURE__ */ u(TransitionSpinner, { renderMode: "spinnerOnly" });
-	if (state.status === "loading") return /* @__PURE__ */ u(TransitionSpinner, {
+	if (isPreparingCameraLoader) return /* @__PURE__ */ u(TransitionSpinner, {
 		titleKey: "loadingCircle.holdOn",
-		subtitleKey: "loadingCircle.preparingCamera"
+		subtitleKey: "loadingCircle.preparingCamera",
+		alwaysDark: darkCameraLoadingParams.showDarkCameraLoading
 	});
 	if (state.status === "chooser") return /* @__PURE__ */ u(Chooser, {
 		manager,
 		state
 	});
 	if (state.status === "ageVerification") return /* @__PURE__ */ u(AgeVerification, { manager });
-	if (state.status === "tutorial") return /* @__PURE__ */ u(Tutorial, {
+	if (tutorialWithPermissionsUxStage) return /* @__PURE__ */ u(TutorialWithPermissions, {
 		manager,
-		state
+		stage: tutorialWithPermissionsUxStage
 	});
 	if (state.status === "permissions") return /* @__PURE__ */ u(Permissions, {
 		manager,
@@ -1184,15 +1673,40 @@ var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 		manager,
 		state
 	});
+	if (state.status === "digitalIdRedirect") return /* @__PURE__ */ u(DigitalIdRedirect, {
+		manager,
+		state
+	});
+	if (state.status === "deviceWallet") return /* @__PURE__ */ u(DeviceWallet, {
+		manager,
+		state
+	});
 	return null;
 };
 var IdWithLocalConfig = ({ config, manager, onFinish, onError }) => {
-	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(IdContent, {
-		config,
+	const runsOwnSecondIdSequence = !useHasResolvedConfig() && !manager && config?.secondId === true && config?.isSecondId !== true;
+	const [round, setRound] = d("first");
+	const handleFinish = q((output) => {
+		if (runsOwnSecondIdSequence && round === "first") {
+			setRound("second");
+			return;
+		}
+		onFinish?.(output);
+	}, [
+		runsOwnSecondIdSequence,
+		round,
+		onFinish
+	]);
+	const resolvedConfig = runsOwnSecondIdSequence && round === "second" ? {
+		...config,
+		isSecondId: true
+	} : config;
+	return /* @__PURE__ */ u(IncodeComponent, { children: resolvedConfig || manager ? /* @__PURE__ */ u(IdContent, {
+		config: resolvedConfig,
 		manager,
-		onFinish,
+		onFinish: handleFinish,
 		onError
-	}) : null });
+	}, runsOwnSecondIdSequence ? round : void 0) : null });
 };
 var Id = withStandaloneModuleBootstrap(IdWithLocalConfig, "ID", { supportsExternalManager: true });
 registerIncodeModuleElement(Id, "incode-id");