vesant-sdk 1.7.0-dev.e0ee6d5 → 1.7.0-dev.f9faca4

package/dist/react.mjs

@@ -882,10 +882,10 @@ function useCustomerProfile(client, customerId, options = {}) {
 var Camera = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjAvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQiPg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNjAsMTBINDkuNjU2bC02LjgyOC02LjgyOEM0Mi4wNzgsMi40MjIsNDEuMDYyLDIsNDAsMkgyNGMtMS4wNjIsMC0yLjA3OCwwLjQyMi0yLjgyOCwxLjE3MkwxNC4zNDQsMTBINA0KCQljLTIuMjExLDAtNCwxLjc4OS00LDR2NDRjMCwyLjIxMSwxLjc4OSw0LDQsNGg1NmMyLjIxMSwwLDQtMS43ODksNC00VjE0QzY0LDExLjc4OSw2Mi4yMTEsMTAsNjAsMTB6IE0zMiw1MA0KCQljLTguODM2LDAtMTYtNy4xNjQtMTYtMTZzNy4xNjQtMTYsMTYtMTZzMTYsNy4xNjQsMTYsMTZTNDAuODM2LDUwLDMyLDUweiIvPg0KCTxjaXJjbGUgZmlsbD0iIzIzMUYyMCIgY3g9IjMyIiBjeT0iMzQiIHI9IjgiLz4NCjwvZz4NCjwvc3ZnPg==";
 var Done = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik04LjUgMTIuNUwxMC41IDE0LjVMMTUuNSA5LjUiIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTcgMy4zMzc4MkM4LjQ3MDg3IDIuNDg2OTcgMTAuMTc4NiAyIDEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiAxMC4xNzg2IDIuNDg2OTcgOC40NzA4NyAzLjMzNzgyIDciIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPg0KPC9zdmc+";
 var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNC41IDkuNTAwMDJMOS41IDE0LjVNOS40OTk5OCA5LjVMMTQuNSAxNC41IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjxwYXRoIGQ9Ik03IDMuMzM3ODJDOC40NzA4NyAyLjQ4Njk3IDEwLjE3ODYgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyQzIyIDE3LjUyMjggMTcuNTIyOCAyMiAxMiAyMkM2LjQ3NzE1IDIyIDIgMTcuNTIyOCAyIDEyQzIgMTAuMTc4NiAyLjQ4Njk3IDguNDcwODcgMy4zMzc4MiA3IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjwvc3ZnPg==";
-var Upload = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNyAxN0gxNy4wMU0xNS42IDE0SDE4QzE4LjkzMTkgMTQgMTkuMzk3OCAxNCAxOS43NjU0IDE0LjE1MjJDMjAuMjU1NCAxNC4zNTUyIDIwLjY0NDggMTQuNzQ0NiAyMC44NDc4IDE1LjIzNDZDMjEgMTUuNjAyMiAyMSAxNi4wNjgxIDIxIDE3QzIxIDE3LjkzMTkgMjEgMTguMzk3OCAyMC44NDc4IDE4Ljc2NTRDMjAuNjQ0OCAxOS4yNTU0IDIwLjI1NTQgMTkuNjQ0OCAxOS43NjU0IDE5Ljg0NzhDMTkuMzk3OCAyMCAxOC45MzE5IDIwIDE4IDIwSDZDNS4wNjgxMiAyMCA0LjYwMjE4IDIwIDQuMjM0NjMgMTkuODQ3OEMzLjc0NDU4IDE5LjY0NDggMy4zNTUyMyAxOS4yNTU0IDMuMTUyMjQgMTguNzY1NEMzIDE4LjM5NzggMyAxNy45MzE5IDMgMTdDMyAxNi4wNjgxIDMgMTUuNjAyMiAzLjE1MjI0IDE1LjIzNDZDMy4zNTUyMyAxNC43NDQ2IDMuNzQ0NTggMTQuMzU1MiA0LjIzNDYzIDE0LjE1MjJDNC42MDIxOCAxNCA1LjA2ODEyIDE0IDYgMTRIOC40TTEyIDE1VjRNMTIgNEwxNSA3TTEyIDRMOSA3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=";
 
 // src/kyc/FaceCaptureModal.tsx
 var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+var SESSION_EXPIRY_MS = 15 * 60 * 1e3;
 var LIVENESS_MESSAGES = [
   "Position your face inside the circle",
   "Make sure your face is well lit",
@@ -899,9 +899,9 @@ function headerSubtitle(stageKind) {
     case "accepted":
       return "All set";
     case "declined":
-      return "Verification didn't match, try once more";
+      return "Verification Declined";
     case "max_attempts":
-      return "We couldn't verify you";
+      return "We couldn't verify your identity";
     default:
       return "Please capture a clear photo of your face";
   }
@@ -914,16 +914,18 @@ function FaceCaptureModal({
   client,
   session,
   onComplete,
+  onCancel,
   defaultDevice,
   renderQR
 }) {
   const isMobile = typeof navigator !== "undefined" && MOBILE_UA.test(navigator.userAgent);
+  const initialChoice = defaultDevice ?? (isMobile ? "this" : "ask");
   const initialStage = (() => {
-    const choice = defaultDevice ?? (isMobile ? "this" : "ask");
-    if (choice === "this") return { kind: "capture" };
-    if (choice === "mobile") return { kind: "qr", mobileConnected: false };
+    if (initialChoice === "this") return { kind: "capture" };
+    if (initialChoice === "mobile") return { kind: "qr", mobileConnected: false };
     return { kind: "choose" };
   })();
+  const hasMethodChoice = initialChoice === "ask";
   const [stage, setStage] = useState(initialStage);
   const [attempts, setAttempts] = useState(session.attempts);
   const maxAttempts = session.max_attempts || 1;
@@ -935,17 +937,25 @@ function FaceCaptureModal({
   const qrPayload = session.link || `vesant://reuse-kyc?token=${encodeURIComponent(session.token)}`;
   const cancelledRef = useRef(false);
   const submittingRef = useRef(false);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setStage(
+        (prev) => prev.kind === "choose" || prev.kind === "qr" || prev.kind === "capture" ? { kind: "error", message: "Session expired" } : prev
+      );
+    }, SESSION_EXPIRY_MS);
+    return () => clearTimeout(timer);
+  }, [session.token]);
   useEffect(() => {
     if (stage.kind !== "qr") return;
     let stopped = false;
     const intervalMs = 2e3;
-    const deadline = Date.now() + 15 * 60 * 1e3;
+    const deadline = Date.now() + SESSION_EXPIRY_MS;
     let mobileSeen = stage.mobileConnected;
     const tick = async () => {
       if (stopped || cancelledRef.current) return;
       try {
         if (mobileSeen) {
-          const result = await client.getReuseKycSessionStatus(session.reference);
+          const result = await client.getEventBasedFaceVerificationSessionStatus(session.token);
           if (result.status === "accepted") {
             setStage({ kind: "accepted", result });
             stopped = true;
@@ -1017,7 +1027,7 @@ function FaceCaptureModal({
     try {
       const postPromise = (async () => {
         try {
-          const data = await client.submitReuseKycSession({
+          const data = await client.submitEventBasedFaceVerificationSession({
             token: session.token,
             reference: ref,
             proof
@@ -1033,7 +1043,7 @@ function FaceCaptureModal({
         while (Date.now() < deadline) {
           if (settled || cancelledRef.current) return null;
           try {
-            const r = await client.getReuseKycSessionStatus(ref);
+            const r = await client.getEventBasedFaceVerificationSessionStatus(session.token);
             if (isFreshPollResult(r)) return r;
           } catch {
           }
@@ -1104,6 +1114,9 @@ function FaceCaptureModal({
   }, [captureMode]);
   const close = (result) => {
     cancelledRef.current = true;
+    if (result === null && onCancel) {
+      onCancel();
+    }
     onComplete(result);
   };
   const renderChoose = () => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })))), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "How would you like to verify?"), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
@@ -1112,7 +1125,7 @@ function FaceCaptureModal({
       style: primaryButtonStyle,
       onClick: () => setStage({ kind: "capture" })
     },
-    /* @__PURE__ */ React.createElement("img", { src: isMobile ? Camera : Upload, alt: "", width: 20, height: 20 }),
+    /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }),
     /* @__PURE__ */ React.createElement("span", null, "Continue on this device")
   ), /* @__PURE__ */ React.createElement(
     "button",
@@ -1129,6 +1142,13 @@ function FaceCaptureModal({
       onClick: () => setStage({ kind: "capture" })
     },
     "Use this device instead"
+  ), hasMethodChoice && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: secondaryButtonStyle,
+      onClick: () => setStage({ kind: "choose" })
+    },
+    "Change verification method"
   ), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")));
   const renderCapture = (declinedReason) => {
     if (captureMode === "live") {
@@ -1144,13 +1164,23 @@ function FaceCaptureModal({
     if (captureMode === "preview" && capturedPreview) {
       return /* @__PURE__ */ React.createElement("div", { style: contentStyle }, declinedReason && /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Verification declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, declinedReason)), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Looks good? Submit this selfie or retake it."), /* @__PURE__ */ React.createElement("div", { style: previewBoxStyle }, /* @__PURE__ */ React.createElement("img", { src: capturedPreview, alt: "Captured selfie preview", style: previewImgStyle })), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleConfirmSubmit }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Submit")), /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: handleRetake }, "Retake"), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
     }
-    return /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("div", { style: badgeStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 16, height: 16 })))), declinedReason && /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Verification declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, declinedReason)), /* @__PURE__ */ React.createElement("div", { style: instructionsBoxStyle }, /* @__PURE__ */ React.createElement("h3", { style: instructionsTitleStyle }, "Tips for best results:"), /* @__PURE__ */ React.createElement("ul", { style: instructionsListStyle }, /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Ensure good lighting on your face")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Remove glasses or accessories if possible")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Look directly at the camera")))), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleOpenCamera }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, declinedReason ? "Try again" : "Open Camera")), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
+    return /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("div", { style: badgeStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 16, height: 16 })))), declinedReason && /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Verification declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, declinedReason)), /* @__PURE__ */ React.createElement("div", { style: instructionsBoxStyle }, /* @__PURE__ */ React.createElement("h3", { style: instructionsTitleStyle }, "Tips for best results:"), /* @__PURE__ */ React.createElement("ul", { style: instructionsListStyle }, /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Ensure good lighting on your face")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Remove glasses or accessories if possible")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Look directly at the camera")))), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleOpenCamera }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, declinedReason ? "Try Again" : "Open Camera")), hasMethodChoice && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        style: secondaryButtonStyle,
+        onClick: () => setStage({ kind: "choose" })
+      },
+      "Change verification method"
+    ), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
   };
   const renderSubmitting = () => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Verifying your photo\u2026"), /* @__PURE__ */ React.createElement("p", { style: { ...attemptsTextStyle, marginTop: 8 } }, "This usually takes a few seconds."));
   const renderAccepted = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: successCircleStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Verified"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Your identity has been confirmed. You can continue."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Continue")));
