@incodetech/web 0.0.0-dev-20260902-10b14cca → 0.0.0-dev-20260902-b423eb4c

package/dist/extensibility.es.js

@@ -1,6 +1,6 @@
 import { n as setUiConfig, o as useTranslation } from "./uiConfig-S9TzEYvT.js";
-import { $ as VerificationResult, A as TextArea, B as getCountryByCode, C as CameraOverlayHeader, D as VerificationOptionCard, E as BottomSheet, F as PhoneInputComposed, J as InputComposed, M as RadioButtonComposed, N as SegmentedDateInput, O as VerificationOptionCardList, P as DateInputComposed, R as countries, S as CameraView, St as useManager, T as CameraFrame, U as Checkbox, V as FormField, W as OtpInput, X as ProgressBar, Y as Input, Z as ConnectionError, _ as Permissions, a as Capture, b as ManualCapture, d as IdError, dt as Page, et as ErrorContent, h as Capture$1, it as LandscapeBlocker, j as RadioGroupComposed, k as TextAreaComposed, l as IdExpired, m as Tutorial$1, n as Chooser, nt as Overlay, q as PasswordInputComposed, r as Tutorial, rt as IncodeComponent, t as FlipAnimation, tt as Processing, w as CameraOverlay, x as CaptureFooter, xt as useScreenOrientation, y as BaseTutorial, z as getCountryByCallingCode } from "./extensibility-BjsMZ9wH.js";
+import { $ as Checkbox, A as ManualCapture, B as TextArea, C as Permissions, F as CameraFrame, G as PhoneInputComposed, H as RadioButtonComposed, I as BottomSheet, J as countries, L as VerificationOptionCard, M as CameraView, Mt as useManager, N as CameraOverlayHeader, P as CameraOverlay, R as VerificationOptionCardList, U as SegmentedDateInput, V as RadioGroupComposed, W as DateInputComposed, X as getCountryByCode, Y as getCountryByCallingCode, Z as FormField, a as Capture, at as Input, b as Tutorial$1, d as IdError, dt as Processing, et as OtpInput, ft as Overlay, it as InputComposed, j as CaptureFooter, jt as useScreenOrientation, k as BaseTutorial, l as IdExpired, lt as VerificationResult, mt as LandscapeBlocker, n as Chooser, ot as ProgressBar, pt as IncodeComponent, r as Tutorial, rt as PasswordInputComposed, st as ConnectionError, t as FlipAnimation, ut as ErrorContent, x as Capture$1, xt as Page, z as TextAreaComposed } from "./extensibility-C_4OSwNj.js";
 import { o as Lottie, t as Spacer } from "./spacer-6MHVWssc.js";
