idmission-web-sdk 2.1.94 → 2.1.96

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.1.94';
+var webSdkVersion = '2.1.96';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -2754,6 +2754,36 @@ function waitForVideoReady(videoRef, checkEveryMs) {
     }, checkEveryMs);
   });
 }
+function createPairs(arr, maxPairs) {
+  var pairs = [];
+  var len = arr.length - 1;
+  var end = Math.min(maxPairs , len);
+  for (var i = 0; i < end; i++) {
+    pairs.push([arr[i], arr[i + 1]]);
+  }
+  return pairs;
+}
+function calculateIoU(boxA, boxB) {
+  var xA = Math.max(boxA.xMin, boxB.xMin);
+  var yA = Math.max(boxA.yMin, boxB.yMin);
+  var xB = Math.min(boxA.xMax, boxB.xMax);
+  var yB = Math.min(boxA.yMax, boxB.yMax);
+  var intersectWidth = Math.max(0, xB - xA);
+  var intersectHeight = Math.max(0, yB - yA);
+  var intersectionArea = intersectWidth * intersectHeight;
+  var boxAArea = (boxA.xMax - boxA.xMin) * (boxA.yMax - boxA.yMin);
+  var boxBArea = (boxB.xMax - boxB.xMin) * (boxB.yMax - boxB.yMin);
+  var unionArea = boxAArea + boxBArea - intersectionArea;
+  if (unionArea === 0) return 0;
+  return intersectionArea / unionArea;
+}
+function average(arr) {
+  var len = arr.length;
+  if (len === 0) return 0;
+  var sum = 0;
+  for (var i = 0; i < len; i++) sum += arr[i];
+  return sum / len;
+}
 
 var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
 
@@ -5194,6 +5224,25 @@ function useLoadFaceDetector(_a) {
     modelError: modelError
   };
 }