-  const renderDeclined = (result) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Verification declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Retake")), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
-  const renderMaxAttempts = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Maximum attempts reached"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, result.declined_reason ?? "We couldn't verify your identity after several attempts."), result.data?.freeze_account && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "For your security, your account has been temporarily restricted", result.data.freeze_duration_minutes ? ` for ${result.data.freeze_duration_minutes} minutes` : "", ". Please contact support if you need immediate help."), result.data?.enforce_logout && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "You will be signed out of your session."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Close")));
-  const renderError = (message) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Something went wrong"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, message), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => setStage({ kind: "capture" }) }, "Try again"), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")));
+  const renderDeclined = (result) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Retake")), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
+  const renderMaxAttempts = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Maximum Attempts Reached"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, result.declined_reason ?? "We couldn't verify your identity after several attempts."), result.data?.freeze_account && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "For your security, your account has been temporarily restricted", result.data.freeze_duration_minutes ? ` for ${result.data.freeze_duration_minutes} minutes` : "", ". Please contact support if you need immediate help."), result.data?.enforce_logout && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "You will be signed out of your session."), result.data?.block && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "This action has been blocked for security reasons."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Close")));
+  const renderError = (message) => {
+    const sessionExpired = /session\s+expired/i.test(message);
+    return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, sessionExpired ? "Session expired" : "Something Went Wrong"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, sessionExpired ? "Your verification session is no longer valid. Please start a new verification from the beginning." : message), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, !sessionExpired && /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => setStage({ kind: "capture" }) }, "Try Again"), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, sessionExpired ? "Close" : "Cancel")));
+  };
   const body = (() => {
     switch (stage.kind) {
       case "choose":
@@ -1358,11 +1388,63 @@ var attemptsTextStyle = {
 };
 var footerStyle = { padding: "12px 24px 16px", borderTop: "1px solid #f3f4f6" };
 var footerTextStyle = { margin: 0, fontSize: 12, color: "#9ca3af", textAlign: "center" };
+var FACE_MESSAGES = {
+  idle: "Initializing camera...",
+  loading: "Loading face detection...",
+  scanning: "Position your face in the circle",
+  too_far: "Face too far. Please move closer to the camera",
+  too_close: "Too close. Please move back a little",
+  off_center: "Center your face in the circle",
+  ok: "Looking great! Tap the button to capture"
+};
+var FACE_COLORS = {
+  idle: "#9ca3af",
+  loading: "#3b82f6",
+  scanning: "#3b82f6",
+  too_far: "#ef4444",
+  too_close: "#f59e0b",
+  off_center: "#f59e0b",
+  ok: "#10b981"
+};
+var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
+var mediapipeLoaderPromise = null;
+function loadMediaPipeFaceDetection() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("MediaPipe requires a browser environment"));
+  }
+  const w = window;
+  if (w.FaceDetection) {
+    return Promise.resolve(w.FaceDetection);
+  }
+  if (mediapipeLoaderPromise) return mediapipeLoaderPromise;
+  mediapipeLoaderPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = `${MEDIAPIPE_BASE}/face_detection.js`;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      if (w.FaceDetection) {
+        resolve(w.FaceDetection);
+      } else {
+        mediapipeLoaderPromise = null;
+        reject(new Error("MediaPipe loaded but FaceDetection global is missing"));
+      }
+    };
+    script.onerror = () => {
+      mediapipeLoaderPromise = null;
+      reject(new Error("Failed to load MediaPipe face_detection script"));
+    };
+    document.head.appendChild(script);
+  });
+  return mediapipeLoaderPromise;
+}
 function LiveCamera({ onCapture, onCancel, message }) {
   const videoRef = useRef(null);
   const streamRef = useRef(null);
   const [ready, setReady] = useState(false);
   const [error, setError] = useState(null);
+  const [faceStatus, setFaceStatus] = useState("idle");
+  const [faceDetectionFailed, setFaceDetectionFailed] = useState(false);
   useEffect(() => {
     let cancelled = false;
     async function init() {
@@ -1403,6 +1485,77 @@ function LiveCamera({ onCapture, onCancel, message }) {
       streamRef.current = null;
     };
   }, []);
+  useEffect(() => {
+    if (!ready) {
+      setFaceStatus("idle");
+      return;
+    }
+    let cancelled = false;
+    let rafId = null;
+    let detector = null;
+    setFaceStatus("loading");
+    setFaceDetectionFailed(false);
+    (async () => {
+      try {
+        const FaceDetection = await loadMediaPipeFaceDetection();
+        if (cancelled) return;
+        const d = new FaceDetection({
+          locateFile: (f) => `${MEDIAPIPE_BASE}/${f}`
+        });
+        d.setOptions({ model: "short", minDetectionConfidence: 0.5 });
+        d.onResults((results) => {
+          if (cancelled) return;
+          const detections = results.detections ?? [];
+          let next;
+          if (detections.length === 0) {
+            next = "scanning";
+          } else {
+            const bb = detections[0].boundingBox;
+            if (bb.width < 0.18) next = "too_far";
+            else if (bb.width > 0.72) next = "too_close";
+            else if (bb.xCenter < 0.28 || bb.xCenter > 0.72 || bb.yCenter < 0.28 || bb.yCenter > 0.72) {
+              next = "off_center";
+            } else {
+              next = "ok";
+            }
+          }
+          setFaceStatus(next);
+        });
+        await d.initialize();
+        if (cancelled) return;
+        detector = d;
+        setFaceStatus("scanning");
+        const tick = async () => {
+          if (cancelled) return;
+          const v = videoRef.current;
+          if (v?.readyState === 4 && detector) {
+            try {
+              await detector.send({ image: v });
+            } catch {
+            }
+          }
+          if (!cancelled) {
+            rafId = requestAnimationFrame(tick);
+          }
+        };
+        tick();
+      } catch (err) {
+        console.error("Face detection failed to initialize:", err);
+        if (!cancelled) {
+          setFaceDetectionFailed(true);
+          setFaceStatus("scanning");
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      try {
+        detector?.close?.();
+      } catch {
+      }
+    };
+  }, [ready]);
   const capture = () => {
     const video = videoRef.current;
     if (!video || !video.videoWidth) return;
@@ -1424,7 +1577,17 @@ function LiveCamera({ onCapture, onCancel, message }) {
   if (error) {
     return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center", padding: 0 } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Camera unavailable"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, error), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: onCancel }, "Back")));
   }
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement("div", { style: videoFrameStyle }, /* @__PURE__ */ React.createElement(
+  const detectionActive = ready && !faceDetectionFailed;
+  const liveMessage = detectionActive ? FACE_MESSAGES[faceStatus] : message;
+  const liveFaceColor = detectionActive ? FACE_COLORS[faceStatus] : void 0;
+  const captureDisabled = !ready || detectionActive && faceStatus !== "ok";
+  const ringPulse = detectionActive && (faceStatus === "too_far" || faceStatus === "too_close") ? "pulse 1.5s ease-in-out infinite" : void 0;
+  const dynamicCircleStyle = {
+    ...faceCircleStyle,
+    ...liveFaceColor ? { borderColor: liveFaceColor } : null,
+    ...ringPulse ? { animation: ringPulse } : null
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: videoFrameStyle }, /* @__PURE__ */ React.createElement(
     "video",
     {
       ref: videoRef,
@@ -1433,24 +1596,87 @@ function LiveCamera({ onCapture, onCancel, message }) {
       autoPlay: true,
       style: videoStyle
     }
-  ), /* @__PURE__ */ React.createElement("div", { style: faceOverlayContainerStyle, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("div", { style: faceRingWrapStyle }, /* @__PURE__ */ React.createElement("div", { style: faceDashedRingStyle }), /* @__PURE__ */ React.createElement("div", { style: faceCircleStyle }))), message && /* @__PURE__ */ React.createElement("div", { style: liveMessagePillContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: liveMessagePillStyle }, /* @__PURE__ */ React.createElement("span", { style: liveMessagePillTextStyle }, message))), !ready && /* @__PURE__ */ React.createElement("div", { style: videoLoadingStyle }, "Starting camera\u2026")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("div", { style: faceOverlayContainerStyle, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("div", { style: faceRingWrapStyle }, /* @__PURE__ */ React.createElement("div", { style: faceDashedRingStyle }), /* @__PURE__ */ React.createElement("div", { style: dynamicCircleStyle }))), liveMessage && /* @__PURE__ */ React.createElement("div", { style: liveMessagePillContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: liveMessagePillStyle }, /* @__PURE__ */ React.createElement("span", { style: liveMessagePillTextStyle }, liveMessage))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onCancel,
+      "aria-label": "Close camera",
+      style: overlayCloseButtonStyle
+    },
+    /* @__PURE__ */ React.createElement("img", { src: Close, alt: "", width: 16, height: 16 })
+  ), !ready && /* @__PURE__ */ React.createElement("div", { style: videoLoadingStyle }, "Starting camera\u2026"), /* @__PURE__ */ React.createElement("div", { style: bottomGradientStyle }, /* @__PURE__ */ React.createElement(
     "button",
     {
-      style: ready ? primaryButtonStyle : { ...primaryButtonStyle, opacity: 0.5, cursor: "not-allowed" },
+      type: "button",
       onClick: capture,
-      disabled: !ready
+      disabled: captureDisabled,
+      "aria-label": "Capture",
+      style: captureDisabled ? { ...shutterButtonStyle, opacity: 0.5, cursor: "not-allowed" } : shutterButtonStyle
     },
-    /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }),
-    /* @__PURE__ */ React.createElement("span", null, "Capture")
-  ), /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: onCancel }, "Cancel")));
+    /* @__PURE__ */ React.createElement("span", { style: shutterInnerStyle })
+  )));
 }
 var videoFrameStyle = {
   position: "relative",
   width: "100%",
-  aspectRatio: "1 / 1",
-  borderRadius: 12,
+  aspectRatio: "3 / 4",
+  borderRadius: 24,
   overflow: "hidden",
-  background: "#0f172a"
+  background: "#000000",
+  border: "4px solid rgba(255, 255, 255, 0.08)",
+  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+};
+var overlayCloseButtonStyle = {
+  position: "absolute",
+  top: 12,
+  right: 12,
+  width: 32,
+  height: 32,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  border: "none",
+  borderRadius: "50%",
+  background: "rgba(0, 0, 0, 0.4)",
+  backdropFilter: "blur(6px)",
+  color: "#ffffff",
+  cursor: "pointer",
+  zIndex: 10
+};
+var bottomGradientStyle = {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  padding: "16px",
+  background: "linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 10
+};
+var shutterButtonStyle = {
+  width: 64,
+  height: 64,
+  borderRadius: "50%",
+  background: "rgba(255, 255, 255, 0.15)",
+  backdropFilter: "blur(6px)",
+  border: "2px solid rgba(255, 255, 255, 0.7)",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  padding: 0,
+  transition: "transform 120ms ease-out, background 120ms"
+};
+var shutterInnerStyle = {
+  display: "block",
+  width: 44,
+  height: 44,
+  borderRadius: "50%",
+  background: "rgba(255, 255, 255, 0.85)"
 };
 var videoStyle = {
   width: "100%",
@@ -1494,7 +1720,9 @@ var videoLoadingStyle = {
   justifyContent: "center",
   color: "#e5e7eb",
   fontSize: 14,
-  fontWeight: 500
+  fontWeight: 500,
+  background: "rgba(0, 0, 0, 0.4)",
+  zIndex: 5
 };
 var liveMessagePillContainerStyle = {
   position: "absolute",
@@ -1859,9 +2087,9 @@ function getRiskColor(risk) {
   };
   return colorMap[risk] || "#6b7280";
 }
-function useReuseKYCSubmission(client) {
+function useEventBasedFaceVerificationSubmission(client) {
   const startSession = useCallback(
-    (request) => client.createReuseKycSession(request),
+    (request) => client.createEventBasedFaceVerificationSession(request),
     [client]
   );
   const verifyFace = useCallback(
@@ -1878,6 +2106,7 @@ function useReuseKYCSubmission(client) {
         session,
         defaultDevice: opts.defaultDevice,
         renderQR: opts.renderQR,
+        onCancel: opts.onCancel,
         onComplete: (result) => {
           cleanup();
           resolve(result);
@@ -1904,6 +2133,6 @@ function useReuseKYCSubmission(client) {
   return { startSession, verifyFace, runFlow };
 }
 
-export { createDeviceFingerprint, fileToBase64, formatKycStatus, getBrowserInfo, getRiskColor, getStatusColor, isValidFileSize, isValidFileType, useCipherText, useCustomerProfile, useGeolocation, useKycAlerts, useKycOverview, useKycPreferences, useKycRequests, useKycSubmission, useLocationCapture, useLocationRequests, useLoginVerification, useRegistration, useReuseKYCSubmission, useTransactionVerification };
+export { createDeviceFingerprint, fileToBase64, formatKycStatus, getBrowserInfo, getRiskColor, getStatusColor, isValidFileSize, isValidFileType, useCipherText, useCustomerProfile, useEventBasedFaceVerificationSubmission, useGeolocation, useKycAlerts, useKycOverview, useKycPreferences, useKycRequests, useKycSubmission, useLocationCapture, useLocationRequests, useLoginVerification, useRegistration, useTransactionVerification };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map