-import { a as TypographyH4, i as TypographyH3, n as Title, o as TypographyH5, r as TypographyH1, s as TypographyP, t as Spinner } from "./spinner-BIgpFkeM.js";
-import { A as Button, C as CheckmarkCompactIcon, D as CalendarIcon, E as CameraIcon, S as ChevronDown, T as CaptureButtonIcon, _ as EyeIcon, b as ChevronRightIcon, d as SuccessIcon, f as SearchIcon, g as EyeOffIcon, h as FileIcon, k as ErrorIcon, l as SvgLightningIcon, m as HelpIcon, p as LockIcon, r as Modal, t as DropdownComposed, u as WarningIcon, v as EllipseIcon, w as CheckmarkIcon, x as ChevronLeftIcon, y as CloseIcon } from "./dropdownComposed-BiU5szlF.js";
+import { a as TypographyH4, i as TypographyH3, n as Title, o as TypographyH5, r as TypographyH1, s as TypographyP, t as Spinner } from "./spinner-CKRC7C1a.js";
+import { A as Button, C as CheckmarkCompactIcon, D as CalendarIcon, E as CameraIcon, S as ChevronDown, T as CaptureButtonIcon, _ as EyeIcon, b as ChevronRightIcon, d as SuccessIcon, f as SearchIcon, g as EyeOffIcon, h as FileIcon, k as ErrorIcon, l as SvgLightningIcon, m as HelpIcon, p as LockIcon, r as Modal, t as DropdownComposed, u as WarningIcon, v as EllipseIcon, w as CheckmarkIcon, x as ChevronLeftIcon, y as CloseIcon } from "./dropdownComposed-Bp28bptM.js";
 export { BaseTutorial, BottomSheet, Button, CalendarIcon, CameraFrame, CameraIcon, CameraOverlay, CameraOverlayHeader, CameraView, CaptureButtonIcon, CaptureFooter, Checkbox, CheckmarkCompactIcon, CheckmarkIcon, ChevronDown, ChevronLeftIcon, ChevronRightIcon, CloseIcon, ConnectionError, DateInputComposed, DropdownComposed, EllipseIcon, ErrorContent, ErrorIcon, EyeIcon, EyeOffIcon, FileIcon, FormField, HelpIcon, Capture as IdCapture, Chooser as IdChooser, IdError, IdExpired, FlipAnimation as IdFlipAnimation, Tutorial as IdTutorial, IncodeComponent, Input, InputComposed, LandscapeBlocker, SvgLightningIcon as LightningIcon, LockIcon, Lottie, ManualCapture, Modal, OtpInput, Overlay, Page, PasswordInputComposed, Permissions, PhoneInputComposed, Processing, ProgressBar, RadioButtonComposed, RadioGroupComposed, SearchIcon, SegmentedDateInput, Capture$1 as SelfieCapture, Tutorial$1 as SelfieTutorial, Spacer, Spinner, SuccessIcon, TextArea, TextAreaComposed, Title, TypographyH1, TypographyH3, TypographyH4, TypographyH5, TypographyP, VerificationOptionCard, VerificationOptionCardList, VerificationResult, WarningIcon, countries, getCountryByCallingCode, getCountryByCode, setUiConfig, useManager, useScreenOrientation, useTranslation };

package/dist/face-match/face-match.es.js

@@ -1,2 +1,2 @@
-import { t as FaceMatch } from "../faceMatch-C_h-t126.js";
+import { t as FaceMatch } from "../faceMatch-CJwGNK5J.js";
 export { FaceMatch };

package/dist/{faceMatch-C_h-t126.js → faceMatch-CJwGNK5J.js}

