idmission-web-sdk 1.0.182 → 1.0.184

package/dist/components/customer_flows/VideoIdValidation.d.ts

@@ -89,8 +89,12 @@ export interface VideoIdValidationProps extends PropsWithChildren {
     idCardFrontFocusThreshold?: number;
     /** Number of good frames of the ID card front that must be captured before moving on during video capture. */
     goodIdCardFrontFramesThreshold?: number;
-    /** The duration of time in milliseconds that the user is instructed to show the back of their ID card during video capture. */
-    showIdCardBackDurationMs?: number;
+    /** Number between 0 and 1 at which document detection guidance score condition is considered to be met for the ID card back during video capture. */
+    idCardBackDetectionThreshold?: number;
+    /** Number between 0 and 1 at which focus guidance score condition is considered to be met for the ID card back during video capture. */
+    idCardBackFocusThreshold?: number;
+    /** Number of good frames of the ID card back that must be captured before moving on during video capture. */
+    goodIdCardBackFramesThreshold?: number;
     /** An optional text prompt to display on screen for the user to read during video capture after the ID card has been shown. */
     readTextPrompt?: CustomerSuppliedVerbiage;
     /** The duration of time in milliseconds that the user is allowed to spend reading the `readTextPrompt`. */

package/dist/components/video_id/IdVideoCapture.d.ts

@@ -20,6 +20,7 @@ export type IdVideoCaptureColors = {
 export type IdVideoCaptureVerbiage = {
     guides?: IdVideoCaptureGuidesVerbiage;
     readTextPrompt?: ReadTextPromptVerbiage;
+    faceNotCenteredText?: CustomerSuppliedVerbiage;
 };
 export type IdVideoCaptureProps = {
     onComplete?: (videoUrl: string) => void;
@@ -27,9 +28,11 @@ export type IdVideoCaptureProps = {
     onIdBackImageCaptured?: (imageUrl: string) => void;
     onFaceNotDetected?: () => void;
     idCardFrontDetectionThreshold?: number;
+    idCardBackDetectionThreshold?: number;
     idCardFrontFocusThreshold?: number;
+    idCardBackFocusThreshold?: number;
     goodIdCardFrontFramesThreshold?: number;
-    showIdCardBackDurationMs?: number;
+    goodIdCardBackFramesThreshold?: number;
     skipShowIdCardBack?: boolean | (() => Promise<boolean>);
     readTextPrompt?: CustomerSuppliedVerbiage;
     readTextTimeoutDurationMs?: number;
@@ -39,4 +42,4 @@ export type IdVideoCaptureProps = {
     verbiage?: IdVideoCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, skipShowIdCardBack, readTextPrompt, readTextTimeoutDurationMs, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;
+export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, idCardBackDetectionThreshold, idCardBackFocusThreshold, goodIdCardBackFramesThreshold, skipShowIdCardBack, readTextPrompt, readTextTimeoutDurationMs, assets, classNames, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;

package/dist/components/video_id/IdVideoCaptureWizard.d.ts

@@ -37,9 +37,11 @@ export type VideoIdWizardProps = {
     idCaptureProps?: IdCaptureWizardProps;
     faceLivenessProps?: FaceLivenessWizardProps;
     idCardFrontDetectionThreshold?: number;
+    idCardBackDetectionThreshold?: number;
     idCardFrontFocusThreshold?: number;
+    idCardBackFocusThreshold?: number;
     goodIdCardFrontFramesThreshold?: number;
-    showIdCardBackDurationMs?: number;
+    goodIdCardBackFramesThreshold?: number;
     readTextPrompt?: CustomerSuppliedVerbiage;
     readTextTimeoutDurationMs?: number;
     skipSuccessScreen?: boolean | (() => Promise<boolean>);
@@ -53,4 +55,4 @@ export type VideoIdWizardProps = {
     verbiage?: VideoIdWizardVerbiage;
     debugMode?: boolean;
 };
-export declare const VideoIdWizard: ({ onComplete, onExitCapture, onExitAfterFailure, onUserCancel, idCaptureProps, faceLivenessProps, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, readTextPrompt, readTextTimeoutDurationMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, idCaptureGuideType, idCapturePortraitGuidesOnMobile, assets, classNames, colors, verbiage, debugMode, }: VideoIdWizardProps) => ReactElement;
+export declare const VideoIdWizard: ({ onComplete, onExitCapture, onExitAfterFailure, onUserCancel, idCaptureProps, faceLivenessProps, idCardFrontDetectionThreshold, idCardBackDetectionThreshold, idCardFrontFocusThreshold, idCardBackFocusThreshold, goodIdCardFrontFramesThreshold, goodIdCardBackFramesThreshold, readTextPrompt, readTextTimeoutDurationMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, idCaptureGuideType, idCapturePortraitGuidesOnMobile, assets, classNames, colors, verbiage, debugMode, }: VideoIdWizardProps) => ReactElement;

package/dist/lib/locales/es/translation.d.ts

@@ -65,6 +65,7 @@ declare const _default: {
     'Upload succeeded!': string;
     'Display the front of your ID card...': string;
     'Display the back of your ID card...': string;
+    'Please move your face to the center...': string;
     'Please read the following text aloud': string;
     'Video ID has been successfully captured!': string;
 };

package/dist/lib/locales/index.d.ts

@@ -73,6 +73,7 @@ export declare const resources: {
             'Upload succeeded!': string;
             'Display the front of your ID card...': string;
             'Display the back of your ID card...': string;
+            'Please move your face to the center...': string;
             'Please read the following text aloud': string;
             'Video ID has been successfully captured!': string;
         };

package/dist/sdk2.cjs.development.js

@@ -48,7 +48,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.182';
+var webSdkVersion = '1.0.184';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -8853,6 +8853,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
   var resetBestFrame = React.useCallback(function () {
     bestFocusScore.current = 0;
     clearCanvas(bestPredictionCanvas.current);
+    setBestFrameBoundingBox([]);
+    setBestFrameDetectionScore(0);
+    setBestFrameFocusScore(0);
   }, []);
   var value = React.useMemo(function () {
     return {
@@ -9658,11 +9661,12 @@ var esTranslation = {
   'Document Capture': 'Captura de documento',
   Capture: 'Capturar',
   'Retry capture': 'Reintentar la captura',
-  Upload: 'Adjuntar',
+  Upload: 'Enviar',
   'Uploading...': 'Procesando...',
   'Upload succeeded!': 'Proceso completo!',
   'Display the front of your ID card...': 'Hay que mostrar el frente de la identificación...',
   'Display the back of your ID card...': 'Hay que mostrar el reverso de la identificación...',
+  'Please move your face to the center...': 'Por favor, hay que mover la cabeza hacia el centro...',
   'Please read the following text aloud': 'Hay que leer el siguiente texto en voz alta',
   'Video ID has been successfully captured!': 'Video ID capturado exitosamente!'
 };
@@ -14010,66 +14014,75 @@ var ReadTextPromptTimeRemaining = styled__default['default'].div(templateObject_
 var DoneButton = styled__default['default'](LoaderButton)(templateObject_6$1 || (templateObject_6$1 = tslib.__makeTemplateObject(["\n  margin: auto 0;\n"], ["\n  margin: auto 0;\n"])));
 var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
+var edgeBoundary = 0.05;
 var IdVideoCapture = function IdVideoCapture(_a) {
-  var _b, _c, _d, _e, _f, _g, _h;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
   var onComplete = _a.onComplete,
     onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
     onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
-    _j = _a.idCardFrontDetectionThreshold,
-    idCardFrontDetectionThreshold = _j === void 0 ? 0.48 : _j,
-    _k = _a.idCardFrontFocusThreshold,
-    idCardFrontFocusThreshold = _k === void 0 ? 0 : _k,
-    _l = _a.goodIdCardFrontFramesThreshold,
-    goodIdCardFrontFramesThreshold = _l === void 0 ? 3 : _l,
-    _m = _a.showIdCardBackDurationMs,
-    showIdCardBackDurationMs = _m === void 0 ? 5000 : _m,
-    _o = _a.skipShowIdCardBack,
-    skipShowIdCardBack = _o === void 0 ? false : _o,
+    _u = _a.idCardFrontDetectionThreshold,
+    idCardFrontDetectionThreshold = _u === void 0 ? 0.6 : _u,
+    _v = _a.idCardFrontFocusThreshold,
+    idCardFrontFocusThreshold = _v === void 0 ? 0 : _v,
+    _w = _a.goodIdCardFrontFramesThreshold,
+    goodIdCardFrontFramesThreshold = _w === void 0 ? 3 : _w,
+    _x = _a.idCardBackDetectionThreshold,
+    idCardBackDetectionThreshold = _x === void 0 ? 0.6 : _x,
+    _y = _a.idCardBackFocusThreshold,
+    idCardBackFocusThreshold = _y === void 0 ? 0 : _y,
+    _z = _a.goodIdCardBackFramesThreshold,
+    goodIdCardBackFramesThreshold = _z === void 0 ? 3 : _z,
+    _0 = _a.skipShowIdCardBack,
+    skipShowIdCardBack = _0 === void 0 ? false : _0,
     readTextPrompt = _a.readTextPrompt,
-    _p = _a.readTextTimeoutDurationMs,
-    readTextTimeoutDurationMs = _p === void 0 ? 15000 : _p,
-    _q = _a.assets,
-    assets = _q === void 0 ? {} : _q,
-    _r = _a.classNames,
-    classNames = _r === void 0 ? {} : _r,
-    _s = _a.colors,
-    colors = _s === void 0 ? {} : _s,
-    _t = _a.verbiage,
-    rawVerbiage = _t === void 0 ? {} : _t,
-    _u = _a.debugMode,
-    debugMode = _u === void 0 ? false : _u;
-  var _v = useResizeObserver__default['default'](),
-    ref = _v.ref,
-    _w = _v.width,
-    width = _w === void 0 ? 1 : _w,
-    _x = _v.height,
-    height = _x === void 0 ? 1 : _x;
-  var _y = React.useContext(CameraStateContext),
-    cameraRef = _y.cameraRef,
-    videoRef = _y.videoRef,
-    videoLoaded = _y.videoLoaded,
-    cameraReady = _y.cameraReady;
-  var _z = React.useState([]),
-    detectedObjects = _z[0],
-    setDetectedObjects = _z[1];
-  var _0 = React.useState([]),
-    faces = _0[0],
-    setFaces = _0[1];
-  var _1 = React.useContext(IdCaptureModelsContext),
-    idModelsReady = _1.ready,
-    idModelsWorking = _1.working,
-    makeIdPrediction = _1.makePrediction,
-    onIdPredictionMade = _1.onPredictionMade,
-    setThresholds = _1.setThresholds,
-    bestFrameDetectionScore = _1.bestFrameDetectionScore,
-    bestFrameFocusScore = _1.bestFrameFocusScore;
+    _1 = _a.readTextTimeoutDurationMs,
+    readTextTimeoutDurationMs = _1 === void 0 ? 15000 : _1,
+    _2 = _a.assets,
+    assets = _2 === void 0 ? {} : _2,
+    _3 = _a.classNames,
+    classNames = _3 === void 0 ? {} : _3,
+    _4 = _a.colors,
+    colors = _4 === void 0 ? {} : _4,
+    _5 = _a.verbiage,
+    rawVerbiage = _5 === void 0 ? {} : _5,
+    _6 = _a.debugMode,
+    debugMode = _6 === void 0 ? false : _6;
+  var _7 = useResizeObserver__default['default'](),
+    ref = _7.ref,
+    _8 = _7.width,
+    width = _8 === void 0 ? 1 : _8,
+    _9 = _7.height,
+    height = _9 === void 0 ? 1 : _9;
+  var _10 = React.useContext(CameraStateContext),
+    cameraRef = _10.cameraRef,
+    videoRef = _10.videoRef,
+    videoLoaded = _10.videoLoaded,
+    cameraReady = _10.cameraReady;
+  var _11 = React.useState([]),
+    detectedObjects = _11[0],
+    setDetectedObjects = _11[1];
+  var _12 = React.useState([]),
+    faces = _12[0],
+    setFaces = _12[1];
+  var _13 = React.useState(true),
+    faceCentered = _13[0],
+    setFaceCentered = _13[1];
+  var _14 = React.useContext(IdCaptureModelsContext),
+    idModelsReady = _14.ready,
+    idModelsWorking = _14.working,
+    makeIdPrediction = _14.makePrediction,
+    onIdPredictionMade = _14.onPredictionMade,
+    setThresholds = _14.setThresholds,
+    bestFrameDetectionScore = _14.bestFrameDetectionScore,
+    bestFrameFocusScore = _14.bestFrameFocusScore,
+    resetBestFrame = _14.resetBestFrame;
   var onSelfiePredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
-  var _2 = useVideoRecorder(cameraRef.current),
-    isRecording = _2.isRecording,
-    startRecording = _2.startRecording,
-    stopRecording = _2.stopRecording,
-    videoUrl = _2.videoUrl;
+  var _15 = useVideoRecorder(cameraRef.current),
+    isRecording = _15.isRecording,
+    startRecording = _15.startRecording,
+    stopRecording = _15.stopRecording,
+    videoUrl = _15.videoUrl;
   React.useEffect(function () {
     if (!isRecording && !videoUrl) startRecording();
     if (videoUrl) onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl);
@@ -14079,11 +14092,11 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady;
   }, [cameraReady, idModelsReady, videoLoaded]);
-  var _3 = React.useState('SHOW_ID_FRONT'),
-    requestedAction = _3[0],
-    setRequestedAction = _3[1];
+  var _16 = React.useState('SHOW_ID_FRONT'),
+    requestedAction = _16[0],
+    setRequestedAction = _16[1];
   React.useEffect(function () {
-    if (requestedAction !== 'SHOW_ID_FRONT') return;
+    if (requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
     if (!idModelsReady || !cameraReady || !videoLoaded) return;
     animationFrame.current = requestAnimationFrame(function runFrame() {
       return tslib.__awaiter(this, void 0, void 0, function () {
@@ -14102,23 +14115,24 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   }, [cameraReady, idModelsReady, idModelsWorking, makeIdPrediction, requestedAction, videoLoaded, videoRef]);
   React.useEffect(function () {
     setThresholds({
-      document: idCardFrontDetectionThreshold,
+      document: requestedAction === 'SHOW_ID_FRONT' ? idCardFrontDetectionThreshold : requestedAction === 'SHOW_ID_BACK' ? idCardBackDetectionThreshold : 1,
       passport: 1,
       focus: {
-        mobile: idCardFrontFocusThreshold
+        mobile: requestedAction === 'SHOW_ID_FRONT' ? idCardFrontFocusThreshold : requestedAction === 'SHOW_ID_BACK' ? idCardBackFocusThreshold : 0
       }
     });
-  }, [idCardFrontDetectionThreshold, idCardFrontFocusThreshold, setThresholds]);
-  var _4 = React.useState(0),
-    currentDetectionScore = _4[0],
-    setCurrentDetectionScore = _4[1];
-  var _5 = React.useState(0),
-    currentFocusScore = _5[0],
-    setCurrentFocusScore = _5[1];
-  var _6 = React.useState(0),
-    goodIdCardFrontFramesCount = _6[0],
-    setGoodFramesCount = _6[1];
-  var goodFramesThresholdMet = goodIdCardFrontFramesCount >= goodIdCardFrontFramesThreshold;
+  }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
+  var _17 = React.useState(0),
+    currentDetectionScore = _17[0],
+    setCurrentDetectionScore = _17[1];
+  var _18 = React.useState(0),
+    currentFocusScore = _18[0],
+    setCurrentFocusScore = _18[1];
+  var _19 = React.useState(0),
+    goodFramesCount = _19[0],
+    setGoodFramesCount = _19[1];
+  var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
+  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
   React.useEffect(function () {
     onIdPredictionMade(function (prediction) {
       setDetectedObjects(prediction.detectedObjects);
@@ -14151,15 +14165,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
-        var frame;
+        var frame, frame;
         return tslib.__generator(this, function (_a) {
           switch (_a.label) {
             case 0:
-              if (!(goodFramesThresholdMet && requestedAction == 'SHOW_ID_FRONT')) return [3 /*break*/, 4];
+              if (!goodFramesThresholdMet) return [3 /*break*/, 5];
+              setCurrentDetectionScore(0);
+              setCurrentFocusScore(0);
+              setGoodFramesCount(0);
+              resetBestFrame();
+              if (!(requestedAction == 'SHOW_ID_FRONT')) return [3 /*break*/, 4];
               if (onIdFrontImageCaptured) {
-                console.log('capturing front frame!');
                 frame = captureFrame();
-                console.log(frame);
                 frame && onIdFrontImageCaptured(frame);
               }
               if (!skipShowIdCardBack) return [3 /*break*/, 3];
@@ -14176,39 +14193,47 @@ var IdVideoCapture = function IdVideoCapture(_a) {
               setRequestedAction('FLIP_ID');
               setTimeout(function () {
                 setRequestedAction('SHOW_ID_BACK');
-                setTimeout(function () {
-                  if (onIdBackImageCaptured) {
-                    console.log('capturing rear frame!');
-                    var frame = captureFrame();
-                    console.log(frame);
-                    frame && onIdBackImageCaptured(frame);
-                  }
-                }, showIdCardBackDurationMs - 1000);
               }, 3500);
-              _a.label = 4;
+              return [3 /*break*/, 5];
             case 4:
+              if (requestedAction == 'SHOW_ID_BACK') {
+                if (onIdBackImageCaptured) {
+                  frame = captureFrame();
+                  frame && onIdBackImageCaptured(frame);
+                }
+                onIdBackCaptureComplete();
+              }
+              _a.label = 5;
+            case 5:
               return [2 /*return*/];
           }
         });
       });
     })();
-  }, [captureFrame, goodFramesThresholdMet, onIdBackCaptureComplete, onIdBackImageCaptured, onIdFrontImageCaptured, requestedAction, showIdCardBackDurationMs, skipShowIdCardBack]);
-  useTimeout(showIdCardBackDurationMs, onIdBackCaptureComplete, requestedAction !== 'SHOW_ID_BACK', false, requestedAction === 'SHOW_ID_BACK');
+  }, [captureFrame, goodFramesThresholdMet, onIdBackCaptureComplete, onIdBackImageCaptured, onIdFrontImageCaptured, requestedAction, resetBestFrame, skipShowIdCardBack]);
   var onReadTextTimeout = React.useCallback(function () {
     stopRecording();
   }, [stopRecording]);
   var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, onReadTextTimeout, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
-  var _7 = React.useState(0),
-    numFramesWithoutFaces = _7[0],
-    setNumFramesWithoutFaces = _7[1];
+  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 _20 = React.useState(0),
+    numFramesWithoutFaces = _20[0],
+    setNumFramesWithoutFaces = _20[1];
   React.useEffect(function () {
     onSelfiePredictionMade(function (faces) {
       setFaces(faces);
       setNumFramesWithoutFaces(function (n) {
         return faces.length === 0 ? n + 1 : 0;
       });
+      if (faces.length > 0) {
+        var box = faces[0].box;
+        setFaceCentered(box.xMin > frameWidth * edgeBoundary && box.yMin > frameHeight * edgeBoundary && box.xMax < frameWidth * (1 - edgeBoundary) && box.yMax < frameWidth * (1 - edgeBoundary));
+      } else {
+        setFaceCentered(false);
+      }
     });
-  }, [onSelfiePredictionMade]);
+  }, [frameHeight, frameWidth, onSelfiePredictionMade]);
   React.useEffect(function () {
     if (numFramesWithoutFaces >= 2) {
       onFaceNotDetected === null || onFaceNotDetected === void 0 ? void 0 : onFaceNotDetected();
@@ -14216,17 +14241,21 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   }, [numFramesWithoutFaces, onFaceNotDetected]);
   colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
   colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
+  var theme = styled.useTheme();
+  var faceNotCenteredText = useTranslations(rawVerbiage, {
+    faceNotCenteredText: 'Please move your face to the center...'
+  }).faceNotCenteredText;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
     pageHeight: height,
-    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
+    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 satisfied = requestedAction === 'SHOW_ID_BACK' || goodIdCardFrontFramesCount > 0;
+  var satisfied = goodFramesCount > 0 && faceCentered;
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
-    className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
+    className: "flex ".concat((_k = classNames.container) !== null && _k !== void 0 ? _k : '')
   }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, {
     className: classNames.cameraFeed
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
@@ -14243,8 +14272,11 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     verbiage: rawVerbiage.guides,
     requestedAction: requestedAction,
     borderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
-  }), debugMode && requestedAction === 'SHOW_ID_FRONT' && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
-    "$flipX": !((_g = cameraRef.current) === null || _g === void 0 ? void 0 : _g.isRearFacing)
+  }), !faceCentered && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": (_o = (_m = (_l = theme.guidanceMessages) === null || _l === void 0 ? void 0 : _l.negative) === null || _m === void 0 ? void 0 : _m.backgroundColor) !== null && _o !== void 0 ? _o : 'red',
+    "$textColor": (_r = (_q = (_p = theme.guidanceMessages) === null || _p === void 0 ? void 0 : _p.negative) === null || _q === void 0 ? void 0 : _q.textColor) !== null && _r !== void 0 ? _r : 'white'
+  }, faceNotCenteredText))), debugMode && ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction) && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlayDiv, {
+    "$flipX": !((_s = cameraRef.current) === null || _s === void 0 ? void 0 : _s.isRearFacing)
   }, detectedObjects.map(function (obj, i) {
     var _a;
     return /*#__PURE__*/React__default['default'].createElement(IdCaptureDetectedObjectDebugBox, {
@@ -14255,7 +14287,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
   })), /*#__PURE__*/React__default['default'].createElement(DebugBoundingBoxOverlay, {
-    "$flipX": !((_h = cameraRef.current) === null || _h === void 0 ? void 0 : _h.isRearFacing)
+    "$flipX": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing)
   }, faces.map(function (face, i) {
     var _a;
     return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFaceDebugBox, {
@@ -14264,7 +14296,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       scaling: debugScalingDetails,
       flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
     });
-  })))))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodIdCardFrontFramesCount, "/", goodIdCardFrontFramesThreshold, /*#__PURE__*/React__default['default'].createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)));
+  })))))), debugMode && ( /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default['default'].createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default['default'].createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default['default'].createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)));
 };
 
 var IdVideoCaptureSuccess = function IdVideoCaptureSuccess(_a) {
@@ -14327,9 +14359,11 @@ var VideoIdWizard = function VideoIdWizard(_a) {
     _g = _a.faceLivenessProps,
     faceLivenessProps = _g === void 0 ? {} : _g,
     idCardFrontDetectionThreshold = _a.idCardFrontDetectionThreshold,
+    idCardBackDetectionThreshold = _a.idCardBackDetectionThreshold,
     idCardFrontFocusThreshold = _a.idCardFrontFocusThreshold,
+    idCardBackFocusThreshold = _a.idCardBackFocusThreshold,
     goodIdCardFrontFramesThreshold = _a.goodIdCardFrontFramesThreshold,
-    showIdCardBackDurationMs = _a.showIdCardBackDurationMs,
+    goodIdCardBackFramesThreshold = _a.goodIdCardBackFramesThreshold,
     readTextPrompt = _a.readTextPrompt,
     readTextTimeoutDurationMs = _a.readTextTimeoutDurationMs,
     _h = _a.skipIdCapture,
@@ -14468,9 +14502,11 @@ var VideoIdWizard = function VideoIdWizard(_a) {
           onIdBackImageCaptured: setIdCaptureVideoIdBackImage,
           onFaceNotDetected: onVideoCaptureFaceNotDetected,
           idCardFrontDetectionThreshold: idCardFrontDetectionThreshold,
+          idCardBackDetectionThreshold: idCardBackDetectionThreshold,
           idCardFrontFocusThreshold: idCardFrontFocusThreshold,
+          idCardBackFocusThreshold: idCardBackFocusThreshold,
           goodIdCardFrontFramesThreshold: goodIdCardFrontFramesThreshold,
-          showIdCardBackDurationMs: showIdCardBackDurationMs,
+          goodIdCardBackFramesThreshold: goodIdCardBackFramesThreshold,
           skipShowIdCardBack: skipShowIdCardBack,
           readTextPrompt: readTextPrompt,
           readTextTimeoutDurationMs: readTextTimeoutDurationMs,
@@ -16591,48 +16627,52 @@ var VideoIdValidation = function VideoIdValidation(_a) {
     idCaptureProps = _a.idCaptureProps,
     faceLivenessProps = _a.faceLivenessProps,
     _c = _a.idCardFrontDetectionThreshold,
-    idCardFrontDetectionThreshold = _c === void 0 ? 0.48 : _c,
+    idCardFrontDetectionThreshold = _c === void 0 ? 0.6 : _c,
     _d = _a.idCardFrontFocusThreshold,
     idCardFrontFocusThreshold = _d === void 0 ? 0 : _d,
     _e = _a.goodIdCardFrontFramesThreshold,
     goodIdCardFrontFramesThreshold = _e === void 0 ? 3 : _e,
-    _f = _a.showIdCardBackDurationMs,
-    showIdCardBackDurationMs = _f === void 0 ? 5000 : _f,
+    _f = _a.idCardBackDetectionThreshold,
+    idCardBackDetectionThreshold = _f === void 0 ? 0.6 : _f,
+    _g = _a.idCardBackFocusThreshold,
+    idCardBackFocusThreshold = _g === void 0 ? 0 : _g,
+    _h = _a.goodIdCardBackFramesThreshold,
+    goodIdCardBackFramesThreshold = _h === void 0 ? 3 : _h,
     readTextPrompt = _a.readTextPrompt,
-    _g = _a.readTextTimeoutDurationMs,
-    readTextTimeoutDurationMs = _g === void 0 ? 15000 : _g,
-    _h = _a.skipSuccessScreen,
-    skipSuccessScreen = _h === void 0 ? false : _h,
-    _j = _a.skipIdCapture,
-    skipIdCapture = _j === void 0 ? false : _j,
-    _k = _a.skipShowIdCardBack,
-    skipShowIdCardBack = _k === void 0 ? false : _k,
-    _l = _a.idCaptureGuideType,
-    idCaptureGuideType = _l === void 0 ? 'fit' : _l,
-    _m = _a.idCapturePortraitGuidesOnMobile,
-    idCapturePortraitGuidesOnMobile = _m === void 0 ? false : _m,
-    _o = _a.theme,
-    theme = _o === void 0 ? 'default' : _o,
-    _p = _a.assets,
-    assets = _p === void 0 ? {} : _p,
-    _q = _a.classNames,
-    classNames = _q === void 0 ? {} : _q,
-    _r = _a.colors,
-    colors = _r === void 0 ? {} : _r,
-    _s = _a.verbiage,
-    verbiage = _s === void 0 ? {} : _s,
-    _t = _a.captureSignature,
-    captureSignature = _t === void 0 ? false : _t,
-    _u = _a.captureSignatureVideo,
-    captureSignatureVideo = _u === void 0 ? false : _u,
-    _v = _a.captureAdditionalDocuments,
-    captureAdditionalDocuments = _v === void 0 ? [] : _v,
-    _w = _a.geolocationEnabled,
-    geolocationEnabled = _w === void 0 ? true : _w,
-    _x = _a.geolocationRequired,
-    geolocationRequired = _x === void 0 ? false : _x,
-    _y = _a.debugMode,
-    debugMode = _y === void 0 ? false : _y;
+    _j = _a.readTextTimeoutDurationMs,
+    readTextTimeoutDurationMs = _j === void 0 ? 15000 : _j,
+    _k = _a.skipSuccessScreen,
+    skipSuccessScreen = _k === void 0 ? false : _k,
+    _l = _a.skipIdCapture,
+    skipIdCapture = _l === void 0 ? false : _l,
+    _m = _a.skipShowIdCardBack,
+    skipShowIdCardBack = _m === void 0 ? false : _m,
+    _o = _a.idCaptureGuideType,
+    idCaptureGuideType = _o === void 0 ? 'fit' : _o,
+    _p = _a.idCapturePortraitGuidesOnMobile,
+    idCapturePortraitGuidesOnMobile = _p === void 0 ? false : _p,
+    _q = _a.theme,
+    theme = _q === void 0 ? 'default' : _q,
+    _r = _a.assets,
+    assets = _r === void 0 ? {} : _r,
+    _s = _a.classNames,
+    classNames = _s === void 0 ? {} : _s,
+    _t = _a.colors,
+    colors = _t === void 0 ? {} : _t,
+    _u = _a.verbiage,
+    verbiage = _u === void 0 ? {} : _u,
+    _v = _a.captureSignature,
+    captureSignature = _v === void 0 ? false : _v,
+    _w = _a.captureSignatureVideo,
+    captureSignatureVideo = _w === void 0 ? false : _w,
+    _x = _a.captureAdditionalDocuments,
+    captureAdditionalDocuments = _x === void 0 ? [] : _x,
+    _y = _a.geolocationEnabled,
+    geolocationEnabled = _y === void 0 ? true : _y,
+    _z = _a.geolocationRequired,
+    geolocationRequired = _z === void 0 ? false : _z,
+    _0 = _a.debugMode,
+    debugMode = _0 === void 0 ? false : _0;
   useLanguage(lang);
   var videoIdCaptureProps = React.useMemo(function () {
     return {
@@ -16641,7 +16681,9 @@ var VideoIdValidation = function VideoIdValidation(_a) {
       idCardFrontDetectionThreshold: idCardFrontDetectionThreshold,
       idCardFrontFocusThreshold: idCardFrontFocusThreshold,
       goodIdCardFrontFramesThreshold: goodIdCardFrontFramesThreshold,
-      showIdCardBackDurationMs: showIdCardBackDurationMs,
+      idCardBackDetectionThreshold: idCardBackDetectionThreshold,
+      idCardBackFocusThreshold: idCardBackFocusThreshold,
+      goodIdCardBackFramesThreshold: goodIdCardBackFramesThreshold,
       readTextPrompt: readTextPrompt,
       readTextTimeoutDurationMs: readTextTimeoutDurationMs,
       onExitCapture: onExitCapture,
@@ -16658,7 +16700,7 @@ var VideoIdValidation = function VideoIdValidation(_a) {
       verbiage: verbiage,
       debugMode: debugMode
     };
-  }, [assets, classNames, colors, debugMode, faceLivenessProps, goodIdCardFrontFramesThreshold, idCaptureGuideType, idCapturePortraitGuidesOnMobile, idCaptureProps, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, onExitAfterFailure, onExitCapture, onUserCancel, readTextPrompt, readTextTimeoutDurationMs, showIdCardBackDurationMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, verbiage]);
+  }, [assets, classNames, colors, debugMode, faceLivenessProps, goodIdCardBackFramesThreshold, goodIdCardFrontFramesThreshold, idCaptureGuideType, idCapturePortraitGuidesOnMobile, idCaptureProps, idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, onExitAfterFailure, onExitCapture, onUserCancel, readTextPrompt, readTextTimeoutDurationMs, skipIdCapture, skipShowIdCardBack, skipSuccessScreen, verbiage]);
   var additionalDocumentCaptureProps = React.useMemo(function () {
     return {
       documents: captureAdditionalDocuments,