+var lastFaceDetectionAt = 0;
+var lastFaceDetectionTime = 0;
+function setLastFaceDetectionAt(time) {
+  lastFaceDetectionTime = time - lastFaceDetectionAt;
+  lastFaceDetectionAt = time;
+}
+var framesNeededSamples$1 = [];
+function trackFramesNeeded$1(value) {
+  framesNeededSamples$1.unshift(value);
+  if (framesNeededSamples$1.length > 10) framesNeededSamples$1.length = 10;
+}
+var lastNFaces = [];
+function trackFace(face, framesNeeded) {
+  if (framesNeeded === void 0) {
+    framesNeeded = 12;
+  }
+  lastNFaces.unshift(face);
+  if (lastNFaces.length > framesNeeded) lastNFaces.length = framesNeeded;
+}
 function makeFaceDetectorPrediction(model, imageData) {
   var prediction = model.detectForVideo(imageData, performance.now());
   var faces = prediction.detections.map(function (d) {
@@ -5213,6 +5262,71 @@ function makeFaceDetectorPrediction(model, imageData) {
     faces: faces
   });
 }
+function processFaceDetectorPrediction(_a) {
+  var faces = _a.faces,
+    videoWidth = _a.videoWidth,
+    videoHeight = _a.videoHeight,
+    _b = _a.requireVerticalFaceCentering,
+    requireVerticalFaceCentering = _b === void 0 ? true : _b,
+    _c = _a.stabilityThreshold,
+    stabilityThreshold = _c === void 0 ? 0.9 : _c;
+  var face = faces[0];
+  var faceNotDetected = faces.length === 0;
+  var faceNotCentered = requireVerticalFaceCentering,
+    faceLookingAway = false,
+    faceTooClose = false,
+    faceTooFar = false;
+  if (face) {
+    // calculate centroids
+    var vCX = videoWidth / 2;
+    var vCY = videoHeight / 2;
+    var fCX = (face.box.xMin + face.box.xMax) / 2;
+    var fCY = (face.box.yMin + face.box.yMax) / 2;
+    // calculate thresholds
+    var vTX = videoWidth * 0.125;
+    var vTY = videoHeight * 0.125;
+    var fTW = face.box.width * 0.2;
+    var fTH = face.box.height * 0.2;
+    var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
+    if (nose) {
+      faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
+      var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
+      var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
+      faceNotCentered = faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
+    }
+    var isMobile = videoWidth < videoHeight;
+    var tooCloseMultiple = isMobile ? 2 : 4.5;
+    var tooFarMultiple = isMobile ? 6 : 7;
+    faceTooClose = face.box.width > videoWidth / tooCloseMultiple;
+    faceTooFar = face.box.width < videoWidth / tooFarMultiple;
+  }
+  var faceInGuides = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
+  if (lastFaceDetectionTime > 0) {
+    trackFramesNeeded$1(1000 / lastFaceDetectionTime);
+  }
+  var faceIsStable = false;
+  if (faceInGuides) {
+    var framesNeeded = Math.ceil(average(framesNeededSamples$1));
+    trackFace(face, framesNeeded);
+    faceIsStable = lastNFaces.length >= framesNeeded && !createPairs(lastNFaces, 12).some(function (_a) {
+      var a = _a[0],
+        b = _a[1];
+      return calculateIoU(a.box, b.box) < stabilityThreshold;
+    });
+  }
+  var faceReady = faceInGuides && faceIsStable;
+  return {
+    face: face,
+    faceNotDetected: faceNotDetected,
+    faceNotCentered: faceNotCentered,
+    faceLookingAway: faceLookingAway,
+    faceTooClose: faceTooClose,
+    faceTooFar: faceTooFar,
+    faceReady: faceReady,
+    faceReadyAt: faceReady ? new Date() : null,
+    faceIsStable: faceIsStable
+  };
+}
 
 var preloadModels = function preloadModels(_a) {
   return __awaiter(void 0, [_a], void 0, function (_b) {
@@ -5689,6 +5803,9 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     // If either the left side visible or if not, right edge of ID should be more than 80% of width.
     xMin + width + boundaryRight < frameWidth; // Valid right edge if it's less than video width.
   }
+  if (lastDetectionTime > 0) {
+    trackFramesNeeded(1000 / lastDetectionTime);
+  }
   var documentIsStable = false;
   var documentTooClose = false;
   if (bestDocument) {
@@ -5698,7 +5815,6 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
     documentTooClose = docWidth > 0.85 || docHeight > 0.85;
     if (detectionThresholdMet && documentInBounds && !documentTooClose) {
       var threshold_1 = (_m = thresholds.stability) !== null && _m !== void 0 ? _m : defaultDocumentDetectionThresholds.stability;
-      trackFramesNeeded(1000 / lastDetectionTime);
       var framesNeeded = Math.ceil(average(framesNeededSamples));
       trackBox(bestDocument.box, framesNeeded);
       documentIsStable = lastNBoxes.length >= framesNeeded && !createPairs(lastNBoxes, 12).some(function (_a) {
@@ -5743,36 +5859,6 @@ function applyNonMaxSuppression(detectedObjects) {
     return !!obj;
   });
 }
-function createPairs(arr, maxPairs) {
-  var pairs = [];
-  var len = arr.length - 1;
-  var end = Math.min(maxPairs , len);
-  for (var i = 0; i < end; i++) {
-    pairs.push([arr[i], arr[i + 1]]);
-  }
-  return pairs;
-}
-function calculateIoU(boxA, boxB) {
-  var xA = Math.max(boxA.xMin, boxB.xMin);
-  var yA = Math.max(boxA.yMin, boxB.yMin);
-  var xB = Math.min(boxA.xMax, boxB.xMax);
-  var yB = Math.min(boxA.yMax, boxB.yMax);
-  var intersectWidth = Math.max(0, xB - xA);
-  var intersectHeight = Math.max(0, yB - yA);
-  var intersectionArea = intersectWidth * intersectHeight;
-  var boxAArea = (boxA.xMax - boxA.xMin) * (boxA.yMax - boxA.yMin);
-  var boxBArea = (boxB.xMax - boxB.xMin) * (boxB.yMax - boxB.yMin);
-  var unionArea = boxAArea + boxBArea - intersectionArea;
-  if (unionArea === 0) return 0;
-  return intersectionArea / unionArea;
-}
-function average(arr) {
-  var len = arr.length;
-  if (len === 0) return 0;
-  var sum = 0;
-  for (var i = 0; i < len; i++) sum += arr[i];
-  return sum / len;
-}
 
 function useFrameLoop(fn, _a) {
   var _b = _a.throttleMs,
@@ -11239,24 +11325,26 @@ function SelfieGuidanceModelsProvider(_a) {
     throttleMs = _a.throttleMs,
     onModelError = _a.onModelError,
     _c = _a.modelLoadTimeoutMs,
-    modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c;
-  var _d = React.useContext(CameraStateContext),
-    videoRef = _d.videoRef,
-    videoLoaded = _d.videoLoaded,
-    cameraReady = _d.cameraReady;
+    modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c,
+    _d = _a.requireVerticalFaceCentering,
+    requireVerticalFaceCentering = _d === void 0 ? true : _d;
+  var _e = React.useContext(CameraStateContext),
+    videoRef = _e.videoRef,
+    videoLoaded = _e.videoLoaded,
+    cameraReady = _e.cameraReady;
   var canvasRef = React.useRef(null);
   var onPredictionHandler = React.useRef();
-  var _e = useLoadFaceDetector({
+  var _f = useLoadFaceDetector({
       onModelError: onModelError,
       modelLoadTimeoutMs: modelLoadTimeoutMs
     }),
-    detector = _e.detector,
-    ready = _e.ready,
-    modelDownloadProgress = _e.modelDownloadProgress,
-    modelError = _e.modelError;
-  var _f = useFrameLoop(React.useCallback(function () {
+    detector = _f.detector,
+    ready = _f.ready,
+    modelDownloadProgress = _f.modelDownloadProgress,
+    modelError = _f.modelError;
+  var _g = useFrameLoop(React.useCallback(function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var vw, vh, ctx, faces, e_1;
+        var vw, vh, ctx, faces, processed, e_1;
         var _a;
         return __generator(this, function (_b) {
           switch (_b.label) {
@@ -11275,7 +11363,14 @@ function SelfieGuidanceModelsProvider(_a) {
             case 1:
               _b.trys.push([1, 3,, 4]);
               faces = makeFaceDetectorPrediction(detector.current, canvasRef.current).faces;
-              return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, faces)];
+              processed = processFaceDetectorPrediction({
+                faces: faces,
+                videoWidth: vw,
+                videoHeight: vh,
+                requireVerticalFaceCentering: requireVerticalFaceCentering
+              });
+              setLastFaceDetectionAt(new Date().getTime());
+              return [4 /*yield*/, (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, processed)];
             case 2:
               _b.sent();
               return [3 /*break*/, 4];
@@ -11292,8 +11387,8 @@ function SelfieGuidanceModelsProvider(_a) {
       throttleMs: throttleMs,
       autoStart: autoStart
     }),
-    start = _f.start,
-    stop = _f.stop;
+    start = _g.start,
+    stop = _g.stop;
   var onPredictionMade = React.useCallback(function (handler) {
     onPredictionHandler.current = handler;
   }, []);
@@ -11516,75 +11611,18 @@ var StyledButtonsRow$7 = styled__default.default(ButtonsRow)(templateObject_5$4
 var templateObject_1$i, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$4;
 
 var initialState$3 = {
-  videoWidth: 0,
-  videoHeight: 0,
-  requireVerticalFaceCentering: true,
   busy: false,
   frame: null,
-  faces: [],
-  faceNotDetected: false,
-  faceNotCentered: false,
-  faceLookingAway: false,
-  faceTooClose: false,
-  faceTooFar: false,
-  faceReady: false,
-  faceReadyAt: null
+  prediction: null
 };
 var reducer$3 = function reducer(state, action) {
   switch (action.type) {
-    case 'configure':
-      return _assign(_assign({}, state), action.payload);
     case 'facesDetected':
       {
         if (state.busy) return state;
-        var faces = action.payload.faces;
-        var face = faces[0];
-        var faceNotDetected = faces.length === 0;
-        var faceNotCentered = state.requireVerticalFaceCentering,
-          faceLookingAway = false,
-          faceTooClose = false,
-          faceTooFar = false,
-          faceReadyAt = state.faceReadyAt;
-        if (face) {
-          // calculate centroids
-          var vCX = state.videoWidth / 2;
-          var vCY = state.videoHeight / 2;
-          var fCX = (face.box.xMin + face.box.xMax) / 2;
-          var fCY = (face.box.yMin + face.box.yMax) / 2;
-          // calculate thresholds
-          var vTX = state.videoWidth * 0.125;
-          var vTY = state.videoHeight * 0.125;
-          var fTW = face.box.width * 0.2;
-          var fTH = face.box.height * 0.2;
-          var nose = face.keypoints[2]; //.find((k) => k.name === 'noseTip')
-          if (nose) {
-            faceLookingAway = Math.abs(fCX - nose.x) > fTW || Math.abs(fCY - nose.y) > fTH;
-            var faceNotCenteredHorizontally = Math.abs(vCX - fCX) > vTX;
-            var faceNotCenteredVertically = Math.abs(vCY + 50 - fCY) > vTY;
-            faceNotCentered = faceNotCenteredHorizontally || state.requireVerticalFaceCentering && faceNotCenteredVertically;
-          }
-          var isMobile = state.videoWidth < state.videoHeight;
-          var tooCloseMultiple = isMobile ? 2 : 4.5;
-          var tooFarMultiple = isMobile ? 6 : 7;
-          faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
-          faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
-        }
-        var faceReady = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
-        if (!faceReady) {
-          faceReadyAt = null;
-        } else if (!state.faceReady) {
-          faceReadyAt = new Date();
-        }
         return _assign(_assign({}, state), {
-          faces: faces,
-          faceNotDetected: faceNotDetected,
-          faceNotCentered: faceNotCentered,
-          faceLookingAway: faceLookingAway,
-          faceTooClose: faceTooClose,
-          faceTooFar: faceTooFar,
-          faceReady: faceReady,
-          faceReadyAt: faceReadyAt,
-          busy: faceReady
+          prediction: action.payload,
+          busy: action.payload.faceReady
         });
       }
     case 'captureStarted':
@@ -11598,79 +11636,64 @@ var reducer$3 = function reducer(state, action) {
   }
 };
 var SelfieCapture = function SelfieCapture(_a) {
-  var _b;
+  var _b, _c, _d, _e, _f, _g;
   var onGuidanceSatisfied = _a.onGuidanceSatisfied,
     onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
     onSelfieCaptureStarted = _a.onSelfieCaptureStarted,
     onSelfieCaptured = _a.onSelfieCaptured,
     onTimeout = _a.onTimeout,
     onExit = _a.onExit,
-    _c = _a.timeoutDurationMs,
-    timeoutDurationMs = _c === void 0 ? 15000 : _c,
+    _h = _a.timeoutDurationMs,
+    timeoutDurationMs = _h === void 0 ? 15000 : _h,
     guidanceMessage = _a.guidanceMessage,
     guidanceSatisfied = _a.guidanceSatisfied,
     guidesComponent = _a.guidesComponent,
-    _d = _a.requireVerticalFaceCentering,
-    requireVerticalFaceCentering = _d === void 0 ? true : _d,
-    _e = _a.shouldCapture,
-    shouldCapture = _e === void 0 ? true : _e,
-    _f = _a.classNames,
-    classNames = _f === void 0 ? {} : _f,
-    _g = _a.colors,
-    colors = _g === void 0 ? {} : _g,
-    _h = _a.verbiage,
-    rawVerbiage = _h === void 0 ? {} : _h,
-    _j = _a.debugMode,
-    debugMode = _j === void 0 ? false : _j;
-  var _k = useResizeObserver__default.default(),
-    ref = _k.ref,
-    _l = _k.width,
-    width = _l === void 0 ? 1 : _l,
-    _m = _k.height,
-    height = _m === void 0 ? 1 : _m;
-  var _o = React.useReducer(reducer$3, initialState$3),
-    state = _o[0],
-    dispatch = _o[1];
+    _j = _a.shouldCapture,
+    shouldCapture = _j === void 0 ? true : _j,
+    _k = _a.classNames,
+    classNames = _k === void 0 ? {} : _k,
+    _l = _a.colors,
+    colors = _l === void 0 ? {} : _l,
+    _m = _a.verbiage,
+    rawVerbiage = _m === void 0 ? {} : _m,
+    _o = _a.debugMode,
+    debugMode = _o === void 0 ? false : _o;
+  var _p = useResizeObserver__default.default(),
+    ref = _p.ref,
+    _q = _p.width,
+    width = _q === void 0 ? 1 : _q,
+    _r = _p.height,
+    height = _r === void 0 ? 1 : _r;
+  var _s = React.useReducer(reducer$3, initialState$3),
+    _t = _s[0],
+    busy = _t.busy,
+    prediction = _t.prediction,
+    dispatch = _s[1];
   var lastPredictionCanvas = React.useRef(null);
-  var _p = React.useContext(CameraStateContext),
-    cameraRef = _p.cameraRef,
-    cameraReady = _p.cameraReady,
-    videoRef = _p.videoRef;
-  var _q = React.useContext(SelfieGuidanceModelsContext),
-    onPredictionMade = _q.onPredictionMade,
-    canvasRef = _q.canvasRef,
-    guidanceError = _q.error;
-  React.useEffect(function () {
-    if (cameraReady && videoRef.current && videoRef.current.videoWidth !== 0) {
-      dispatch({
-        type: 'configure',
-        payload: {
-          videoWidth: videoRef.current.videoWidth,
-          videoHeight: videoRef.current.videoHeight,
-          requireVerticalFaceCentering: requireVerticalFaceCentering
-        }
-      });
-    }
-  }, [cameraReady, requireVerticalFaceCentering, videoRef]);
+  var _u = React.useContext(CameraStateContext),
+    cameraRef = _u.cameraRef,
+    videoRef = _u.videoRef;
+  var _v = React.useContext(SelfieGuidanceModelsContext),
+    onPredictionMade = _v.onPredictionMade,
+    canvasRef = _v.canvasRef,
+    guidanceError = _v.error;
   onPredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (prediction) {
     return new Promise(function (resolve) {
-      if (shouldCapture && !state.busy) {
+      if (shouldCapture && !busy) {
         drawToCanvas(lastPredictionCanvas.current, canvasRef.current);
         dispatch({
           type: 'facesDetected',
-          payload: {
-            faces: prediction
-          }
+          payload: prediction
         });
       }
       resolve();
     });
-  }, [canvasRef, shouldCapture, state.busy]), 16));
+  }, [canvasRef, shouldCapture, busy]), 16));
   React.useEffect(function () {
-    state.faceReady ? onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied() : onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
-  }, [onGuidanceNotSatisfied, onGuidanceSatisfied, state.faceReady]);
+    (prediction === null || prediction === void 0 ? void 0 : prediction.faceReady) ? onGuidanceSatisfied === null || onGuidanceSatisfied === void 0 ? void 0 : onGuidanceSatisfied() : onGuidanceNotSatisfied === null || onGuidanceNotSatisfied === void 0 ? void 0 : onGuidanceNotSatisfied();
+  }, [onGuidanceNotSatisfied, onGuidanceSatisfied, prediction === null || prediction === void 0 ? void 0 : prediction.faceReady]);
   React.useEffect(function () {
-    if (!state.faceReady) return;
+    if (!(prediction === null || prediction === void 0 ? void 0 : prediction.faceReady)) return;
     var timer = setTimeout(function () {
       dispatch({
         type: 'captureStarted'
@@ -11681,7 +11704,7 @@ var SelfieCapture = function SelfieCapture(_a) {
       var ctx = frame.getContext('2d');
       if (!ctx) return;
       var imageData = ctx.getImageData(0, 0, frame.width, frame.height);
-      onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, state.faces[0]);
+      onSelfieCaptured === null || onSelfieCaptured === void 0 ? void 0 : onSelfieCaptured(imageData, prediction.face);
       clearCanvas(frame);
       dispatch({
         type: 'captureCompleted'
@@ -11690,16 +11713,16 @@ var SelfieCapture = function SelfieCapture(_a) {
     return function () {
       if (timer) clearTimeout(timer);
     };
-  }, [onSelfieCaptureStarted, onSelfieCaptured, state.faceReady, state.faces]);
-  var _r = useTimeout(timeoutDurationMs, onTimeout),
-    timedOut = _r.timedOut,
-    timeoutStartedAt = _r.timeoutStartedAt;
+  }, [onSelfieCaptureStarted, onSelfieCaptured, prediction]);
+  var _w = useTimeout(timeoutDurationMs, onTimeout),
+    timedOut = _w.timedOut,
+    timeoutStartedAt = _w.timeoutStartedAt;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
     pageHeight: height,
-    videoWidth: state.videoWidth,
-    videoHeight: state.videoHeight
+    videoWidth: (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0,
+    videoHeight: (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0
   });
   colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
   colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
@@ -11709,11 +11732,12 @@ var SelfieCapture = function SelfieCapture(_a) {
     guidanceMoveBackText: 'Move back...',
     guidanceMoveForwardText: 'Move forward...',
     guidanceMoveToCenterText: 'Move to the center...',
-    guidanceNoFaceDetectedText: 'Waiting for face to be detected...'
+    guidanceNoFaceDetectedText: 'Waiting for face to be detected...',
+    guidanceNotStableText: 'Please hold still...'
   });
-  var satisfied = state.faceReady;
+  var satisfied = (_f = prediction === null || prediction === void 0 ? void 0 : prediction.faceReady) !== null && _f !== void 0 ? _f : false;
   if (typeof guidanceSatisfied === 'boolean') satisfied = guidanceSatisfied;
-  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : state.faceLookingAway ? verbiage.guidanceLookStraightText : state.faceTooClose ? verbiage.guidanceMoveBackText : state.faceTooFar ? verbiage.guidanceMoveForwardText : state.faceNotCentered ? verbiage.guidanceMoveToCenterText : state.faceNotDetected ? verbiage.guidanceNoFaceDetectedText : '');
+  guidanceMessage || (guidanceMessage = satisfied ? verbiage.guidanceHoldStillText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? verbiage.guidanceLookStraightText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? verbiage.guidanceMoveBackText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? verbiage.guidanceMoveForwardText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? verbiage.guidanceMoveToCenterText : (prediction === null || prediction === void 0 ? void 0 : prediction.faceNotDetected) ? verbiage.guidanceNoFaceDetectedText : !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? verbiage.guidanceNotStableText : '');
   if (guidanceError) {
     return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFallback, {
       classNames: classNames.fallback
@@ -11722,7 +11746,7 @@ var SelfieCapture = function SelfieCapture(_a) {
   var GuidesComponent = guidesComponent !== null && guidesComponent !== void 0 ? guidesComponent : FaceCaptureGuideOverlay;
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     ref: ref,
-    className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
+    className: "flex ".concat((_g = classNames.container) !== null && _g !== void 0 ? _g : '')
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
     ref: lastPredictionCanvas
   }), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
@@ -11733,14 +11757,11 @@ var SelfieCapture = function SelfieCapture(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
     "$variant": satisfied ? 'positive' : 'negative',
     className: classNames.guidanceMessage
-  }, guidanceMessage))), debugMode && state.faces.length > 0 && ( /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, null, state.faces.map(function (face, i) {
-    return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
-      key: i,
-      face: face,
-      scaling: debugScalingDetails,
-      color: satisfied ? 'green' : 'red'
-    });
-  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
+  }, guidanceMessage))), debugMode && (prediction === null || prediction === void 0 ? void 0 : prediction.face) && ( /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, null, /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
+    face: prediction.face,
+    scaling: debugScalingDetails,
+    color: satisfied ? 'green' : 'red'
+  }))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
     onClick: onExit,
     className: classNames.exitCaptureBtn
   }));
@@ -11854,25 +11875,23 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     silentFallback = _g === void 0 ? false : _g,
     guidesComponent = _a.guidesComponent,
     disableCapturePreview = _a.disableCapturePreview,
-    _h = _a.requireVerticalFaceCentering,
-    requireVerticalFaceCentering = _h === void 0 ? true : _h,
-    _j = _a.classNames,
-    classNames = _j === void 0 ? {} : _j,
-    _k = _a.colors,
-    colors = _k === void 0 ? {} : _k,
-    _l = _a.verbiage,
-    rawVerbiage = _l === void 0 ? {} : _l,
+    _h = _a.classNames,
+    classNames = _h === void 0 ? {} : _h,
+    _j = _a.colors,
+    colors = _j === void 0 ? {} : _j,
+    _k = _a.verbiage,
+    rawVerbiage = _k === void 0 ? {} : _k,
     debugMode = _a.debugMode;
-  var _m = React.useContext(SubmissionContext),
-    checkLiveness = _m.checkLiveness,
-    submissionError = _m.submissionError;
+  var _l = React.useContext(SubmissionContext),
+    checkLiveness = _l.checkLiveness,
+    submissionError = _l.submissionError;
   var modelError = React.useContext(SelfieGuidanceModelsContext).error;
-  var _o = React.useReducer(reducer$2, initialState$2),
-    state = _o[0],
-    dispatch = _o[1];
-  var _p = React.useState(null),
-    imageUrl = _p[0],
-    setImageUrl = _p[1];
+  var _m = React.useReducer(reducer$2, initialState$2),
+    state = _m[0],
+    dispatch = _m[1];
+  var _o = React.useState(null),
+    imageUrl = _o[0],
+    setImageUrl = _o[1];
   var rawCanvas = React.useRef(null);
   var cropCanvas = React.useRef(null);
   var resizeCanvas = React.useRef(null);
@@ -12064,7 +12083,6 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     onGuidanceSatisfied: onGuidanceSatisfied,
     onGuidanceNotSatisfied: onGuidanceNotSatisfied,
     guidesComponent: guidesByRequestState,
-    requireVerticalFaceCentering: requireVerticalFaceCentering,
     classNames: classNames,
     colors: colors,
     verbiage: verbiage,
@@ -12521,42 +12539,40 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     silentFallback = _l === void 0 ? false : _l,
     guidesComponent = _a.guidesComponent,
     disableCapturePreview = _a.disableCapturePreview,
-    _m = _a.requireVerticalFaceCentering,
-    requireVerticalFaceCentering = _m === void 0 ? true : _m,
-    _o = _a.assets,
-    assets = _o === void 0 ? {} : _o,
-    _p = _a.classNames,
-    classNames = _p === void 0 ? {} : _p,
-    _q = _a.colors,
-    colors = _q === void 0 ? {} : _q,
-    _r = _a.verbiage,
-    verbiage = _r === void 0 ? {} : _r,
-    _s = _a.debugMode,
-    debugMode = _s === void 0 ? false : _s;
-  var _t = React.useContext(SubmissionContext),
-    submissionResponse = _t.submissionResponse,
-    livenessCheckRequest = _t.livenessCheckRequest,
-    setSelfieImage = _t.setSelfieImage,
-    logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
-  var _u = React.useContext(CameraStateContext),
-    cameraAccessDenied = _u.cameraAccessDenied,
-    requestCameraAccess = _u.requestCameraAccess,
-    releaseCameraAccess = _u.releaseCameraAccess;
-  var _v = React.useState(''),
-    faceCropImageUrl = _v[0],
-    setFaceCropImageUrl = _v[1];
-  var _w = React.useState(0),
-    retryCount = _w[0],
-    setRetryCount = _w[1];
-  var _x = React.useState('LOADING'),
-    captureState = _x[0],
-    setCaptureState = _x[1];
+    _m = _a.assets,
+    assets = _m === void 0 ? {} : _m,
+    _o = _a.classNames,
+    classNames = _o === void 0 ? {} : _o,
+    _p = _a.colors,
+    colors = _p === void 0 ? {} : _p,
+    _q = _a.verbiage,
+    verbiage = _q === void 0 ? {} : _q,
+    _r = _a.debugMode,
+    debugMode = _r === void 0 ? false : _r;
+  var _s = React.useContext(SubmissionContext),
+    submissionResponse = _s.submissionResponse,
+    livenessCheckRequest = _s.livenessCheckRequest,
+    setSelfieImage = _s.setSelfieImage,
+    logSelfieCaptureAttempt = _s.logSelfieCaptureAttempt;
+  var _t = React.useContext(CameraStateContext),
+    cameraAccessDenied = _t.cameraAccessDenied,
+    requestCameraAccess = _t.requestCameraAccess,
+    releaseCameraAccess = _t.releaseCameraAccess;
+  var _u = React.useState(''),
+    faceCropImageUrl = _u[0],
+    setFaceCropImageUrl = _u[1];
+  var _v = React.useState(0),
+    retryCount = _v[0],
+    setRetryCount = _v[1];
+  var _w = React.useState('LOADING'),
+    captureState = _w[0],
+    setCaptureState = _w[1];
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
   var operationStartedAt = React.useRef();
-  var _y = React.useContext(SelfieGuidanceModelsContext),
-    start = _y.start,
-    stop = _y.stop;
+  var _x = React.useContext(SelfieGuidanceModelsContext),
+    start = _x.start,
+    stop = _x.stop;
   React.useEffect(function () {
     operationStartedAt.current = new Date();
   }, []);
@@ -12604,9 +12620,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     setCaptureState('FAILED');
     onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout(submissionResponse, livenessCheckRequest);
   }, [onTimeout, livenessCheckRequest, submissionResponse]);
-  var _z = React.useState(0),
-    attempt = _z[0],
-    setAttempt = _z[1];
+  var _y = React.useState(0),
+    attempt = _y[0],
+    setAttempt = _y[1];
   var onExitCallback = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -12670,7 +12686,6 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
           silentFallback: silentFallback,
           guidesComponent: guidesComponent,
           disableCapturePreview: disableCapturePreview,
-          requireVerticalFaceCentering: requireVerticalFaceCentering,
           classNames: classNames.capture,
           colors: colors,
           verbiage: verbiage,
@@ -13525,9 +13540,10 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     numFramesWithoutFaces = _k[0],
     setNumFramesWithoutFaces = _k[1];
   React.useEffect(function () {
-    onPredictionMade(function (faces) {
-      setNumFramesWithoutFaces(function (n) {
-        return faces.length === 0 ? n + 1 : 0;
+    onPredictionMade(function (_a) {
+      var face = _a.face;
+      setNumFramesWithoutFaces(face ? 0 : function (n) {
+        return n + 1;
       });
     });
   }, [onPredictionMade]);
@@ -13757,7 +13773,6 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
           onSuccess: onFaceCaptureSuccess,
           onExit: onExit,
           guidesComponent: guidesComponent,
-          requireVerticalFaceCentering: false,
           classNames: classNames.faceLiveness,
           colors: colors.faceLiveness,
           verbiage: verbiage.faceLiveness,
@@ -14052,99 +14067,99 @@ var defaultVideoIdCaptureThresholds = {
   flipShortcutThreshold: 0.7
 };
 var IdVideoCapture = function IdVideoCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
   var onComplete = _a.onComplete,
     onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     onRecordingFailed = _a.onRecordingFailed,
     onExitCapture = _a.onExitCapture,
-    _y = _a.idCaptureModelsEnabled,
-    idCaptureModelsEnabled = _y === void 0 ? true : _y,
-    _z = _a.idCardCaptureGuideImages,
-    idCardCaptureGuideImages = _z === void 0 ? defaultIdCaptureGuideImages : _z,
-    _0 = _a.idCardFrontDelay,
-    idCardFrontDelay = _0 === void 0 ? 1000 : _0,
-    _1 = _a.videoIdCaptureThresholds,
-    videoIdCaptureThresholds = _1 === void 0 ? defaultVideoIdCaptureThresholds : _1,
-    _2 = _a.skipShowIdCardBack,
-    skipShowIdCardBack = _2 === void 0 ? false : _2,
-    _3 = _a.captureCountdownSeconds,
-    captureCountdownSeconds = _3 === void 0 ? 3 : _3,
+    _x = _a.idCaptureModelsEnabled,
+    idCaptureModelsEnabled = _x === void 0 ? true : _x,
+    _y = _a.idCardCaptureGuideImages,
+    idCardCaptureGuideImages = _y === void 0 ? defaultIdCaptureGuideImages : _y,
+    _z = _a.idCardFrontDelay,
+    idCardFrontDelay = _z === void 0 ? 1000 : _z,
+    _0 = _a.videoIdCaptureThresholds,
+    videoIdCaptureThresholds = _0 === void 0 ? defaultVideoIdCaptureThresholds : _0,
+    _1 = _a.skipShowIdCardBack,
+    skipShowIdCardBack = _1 === void 0 ? false : _1,
+    _2 = _a.captureCountdownSeconds,
+    captureCountdownSeconds = _2 === void 0 ? 3 : _2,
     readTextPrompt = _a.readTextPrompt,
-    _4 = _a.readTextTimeoutDurationMs,
-    readTextTimeoutDurationMs = _4 === void 0 ? 15000 : _4,
-    _5 = _a.readTextMinReadingMs,
-    readTextMinReadingMs = _5 === void 0 ? 10000 : _5,
-    _6 = _a.disableFaceDetectionWhileAudioCapture,
-    disableFaceDetectionWhileAudioCapture = _6 === void 0 ? false : _6,
-    _7 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
-    disableFaceDetectionWhileAudioCaptureMsDelay = _7 === void 0 ? 2000 : _7,
-    _8 = _a.mergeAVStreams,
-    mergeAVStreams = _8 === void 0 ? false : _8,
-    _9 = _a.classNames,
-    classNames = _9 === void 0 ? {} : _9,
-    _10 = _a.colors,
-    colors = _10 === void 0 ? {} : _10,
-    _11 = _a.verbiage,
-    rawVerbiage = _11 === void 0 ? {} : _11,
-    _12 = _a.debugMode,
-    debugMode = _12 === void 0 ? false : _12;
-  var _13 = useResizeObserver__default.default(),
-    ref = _13.ref,
-    _14 = _13.width,
-    width = _14 === void 0 ? 1 : _14,
-    _15 = _13.height,
-    height = _15 === void 0 ? 1 : _15;
-  var _16 = React.useContext(CameraStateContext),
-    cameraRef = _16.cameraRef,
-    videoRef = _16.videoRef,
-    videoLoaded = _16.videoLoaded,
-    cameraReady = _16.cameraReady,
-    microphoneReady = _16.microphoneReady,
-    audioStream = _16.audioStream,
-    setVideoLoaded = _16.setVideoLoaded;
-  var _17 = React.useState([]),
-    detectedObjects = _17[0],
-    setDetectedObjects = _17[1];
-  var _18 = React.useState([]),
-    faces = _18[0],
-    setFaces = _18[1];
-  var _19 = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _19.ready,
-    startIdModels = _19.start,
-    stopIdModels = _19.stop,
-    onIdPredictionMade = _19.onPredictionMade,
-    setThresholds = _19.setThresholds,
-    setDocumentDetectionBoundaries = _19.setDocumentDetectionBoundaries,
-    bestFrameDetails = _19.bestFrameDetails,
-    resetBestFrame = _19.resetBestFrame,
-    idModelError = _19.modelError;
-  var _20 = React.useState(null),
-    videoStartsAt = _20[0],
-    setVideoStartsAt = _20[1];
-  var _21 = React.useContext(SubmissionContext),
-    setIdCaptureVideoAudioStartsAt = _21.setIdCaptureVideoAudioStartsAt,
-    setExpectedAudioText = _21.setExpectedAudioText;
-  var _22 = React.useContext(SelfieGuidanceModelsContext),
-    startSelfieGuidance = _22.start,
-    stopSelfieGuidance = _22.stop,
-    onSelfiePredictionMade = _22.onPredictionMade,
-    selfieModelError = _22.error;
-  var _23 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
-    isRecordingVideo = _23.isRecordingVideo,
-    startRecordingVideo = _23.startRecordingVideo,
-    startRecordingAudio = _23.startRecordingAudio,
-    stopRecordingVideo = _23.stopRecordingVideo,
-    stopRecordingAudio = _23.stopRecordingAudio,
-    videoRecordingUnintentionallyStopped = _23.videoRecordingUnintentionallyStopped,
-    audioRecordingUnintentionallyStopped = _23.audioRecordingUnintentionallyStopped,
-    videoUrl = _23.videoUrl,
-    audioUrl = _23.audioUrl;
+    _3 = _a.readTextTimeoutDurationMs,
+    readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
+    _4 = _a.readTextMinReadingMs,
+    readTextMinReadingMs = _4 === void 0 ? 10000 : _4,
+    _5 = _a.disableFaceDetectionWhileAudioCapture,
+    disableFaceDetectionWhileAudioCapture = _5 === void 0 ? false : _5,
+    _6 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
+    disableFaceDetectionWhileAudioCaptureMsDelay = _6 === void 0 ? 2000 : _6,
+    _7 = _a.mergeAVStreams,
+    mergeAVStreams = _7 === void 0 ? false : _7,
+    _8 = _a.classNames,
+    classNames = _8 === void 0 ? {} : _8,
+    _9 = _a.colors,
+    colors = _9 === void 0 ? {} : _9,
+    _10 = _a.verbiage,
+    rawVerbiage = _10 === void 0 ? {} : _10,
+    _11 = _a.debugMode,
+    debugMode = _11 === void 0 ? false : _11;
+  var _12 = useResizeObserver__default.default(),
+    ref = _12.ref,
+    _13 = _12.width,
+    width = _13 === void 0 ? 1 : _13,
+    _14 = _12.height,
+    height = _14 === void 0 ? 1 : _14;
+  var _15 = React.useContext(CameraStateContext),
+    cameraRef = _15.cameraRef,
+    videoRef = _15.videoRef,
+    videoLoaded = _15.videoLoaded,
+    cameraReady = _15.cameraReady,
+    microphoneReady = _15.microphoneReady,
+    audioStream = _15.audioStream,
+    setVideoLoaded = _15.setVideoLoaded;
+  var _16 = React.useState([]),
+    detectedObjects = _16[0],
+    setDetectedObjects = _16[1];
+  var _17 = React.useState(null),
+    face = _17[0],
+    setFace = _17[1];
+  var _18 = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _18.ready,
+    startIdModels = _18.start,
+    stopIdModels = _18.stop,
+    onIdPredictionMade = _18.onPredictionMade,
+    setThresholds = _18.setThresholds,
+    setDocumentDetectionBoundaries = _18.setDocumentDetectionBoundaries,
+    bestFrameDetails = _18.bestFrameDetails,
+    resetBestFrame = _18.resetBestFrame,
+    idModelError = _18.modelError;
+  var _19 = React.useState(null),
+    videoStartsAt = _19[0],
+    setVideoStartsAt = _19[1];
+  var _20 = React.useContext(SubmissionContext),
+    setIdCaptureVideoAudioStartsAt = _20.setIdCaptureVideoAudioStartsAt,
+    setExpectedAudioText = _20.setExpectedAudioText;
+  var _21 = React.useContext(SelfieGuidanceModelsContext),
+    startSelfieGuidance = _21.start,
+    stopSelfieGuidance = _21.stop,
+    onSelfiePredictionMade = _21.onPredictionMade,
+    selfieModelError = _21.error;
+  var _22 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
+    isRecordingVideo = _22.isRecordingVideo,
+    startRecordingVideo = _22.startRecordingVideo,
+    startRecordingAudio = _22.startRecordingAudio,
+    stopRecordingVideo = _22.stopRecordingVideo,
+    stopRecordingAudio = _22.stopRecordingAudio,
+    videoRecordingUnintentionallyStopped = _22.videoRecordingUnintentionallyStopped,
+    audioRecordingUnintentionallyStopped = _22.audioRecordingUnintentionallyStopped,
+    videoUrl = _22.videoUrl,
+    audioUrl = _22.audioUrl;
   var countdownTimeoutRef = React.useRef(undefined);
-  var _24 = React.useState(-1),
-    countdownRemaining = _24[0],
-    setCountdownRemaining = _24[1];
+  var _23 = React.useState(-1),
+    countdownRemaining = _23[0],
+    setCountdownRemaining = _23[1];
   React.useEffect(function () {
     if (!isRecordingVideo && !videoUrl) {
       startRecordingVideo();
@@ -14164,9 +14179,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
     }
   }, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
-  var _25 = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _25[0],
-    setRequestedAction = _25[1];
+  var _24 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _24[0],
+    setRequestedAction = _24[1];
   var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
   React.useEffect(function startModelsWhenCapturing() {
     if (!shouldRunIdModels) return;
@@ -14186,15 +14201,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       bottom: 1
     });
   }, [setDocumentDetectionBoundaries]);
+  var _25 = React.useState(0),
+    currentDetectionScore = _25[0],
+    setCurrentDetectionScore = _25[1];
   var _26 = React.useState(0),
-    currentDetectionScore = _26[0],
-    setCurrentDetectionScore = _26[1];
+    currentFocusScore = _26[0],
+    setCurrentFocusScore = _26[1];
   var _27 = React.useState(0),
-    currentFocusScore = _27[0],
-    setCurrentFocusScore = _27[1];
-  var _28 = React.useState(0),
-    goodFramesCount = _28[0],
-    setGoodFramesCount = _28[1];
+    goodFramesCount = _27[0],
+    setGoodFramesCount = _27[1];
   var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
   var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
@@ -14214,9 +14229,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       } : 0);
     });
   }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction, videoIdCaptureThresholds.flipShortcutThreshold]);
