@incodetech/web 0.0.0-dev-20260303-3dab9f2 → 0.0.0-dev-20260304-fb1914c

package/dist/flow/styles.css

@@ -3336,6 +3336,10 @@
   position: absolute;
 }
 
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureVideo.IncodeCaptureVideoLoading {
+  opacity: 0;
+}
+
 .IncodeIdCapturePage .IncodeCapture .IncodeCaptureVideo .IncodeCaptureVideoElement {
   inset: var(--spacing-0, var(--spacing-none, 0px));
   object-fit: cover;

package/dist/id/id.es.js

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

package/dist/id/styles.css

@@ -936,6 +936,10 @@
   position: absolute;
 }
 
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureVideo.IncodeCaptureVideoLoading {
+  opacity: 0;
+}
+
 .IncodeIdCapturePage .IncodeCapture .IncodeCaptureVideo .IncodeCaptureVideoElement {
   inset: var(--spacing-0, var(--spacing-none, 0px));
   object-fit: cover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260303-3dab9f2",
+  "version": "0.0.0-dev-20260304-fb1914c",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -100,7 +100,7 @@
     "libphonenumber-js": "^1.11.0",
     "preact-custom-element": "^4.6.0",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260303-3dab9f2"
+    "@incodetech/core": "0.0.0-dev-20260304-fb1914c"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",