@@ -1,9 +1,9 @@
 import { o as useTranslation } from "./uiConfig-S9TzEYvT.js";
 import { C as k, l as A, v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { St as useManager, bt as useModuleTerminalCallbacks, dt as Page, mt as TransitionSpinner, ot as Snackbar, rt as IncodeComponent, st as withStandaloneModuleBootstrap, yt as isTerminalModuleState } from "./extensibility-BjsMZ9wH.js";
+import { At as useModuleTerminalCallbacks, Mt as useManager, _t as withStandaloneModuleBootstrap, gt as Snackbar, kt as isTerminalModuleState, pt as IncodeComponent, wt as TransitionSpinner, xt as Page } from "./extensibility-C_4OSwNj.js";
 import { s as Asset, t as Spacer } from "./spacer-6MHVWssc.js";
-import { n as Title } from "./spinner-BIgpFkeM.js";
-import { A as Button } from "./dropdownComposed-BiU5szlF.js";
+import { n as Title } from "./spinner-CKRC7C1a.js";
+import { A as Button } from "./dropdownComposed-Bp28bptM.js";
 import { t as registerIncodeModuleElement } from "./incodeModule-BJ-HCYmb.js";
 import { createFaceMatchManager } from "@incodetech/core/face-match";
 //#region src/modules/face-match/assets/match-success.svg?react

package/dist/faceMatch-Rl9qO8Fy.js

@@ -0,0 +1,2 @@
+import { t as FaceMatch } from "./faceMatch-CJwGNK5J.js";
+export { FaceMatch };

package/dist/field-comparison/field-comparison.es.js

@@ -1,2 +1,2 @@
-import { t as FieldComparison } from "../fieldComparison-CXlIUJBH.js";
+import { t as FieldComparison } from "../fieldComparison-BKGJa1-Z.js";
 export { FieldComparison };

package/dist/fieldComparison-7yzuwmhT.js

@@ -0,0 +1,2 @@
+import { t as FieldComparison } from "./fieldComparison-BKGJa1-Z.js";
+export { FieldComparison };

package/dist/{fieldComparison-CXlIUJBH.js → fieldComparison-BKGJa1-Z.js}

@@ -1,8 +1,8 @@
 import { o as useTranslation } from "./uiConfig-S9TzEYvT.js";
 import { y as u } from "./vendor-preact-BPXMFRom.js";
-import { $ as VerificationResult, J as InputComposed, St as useManager, bt as useModuleTerminalCallbacks, dt as Page, rt as IncodeComponent, st as withStandaloneModuleBootstrap } from "./extensibility-BjsMZ9wH.js";
+import { At as useModuleTerminalCallbacks, Mt as useManager, _t as withStandaloneModuleBootstrap, it as InputComposed, lt as VerificationResult, pt as IncodeComponent, xt as Page } from "./extensibility-C_4OSwNj.js";
 import { t as Spacer } from "./spacer-6MHVWssc.js";
-import { A as Button } from "./dropdownComposed-BiU5szlF.js";
+import { A as Button } from "./dropdownComposed-Bp28bptM.js";
 import { t as registerIncodeModuleElement } from "./incodeModule-BJ-HCYmb.js";
 import { createFieldComparisonManager } from "@incodetech/core/field-comparison";
 //#region src/modules/field-comparison/fieldComparison.tsx

package/dist/{finalSuccessScreen-45lRExEd.js → finalSuccessScreen-BGvHT0Nb.js}

@@ -1,8 +1,8 @@
 import { o as useTranslation } from "./uiConfig-S9TzEYvT.js";
 import { C as k, g as q, l as A, p as d, v as y, y as u } from "./vendor-preact-BPXMFRom.js";
-import { T as CameraFrame, at as AutoFocusTitle, dt as Page, g as ManualCaptureButton, gt as useTimeoutHandle, i as ManualCaptureButton$1, o as CaptureNotification } from "./extensibility-BjsMZ9wH.js";
+import { Et as useTimeoutHandle, F as CameraFrame, S as ManualCaptureButton, ht as AutoFocusTitle, i as ManualCaptureButton$1, o as CaptureNotification, xt as Page } from "./extensibility-C_4OSwNj.js";
 import { d as cn, n as LoadingIcon, o as Lottie, s as Asset } from "./spacer-6MHVWssc.js";
-import { A as Button, d as SuccessIcon, k as ErrorIcon, r as Modal } from "./dropdownComposed-BiU5szlF.js";
+import { A as Button, d as SuccessIcon, k as ErrorIcon, r as Modal } from "./dropdownComposed-Bp28bptM.js";
 import { checkCameraPermission, requestCameraPermission } from "@incodetech/core/camera";
 import { resolveVideoSelfieSteps } from "@incodetech/core/video-selfie";
 //#region src/modules/video-selfie/useVideoSelfiePermissions.ts

package/dist/fiscal-qr/fiscal-qr.es.js

@@ -1,8 +1,8 @@
 import { o as useTranslation } from "../uiConfig-S9TzEYvT.js";
 import { y as u } from "../vendor-preact-BPXMFRom.js";
-import { $ as VerificationResult, C as CameraOverlayHeader, S as CameraView, St as useManager, T as CameraFrame, bt as useModuleTerminalCallbacks, dt as Page, rt as IncodeComponent, st as withStandaloneModuleBootstrap, w as CameraOverlay } from "../extensibility-BjsMZ9wH.js";
+import { At as useModuleTerminalCallbacks, F as CameraFrame, M as CameraView, Mt as useManager, N as CameraOverlayHeader, P as CameraOverlay, _t as withStandaloneModuleBootstrap, lt as VerificationResult, pt as IncodeComponent, xt as Page } from "../extensibility-C_4OSwNj.js";
 import { t as Spacer } from "../spacer-6MHVWssc.js";
-import { A as Button } from "../dropdownComposed-BiU5szlF.js";
+import { A as Button } from "../dropdownComposed-Bp28bptM.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
 import { createFiscalQrManager } from "@incodetech/core/fiscal-qr";
 //#region src/modules/fiscal-qr/fiscalQrCapture.tsx

package/dist/flow/flow.es.js

@@ -1,9 +1,9 @@
 import { o as useTranslation, t as setThemeUiConfig, u as readStoredLanguage } from "../uiConfig-S9TzEYvT.js";
 import { 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 { Q as StatusPage, St as useManager, ct as ResolvedConfigProvider, mt as TransitionSpinner, rt as IncodeComponent, ut as TerminalErrorPage } from "../extensibility-BjsMZ9wH.js";
-import { k as ErrorIcon } from "../dropdownComposed-BiU5szlF.js";
+import { Mt as useManager, bt as TerminalErrorPage, ct as StatusPage, pt as IncodeComponent, vt as ResolvedConfigProvider, wt as TransitionSpinner } from "../extensibility-C_4OSwNj.js";
+import { k as ErrorIcon } from "../dropdownComposed-Bp28bptM.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
-import { _ as warmupWasmIfNeeded, a as resolveApiKey, c as HEADLESS_FLOW_MODULE_KEYS, d as fetchTheme, f as initializeFlowManager, h as preloadRedirectToMobile, l as LAZY_UI_MODULES, m as preloadHomeScreen, n as useModulePreloader, o as extractIncodeStatus, p as preloadFirstModule, r as usePrefetchNextModule, s as UnsupportedModule, t as useModuleLoader, u as createFlowManager, v as isDesktopOrEmulated, y as resolveSessionLanguage } from "../useModuleLoader-B9rRJAer.js";
+import { _ as warmupWasmIfNeeded, a as resolveApiKey, c as HEADLESS_FLOW_MODULE_KEYS, d as fetchTheme, f as initializeFlowManager, h as preloadRedirectToMobile, l as LAZY_UI_MODULES, m as preloadHomeScreen, n as useModulePreloader, o as extractIncodeStatus, p as preloadFirstModule, r as usePrefetchNextModule, s as UnsupportedModule, t as useModuleLoader, u as createFlowManager, v as isDesktopOrEmulated, y as resolveSessionLanguage } from "../useModuleLoader-Dt7j-gwI.js";
 import { getRequiredWasmPipelines } from "@incodetech/core/flow";
 import { bootstrapSession, refreshQrUrlUuid } from "@incodetech/core/session";
 //#region src/shared/processing/useDelayedFlag.ts
@@ -342,7 +342,7 @@ function useFlowInitialization(options) {
 }
 //#endregion
 //#region src/modules/flow/flow.tsx
-var LazyHomeScreen = z(() => import("../homeScreen-Cfk7GxO1.js").then((module) => ({ default: module.HomeScreen })));
+var LazyHomeScreen = z(() => import("../homeScreen-CGwTFNOv.js").then((module) => ({ default: module.HomeScreen })));
 var IncodeFlowContent = ({ config, onFinish, onError }) => {
 	const { i18n } = useTranslation();
 	const initialSessionLanguage = A(isSelfLoadingFlowConfig(config) ? resolveSessionLanguage(config.lang, i18n.language, readStoredLanguage()) : config.lang).current;

package/dist/flow/styles.css

@@ -1770,8 +1770,8 @@
   width: max-content;
   left: 50%;
   bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));
+  animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;
   justify-content: center;
-  animation: .35s ease-in 3.5s forwards manualCaptureTooltipExit;
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -1804,6 +1804,27 @@
   color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  animation: none;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {
+  animation: none;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {
+  animation-name: manualCaptureTooltipExitAutoDismiss;
+}
+
 .IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {
   aspect-ratio: 42 / 30;
 }
@@ -1824,6 +1845,18 @@
   }
 }
 