-  var _29 = React.useState(null),
-    idFrontCaptureStartedAt = _29[0],
-    setFirstGoodFrameTime = _29[1];
+  var _28 = React.useState(null),
+    idFrontCaptureStartedAt = _28[0],
+    setFirstGoodFrameTime = _28[1];
   React.useEffect(function () {
     if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
   }, [goodFramesCount]);
@@ -14235,11 +14250,11 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   }, [setExpectedAudioText, setIdCaptureVideoAudioStartsAt, startRecordingAudio, stopRecordingVideo, translatedText, videoStartsAt]);
   var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
   var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
-  var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
+  var faceBox = face === null || face === void 0 ? void 0 : face.box;
   var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
-  var _30 = React.useState(),
-    countdownStartedAt = _30[0],
-    setCountdownStartedAt = _30[1];
+  var _29 = React.useState(),
+    countdownStartedAt = _29[0],
+    setCountdownStartedAt = _29[1];
   var photoCanvas = React.useRef(null);
   var frameLock = React.useRef(false);
   var captureFrame = React.useCallback(function () {
@@ -14362,14 +14377,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       stopSelfieGuidance();
     };
   }, [startSelfieGuidance, stopSelfieGuidance]);
-  var _31 = React.useState(0),
-    numFramesWithoutFaces = _31[0],
-    setNumFramesWithoutFaces = _31[1];
-  onSelfiePredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (faces) {
+  var _30 = React.useState(0),
+    numFramesWithoutFaces = _30[0],
+    setNumFramesWithoutFaces = _30[1];
+  onSelfiePredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (_a) {
+    var face = _a.face;
     if (selfieModelError) return;
-    setFaces(faces);
-    setNumFramesWithoutFaces(function (n) {
-      return faces.length === 0 ? n + 1 : 0;
+    setFace(face);
+    setNumFramesWithoutFaces(face ? 0 : function (n) {
+      return n + 1;
     });
   }, [selfieModelError]), 16));
   React.useEffect(function () {
@@ -14379,18 +14395,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
   var theme = styled.useTheme();
-  var _32 = useTranslations(rawVerbiage, {
+  var _31 = useTranslations(rawVerbiage, {
       faceNotCenteredText: 'Please move your face to the center...',
       captureBtnText: 'Capture'
     }),
-    captureBtnText = _32.captureBtnText,
-    faceNotCenteredText = _32.faceNotCenteredText;
+    captureBtnText = _31.captureBtnText,
+    faceNotCenteredText = _31.faceNotCenteredText;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
     pageHeight: height,
-    videoWidth: (_h = (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.videoWidth) !== null && _h !== void 0 ? _h : 0,
-    videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
+    videoWidth: (_g = (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.videoWidth) !== null && _g !== void 0 ? _g : 0,
+    videoHeight: (_j = (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.videoHeight) !== null && _j !== void 0 ? _j : 0
   });
   var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
   // const searchingForIdCard =
@@ -14398,7 +14414,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   var guidanceText = !faceCentered ? faceNotCenteredText : undefined;
   return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     ref: ref,
-    className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
+    className: "flex ".concat((_k = classNames.container) !== null && _k !== void 0 ? _k : '')
   }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
     ref: photoCanvas
   }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__namespace.default.createElement(ReadTextPrompt, {
@@ -14420,7 +14436,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
     idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
   }), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
-    "$flipX": !((_m = cameraRef.current) === null || _m === void 0 ? void 0 : _m.isRearFacing)
+    "$flipX": !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing)
   }, detectedObjects.map(function (obj, i) {
     var _a;
     return /*#__PURE__*/React__namespace.default.createElement(IdCaptureDetectedObjectDebugBox, {
@@ -14430,19 +14446,16 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       color: "blue",
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  })), /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, null, faces.map(function (face, i) {
-    return /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
-      key: i,
-      face: face,
-      scaling: debugScalingDetails
-    });
-  })))))), guidanceText && idCaptureModelsEnabled && !idModelError && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
+  })), /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, null, face && ( /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
+    face: face,
+    scaling: debugScalingDetails
+  }))))))), guidanceText && idCaptureModelsEnabled && !idModelError && ( /*#__PURE__*/React__namespace.default.createElement(GuidanceMessageContainer, {
     className: classNames.guidanceMessageContainer
   }, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
     className: classNames.guidanceMessage,
-    "$background": (_q = (_p = (_o = theme.guidanceMessages) === null || _o === void 0 ? void 0 : _o.negative) === null || _p === void 0 ? void 0 : _p.backgroundColor) !== null && _q !== void 0 ? _q : 'red',
-    "$textColor": (_t = (_s = (_r = theme.guidanceMessages) === null || _r === void 0 ? void 0 : _r.negative) === null || _s === void 0 ? void 0 : _s.textColor) !== null && _t !== void 0 ? _t : 'white'
-  }, guidanceText))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score:", ' ', (_v = (_u = bestFrameDetails.current) === null || _u === void 0 ? void 0 : _u.detectionScore) !== null && _v !== void 0 ? _v : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_x = (_w = bestFrameDetails.current) === null || _w === void 0 ? void 0 : _w.focusScore) !== null && _x !== void 0 ? _x : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
+    "$background": (_p = (_o = (_m = theme.guidanceMessages) === null || _m === void 0 ? void 0 : _m.negative) === null || _o === void 0 ? void 0 : _o.backgroundColor) !== null && _p !== void 0 ? _p : 'red',
+    "$textColor": (_s = (_r = (_q = theme.guidanceMessages) === null || _q === void 0 ? void 0 : _q.negative) === null || _r === void 0 ? void 0 : _r.textColor) !== null && _s !== void 0 ? _s : 'white'
+  }, guidanceText))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score:", ' ', (_u = (_t = bestFrameDetails.current) === null || _t === void 0 ? void 0 : _t.detectionScore) !== null && _u !== void 0 ? _u : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_w = (_v = bestFrameDetails.current) === null || _v === void 0 ? void 0 : _v.focusScore) !== null && _w !== void 0 ? _w : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
     className: classNames.countdownContainer
   }, /*#__PURE__*/React__namespace.default.createElement(Countdown, {
     className: classNames.countdown
@@ -14758,7 +14771,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
     autoStart: false,
     onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
-    modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs
+    modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs,
+    requireVerticalFaceCentering: captureState === 'CHECKING_LIVENESS'
   }, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
     className: "flex ".concat((_k = classNames.container) !== null && _k !== void 0 ? _k : '')
   }, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
@@ -14804,7 +14818,6 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           renderCameraFeed: false,
           releaseCameraAccessOnExit: false,
           disableCapturePreview: !debugMode,
-          requireVerticalFaceCentering: false,
           guidesComponent: faceLivenessGuides,
           assets: assets.faceLiveness,
           classNames: classNames.faceLiveness,
@@ -15052,7 +15065,8 @@ function CompositeWizard(_a) {
         autoStart: false,
         throttleMs: 250,
         onModelError: videoSignatureCaptureProps.onModelError,
-        modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs
+        modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs,
+        requireVerticalFaceCentering: false
       }, /*#__PURE__*/React__namespace.default.createElement(VideoSignatureWizard, _assign({}, videoSignatureCaptureProps, {
         onComplete: onVideoSignatureComplete,
         onRetryClicked: onVideoSignatureRetry