@incodetech/web 0.0.0-dev-20260729-37d96d3d → 0.0.0-dev-20260729-9e7b030a

package/dist/flow/styles.css

@@ -4189,6 +4189,51 @@
     }
   }
 
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   .incode-container {
     width: 100%;
   }
@@ -4522,6 +4567,8 @@
     animation-fill-mode: both;
     animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
     animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
   }
 
   .resize {
@@ -5021,6 +5068,11 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -6111,6 +6163,216 @@
   display: flex;
 }
 
+.IncodeIdFlipCardLayout {
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent {
+  z-index: 10;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTopArea {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-24, var(--spacing-24, 24px));
+  padding-bottom: var(--spacing-40, var(--spacing-40, 40px));
+  z-index: 10;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCopy {
+  opacity: 0;
+  flex-direction: column;
+  align-items: center;
+  animation: .3s ease-out forwards incodeIdFlipCardFadeIn;
+  display: flex;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTitle {
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {
+  text-align: center;
+  max-width: 300px;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame {
+  overflow: hidden;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
+  width: clamp(180px, 30vh, 274px);
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {
+  --frame-border-color: var(--border-neutral-100);
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardScene {
+  perspective: 1200px;
+  width: 100%;
+  height: 100%;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  animation: 1s ease-in-out .6s forwards incodeIdFlipCardRotate;
+  position: relative;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {
+    animation: none;
+  }
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  backface-visibility: hidden;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {
+  transform: rotateY(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {
+    opacity: 0;
+    animation: .3s ease-out .6s forwards incodeIdFlipCardReducedMotionFadeIn;
+    transform: none;
+  }
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  animation: 1s ease-in-out .6s forwards incodeIdFlipCardFrontFade;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {
+    animation: .3s ease-out .6s forwards incodeIdFlipCardReducedMotionFadeOut;
+  }
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardAsset {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-4, var(--spacing-4, 4px));
+  display: block;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {
+  z-index: 10;
+  width: 100%;
+  max-width: 384px;
+  padding-top: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea .IncodeCaptureEncryptionLabel {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  white-space: nowrap;
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  display: flex;
+}
+
+@keyframes incodeIdFlipCardFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes incodeIdFlipCardRotate {
+  from {
+    transform: rotateY(0);
+  }
+
+  to {
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes incodeIdFlipCardFrontFade {
+  0%, 20% {
+    opacity: 1;
+  }
+
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
+@keyframes incodeIdFlipCardReducedMotionFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes incodeIdFlipCardReducedMotionFadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .IncodeCommonIssuesFullScreen .IncodeModalDialog {
   max-width: none;
   height: 100%;
@@ -6709,6 +6971,26 @@
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
+.IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {
+  animation: .3s ease-out forwards incodeIdProcessingResultFadeOut;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {
+    animation-duration: 1ms;
+  }
+}
+
+@keyframes incodeIdProcessingResultFadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .IncodeIdError {
   inset: var(--spacing-0, var(--spacing-none, 0px));
   z-index: 1000;

package/dist/geolocation/geolocation.es.js

@@ -1,12 +1,12 @@
-import { i as useTranslation, r as Trans } from "../uiConfig-CXjf9USC.js";
+import { i as useTranslation, r as Trans } from "../uiConfig-Ar3UWfPc.js";
 import { S as k, v as u } from "../vendor-preact-mvwZ8mJj.js";
-import { g as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useManager } from "../incodeComponent-DbuDabZM.js";
-import { t as Spacer } from "../spacer-xw40ekwM.js";
-import { r as Button } from "../incode-logo-BfEQiVwv.js";
-import { t as VerificationResult } from "../verificationResult-kFjl5_9K.js";
-import { t as ConnectionError } from "../connectionError-DJ9joMSc.js";
+import { _ as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-CaVm81Om.js";
+import { t as Spacer } from "../spacer-D52odyVb.js";
+import { r as Button } from "../incode-logo-B44XBmUF.js";
+import { t as VerificationResult } from "../verificationResult-Bn1_erQu.js";
+import { t as ConnectionError } from "../connectionError-DbDaaT-B.js";
 import { t as NumberedStep } from "../numberedStep-DUs77Gy3.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-CWPPP3RX.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B02hDGir.js";
 import { getBrowser, getDeviceClass } from "@incodetech/core/device";
 import { createGeolocationManager } from "@incodetech/core/geolocation";
 //#region src/modules/geolocation/LocationActiveIcon.tsx

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

@@ -1,12 +1,12 @@
-import { i as useTranslation } from "../uiConfig-CXjf9USC.js";
+import { i as useTranslation } from "../uiConfig-Ar3UWfPc.js";
 import { S as k, v as u } from "../vendor-preact-mvwZ8mJj.js";
-import { g as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useManager } from "../incodeComponent-DbuDabZM.js";
-import { t as Spacer } from "../spacer-xw40ekwM.js";
-import "../extensibility-BApUHk3S.js";
-import { t as AutoFocusTitle } from "../autoFocusTitle-iZIKJfYJ.js";
-import { t as VerificationResult } from "../verificationResult-kFjl5_9K.js";
-import { t as OtpInput } from "../otpInput-BwCTe5DW.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-CWPPP3RX.js";
+import { _ as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-CaVm81Om.js";
+import { t as Spacer } from "../spacer-D52odyVb.js";
+import "../extensibility-DtlPhQNL.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-CvZ2oKGw.js";
+import { t as VerificationResult } from "../verificationResult-Bn1_erQu.js";
+import { t as OtpInput } from "../otpInput-Dju8N2oD.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B02hDGir.js";
 import { createGovernmentValidationManager } from "@incodetech/core/government-validation";
 //#region src/modules/government-validation/governmentIncodeLogo.tsx
 var VerifiedByGovIncodeLogo = () => {

package/dist/{homeScreen-C13L_5E7.js → homeScreen-ayC3SHjN.js}

@@ -1,10 +1,10 @@
-import { i as useTranslation, l as getLanguageEmoji, n as useUiConfig, u as supportedLanguages } from "./uiConfig-CXjf9USC.js";
+import { i as useTranslation, l as getLanguageEmoji, n as useUiConfig, u as supportedLanguages } from "./uiConfig-Ar3UWfPc.js";
 import { _ as y, d as T, l as A, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
-import { t as Spacer } from "./spacer-xw40ekwM.js";
-import { r as Button } from "./incode-logo-BfEQiVwv.js";
-import { t as Modal } from "./modal-DWVP-wFJ.js";
-import { t as DropdownComposed } from "./dropdownComposed-Df6I0kfH.js";
-import "./dropdownComposed-ZNxRG80x.js";
+import { t as Spacer } from "./spacer-D52odyVb.js";
+import { r as Button } from "./incode-logo-B44XBmUF.js";
+import { t as Modal } from "./modal-B9tF0ldx.js";
+import { t as DropdownComposed } from "./dropdownComposed-B6FF4cVZ.js";
+import "./dropdownComposed-D_Nb9dcy.js";
 //#region src/shared/homeScreen/language.ts
 function capitalizeLabel(text, locale) {
 	const [firstCharacter, ...rest] = Array.from(text);

package/dist/{icons-DDslhJwK.js → icons-CnHH5IUi.js}

@@ -1,5 +1,5 @@
 import { m as g, v as u } from "./vendor-preact-mvwZ8mJj.js";
-import "./incode-logo-BfEQiVwv.js";
+import "./incode-logo-B44XBmUF.js";
 import "./successIcon-Bj8Y9CuI.js";
 //#region src/shared/icons/warningIcon.tsx
 var WarningIcon = ({ size = 32 }) => {

package/dist/id/id.es.js

@@ -1,18 +1,22 @@
-import { i as useTranslation } from "../uiConfig-CXjf9USC.js";
+import { i as useTranslation } from "../uiConfig-Ar3UWfPc.js";
 import { S as k, _ as y, c as z, d as T, l as A, o as P, p as d, v as u } from "../vendor-preact-mvwZ8mJj.js";
-import { g as useModuleTerminalCallbacks, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useManager } from "../incodeComponent-DbuDabZM.js";
-import { i as preloadAnimations, r as AnimatedAsset, s as Asset, u as cn } from "../spacer-xw40ekwM.js";
-import { t as Spinner } from "../spinner-BXQ7_eed.js";
-import { n as ErrorIcon, r as Button } from "../incode-logo-BfEQiVwv.js";
-import { a as IdNoAttempts, i as Capture, n as Chooser, o as IdExpired, r as Tutorial, s as IdError, t as FlipAnimation, v as ProgressBar } from "../extensibility-BApUHk3S.js";
-import { t as Processing } from "../processing-cWTcAmb0.js";
-import { u as ChevronRightIcon } from "../icons-DDslhJwK.js";
+import { _ as useModuleTerminalCallbacks, d as useTimeoutHandle, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-CaVm81Om.js";
+import { i as preloadAnimations, r as AnimatedAsset, s as Asset, t as Spacer, u as cn } from "../spacer-D52odyVb.js";
+import { n as Title, t as Spinner } from "../spinner-CEzuAsxR.js";
+import { n as ErrorIcon, r as Button } from "../incode-logo-B44XBmUF.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-DtlPhQNL.js";
+import { t as Processing } from "../processing-DIUdk0S7.js";
+import { r as LockIcon, u as ChevronRightIcon } from "../icons-CnHH5IUi.js";
 import { t as SuccessIcon } from "../successIcon-Bj8Y9CuI.js";
-import { i as ErrorContent } from "../tutorial-CmnpJOSN.js";
-import { t as Permissions } from "../permissions-B59Yz1WE.js";
-import { t as PdfViewer } from "../pdfViewer-CEamEnkS.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-CWPPP3RX.js";
-import { t as Tabs } from "../tabs-BXS3PjHE.js";
+import { i as ErrorContent } from "../tutorial-CiSCBe8S.js";
+import { t as Permissions } from "../permissions-CVWfTL-t.js";
+import { t as PdfViewer } from "../pdfViewer-CvCy4uwi.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B02hDGir.js";
+import { t as SvgIdBackOfCard } from "../id-back-of-card-DO593HH8.js";
+import { t as SvgIdBackOfCardVertical } from "../id-back-of-card-vertical-DArEQ0hE.js";
+import { t as SvgIdFrontOfCard } from "../id-front-of-card-Bcit7Pnq.js";
+import { t as SvgIdFrontOfCardVertical } from "../id-front-of-card-vertical-Bcr-KXcl.js";
+import { t as Tabs } from "../tabs-CbAXowHB.js";
 import { createIdCaptureManager } from "@incodetech/core/id";
 //#region src/shared/fonts/preloadDisplayFont.ts
 function preloadDisplayFont() {
@@ -98,6 +102,140 @@ var AgeVerification = ({ manager }) => {
 	});
 };
 //#endregion
+//#region src/modules/id/idFlipCard.tsx
+var TERMINAL_ANIMATION_NAMES = new Set(["incodeIdFlipCardRotate", "incodeIdFlipCardReducedMotionFadeIn"]);
+var HOLD_AFTER_FLIP_MS = 500;
+var HANDOFF_WATCHDOG_MS = 3500;
+var IdFlipCard = ({ manager, direction, imageUrl, orientation }) => {
+	const { t } = useTranslation();
+	const hasCompletedRef = A(false);
+	const [isFlipping, setIsFlipping] = d(false);
+	const { schedule: scheduleHandoff } = useTimeoutHandle();
+	const titleRef = A(null);
+	y(() => {
+		titleRef.current?.focus();
+	}, []);
+	const complete = () => {
+		if (hasCompletedRef.current) return;
+		hasCompletedRef.current = true;
+		if (direction === "toBack") manager.continueToBack();
+		else manager.continueToFront();
+	};
+	const scheduleComplete = () => scheduleHandoff(complete, HOLD_AFTER_FLIP_MS);
+	const handleAnimationState = (fn) => (event) => {
+		if (TERMINAL_ANIMATION_NAMES.has(event.animationName)) fn();
+	};
+	y(() => {
+		if (!imageUrl) {
+			complete();
+			return;
+		}
+		scheduleHandoff(complete, HANDOFF_WATCHDOG_MS);
+	}, []);
+	const isVertical = orientation === "vertical";
+	const BackOfCard = isVertical ? SvgIdBackOfCardVertical : SvgIdBackOfCard;
+	const FrontOfCard = isVertical ? SvgIdFrontOfCardVertical : SvgIdFrontOfCard;
+	let titleKey = "";
+	let subtitleKey = "";
+	if (direction === "toBack") {
+		titleKey = "idv2.flipAnimation.title";
+		subtitleKey = "idv2.flipAnimation.subtitleToBack";
+	} else {
+		titleKey = "idv2.flipAnimation.titleToFront";
+		subtitleKey = "idv2.capture.processing.successBackSubtitleScanFront";
+	}
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		hideFooterBranding: true,
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeIdFlipCardLayout",
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeIdFlipCardLayoutContent",
+				children: [
+					/* @__PURE__ */ u("div", {
+						class: "IncodeIdFlipCardTopArea",
+						children: /* @__PURE__ */ u("div", {
+							class: "IncodeIdFlipCardCopy",
+							role: "status",
+							children: [
+								/* @__PURE__ */ u(Title, {
+									ref: titleRef,
+									tabIndex: -1,
+									className: "IncodeIdFlipCardTitle",
+									children: t(titleKey)
+								}),
+								/* @__PURE__ */ u(Spacer, { size: 12 }),
+								/* @__PURE__ */ u("p", {
+									class: "IncodeIdFlipCardSubtitle",
+									children: t(subtitleKey)
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ u(CaptureFrame, {
+						orientation,
+						mode: "front",
+						state: "success",
+						className: cn(isFlipping && "IncodeIdFlipCardFrameFlipping"),
+						children: imageUrl && /* @__PURE__ */ u("div", {
+							class: "IncodeIdFlipCardScene",
+							"data-testid": "id-flip-card-scene",
+							onAnimationStart: handleAnimationState(() => setIsFlipping(true)),
+							onAnimationEnd: handleAnimationState(scheduleComplete),
+							children: /* @__PURE__ */ u("div", {
+								class: "IncodeIdFlipCardCard",
+								children: [/* @__PURE__ */ u("div", {
+									class: "IncodeIdFlipCardFace IncodeIdFlipCardFaceFront",
+									children: /* @__PURE__ */ u("img", {
+										src: imageUrl,
+										alt: "",
+										"aria-hidden": "true",
+										class: "IncodeIdFlipCardImage"
+									})
+								}), /* @__PURE__ */ u("div", {
+									class: "IncodeIdFlipCardFace IncodeIdFlipCardFaceBack",
+									children: direction === "toBack" ? /* @__PURE__ */ u(BackOfCard, { className: "IncodeIdFlipCardAsset" }) : /* @__PURE__ */ u(FrontOfCard, { className: "IncodeIdFlipCardAsset" })
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ u("div", {
+						class: "IncodeIdFlipCardBottomArea",
+						children: /* @__PURE__ */ u("div", {
+							class: "IncodeCaptureEncryptionLabel",
+							children: [/* @__PURE__ */ u(LockIcon, { className: "IncodeCaptureEncryptionIcon" }), /* @__PURE__ */ u("span", { children: t("v2.capture.label") })]
+						})
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/modules/id/flip-transition/idFlipTransition.tsx
+/**
+* Renders the transition between front and back capture. Reads the
+* `flipInCapturedState` experiment lazily (only once a side is actually
+* finished) — treatment (`test`, non-passport) replaces the generic Lottie
+* flip with `IdFlipCard`'s continuous CSS 3D flip built from the user's own
+* captured photo; control (or passport) keeps `FlipAnimation`.
+*/
+var IdFlipTransition = ({ manager, state }) => {
+	const { params } = useIdExperiment({ key: "flipInCapturedState" });
+	const flipInCapturedState = params.flipInCaptureStateBehavior === "test";
+	const direction = state.status === "frontFinished" ? "toBack" : "toFront";
+	if (flipInCapturedState && state.mode !== "passport") return /* @__PURE__ */ u(IdFlipCard, {
+		manager,
+		direction,
+		imageUrl: state.previewImageUrl,
+		orientation: state.orientation
+	});
+	return /* @__PURE__ */ u(FlipAnimation, {
+		manager,
+		direction
+	});
+};
+//#endregion
 //#region src/modules/id/digitalIdUpload/useFilePreviewUrl.ts
 /**
 * Produces a stable object-URL for the given file and revokes it on cleanup
@@ -954,10 +1092,17 @@ function preloadIdTutorialAssets() {
 		"id.tutorial.back",
 		"id.tutorial.passport"
 	]);
+	import("../id-tutorial-B5rsdHAH.js");
+	import("../back-tutorial-v9Hk3XFo.js");
+	import("../passport-tutorial-CDUEHwmA.js");
+	import("../id-back-of-card-DO593HH8.js").then((n) => n.n);
+	import("../id-back-of-card-vertical-DArEQ0hE.js").then((n) => n.n);
+	import("../id-front-of-card-Bcit7Pnq.js").then((n) => n.n);
+	import("../id-front-of-card-vertical-Bcr-KXcl.js").then((n) => n.n);
 }
 //#endregion
 //#region src/modules/id/id.tsx
-var MandatoryConsent = z(() => import("../mandatoryConsent-Cg_zIcY1.js").then((module) => ({ default: module.MandatoryConsent })));
+var MandatoryConsent = z(() => import("../mandatoryConsent-CfBlj5BM.js").then((module) => ({ default: module.MandatoryConsent })));
 var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 	usePreloadDisplayFont();
 	const { t } = useTranslation();
@@ -993,13 +1138,9 @@ var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 		manager,
 		permissionStatus: state.permissionStatus
 	});
-	if (state.status === "frontFinished") return /* @__PURE__ */ u(FlipAnimation, {
-		manager,
-		direction: "toBack"
-	});
-	if (state.status === "backFinished") return /* @__PURE__ */ u(FlipAnimation, {
+	if (state.status === "frontFinished" || state.status === "backFinished") return /* @__PURE__ */ u(IdFlipTransition, {
 		manager,
-		direction: "toFront"
+		state
 	});
 	if (state.status === "capture") return /* @__PURE__ */ u(Capture, {
 		manager,