+@keyframes manualCaptureTooltipExitAutoDismiss {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+
+  to {
+    opacity: .5;
+    transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);
+  }
+}
+
 .IncodeIdManualCaptureButton {
   bottom: var(--spacing-24, var(--spacing-24, 24px));
   z-index: 100;

package/dist/geolocation/geolocation.es.js

@@ -1,8 +1,8 @@
 import { a as Trans, o as useTranslation } from "../uiConfig-S9TzEYvT.js";
 import { C as k, y as u } from "../vendor-preact-BPXMFRom.js";
-import { $ as VerificationResult, St as useManager, Z as ConnectionError, bt as useModuleTerminalCallbacks, dt as Page, rt as IncodeComponent, st as withStandaloneModuleBootstrap, v as NumberedStep } from "../extensibility-BjsMZ9wH.js";
+import { At as useModuleTerminalCallbacks, Mt as useManager, T as NumberedStep, _t as withStandaloneModuleBootstrap, lt as VerificationResult, pt as IncodeComponent, st as ConnectionError, xt as Page } from "../extensibility-C_4OSwNj.js";
 import { t as Spacer } from "../spacer-6MHVWssc.js";
-import { A as Button } from "../dropdownComposed-BiU5szlF.js";
+import { A as Button } from "../dropdownComposed-Bp28bptM.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
 import { getBrowser, getDeviceClass } from "@incodetech/core/device";
 import { createGeolocationManager } from "@incodetech/core/geolocation";

package/dist/government-validation/government-validation.es.js

@@ -1,6 +1,6 @@
 import { o as useTranslation } from "../uiConfig-S9TzEYvT.js";
 import { y as u } from "../vendor-preact-BPXMFRom.js";
-import { St as useManager, bt as useModuleTerminalCallbacks, dt as Page, mt as TransitionSpinner, rt as IncodeComponent, st as withStandaloneModuleBootstrap } from "../extensibility-BjsMZ9wH.js";
+import { At as useModuleTerminalCallbacks, Mt as useManager, _t as withStandaloneModuleBootstrap, pt as IncodeComponent, wt as TransitionSpinner, xt as Page } from "../extensibility-C_4OSwNj.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
 import { createGovernmentValidationManager } from "@incodetech/core/government-validation";
 //#region src/modules/government-validation/governmentIncodeLogo.tsx

package/dist/{homeScreen-Cfk7GxO1.js → homeScreen-CGwTFNOv.js}

@@ -1,7 +1,7 @@
 import { d as getLanguageEmoji, f as supportedLanguages, o as useTranslation, r as useUiConfig } from "./uiConfig-S9TzEYvT.js";
 import { d as T, l as A, p as d, v as y, y as u } from "./vendor-preact-BPXMFRom.js";
 import { t as Spacer } from "./spacer-6MHVWssc.js";
-import { A as Button, r as Modal, t as DropdownComposed } from "./dropdownComposed-BiU5szlF.js";
+import { A as Button, r as Modal, t as DropdownComposed } from "./dropdownComposed-Bp28bptM.js";
 //#region src/shared/homeScreen/language.ts
 function capitalizeLabel(text, locale) {
 	const [firstCharacter, ...rest] = Array.from(text);

package/dist/id/id.es.js

@@ -1,10 +1,10 @@
 import { o as useTranslation } from "../uiConfig-S9TzEYvT.js";
 import { C as k, c as z, d as T, g as q, l as A, o as P, p as d, v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { $ as VerificationResult, St as useManager, X as ProgressBar, _ as Permissions, a as Capture, bt as useModuleTerminalCallbacks, c as IdNoAttempts, d as IdError, dt as Page, et as ErrorContent, f as useIdExperiment, gt as useTimeoutHandle, ht as useFeatureManagement, l as IdExpired, lt as useHasResolvedConfig, mt as TransitionSpinner, n as Chooser, p as CaptureFrame, r as Tutorial, rt as IncodeComponent, st as withStandaloneModuleBootstrap, t as FlipAnimation, tt as Processing } from "../extensibility-BjsMZ9wH.js";
+import { At as useModuleTerminalCallbacks, C as Permissions, D as SvgPersonCardIcon, Dt as useIsMobileDeviceWidth, E as SvgCheckV2Icon, Et as useTimeoutHandle, I as BottomSheet, Mt as useManager, O as SvgReloadIcon, St as VerifiedByIncodeLogo, Tt as useFeatureManagement, _ as ID_CAPTURE_LOADING_PHASE, _t as withStandaloneModuleBootstrap, a as Capture, c as IdNoAttempts, d as IdError, dt as Processing, f as CaptureFrame, g as EXPERIMENT_LIFECYCLE_STATUS, h as CONTINUING_TUTORIAL_PHASES, ht as AutoFocusTitle, l as IdExpired, lt as VerificationResult, m as CAMERA_PERMISSION_UX, n as Chooser, ot as ProgressBar, p as useIdExperiment, pt as IncodeComponent, r as Tutorial, t as FlipAnimation, ut as ErrorContent, v as ID_CAPTURE_STATUS, w as PermissionsDialog, wt as TransitionSpinner, xt as Page, y as PERMISSION_DIALOG_STATUS, yt as useHasResolvedConfig } from "../extensibility-C_4OSwNj.js";
 import { d as cn, i as preloadAnimations, r as AnimatedAsset, s as Asset, t as Spacer } from "../spacer-6MHVWssc.js";
-import { n as Title, t as Spinner } from "../spinner-BIgpFkeM.js";
-import { A as Button, b as ChevronRightIcon, d as SuccessIcon, k as ErrorIcon, p as LockIcon } from "../dropdownComposed-BiU5szlF.js";
-import { t as PdfViewer } from "../pdfViewer-CTYP5uX2.js";
+import { n as Title, s as TypographyP, t as Spinner } from "../spinner-CKRC7C1a.js";
+import { A as Button, b as ChevronRightIcon, d as SuccessIcon, k as ErrorIcon, p as LockIcon, r as Modal } from "../dropdownComposed-Bp28bptM.js";
+import { t as PdfViewer } from "../pdfViewer-ewa3CipR.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
 import { t as SvgIdBackOfCard } from "../id-back-of-card-Cp-OinG6.js";
 import { t as SvgIdBackOfCardVertical } from "../id-back-of-card-vertical-DOKxMdys.js";
@@ -1290,8 +1290,288 @@ function preloadIdTutorialAssets() {
 	import("../id-front-of-card-vertical-CdWPzfay.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. Treating it
+* as on-surface lets the arm resolve natively across the blip instead of
+* caching the last resolution: `resolveExperiment` is deterministic given
+* the store, so re-resolving here returns the same arm.
+*/
+function isPermissionsIdleBlip(state) {
+	return state.status === ID_CAPTURE_STATUS.LOADING && state.phase === ID_CAPTURE_LOADING_PHASE.PERMISSIONS_IDLE;
+}
+function isCameraPermissionExperimentSurface(state) {
+	if (state.status === ID_CAPTURE_STATUS.TUTORIAL) return true;
+	return isPermissionDialogSurface(state) || isPermissionsIdleBlip(state);
+}
+function isCameraPermissionTreatmentSurface(state) {
+	if (state.status === ID_CAPTURE_STATUS.TUTORIAL) return true;
+	if (isPermissionsIdleBlip(state)) return state.tutorialEnabled;
+	return state.status === ID_CAPTURE_STATUS.PERMISSIONS && state.tutorialEnabled && isPermissionDialogSurface(state);
+}
+function resolveTutorialEnabled(state) {
+	if (state.status === ID_CAPTURE_STATUS.TUTORIAL) return true;
+	if (state.status === ID_CAPTURE_STATUS.PERMISSIONS || state.status === ID_CAPTURE_STATUS.LOADING) return state.tutorialEnabled;
+	return false;
+}
+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 onExperimentSurface = isCameraPermissionExperimentSurface(state);
+	const onTreatmentSurface = isCameraPermissionTreatmentSurface(state);
+	const conditions = { tutorialEnabled: resolveTutorialEnabled(state) };
+	const howItWorksExperiment = useIdExperiment({
+		key: "cameraPermissionHowItWorks",
+		enabled: onExperimentSurface,
+		conditions
+	});
+	const permissionSheetExperiment = useIdExperiment({
+		key: "cameraPermissionSheet",
+		enabled: onExperimentSurface,
+		conditions
+	});
+	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-CIyRDFuY.js").then((module) => ({ default: module.MandatoryConsent })));
+var MandatoryConsent = z(() => import("../mandatoryConsent-gofFwZJb.js").then((module) => ({ default: module.MandatoryConsent })));
 var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 	usePreloadDisplayFont();
 	y(() => {
@@ -1311,19 +1591,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,

package/dist/id/styles.css

@@ -664,8 +664,8 @@
   width: max-content;
   left: 50%;
   bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));
+  animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;
   justify-content: center;
-  animation: .35s ease-in 3.5s forwards manualCaptureTooltipExit;
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -698,6 +698,27 @@
   color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  animation: none;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {
+  animation: none;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {
+  animation-name: manualCaptureTooltipExitAutoDismiss;
+}
+
 .IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {
   aspect-ratio: 42 / 30;
 }
@@ -718,6 +739,18 @@
   }
 }
 
+@keyframes manualCaptureTooltipExitAutoDismiss {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+
+  to {
+    opacity: .5;
+    transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);
+  }
+}
+
 .IncodeIdManualCaptureButton {
   bottom: var(--spacing-24, var(--spacing-24, 24px));
   z-index: 100;

package/dist/id-selfie-flow/id-selfie-flow.es.js

@@ -1,9 +1,9 @@
 import { o as useTranslation } from "../uiConfig-S9TzEYvT.js";
 import { d as T, p as d, v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { S as CameraView, St as useManager, _ as Permissions, bt as useModuleTerminalCallbacks, dt as Page, mt as TransitionSpinner, rt as IncodeComponent, s as preloadCaptureAnimations, ut as TerminalErrorPage } from "../extensibility-BjsMZ9wH.js";
-import { n as Title } from "../spinner-BIgpFkeM.js";
+import { At as useModuleTerminalCallbacks, C as Permissions, M as CameraView, Mt as useManager, bt as TerminalErrorPage, pt as IncodeComponent, s as preloadCaptureAnimations, wt as TransitionSpinner, xt as Page } from "../extensibility-C_4OSwNj.js";
+import { n as Title } from "../spinner-CKRC7C1a.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
-import { a as IdFlipModal, c as VideoSelfieTutorial, i as IdMask, l as useVideoSelfiePermissions, n as SwitchingCameraScreen, o as preloadIdFlipAnimation, r as StepsHeader, s as SelfieMask, t as VideoSelfieFinalSuccessScreen } from "../finalSuccessScreen-45lRExEd.js";
+import { a as IdFlipModal, c as VideoSelfieTutorial, i as IdMask, l as useVideoSelfiePermissions, n as SwitchingCameraScreen, o as preloadIdFlipAnimation, r as StepsHeader, s as SelfieMask, t as VideoSelfieFinalSuccessScreen } from "../finalSuccessScreen-BGvHT0Nb.js";
 import { createIdSelfieFlowManager, resolveIdSelfieFlowConfig, warmupIdSelfieFlowWasm } from "@incodetech/core/id-selfie-flow";
 import { facingModeForStep } from "@incodetech/core/video-selfie";
 //#region src/modules/id-selfie-flow/id-selfie-flow.tsx

package/dist/id-verification/id-verification.es.js

@@ -1,6 +1,6 @@
 import { y as u } from "../vendor-preact-BPXMFRom.js";
-import { St as useManager, bt as useModuleTerminalCallbacks, rt as IncodeComponent, u as ExpiredId } from "../extensibility-BjsMZ9wH.js";
-import { t as Spinner } from "../spinner-BIgpFkeM.js";
+import { At as useModuleTerminalCallbacks, Mt as useManager, pt as IncodeComponent, u as ExpiredId } from "../extensibility-C_4OSwNj.js";
+import { t as Spinner } from "../spinner-CKRC7C1a.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-BJ-HCYmb.js";
 import { createIdVerificationManager } from "@incodetech/core/id-verification";
 //#region src/modules/id-verification/id-verification.tsx

package/dist/{idOcr-D3ZJD8Qq.js → idOcr-KAbQjIuE.js}

@@ -1,7 +1,7 @@
 import { o as useTranslation } from "./uiConfig-S9TzEYvT.js";
 import { y as u } from "./vendor-preact-BPXMFRom.js";
-import { $ as VerificationResult, J as InputComposed, P as DateInputComposed, St as useManager, bt as useModuleTerminalCallbacks, dt as Page, j as RadioGroupComposed, rt as IncodeComponent, st as withStandaloneModuleBootstrap } from "./extensibility-BjsMZ9wH.js";
-import { A as Button } from "./dropdownComposed-BiU5szlF.js";
+import { At as useModuleTerminalCallbacks, Mt as useManager, V as RadioGroupComposed, W as DateInputComposed, _t as withStandaloneModuleBootstrap, it as InputComposed, lt as VerificationResult, pt as IncodeComponent, xt as Page } from "./extensibility-C_4OSwNj.js";
+import { A as Button } from "./dropdownComposed-Bp28bptM.js";
 import { t as registerIncodeModuleElement } from "./incodeModule-BJ-HCYmb.js";
 import { createIdOcrManager, getOcrFields } from "@incodetech/core/id-ocr";
 //#region src/modules/id-ocr/idOcrForm.tsx