@incodetech/web 0.0.0-dev-20260223-138ae97 → 0.0.0-dev-20260224-1accab3

package/dist/id/id.es.js

@@ -1,10 +1,10 @@
-import { u as e, S as C, B as h, c as I, r as A, a as R } from "../incodeModule-DPTWfWvu.js";
-import { createIdCaptureManager as S } from "@incodetech/core/id";
-import { d as L, y as f, k as z, D as U, A as Z } from "../vendor-preact-CjD4WiuC.js";
+import { u as e, S as C, B as I, c as f, r as A, a as R } from "../incodeModule-DPTWfWvu.js";
+import { createIdCaptureManager as z } from "@incodetech/core/id";
+import { d as L, y as m, k as U, D as N, A as Z } from "../vendor-preact-CjD4WiuC.js";
 import "@incodetech/core";
-import { L as b, B as N, P as O } from "../baseTutorial-BdLJBzYE.js";
-import { P as x, I as G } from "../incodeComponent-3T8Qyjnt.js";
-import { P as $ } from "../processing-Dnu3slQ9.js";
+import { L as b, B as O, P as G } from "../baseTutorial-BdLJBzYE.js";
+import { P as x, I as $ } from "../incodeComponent-3T8Qyjnt.js";
+import { P as K } from "../processing-Dnu3slQ9.js";
 import "../instance-B-q0ZREN.js";
 import { u as c } from "../useTranslation-CD9ZxEvP.js";
 import { T as _, S as Q } from "../spinner-C-EwvA9l.js";
@@ -115,7 +115,7 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       )
     ]
   }
-), K = ({
+), W = ({
   className: n
 }) => /* @__PURE__ */ e(
   "svg",
@@ -166,7 +166,7 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       )
     ]
   }
-), W = ({ className: n }) => /* @__PURE__ */ e(
+), X = ({ className: n }) => /* @__PURE__ */ e(
   "svg",
   {
     width: "64",
@@ -187,12 +187,12 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       )
     ]
   }
-), X = ({
+), Y = ({
   onClose: n,
-  onTakeManually: t
+  onTakeManually: i
 }) => {
-  const { t: i } = c(), r = () => {
-    t(), n();
+  const { t } = c(), r = () => {
+    i(), n();
   };
   return /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesModal", children: /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesModalContent", children: [
     /* @__PURE__ */ e("header", { class: "IncodeCommonIssuesHeader", children: /* @__PURE__ */ e(
@@ -201,49 +201,49 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
         type: "button",
         class: "IncodeCommonIssuesCloseButton",
         onClick: n,
-        "aria-label": i("commonIssues.close"),
+        "aria-label": t("commonIssues.close"),
         children: /* @__PURE__ */ e(q, {})
       }
     ) }),
     /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesContent", children: [
-      /* @__PURE__ */ e(W, { className: "IncodeCommonIssuesQuestionIcon" }),
+      /* @__PURE__ */ e(X, { className: "IncodeCommonIssuesQuestionIcon" }),
       /* @__PURE__ */ e(C, { size: 12 }),
-      /* @__PURE__ */ e("h2", { class: "IncodeCommonIssuesTitle", children: i("commonIssues.commonIssues") }),
+      /* @__PURE__ */ e("h2", { class: "IncodeCommonIssuesTitle", children: t("commonIssues.commonIssues") }),
       /* @__PURE__ */ e(C, { size: 24 }),
       /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCards", children: [
         /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCard", children: [
           /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardIcon", children: /* @__PURE__ */ e(J, {}) }),
           /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardText", children: [
-            /* @__PURE__ */ e("h5", { class: "IncodeCommonIssuesCardTitle", children: i("commonIssues.glarePresent") }),
-            /* @__PURE__ */ e("p", { class: "IncodeCommonIssuesCardBody", children: i("commonIssues.glarePresentDescription") })
+            /* @__PURE__ */ e("h5", { class: "IncodeCommonIssuesCardTitle", children: t("commonIssues.glarePresent") }),
+            /* @__PURE__ */ e("p", { class: "IncodeCommonIssuesCardBody", children: t("commonIssues.glarePresentDescription") })
           ] })
         ] }),
         /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCard", children: [
           /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardIcon", children: /* @__PURE__ */ e(j, {}) }),
           /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardText", children: [
-            /* @__PURE__ */ e("h3", { class: "IncodeCommonIssuesCardTitle", children: i("commonIssues.blurPresent") }),
-            /* @__PURE__ */ e("p", { class: "IncodeCommonIssuesCardBody", children: i("commonIssues.blurPresentDescription") })
+            /* @__PURE__ */ e("h3", { class: "IncodeCommonIssuesCardTitle", children: t("commonIssues.blurPresent") }),
+            /* @__PURE__ */ e("p", { class: "IncodeCommonIssuesCardBody", children: t("commonIssues.blurPresentDescription") })
           ] })
         ] }),
         /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCard", children: [
-          /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardIcon", children: /* @__PURE__ */ e(K, {}) }),
+          /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardIcon", children: /* @__PURE__ */ e(W, {}) }),
           /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesCardText", children: [
-            /* @__PURE__ */ e("h3", { class: "IncodeCommonIssuesCardTitle", children: i("commonIssues.notReadable") }),
-            /* @__PURE__ */ e("p", { class: "IncodeCommonIssuesCardBody", children: i("commonIssues.notReadableDescription") })
+            /* @__PURE__ */ e("h3", { class: "IncodeCommonIssuesCardTitle", children: t("commonIssues.notReadable") }),
+            /* @__PURE__ */ e("p", { class: "IncodeCommonIssuesCardBody", children: t("commonIssues.notReadableDescription") })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ e("div", { class: "IncodeCommonIssuesButtons", children: [
         /* @__PURE__ */ e(
-          h,
+          I,
           {
             variant: "link",
             onClick: r,
             class: "IncodeCommonIssuesTakeManually",
-            children: i("commonIssues.takeManually")
+            children: t("commonIssues.takeManually")
           }
         ),
-        /* @__PURE__ */ e(h, { onClick: n, class: "IncodeCommonIssuesTryAgain", children: i("commonIssues.tryAgain") })
+        /* @__PURE__ */ e(I, { onClick: n, class: "IncodeCommonIssuesTryAgain", children: t("commonIssues.tryAgain") })
       ] })
     ] })
   ] }) });
@@ -265,18 +265,18 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       }
     )
   }
-), Y = ({
+), e1 = ({
   orientation: n,
-  mode: t,
-  state: i,
+  mode: i,
+  state: t,
   children: r,
   className: o
 }) => {
-  const l = n !== "vertical" || t === "passport", a = t === "passport", s = `IncodeCaptureFrame${i.charAt(0).toUpperCase() + i.slice(1)}`;
+  const l = n !== "vertical" || i === "passport", a = i === "passport", s = `IncodeCaptureFrame${t.charAt(0).toUpperCase() + t.slice(1)}`;
   return /* @__PURE__ */ e(
     "div",
     {
-      class: I(
+      class: f(
         "IncodeCaptureFrame",
         l ? "IncodeCaptureFrameHorizontal" : "IncodeCaptureFrameVertical",
         s,
@@ -286,10 +286,10 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       children: r
     }
   );
-}, T = ({
+}, k = ({
   imageUrl: n,
-  orientation: t,
-  mode: i,
+  orientation: i,
+  mode: t,
   borderState: r,
   topContent: o,
   bottomContent: l,
@@ -299,10 +299,10 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
   return /* @__PURE__ */ e(x, { hideHeader: !0, hideFooterBranding: !0, children: /* @__PURE__ */ e("div", { class: "IncodeIdProcessingLayout", children: /* @__PURE__ */ e("div", { class: "IncodeIdProcessingLayoutContent", children: [
     o && /* @__PURE__ */ e("div", { class: "IncodeIdProcessingTopArea", children: o }),
     /* @__PURE__ */ e(
-      Y,
+      e1,
       {
-        orientation: t,
-        mode: i === "id" ? "front" : i,
+        orientation: i,
+        mode: t === "id" ? "front" : t,
         state: r,
         children: [
           /* @__PURE__ */ e(
@@ -325,24 +325,24 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       l
     ] })
   ] }) }) });
-}, e1 = ({
+}, t1 = ({
   imageUrl: n,
-  progress: t,
-  orientation: i,
+  progress: i,
+  orientation: t,
   mode: r
 }) => {
-  const { t: o } = c(), l = i !== "vertical" || r === "passport", [a, s] = L(null);
-  return f(() => {
+  const { t: o } = c(), l = t !== "vertical" || r === "passport", [a, s] = L(null);
+  return m(() => {
     l ? import("../id-laser-h-BBV3r3rz.js").then((d) => {
       s(d.default);
     }) : import("../id-laser-v-BTHJaSfx.js").then((d) => {
       s(d.default);
     });
   }, [l]), /* @__PURE__ */ e(
-    T,
+    k,
     {
       imageUrl: n,
-      orientation: i,
+      orientation: t,
       mode: r,
       borderState: "analyzing",
       topContent: /* @__PURE__ */ e("div", { class: "IncodeAnalyzingContent", children: [
@@ -350,7 +350,7 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
           "div",
           {
             class: "IncodeAnalyzingProgressFill",
-            style: { width: `${t}%` }
+            style: { width: `${i}%` }
           }
         ) }),
         /* @__PURE__ */ e("h2", { class: "IncodeAnalyzingTitle", children: o("idv2.capture.processing.analyzing") })
@@ -365,7 +365,7 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       ) : null
     }
   );
-}, t1 = ({ className: n }) => /* @__PURE__ */ e(
+}, i1 = ({ className: n }) => /* @__PURE__ */ e(
   "svg",
   {
     class: n,
@@ -382,7 +382,7 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       }
     )
   }
-), V = ({ className: n }) => /* @__PURE__ */ e(
+), F = ({ className: n }) => /* @__PURE__ */ e(
   "svg",
   {
     class: n,
@@ -399,10 +399,10 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       }
     )
   }
-), k = ({
+), V = ({
   variant: n,
-  imageUrl: t,
-  orientation: i,
+  imageUrl: i,
+  orientation: t,
   mode: r,
   title: o,
   subtitle: l,
@@ -410,86 +410,86 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
   onButtonClick: s,
   attemptsRemaining: d
 }) => {
-  const { t: m } = c();
+  const { t: u } = c();
   return /* @__PURE__ */ e(
-    T,
+    k,
     {
-      imageUrl: t,
-      orientation: i,
+      imageUrl: i,
+      orientation: t,
       mode: r,
       borderState: n,
       topContent: /* @__PURE__ */ e("div", { class: "IncodeIdProcessingResultContent", children: [
-        n === "success" ? /* @__PURE__ */ e(t1, { className: "IncodeIdProcessingResultIcon" }) : /* @__PURE__ */ e(V, { className: "IncodeIdProcessingResultIcon" }),
+        n === "success" ? /* @__PURE__ */ e(i1, { className: "IncodeIdProcessingResultIcon" }) : /* @__PURE__ */ e(F, { className: "IncodeIdProcessingResultIcon" }),
         /* @__PURE__ */ e(C, { size: 16 }),
         o && /* @__PURE__ */ e("h2", { class: "IncodeIdProcessingResultTitle", children: o }),
-        l && /* @__PURE__ */ e(z, { children: [
+        l && /* @__PURE__ */ e(U, { children: [
           /* @__PURE__ */ e(C, { size: 12 }),
           /* @__PURE__ */ e("p", { class: "IncodeIdProcessingResultSubtitle", children: l })
         ] })
       ] }),
       bottomContent: /* @__PURE__ */ e("div", { class: "IncodeIdProcessingResultButtonContainer", children: [
-        d !== void 0 && d > 0 && /* @__PURE__ */ e("p", { class: "IncodeIdProcessingResultAttempts", children: m("v2.idError.attemptsLeft", {
+        d !== void 0 && d > 0 && /* @__PURE__ */ e("p", { class: "IncodeIdProcessingResultAttempts", children: u("v2.idError.attemptsLeft", {
           count: d
         }) }),
-        /* @__PURE__ */ e(h, { onClick: s, "data-testid": "retry-button", children: a })
+        /* @__PURE__ */ e(I, { onClick: s, "data-testid": "retry-button", children: a })
       ] })
     }
   );
-}, i1 = ({ manager: n, state: t }) => {
-  const { t: i } = c();
-  if (!t.previewImageUrl)
+}, n1 = ({ manager: n, state: i }) => {
+  const { t } = c();
+  if (!i.previewImageUrl)
     return null;
-  const r = t.currentMode === "passport" ? "passport" : "id";
+  const r = i.currentMode === "passport" ? "passport" : "id", o = () => i.needsBackCapture ? t("v2.idSuccess.subtitle") : i.needsFrontCapture ? t("idv2.capture.processing.successBackSubtitleScanFront") : t("v2.idSuccess.subtitleBack"), l = () => i.needsBackCapture ? t("idv2.capture.processing.scanBack") : i.needsFrontCapture ? t("idv2.capture.processing.scanFront") : t("idv2.capturePreview.continue");
   return /* @__PURE__ */ e(
-    k,
+    V,
     {
       variant: "success",
-      imageUrl: t.previewImageUrl,
-      orientation: t.orientation,
+      imageUrl: i.previewImageUrl,
+      orientation: i.orientation,
       mode: r,
-      title: i("v2.idSuccess.title"),
-      subtitle: t.needsBackCapture ? i("v2.idSuccess.subtitle") : i("v2.idSuccess.subtitleBack"),
-      buttonText: t.needsBackCapture ? i("idv2.capture.processing.scanBack") : i("idv2.capturePreview.continue"),
+      title: t("v2.idSuccess.title"),
+      subtitle: o(),
+      buttonText: l(),
       onButtonClick: () => n.nextStep()
     }
   );
-}, D = ({ manager: n, state: t, ...i }) => {
+}, D = ({ manager: n, state: i, ...t }) => {
   const { t: r } = c();
-  if (t.status === "error")
+  if (i.status === "error")
     return /* @__PURE__ */ e("div", { class: "IncodeIdError", children: [
-      /* @__PURE__ */ e("div", { class: "IncodeIdErrorMessage", children: t.error }),
-      /* @__PURE__ */ e(h, { onClick: () => n.reset(), "data-testid": "retry-button", children: r("idv2.capturePreview.retry") })
+      /* @__PURE__ */ e("div", { class: "IncodeIdErrorMessage", children: i.error }),
+      /* @__PURE__ */ e(I, { onClick: () => n.reset(), "data-testid": "retry-button", children: r("idv2.capturePreview.retry") })
     ] });
-  const o = t.currentMode === "passport" ? "passport" : "id";
-  return t.previewImageUrl ? /* @__PURE__ */ e(
-    k,
+  const o = i.currentMode === "passport" ? "passport" : "id";
+  return i.previewImageUrl ? /* @__PURE__ */ e(
+    V,
     {
       variant: "error",
-      imageUrl: t.previewImageUrl,
-      orientation: t.orientation,
+      imageUrl: i.previewImageUrl,
+      orientation: i.orientation,
       mode: o,
-      title: t.uploadErrorMessage,
-      subtitle: t.uploadErrorDescription,
-      buttonText: t.canRetry ? r("idv2.capturePreview.tryAgain") : r("idv2.capturePreview.continue"),
+      title: i.uploadErrorMessage,
+      subtitle: i.uploadErrorDescription,
+      buttonText: i.canRetry ? r("idv2.capturePreview.tryAgain") : r("idv2.capturePreview.continue"),
       onButtonClick: () => n.continueFromError(),
-      attemptsRemaining: t.attemptsRemaining
+      attemptsRemaining: i.attemptsRemaining
     }
   ) : null;
-}, n1 = ({ manager: n }) => {
-  const { t } = c(), i = () => {
+}, r1 = ({ manager: n }) => {
+  const { t: i } = c(), t = () => {
     n.retryCapture();
   };
   return /* @__PURE__ */ e(x, { hideHeader: !0, hideFooterBranding: !0, className: "IncodeIdExpiredPage", children: [
     /* @__PURE__ */ e("div", { class: "IncodeIdExpiredContent", children: [
-      /* @__PURE__ */ e(V, { className: "IncodeIdExpiredIcon" }),
-      /* @__PURE__ */ e(_, { className: "IncodeIdExpiredTitle", children: t("idv2.capture.notifications.expiredId") }),
+      /* @__PURE__ */ e(F, { className: "IncodeIdExpiredIcon" }),
+      /* @__PURE__ */ e(_, { className: "IncodeIdExpiredTitle", children: i("idv2.capture.notifications.expiredId") }),
       /* @__PURE__ */ e(C, { size: 12 }),
-      /* @__PURE__ */ e("p", { class: "IncodeIdExpiredSubtitle", children: t("idv2.capture.notifications.useDifferent") }),
+      /* @__PURE__ */ e("p", { class: "IncodeIdExpiredSubtitle", children: i("idv2.capture.notifications.useDifferent") }),
       /* @__PURE__ */ e(C, { size: 80 })
     ] }),
-    /* @__PURE__ */ e("div", { class: "IncodeIdExpiredButtonContainer", children: /* @__PURE__ */ e(h, { variant: "primary", onClick: i, children: t("idv2.unacceptedId.tryAgain") }) })
+    /* @__PURE__ */ e("div", { class: "IncodeIdExpiredButtonContainer", children: /* @__PURE__ */ e(I, { variant: "primary", onClick: t, children: i("idv2.unacceptedId.tryAgain") }) })
   ] });
-}, r1 = ({ className: n }) => /* @__PURE__ */ e(
+}, o1 = ({ className: n }) => /* @__PURE__ */ e(
   "svg",
   {
     width: "30",
@@ -520,8 +520,8 @@ const j = ({ className: n }) => /* @__PURE__ */ e(
       )
     ]
   }
-), u = /* @__PURE__ */ new Map();
-let E = !1;
+), p = /* @__PURE__ */ new Map();
+let T = !1;
 const w = {
   blur: () => import("../blurdevicelottie-_BZRug1c.js"),
   glare: () => import("../glaredevicelottie-DLuIStvb.js"),
@@ -529,90 +529,90 @@ const w = {
   front: () => import("../frontdevicelottie-KhKxT5n9.js"),
   back: () => import("../backdevicelottie-B4NgyWmX.js")
 };
-function F(n) {
-  E || (E = !0, Promise.all([
+function S(n) {
+  T || (T = !0, Promise.all([
     w.blur(),
     w.glare(),
     w.align(),
     w.front(),
     w.back()
-  ]).then(([t, i, r, o, l]) => {
-    u.set("blur", t.default), u.set("glare", i.default), u.set("align", r.default), u.set("front", o.default), u.set("back", l.default), n?.();
+  ]).then(([i, t, r, o, l]) => {
+    p.set("blur", i.default), p.set("glare", t.default), p.set("align", r.default), p.set("front", o.default), p.set("back", l.default), n?.();
   }).catch(() => {
   }));
 }
-function o1() {
-  F();
-}
 function l1() {
-  f(() => {
-    o1();
+  S();
+}
+function s1() {
+  m(() => {
+    l1();
   }, []);
 }
-function s1(n, t) {
-  const { t: i } = c(), [, r] = L(0);
-  if (f(() => {
-    F(() => r((o) => o + 1));
+function a1(n, i) {
+  const { t } = c(), [, r] = L(0);
+  if (m(() => {
+    S(() => r((o) => o + 1));
   }, []), n === "blur")
     return {
-      title: i("idv2.capture.notifications.blur.title"),
-      description: i("idv2.capture.notifications.blur.description"),
-      animationData: u.get("blur") ?? null
+      title: t("idv2.capture.notifications.blur.title"),
+      description: t("idv2.capture.notifications.blur.description"),
+      animationData: p.get("blur") ?? null
     };
   if (n === "glare")
     return {
-      title: i("idv2.capture.notifications.glare.title"),
-      description: i("idv2.capture.notifications.glare.description"),
-      animationData: u.get("glare") ?? null
+      title: t("idv2.capture.notifications.glare.title"),
+      description: t("idv2.capture.notifications.glare.description"),
+      animationData: p.get("glare") ?? null
     };
   if (n === "farAway")
     return {
-      title: i("idv2.capture.notifications.notAligned.title"),
-      description: i("idv2.capture.notifications.notAligned.description"),
-      animationData: u.get("align") ?? null
+      title: t("idv2.capture.notifications.notAligned.title"),
+      description: t("idv2.capture.notifications.notAligned.description"),
+      animationData: p.get("align") ?? null
     };
   if (n === "wrongSide") {
-    const o = t === "back";
+    const o = i === "back";
     return {
-      title: i(o ? "idv2.capture.notifications.showBack.title" : "idv2.capture.notifications.showFront.title"),
-      description: i(o ? "idv2.capture.notifications.showBack.description" : "idv2.capture.notifications.showFront.description"),
-      animationData: u.get(o ? "back" : "front") ?? null
+      title: t(o ? "idv2.capture.notifications.showBack.title" : "idv2.capture.notifications.showFront.title"),
+      description: t(o ? "idv2.capture.notifications.showBack.description" : "idv2.capture.notifications.showFront.description"),
+      animationData: p.get(o ? "back" : "front") ?? null
     };
   }
   return null;
 }
-const a1 = ({
+const c1 = ({
   detectionStatus: n,
-  mode: t
+  mode: i
 }) => {
-  const i = s1(n, t);
-  return i ? /* @__PURE__ */ e("div", { class: I("IncodeIdCaptureNotification"), children: /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationContent", children: [
-    /* @__PURE__ */ e("div", { class: I("IncodeIdCaptureNotificationText"), children: [
-      /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationTitle", children: i.title }),
-      i.description && /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationDescription", children: i.description })
+  const t = a1(n, i);
+  return t ? /* @__PURE__ */ e("div", { class: f("IncodeIdCaptureNotification"), children: /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationContent", children: [
+    /* @__PURE__ */ e("div", { class: f("IncodeIdCaptureNotificationText"), children: [
+      /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationTitle", children: t.title }),
+      t.description && /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationDescription", children: t.description })
     ] }),
     /* @__PURE__ */ e(C, { size: 16, direction: "horizontal" }),
-    i.animationData && /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationAnimation", children: /* @__PURE__ */ e(b, { animationData: i.animationData, loop: !0 }) })
+    t.animationData && /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationAnimation", children: /* @__PURE__ */ e(b, { animationData: t.animationData, loop: !0 }) })
   ] }) }) : null;
-}, c1 = U(
+}, d1 = N(
   ({
     mode: n,
-    orientation: t,
-    detectionStatus: i,
+    orientation: i,
+    detectionStatus: t,
     counterValue: r,
     isCapturing: o,
     onOpenHelp: l
   }, a) => {
     const { t: s } = c();
-    l1();
-    const d = i === "detecting" || i === "idNotDetected" || i === "manualCapture", m = () => o || i === "capturing" ? "Capturing" : i === "blur" || i === "glare" || i === "wrongSide" || i === "farAway" ? "Error" : "Idle", y = () => {
-      if (o || i === "capturing")
+    s1();
+    const d = t === "detecting" || t === "idNotDetected" || t === "manualCapture", u = () => o || t === "capturing" ? "Capturing" : t === "blur" || t === "glare" || t === "wrongSide" || t === "farAway" ? "Error" : "Idle", y = () => {
+      if (o || t === "capturing")
         return {
           title: s("idv2.capture.takingPhoto"),
           subtitle: s("idv2.capture.dontMove")
         };
       if (d) {
-        const M = i === "manualCapture";
+        const M = t === "manualCapture";
         return n === "passport" ? {
           title: s("idv2.capture.fillFramePassport"),
           subtitle: M ? "" : s("idv2.capture.v2.autoCapture")
@@ -625,19 +625,19 @@ const a1 = ({
         };
       }
       return null;
-    }, B = m(), v = y(), g = n === "passport", p = t !== "vertical" || g;
+    }, B = u(), v = y(), g = n === "passport", h = i !== "vertical" || g;
     return /* @__PURE__ */ e(
       "div",
       {
-        class: I(
+        class: f(
           "IncodeCaptureOverlay",
-          !p && "IncodeCaptureOverlayVertical"
+          !h && "IncodeCaptureOverlayVertical"
         ),
         children: [
           /* @__PURE__ */ e(
-            d1,
+            u1,
             {
-              detectionStatus: i,
+              detectionStatus: t,
               mode: n,
               topContent: v
             }
@@ -646,9 +646,9 @@ const a1 = ({
             "div",
             {
               ref: a,
-              class: I(
+              class: f(
                 "IncodeCaptureFrame",
-                p ? "IncodeCaptureFrameHorizontal" : "IncodeCaptureFrameVertical",
+                h ? "IncodeCaptureFrameHorizontal" : "IncodeCaptureFrameVertical",
                 `IncodeCaptureFrame${B}`,
                 g && "IncodeCaptureFramePassport"
               ),
@@ -660,40 +660,40 @@ const a1 = ({
       }
     );
   }
-), d1 = ({ detectionStatus: n, mode: t, topContent: i }) => /* @__PURE__ */ e("div", { class: "IncodeCaptureTopSection", children: [
-  /* @__PURE__ */ e(a1, { detectionStatus: n, mode: t }),
+), u1 = ({ detectionStatus: n, mode: i, topContent: t }) => /* @__PURE__ */ e("div", { class: "IncodeCaptureTopSection", children: [
+  /* @__PURE__ */ e(c1, { detectionStatus: n, mode: i }),
   /* @__PURE__ */ e(
     "div",
     {
-      class: I(
+      class: f(
         "IncodeCaptureTopText",
-        !i && "IncodeCaptureTopTextHidden"
+        !t && "IncodeCaptureTopTextHidden"
       ),
       children: [
-        /* @__PURE__ */ e("div", { class: "IncodeCaptureTopTextTitle", children: i?.title || " " }),
-        /* @__PURE__ */ e("div", { class: "IncodeCaptureTopTextSubtitle", children: i?.subtitle || " " })
+        /* @__PURE__ */ e("div", { class: "IncodeCaptureTopTextTitle", children: t?.title || " " }),
+        /* @__PURE__ */ e("div", { class: "IncodeCaptureTopTextSubtitle", children: t?.subtitle || " " })
       ]
     }
   )
 ] }), C1 = ({ onOpenHelp: n }) => {
-  const { t } = c();
+  const { t: i } = c();
   return /* @__PURE__ */ e("div", { class: "IncodeCaptureBottomSection", children: [
     /* @__PURE__ */ e("div", { class: "IncodeCaptureEncryptionLabel", children: [
       /* @__PURE__ */ e(P, { className: "IncodeCaptureEncryptionIcon" }),
-      /* @__PURE__ */ e("span", { children: t("v2.capture.label") })
+      /* @__PURE__ */ e("span", { children: i("v2.capture.label") })
     ] }),
     /* @__PURE__ */ e("div", { class: "IncodeCaptureHelpButton", children: /* @__PURE__ */ e(
-      h,
+      I,
       {
         variant: "link",
         onClick: n,
-        "aria-label": t("idv2.needHelp.open"),
+        "aria-label": i("idv2.needHelp.open"),
         class: "IncodeCaptureHelpButtonInner",
-        children: /* @__PURE__ */ e(r1, {})
+        children: /* @__PURE__ */ e(o1, {})
       }
     ) })
   ] });
-}, u1 = ({
+}, p1 = ({
   className: n
 }) => /* @__PURE__ */ e(
   "svg",
@@ -718,11 +718,11 @@ const a1 = ({
       /* @__PURE__ */ e("circle", { cx: "33.5926", cy: "33.9996", r: "25.4187", fill: "white" })
     ]
   }
-), p1 = ({
+), h1 = ({
   onClick: n,
-  disabled: t
+  disabled: i
 }) => {
-  const { t: i } = c();
+  const { t } = c();
   return /* @__PURE__ */ e(
     "div",
     {
@@ -730,64 +730,64 @@ const a1 = ({
       "data-testid": "manual-capture-button",
       children: [
         /* @__PURE__ */ e("div", { class: "IncodeIdManualCaptureTooltipContainer", children: /* @__PURE__ */ e("div", { class: "IncodeIdManualCaptureTooltip", children: /* @__PURE__ */ e("ol", { class: "IncodeIdManualCaptureTooltipList", children: [
-          /* @__PURE__ */ e("li", { children: i("idv2.commonIssues.firstStep") }),
-          /* @__PURE__ */ e("li", { children: i("idv2.commonIssues.secondStep") })
+          /* @__PURE__ */ e("li", { children: t("idv2.commonIssues.firstStep") }),
+          /* @__PURE__ */ e("li", { children: t("idv2.commonIssues.secondStep") })
         ] }) }) }),
         /* @__PURE__ */ e("div", { class: "IncodeIdManualCaptureButtonContent", children: /* @__PURE__ */ e(
-          h,
+          I,
           {
             variant: "link",
             onClick: n,
-            disabled: t,
+            disabled: i,
             class: "IncodeIdManualCaptureButtonButton",
-            "aria-label": i("idv2.capture.manualCapture.ariaLabel"),
-            children: /* @__PURE__ */ e(u1, {})
+            "aria-label": t("idv2.capture.manualCapture.ariaLabel"),
+            children: /* @__PURE__ */ e(p1, {})
           }
         ) })
       ]
     }
   );
-}, h1 = ({ manager: n, state: t }) => {
-  const { t: i } = c();
-  if (t.captureStatus === "initializing")
+}, I1 = ({ manager: n, state: i }) => {
+  const { t } = c();
+  if (i.captureStatus === "initializing")
     return /* @__PURE__ */ e(x, { hideHeader: !0, hideFooterBranding: !0, className: "IncodeIdCapturePage", children: /* @__PURE__ */ e("div", { class: "IncodeCaptureInitializing", children: [
       /* @__PURE__ */ e(Q, { size: "large" }),
-      /* @__PURE__ */ e("p", { class: "IncodeCaptureInitializingText", children: i("idv2.capture.initializing") })
+      /* @__PURE__ */ e("p", { class: "IncodeCaptureInitializingText", children: t("idv2.capture.initializing") })
     ] }) });
-  if (t.captureStatus === "uploading" && t.previewImageUrl) {
-    const r = t.currentMode === "passport" ? "passport" : "id";
+  if (i.captureStatus === "uploading" && i.previewImageUrl) {
+    const r = i.currentMode === "passport" ? "passport" : "id";
     return /* @__PURE__ */ e(
-      e1,
+      t1,
       {
-        imageUrl: t.previewImageUrl,
-        progress: t.uploadProgress ?? 0,
-        orientation: t.orientation,
+        imageUrl: i.previewImageUrl,
+        progress: i.uploadProgress ?? 0,
+        orientation: i.orientation,
         mode: r
       }
     );
   }
-  return t.captureStatus === "success" && t.previewImageUrl ? /* @__PURE__ */ e(i1, { manager: n, state: t }) : t.captureStatus === "uploadError" && t.previewImageUrl ? /* @__PURE__ */ e(D, { manager: n, state: t }) : /* @__PURE__ */ e(I1, { manager: n, state: t });
-}, I1 = ({ manager: n, state: t }) => {
-  const i = Z(null), r = Z(null), [o, l] = L(!1);
-  f(() => {
-    i.current && t.stream && (i.current.srcObject = t.stream, i.current.play().catch(() => {
+  return i.captureStatus === "success" && i.previewImageUrl ? /* @__PURE__ */ e(n1, { manager: n, state: i }) : i.captureStatus === "uploadError" && i.previewImageUrl ? /* @__PURE__ */ e(D, { manager: n, state: i }) : /* @__PURE__ */ e(f1, { manager: n, state: i });
+}, f1 = ({ manager: n, state: i }) => {
+  const t = Z(null), r = Z(null), [o, l] = L(!1);
+  m(() => {
+    t.current && i.stream && (t.current.srcObject = i.stream, t.current.play().catch(() => {
     }));
-  }, [t.stream]), f(() => {
+  }, [i.stream]), m(() => {
     const v = () => {
       const g = r.current;
       if (!g)
         return;
-      const p = g.getBoundingClientRect();
+      const h = g.getBoundingClientRect();
       n.updateDetectionArea({
-        x: p.left,
-        y: p.top,
-        width: p.width,
-        height: p.height
+        x: h.left,
+        y: h.top,
+        width: h.width,
+        height: h.height
       });
     };
     return v(), window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
-  }, [n, t.orientation]);
-  const a = t.captureStatus === "capturing" || t.detectionStatus === "capturing", s = t.detectionStatus, d = s === "manualCapture" || t.showCaptureButtonInAuto && t.captureStatus === "detecting" && s !== "capturing", m = () => {
+  }, [n, i.orientation]);
+  const a = i.captureStatus === "capturing" || i.detectionStatus === "capturing", s = i.detectionStatus, d = s === "manualCapture" || i.showCaptureButtonInAuto && i.captureStatus === "detecting" && s !== "capturing", u = () => {
     l(!0);
   }, y = () => {
     l(!1);
@@ -798,7 +798,7 @@ const a1 = ({
     /* @__PURE__ */ e("div", { class: "IncodeCaptureVideo", children: /* @__PURE__ */ e(
       "video",
       {
-        ref: i,
+        ref: t,
         autoplay: !0,
         playsInline: !0,
         class: "IncodeCaptureVideoElement",
@@ -807,27 +807,27 @@ const a1 = ({
       }
     ) }),
     /* @__PURE__ */ e(
-      c1,
+      d1,
       {
         ref: r,
-        mode: t.currentMode,
-        orientation: t.orientation,
-        detectionStatus: t.detectionStatus,
-        counterValue: t.counterValue,
+        mode: i.currentMode,
+        orientation: i.orientation,
+        detectionStatus: i.detectionStatus,
+        counterValue: i.counterValue,
         isCapturing: a,
-        onOpenHelp: m
+        onOpenHelp: u
       }
     ),
-    d && /* @__PURE__ */ e(p1, { onClick: () => n.capture() }),
+    d && /* @__PURE__ */ e(h1, { onClick: () => n.capture() }),
     o && /* @__PURE__ */ e(
-      X,
+      Y,
       {
         onClose: y,
         onTakeManually: B
       }
     )
   ] }) });
-}, f1 = () => /* @__PURE__ */ e(
+}, m1 = () => /* @__PURE__ */ e(
   "svg",
   {
     width: "119",
@@ -1021,7 +1021,7 @@ const a1 = ({
       ] })
     ]
   }
-), m1 = () => /* @__PURE__ */ e(
+), v1 = () => /* @__PURE__ */ e(
   "svg",
   {
     width: "118",
@@ -1326,7 +1326,7 @@ const a1 = ({
       ] })
     ]
   }
-), v1 = ({ className: n }) => /* @__PURE__ */ e(
+), g1 = ({ className: n }) => /* @__PURE__ */ e(
   "svg",
   {
     width: "46",
@@ -1359,10 +1359,10 @@ const a1 = ({
       )
     ]
   }
-), H = ({
+), E = ({
   icon: n,
-  title: t,
-  description: i,
+  title: i,
+  description: t,
   ariaLabel: r,
   testId: o,
   onClick: l
@@ -1377,16 +1377,16 @@ const a1 = ({
     children: [
       /* @__PURE__ */ e("div", { class: "IncodeChooserButtonIcon", children: /* @__PURE__ */ e(n, {}) }),
       /* @__PURE__ */ e("div", { class: "IncodeChooserButtonContent", children: [
-        /* @__PURE__ */ e("span", { class: "IncodeChooserButtonTitle", children: t }),
+        /* @__PURE__ */ e("span", { class: "IncodeChooserButtonTitle", children: i }),
         /* @__PURE__ */ e(C, { size: 4 }),
-        /* @__PURE__ */ e("span", { class: "IncodeChooserButtonDescription", children: i }),
+        /* @__PURE__ */ e("span", { class: "IncodeChooserButtonDescription", children: t }),
         /* @__PURE__ */ e(C, { size: 8 }),
-        /* @__PURE__ */ e("div", { class: "IncodeChooserButtonArrow", children: /* @__PURE__ */ e(v1, {}) })
+        /* @__PURE__ */ e("div", { class: "IncodeChooserButtonArrow", children: /* @__PURE__ */ e(g1, {}) })
       ] })
     ]
   }
-), g1 = ({ manager: n }) => {
-  const { t } = c(), i = () => {
+), w1 = ({ manager: n }) => {
+  const { t: i } = c(), t = () => {
     n.selectDocument("id");
   }, r = () => {
     n.selectDocument("passport");
@@ -1394,28 +1394,28 @@ const a1 = ({
   return /* @__PURE__ */ e(
     x,
     {
-      title: t("idv2.chooser.title"),
+      title: i("idv2.chooser.title"),
       "data-testid": "document-chooser-page",
       className: "IncodeChooserPage",
       children: /* @__PURE__ */ e("div", { class: "IncodeChooserContainer", children: /* @__PURE__ */ e("div", { class: "IncodeChooserButtons", children: [
         /* @__PURE__ */ e(
-          H,
+          E,
           {
-            icon: f1,
-            title: t("idv2.chooser.idButtonTitle"),
-            description: t("idv2.chooser.idButtonDescription"),
-            ariaLabel: t("idv2.chooser.idButtonTitle"),
+            icon: m1,
+            title: i("idv2.chooser.idButtonTitle"),
+            description: i("idv2.chooser.idButtonDescription"),
+            ariaLabel: i("idv2.chooser.idButtonTitle"),
             testId: "chooser-button-id",
-            onClick: i
+            onClick: t
           }
         ),
         /* @__PURE__ */ e(
-          H,
+          E,
           {
-            icon: m1,
-            title: t("idv2.chooser.passportButtonTitle"),
-            description: t("idv2.chooser.passportButtonDescription"),
-            ariaLabel: t("idv2.chooser.passportButtonTitle"),
+            icon: v1,
+            title: i("idv2.chooser.passportButtonTitle"),
+            description: i("idv2.chooser.passportButtonDescription"),
+            ariaLabel: i("idv2.chooser.passportButtonTitle"),
             testId: "chooser-button-passport",
             onClick: r
           }
@@ -1423,61 +1423,69 @@ const a1 = ({
       ] }) })
     }
   );
-}, w1 = ({ manager: n }) => {
-  const [t, i] = L(null), { t: r } = c();
-  f(() => {
-    import("../flip-animation-COR596wy.js").then((l) => {
-      i(l.default);
+}, H = ({
+  manager: n,
+  direction: i
+}) => {
+  const [t, r] = L(null), { t: o } = c();
+  m(() => {
+    import("../flip-animation-COR596wy.js").then((s) => {
+      r(s.default);
     });
   }, []);
-  const o = async () => {
-    await new Promise((l) => setTimeout(l, 1e3)), n.continueToBack();
+  const l = async () => {
+    await new Promise((s) => setTimeout(s, 1e3)), i === "toBack" ? n.continueToBack() : n.continueToFront();
   };
   return t ? /* @__PURE__ */ e("div", { class: "IncodeFlipAnimation", children: [
-    /* @__PURE__ */ e(_, { className: "IncodeFlipAnimationTitle", children: r("idv2.flipAnimation.title") }),
+    /* @__PURE__ */ e(_, { className: "IncodeFlipAnimationTitle", children: o(i === "toBack" ? "idv2.flipAnimation.title" : "idv2.flipAnimation.titleToFront") }),
     /* @__PURE__ */ e(C, { size: 32 }),
     /* @__PURE__ */ e(
       b,
       {
         animationData: t,
         loop: !1,
-        onComplete: o
+        onComplete: l
       }
     )
   ] }) : null;
-}, L1 = ({ manager: n, state: t }) => {
-  const { t: i } = c(), [r, o] = L(null), l = t.selectedDocumentType === "passport";
-  return f(() => {
-    l ? import("../passport-tutorial-CaYBFTqt.js").then((a) => {
-      o(a.default);
-    }) : import("../id-tutorial-B-F5Q28m.js").then((a) => {
-      o(a.default);
+}, L1 = ({ manager: n, state: i }) => {
+  const { t } = c(), [r, o] = L(null), l = i.selectedDocumentType === "passport", a = i.currentMode === "back";
+  if (m(() => {
+    l ? import("../passport-tutorial-CaYBFTqt.js").then((u) => {
+      o(u.default);
+    }) : a ? import("../id-tutorial-B-F5Q28m.js").then((u) => {
+      o(u.default);
+    }) : import("../id-tutorial-B-F5Q28m.js").then((u) => {
+      o(u.default);
     });
-  }, [l]), r ? /* @__PURE__ */ e(
-    N,
+  }, [l, a]), !r)
+    return null;
+  const s = t(l ? "idv2.capture.passport.title" : a ? "idv2.tutorial.v2.titleBack" : "idv2.tutorial.v2.title"), d = t(l ? "idv2.capture.passport.subtitle" : a ? "idv2.tutorial.subtitleBack" : "idv2.tutorial.subtitle");
+  return /* @__PURE__ */ e(
+    O,
     {
       animationData: r,
-      title: i(l ? "idv2.capture.passport.title" : "idv2.tutorial.v2.title"),
-      subtitle: i(l ? "idv2.capture.passport.subtitle" : "idv2.tutorial.subtitle"),
+      title: s,
+      subtitle: d,
       onContinue: () => n.nextStep(),
-      buttonText: i("idv2.tutorial.startScan"),
-      disclaimerText: i("idv2.tutorial.v2.autocapture"),
-      className: I(
+      buttonText: t("idv2.tutorial.startScan"),
+      disclaimerText: t("idv2.tutorial.v2.autocapture"),
+      className: f(
         "IncodeIdTutorial",
         l ? "IncodeIdTutorialPassport" : "IncodeIdTutorialId"
       )
     }
-  ) : null;
-}, x1 = ({ config: n, onFinish: t, onError: i }) => {
-  const [r, o] = R(() => S({ config: n }));
-  return r.status === "idle" || r.status === "loading" ? null : r.status === "chooser" ? /* @__PURE__ */ e(g1, { manager: o }) : r.status === "tutorial" ? /* @__PURE__ */ e(L1, { manager: o, state: r }) : r.status === "permissions" ? /* @__PURE__ */ e(
-    O,
+  );
+}, x1 = ({ config: n, onFinish: i, onError: t }) => {
+  const [r, o] = R(() => z({ config: n }));
+  return r.status === "idle" || r.status === "loading" ? null : r.status === "chooser" ? /* @__PURE__ */ e(w1, { manager: o }) : r.status === "tutorial" ? /* @__PURE__ */ e(L1, { manager: o, state: r }) : r.status === "permissions" ? /* @__PURE__ */ e(
+    G,
     {
       manager: o,
       permissionStatus: r.permissionStatus
     }
-  ) : r.status === "frontFinished" ? /* @__PURE__ */ e(w1, { manager: o }) : r.status === "capture" ? /* @__PURE__ */ e(h1, { manager: o, state: r, onFinish: () => t?.() }) : r.status === "processing" ? /* @__PURE__ */ e($, {}) : r.status === "expired" ? /* @__PURE__ */ e(n1, { manager: o }) : r.status === "finished" ? (t?.(), null) : r.status === "closed" ? (i?.(void 0), null) : r.status === "error" ? /* @__PURE__ */ e(D, { manager: o, state: r, onError: i }) : null;
-}, y1 = ({ config: n, onFinish: t, onError: i }) => /* @__PURE__ */ e(G, { children: n ? /* @__PURE__ */ e(x1, { config: n, onFinish: t, onError: i }) : null });
+  ) : r.status === "frontFinished" ? /* @__PURE__ */ e(H, { manager: o, direction: "toBack" }) : r.status === "backFinished" ? /* @__PURE__ */ e(H, { manager: o, direction: "toFront" }) : r.status === "capture" ? /* @__PURE__ */ e(I1, { manager: o, state: r, onFinish: () => i?.() }) : r.status === "processing" ? /* @__PURE__ */ e(K, {}) : r.status === "expired" ? /* @__PURE__ */ e(r1, { manager: o }) : r.status === "finished" ? (i?.(), null) : r.status === "closed" ? (t?.(void 0), null) : r.status === "error" ? /* @__PURE__ */ e(D, { manager: o, state: r, onError: t }) : null;
+}, y1 = ({ config: n, onFinish: i, onError: t }) => /* @__PURE__ */ e($, { children: n ? /* @__PURE__ */ e(x1, { config: n, onFinish: i, onError: t }) : null });
 A(y1, "incode-id");
 export {
   y1 as Id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260223-138ae97",
+  "version": "0.0.0-dev-20260224-1accab3",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -86,7 +86,7 @@
     "libphonenumber-js": "^1.11.0",
     "preact-custom-element": "^4.6.0",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260223-138ae97"
+    "@incodetech/core": "0.0.0-dev-20260224-1accab3"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",