idmission-web-sdk 1.0.103 → 1.0.105

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

@@ -3,6 +3,7 @@ import { ThemeInput } from '../../themes';
 import { LangOption } from '../../lib/locales';
 import { SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
 import { DocumentCaptureWizardClassNames } from '../document_capture/DocumentCaptureWizard';
+import { CameraFeedMode } from '../document_capture/DocumentCaptureScreen';
 export type DocumentCaptureClassNames = DocumentCaptureWizardClassNames;
 export interface DocumentCaptureProps extends PropsWithChildren {
     /** Language code to use. Supported values: 'auto' (detect based on user's OS), 'en' (English), 'es' (Spanish). Defaults to auto. */
@@ -11,6 +12,8 @@ export interface DocumentCaptureProps extends PropsWithChildren {
     submissionToken: string;
     /** URL to hit with all API requests. Defaults to the value specified in your decoded `submissionToken`. */
     submissionUrl?: string;
+    /** URL to upload captured documents to via Tus. */
+    documentServiceUrl?: string;
     /** Callback function that fires immediately prior to submission, giving the client application an opportunity to specify custom asynchronous logic that mutates the request before it executes. The submission request is passed in as a parameter and a promise resolving to the updated request should be returned. */
     onBeforeSubmit?: (req: SubmissionRequest) => Promise<SubmissionRequest>;
     /** Callback function that fires when the user has completed the flow instead of making a call to IDmission's servers, allowing customers to specify their own submission logic. Arguments: the request payload that would have been dispatched to IDmission's API, which contains the images/documents/video submitted by the user. Note that when this parameter is supplied, `onComplete` will never fire, and the customer will need to implement their own error handling/retry logic. Use at your own risk! */
@@ -22,6 +25,7 @@ export interface DocumentCaptureProps extends PropsWithChildren {
     /** Callback function that fires when the user clicks the exit button from the loading overlay, declining to engage with IDmission. Binding this callback results in the cancel button being rendered on the loading overlay. */
     onUserCancel?: () => void;
     aspectRatio?: number;
+    cameraFeedMode?: CameraFeedMode;
     instructions?: ReactNode;
     /** Name of an included theme or object containing theme properties. **/
     theme?: ThemeInput;

package/dist/components/document_capture/DocumentCaptureGuideOverlay.d.ts

@@ -7,7 +7,7 @@ export type DocumentCaptureGuideOverlayProps = {
     borderRadius?: number;
     borderColor?: string;
     borderWidth?: number;
-    maskColor?: string;
+    maskColor: string;
     padding?: number;
     classNames?: DocumentCaptureGuideOverlayClassNames;
 };

package/dist/components/document_capture/DocumentCaptureScreen.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export type CameraFeedMode = 'snapToGuides' | 'fullscreen';
+export type DocumentCaptureScreenClassNames = {
+    container?: string;
+    cameraFeed?: string;
+};
+export type DocumentCaptureScreenProps = {
+    aspectRatio?: number;
+    cameraFeedMode?: CameraFeedMode;
+    classNames?: DocumentCaptureScreenClassNames;
+    instructions?: ReactNode;
+    onCaptureClicked?: () => void;
+    onSuccess?: (blob: Blob) => void;
+};
+export declare const DocumentCaptureScreen: ({ aspectRatio, cameraFeedMode, classNames, instructions, onCaptureClicked, onSuccess, }: DocumentCaptureScreenProps) => React.JSX.Element;

package/dist/components/document_capture/DocumentCaptureStateProvider.d.ts

@@ -0,0 +1,68 @@
+import React, { Dispatch, ReactNode } from 'react';
+export type DocumentCaptureState = {
+    initialDrawComplete: boolean;
+    redrawing: boolean;
+    rectX: number;
+    rectY: number;
+    rectWidth: number;
+    rectHeight: number;
+    rectOffsetTop: number;
+    capturing: boolean;
+    imageUrl: string;
+    imageBlob: Blob | null;
+    uploadState: 'not_started' | 'in_progress' | 'succeeded' | 'failed';
+};
+export declare const documentCaptureInitialState: {
+    initialDrawComplete: false;
+    redrawing: false;
+    capturing: false;
+    rectX: number;
+    rectY: number;
+    rectWidth: number;
+    rectHeight: number;
+    rectOffsetTop: number;
+    imageUrl: string;
+    imageBlob: null;
+    uploadState: "not_started";
+};
+export declare const DocumentCaptureStateContext: React.Context<DocumentCaptureState>;
+export type DocumentCaptureAction = {
+    type: 'redrawRequested';
+} | {
+    type: 'redrawInProgress';
+} | {
+    type: 'redrawCompleted';
+    payload: {
+        rectX: number;
+        rectY: number;
+        rectWidth: number;
+        rectHeight: number;
+        rectOffsetTop: number;
+    };
+} | {
+    type: 'captureRequested';
+} | {
+    type: 'captureCompleted';
+    payload: {
+        imageUrl: string;
+        imageBlob: Blob;
+    };
+} | {
+    type: 'retryCapture';
+} | {
+    type: 'uploadStarted';
+} | {
+    type: 'uploadCompleted';
+} | {
+    type: 'uploadFailed';
+};
+export type DocumentCaptureDispatch = Dispatch<DocumentCaptureAction>;
+export declare const DocumentCaptureDispatchContext: React.Context<DocumentCaptureDispatch>;
+export declare const documentCaptureStateReducer: (state: DocumentCaptureState, action: DocumentCaptureAction) => DocumentCaptureState;
+export declare const DocumentCaptureStateProvider: ({ children, }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const useDocumentCaptureState: () => [
+    DocumentCaptureState,
+    DocumentCaptureDispatch
+];

package/dist/components/document_capture/DocumentCaptureWizard.d.ts

@@ -1,14 +1,13 @@
 import React, { ReactNode } from 'react';
-export type DocumentCaptureWizardClassNames = {
-    container?: string;
-    cameraFeed?: string;
-};
+import { CameraFeedMode, DocumentCaptureScreenClassNames } from './DocumentCaptureScreen';
+export type DocumentCaptureWizardClassNames = DocumentCaptureScreenClassNames;
 export type DocumentCaptureWizardProps = {
     onSuccess?: () => void;
     onExitCapture?: () => void;
     onUserCancel?: () => void;
     aspectRatio?: number;
+    cameraFeedMode?: CameraFeedMode;
     instructions?: ReactNode;
     classNames?: DocumentCaptureWizardClassNames;
 };
-export declare const DocumentCaptureWizard: ({ aspectRatio, instructions, classNames, }: DocumentCaptureWizardProps) => React.JSX.Element;
+export declare const DocumentCaptureWizard: ({ onSuccess, aspectRatio, cameraFeedMode, instructions, classNames, }: DocumentCaptureWizardProps) => React.JSX.Element;

package/dist/components/id_capture/IdCaptureModelsProvider.d.ts

@@ -16,6 +16,7 @@ export type IdCapturePrediction = {
     bestDocumentOrPassport: DetectedObject | undefined;
     bestMrz: DetectedObject | undefined;
     bestPdf417: DetectedObject | undefined;
+    documentInBounds: boolean;
     focusScore: number;
     focusThresholdMet: boolean;
     focusPredictionTime: number;
@@ -28,7 +29,10 @@ export type IdCaptureThresholds = {
     passport?: number;
     mrz?: number;
     pdf417?: number;
-    focus?: number;
+    focus?: {
+        desktop?: number;
+        mobile?: number;
+    };
 };
 export declare const PREDICTION_POSITIONS: {
     boxes: number;

package/dist/components/submission/SubmissionProvider.d.ts

@@ -32,6 +32,7 @@ export type SubmissionState = {
     setIdCaptureVideoIdFrontImage: (image: string) => void;
     setIdCaptureVideoIdBackImage: (image: string) => void;
     setAdditionalDocuments: (uploadedDocuments: UploadedDocument[]) => void;
+    uploadDocument: (blob: Blob) => Promise<string>;
     logIdFrontCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
     logIdBackCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
     logSelfieCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
@@ -68,10 +69,11 @@ export type SubmissionProviderProps = {
     webhooksSendProcessedImages?: boolean;
     webhooksFireOnReview?: boolean;
     precapturedDocuments?: CapturedDocuments;
+    documentServiceUrl?: string;
     onSubmit?: (payload: SubmissionRequest) => void;
     onBeforeSubmit?: (req: SubmissionRequest) => Promise<SubmissionRequest>;
     onBeforeLivenessCheck?: (req: LivenessCheckRequest) => Promise<LivenessCheckRequest>;
     onResponseReceived?: (res: SubmissionResponse, req: SubmissionRequest) => void;
     onRequestFailure?: (err: Error) => void;
 };
-export declare const SubmissionProvider: ({ action, children, url, environment, token, companyId, enrollmentId, personalData, cardData, bypassAgeValidation, bypassNameMatching, needImmediateResponse, manualReviewRequired, idBackImageRequired, idImageResolutionCheck, verifyIdWithExternalDatabases, deduplicationEnabled, deduplicationSynchronous, geolocationEnabled, geolocationRequired, webhooksEnabled, webhooksClientTraceId, webhooksStripSpecialCharacters, webhooksSendInputImages, webhooksSendProcessedImages, webhooksFireOnReview, precapturedDocuments, onSubmit, onBeforeSubmit, onBeforeLivenessCheck, onResponseReceived, onRequestFailure, }: SubmissionProviderProps) => ReactElement;
+export declare const SubmissionProvider: ({ action, children, url, environment, token, companyId, enrollmentId, personalData, cardData, bypassAgeValidation, bypassNameMatching, needImmediateResponse, manualReviewRequired, idBackImageRequired, idImageResolutionCheck, verifyIdWithExternalDatabases, deduplicationEnabled, deduplicationSynchronous, geolocationEnabled, geolocationRequired, webhooksEnabled, webhooksClientTraceId, webhooksStripSpecialCharacters, webhooksSendInputImages, webhooksSendProcessedImages, webhooksFireOnReview, precapturedDocuments, documentServiceUrl, onSubmit, onBeforeSubmit, onBeforeLivenessCheck, onResponseReceived, onRequestFailure, }: SubmissionProviderProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -7,6 +7,7 @@ var React = require('react');
 var ReactDOM = require('react-dom/client');
 var styled = require('styled-components');
 var reactI18next = require('react-i18next');
+var tus = require('tus-js-client');
 var useResizeObserver = require('use-resize-observer');
 var tf = require('@tensorflow/tfjs');
 var LanguageDetector = require('i18next-browser-languagedetector');
@@ -40,15 +41,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var tus__namespace = /*#__PURE__*/_interopNamespace(tus);
 var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var tf__namespace = /*#__PURE__*/_interopNamespace(tf);
 var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetector);
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.103';
+var webSdkVersion = '1.0.105';
 
 function getPlatform() {
+  if (typeof window === 'undefined') return;
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return window.platform;
@@ -149,7 +152,7 @@ function attachMetadataToRequest(request, _a) {
     back: idBackCaptureAttempts,
     isRealIDCheckRequired: 'false',
     sdkVersion: "WebSDK_".concat(webSdkVersion),
-    Resolution: "".concat(window.innerWidth, " x ").concat(window.innerHeight)
+    Resolution: typeof window !== 'undefined' ? "".concat(window.innerWidth, " x ").concat(window.innerHeight) : 'unknown'
   };
   var platform = getPlatform();
   if (platform) {
@@ -193,6 +196,7 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     dimensionsCalculated = _c[0],
     setDimensionsCalculated = _c[1];
   React.useEffect(function () {
+    if (typeof window === 'undefined') return;
     setDimensionsCalculated(false);
     var calcAppDimensions = function calcAppDimensions() {
       var doc = document.documentElement;
@@ -663,6 +667,7 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   setAdditionalDocuments: function setAdditionalDocuments() {
     return null;
   },
+  uploadDocument: Promise.resolve,
   logIdFrontCaptureAttempt: function logIdFrontCaptureAttempt() {
     return null;
   },
@@ -729,6 +734,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     _t = _a.webhooksFireOnReview,
     webhooksFireOnReview = _t === void 0 ? false : _t,
     precapturedDocuments = _a.precapturedDocuments,
+    documentServiceUrl = _a.documentServiceUrl,
     onSubmit = _a.onSubmit,
     onBeforeSubmit = _a.onBeforeSubmit,
     onBeforeLivenessCheck = _a.onBeforeLivenessCheck,
@@ -1167,6 +1173,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     tokenError = _17[0],
     setTokenError = _17[1];
   React.useEffect(function () {
+    if (typeof window === 'undefined') return;
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
         var parsed, iss, publicKey, resp, e_3, valid, parts, e_4, exp;
@@ -1239,6 +1246,42 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       });
     })();
   }, [token]);
+  var uploadDocument = React.useCallback(function (blob) {
+    return new Promise(function (resolve, reject) {
+      var upload = new tus__namespace.Upload(blob, {
+        endpoint: documentServiceUrl,
+        retryDelays: [0, 3000, 5000, 10000, 20000],
+        metadata: {
+          filename: 'My File',
+          filetype: 'image/jpeg'
+        },
+        headers: {
+          Authorization: "Bearer ".concat(token)
+        },
+        onProgress: function onProgress(bytesUploaded, bytesTotal) {
+          var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
+          console.log(bytesUploaded, bytesTotal, percentage + '%');
+        },
+        onSuccess: function onSuccess() {
+          console.log('Download from %s', upload.url);
+          resolve(upload.url);
+        },
+        onError: function onError(error) {
+          console.log('Failed because: ' + error);
+          reject(error);
+        }
+      });
+      // Check if there are any previous uploads to continue.
+      upload.findPreviousUploads().then(function (previousUploads) {
+        // Found previous uploads so we select the first one.
+        if (previousUploads.length) {
+          upload.resumeFromPreviousUpload(previousUploads[0]);
+        }
+        // Start the upload
+        upload.start();
+      });
+    });
+  }, [token]);
   var value = {
     submit: submit,
     submissionStatus: submissionStatus,
@@ -1266,6 +1309,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     setIdCaptureVideoIdFrontImage: setIdCaptureVideoIdFrontImage,
     setIdCaptureVideoIdBackImage: setIdCaptureVideoIdBackImage,
     setAdditionalDocuments: setAdditionalDocuments,
+    uploadDocument: uploadDocument,
     logIdFrontCaptureAttempt: logIdFrontCaptureAttempt,
     logIdBackCaptureAttempt: logIdBackCaptureAttempt,
     logSelfieCaptureAttempt: logSelfieCaptureAttempt,
@@ -1309,6 +1353,7 @@ function str2ab(str) {
   return buf;
 }
 function importRsaKey(pem) {
+  if (typeof window === 'undefined') throw new Error('window cannot be undefined');
   // fetch the part of the PEM string between header and footer
   var pemHeader = '-----BEGIN PUBLIC KEY-----';
   var pemFooter = '-----END PUBLIC KEY-----';
@@ -8781,39 +8826,27 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
   var _c = React.useState(false),
     ready = _c[0],
     setReady = _c[1];
-  var _d = React.useState(0),
-    documentDetectionThreshold = _d[0],
-    setDocumentDetectionThreshold = _d[1];
-  var _e = React.useState(0),
-    passportDetectionThreshold = _e[0],
-    setPassportDetectionThreshold = _e[1];
-  var _f = React.useState(0),
-    mrzDetectionThreshold = _f[0],
-    setMrzDetectionThreshold = _f[1];
-  var _g = React.useState(0),
-    pdf417DetectionThreshold = _g[0],
-    setPdf417DetectionThreshold = _g[1];
-  var _h = React.useState(0),
-    focusThreshold = _h[0],
-    setFocusThreshold = _h[1];
+  var _d = React.useState({}),
+    thresholds = _d[0],
+    setThresholds = _d[1];
   var working = React.useRef(false);
   var onPredictionHandler = React.useRef();
   var lastPredictionCanvas = React.useRef(null);
+  var _e = React.useState(0),
+    detectionTime = _e[0],
+    setDetectionTime = _e[1];
+  var _f = React.useState(0),
+    focusPredictionTime = _f[0],
+    setFocusPredictionTime = _f[1];
+  var _g = React.useState(null),
+    loadingError = _g[0],
+    setLoadingError = _g[1];
+  var _h = React.useState(0),
+    bestFrameDetectionScore = _h[0],
+    setBestFrameDetectionScore = _h[1];
   var _j = React.useState(0),
-    detectionTime = _j[0],
-    setDetectionTime = _j[1];
-  var _k = React.useState(0),
-    focusPredictionTime = _k[0],
-    setFocusPredictionTime = _k[1];
-  var _l = React.useState(null),
-    loadingError = _l[0],
-    setLoadingError = _l[1];
-  var _m = React.useState(0),
-    bestFrameDetectionScore = _m[0],
-    setBestFrameDetectionScore = _m[1];
-  var _o = React.useState(0),
-    bestFrameFocusScore = _o[0],
-    setBestFrameFocusScore = _o[1];
+    bestFrameFocusScore = _j[0],
+    setBestFrameFocusScore = _j[1];
   React.useEffect(function () {
     setReady(false);
     var ddmUrl = documentDetectionModelUrl || defaultDocumentDetectionModelUrl;
@@ -8875,25 +8908,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
       (_a = webGLCanvas.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(webGLCanvas, 'webglcontextlost', reloadModels);
     };
   }, [documentDetectionModelUrl, focusModelUrl]);
-  var thresholds = React.useMemo(function () {
-    return {
-      document: documentDetectionThreshold,
-      passport: passportDetectionThreshold,
-      mrz: mrzDetectionThreshold,
-      pdf417: pdf417DetectionThreshold,
-      focus: focusThreshold
-    };
-  }, [documentDetectionThreshold, focusThreshold, mrzDetectionThreshold, passportDetectionThreshold, pdf417DetectionThreshold]);
-  var setThresholds = React.useCallback(function (thresholds) {
-    if (thresholds.document) setDocumentDetectionThreshold(thresholds.document);
-    if (thresholds.passport) setPassportDetectionThreshold(thresholds.passport);
-    if (thresholds.mrz) setMrzDetectionThreshold(thresholds.mrz);
-    if (thresholds.pdf417) setPdf417DetectionThreshold(thresholds.pdf417);
-    if (thresholds.focus) setFocusThreshold(thresholds.focus);
-  }, []);
-  var _p = React.useState(0),
-    timesAllZero = _p[0],
-    setTimesAllZero = _p[1];
+  var _k = React.useState(0),
+    timesAllZero = _k[0],
+    setTimesAllZero = _k[1];
   var bestPredictionCanvas = React.useRef(null);
   var bestFocusScore = React.useRef(0);
   var makePrediction = React.useCallback(function (frame) {
@@ -8977,22 +8994,23 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
     ref: bestPredictionCanvas
   }));
 };
+var onMobile = isMobile();
 function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   if (logPredictions === void 0) {
     logPredictions = false;
   }
   return tslib.__awaiter(this, void 0, void 0, function () {
-    var _l, frameWidth, frameHeight, _o, boxes, scores, labels, time, allZero, detectedObjects, bestDocument, bestPassportPage, bestDocumentScore, passportDetectionScore, passportDetectionThresholdMet, bestDocumentOrPassport, detectionScore, detectionThresholdMet, detectedDocumentType, bestMrz, mrzDetectionScore, mrzDetectionThresholdMet, bestPdf417, pdf417DetectionScore, pdf417DetectionThresholdMet, focusPrediction, focusPredictionTime, focusScore, focusThresholdMet;
-    var _p;
-    return tslib.__generator(this, function (_q) {
-      switch (_q.label) {
+    var _o, frameWidth, frameHeight, _q, boxes, scores, labels, time, allZero, detectedObjects, bestDocument, bestPassportPage, bestDocumentScore, passportDetectionScore, passportDetectionThresholdMet, bestDocumentOrPassport, detectionScore, detectionThresholdMet, detectedDocumentType, bestMrz, mrzDetectionScore, mrzDetectionThresholdMet, bestPdf417, pdf417DetectionScore, pdf417DetectionThresholdMet, documentInBounds, boundaryPx, _r, boundaryX, boundaryY, boundaryWidth, boundaryHeight, focusPrediction, focusPredictionTime, focusScore, focusThresholdMet, focusThreshold;
+    var _s;
+    return tslib.__generator(this, function (_t) {
+      switch (_t.label) {
         case 0:
-          _l = getFrameDimensions(frame), frameWidth = _l[0], frameHeight = _l[1];
+          _o = getFrameDimensions(frame), frameWidth = _o[0], frameHeight = _o[1];
           drawToCanvas(lastPredictionCanvas, frame);
           return [4 /*yield*/, makeDocumentDetectionPredictions(frame, logPredictions)];
         case 1:
-          _o = _q.sent(), boxes = _o.boxes, scores = _o.scores, labels = _o.labels, time = _o.time;
+          _q = _t.sent(), boxes = _q.boxes, scores = _q.scores, labels = _q.labels, time = _q.time;
           allZero = boxes.length > 0 && !boxes.some(function (box) {
             return box.some(function (n) {
               return n > 0;
@@ -9029,14 +9047,31 @@ function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions
           });
           pdf417DetectionScore = (_g = bestPdf417 === null || bestPdf417 === void 0 ? void 0 : bestPdf417.score) !== null && _g !== void 0 ? _g : 0;
           pdf417DetectionThresholdMet = pdf417DetectionScore >= ((_h = thresholds.pdf417) !== null && _h !== void 0 ? _h : 0);
+          documentInBounds = false;
+          if (bestDocumentOrPassport) {
+            boundaryPx = 20;
+            _r = bestDocumentOrPassport.bbox, boundaryX = _r[0], boundaryY = _r[1], boundaryWidth = _r[2], boundaryHeight = _r[3];
+            boundaryX *= frameWidth;
+            boundaryWidth *= frameWidth;
+            boundaryY *= frameHeight;
+            boundaryHeight *= frameHeight;
+            documentInBounds = boundaryY > boundaryPx &&
+            // Is it valid top edge of ID detected?
+            boundaryY + boundaryHeight + boundaryPx < frameHeight && (
+            // Is it valid bottom edge less than max video height
+            boundaryX > boundaryPx || boundaryX < boundaryPx && boundaryX + boundaryWidth > frameWidth * 0.8) &&
+            // If either the left side visible or if not, right edge of ID should be more than 80% of width.
+            boundaryX + boundaryWidth + boundaryPx < frameWidth; // Valid right edge if it's less than video width.
+          }
           focusPrediction = null, focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
-          if (!detectionThresholdMet) return [3 /*break*/, 3];
+          if (!(detectionThresholdMet && documentInBounds)) return [3 /*break*/, 3];
           return [4 /*yield*/, makeFocusPrediction(frame, bestDocumentOrPassport === null || bestDocumentOrPassport === void 0 ? void 0 : bestDocumentOrPassport.bbox, logPredictions)];
         case 2:
-          _p = _q.sent(), focusPrediction = _p[0], focusPredictionTime = _p[1];
+          _s = _t.sent(), focusPrediction = _s[0], focusPredictionTime = _s[1];
           focusScore = (_j = focusPrediction === null || focusPrediction === void 0 ? void 0 : focusPrediction[1]) !== null && _j !== void 0 ? _j : 0;
-          focusThresholdMet = focusScore >= ((_k = thresholds.focus) !== null && _k !== void 0 ? _k : 0);
-          _q.label = 3;
+          focusThreshold = (_m = onMobile ? (_k = thresholds.focus) === null || _k === void 0 ? void 0 : _k.mobile : (_l = thresholds.focus) === null || _l === void 0 ? void 0 : _l.desktop) !== null && _m !== void 0 ? _m : 0;
+          focusThresholdMet = focusScore >= focusThreshold;
+          _t.label = 3;
         case 3:
           return [2 /*return*/, {
             detectedObjects: detectedObjects,
@@ -9053,6 +9088,7 @@ function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions
             bestDocumentOrPassport: bestDocumentOrPassport,
             bestMrz: bestMrz,
             bestPdf417: bestPdf417,
+            documentInBounds: documentInBounds,
             focusScore: focusScore,
             focusThresholdMet: focusThresholdMet,
             focusPredictionTime: focusPredictionTime,
@@ -9722,6 +9758,7 @@ var reducer$5 = function reducer(state, action) {
         bestDocumentOrPassport = _a.bestDocumentOrPassport,
         bestMrz = _a.bestMrz,
         bestPdf417 = _a.bestPdf417,
+        documentInBounds = _a.documentInBounds,
         focusScore = _a.focusScore,
         focusThresholdMet = _a.focusThresholdMet,
         frameWidth = _a.frameWidth,
@@ -9735,26 +9772,6 @@ var reducer$5 = function reducer(state, action) {
           goodFramesThreshold = Math.ceil(3 * frameCaptureRate);
         }
       }
-      var documentInBounds = false;
-      if (bestDocumentOrPassport) {
-        var boundaryPx = 20;
-        var _b = bestDocumentOrPassport.bbox,
-          boundaryX = _b[0],
-          boundaryY = _b[1],
-          boundaryWidth = _b[2],
-          boundaryHeight = _b[3];
-        boundaryX *= frameWidth;
-        boundaryWidth *= frameWidth;
-        boundaryY *= frameHeight;
-        boundaryHeight *= frameHeight;
-        documentInBounds = boundaryY > boundaryPx &&
-        // Is it valid top edge of ID detected?
-        boundaryY + boundaryHeight + boundaryPx < frameHeight && (
-        // Is it valid bottom edge less than max video height
-        boundaryX > boundaryPx || boundaryX < boundaryPx && boundaryX + boundaryWidth > frameWidth * 0.8) &&
-        // If either the left side visible or if not, right edge of ID should be more than 80% of width.
-        boundaryX + boundaryWidth + boundaryPx < frameWidth; // Valid right edge if it's less than video width.
-      }
       var barcodeScanRequired = state.autoCaptureBarcodeRequired === true || state.autoCaptureBarcodeRequired === 'mobile' && isMobile();
       var shouldScanBarcode = state.barcodeScanningEnabled && pdf417DetectionThresholdMet && barcodeScanRequired;
       var waitingForBarcodeScan = shouldScanBarcode && !state.barcodeResult;
@@ -9925,7 +9942,9 @@ var IdCapture = function IdCapture(_a) {
       passport: passportPageDetectionThreshold,
       mrz: mrzDetectionScoreThreshold,
       pdf417: pdf417DetectionThreshold,
-      focus: focusScoreThreshold
+      focus: {
+        mobile: focusScoreThreshold
+      }
     });
   }, [requiredDocumentType, autoCaptureScoreThreshold, focusScoreThreshold, mrzDetectionScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, barcodeScanningEnabled, maxBarcodeScanAttempts, passportPageDetectionThreshold, pdf417DetectionThreshold, resetBestFrame, setThresholds]);
   var animationFrame = React.useRef(0);
@@ -10565,7 +10584,7 @@ var CameraVideoTag = function CameraVideoTag(_a) {
     "$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$h || (templateObject_1$h = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$h || (templateObject_1$h = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n  background: black;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n  background: black;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
 var templateObject_1$h;
@@ -12821,7 +12840,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     var _b = [cameraRef.current.width, cameraRef.current.height],
       w = _b[0],
       h = _b[1];
-    var isPortrait = window.innerWidth < window.innerHeight;
+    var isPortrait = typeof window !== 'undefined' && window.innerWidth < window.innerHeight;
     var cameraIsLandscape = w > h;
     if (isPortrait && cameraIsLandscape) _a = [h, w], w = _a[0], h = _a[1];
     outputCanvas.current.width = w;
@@ -13331,7 +13350,7 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     idBackInstructionText: 'Display the back of your ID card...'
   });
   var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : verbiage.idBackInstructionText;
-  var idGuideWidth = window.innerWidth > window.innerHeight ? '30%' : '75%';
+  var idGuideWidth = typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '30%' : '75%';
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       position: 'absolute',
@@ -13476,7 +13495,7 @@ var ReadTextPromptHeading = styled__default['default'].div(templateObject_2$4 ||
   var _a, _b, _c, _d, _e, _f;
   return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.heading) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.heading) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
 });
-var ReadTextPromptText = styled__default['default'].div(templateObject_3$4 || (templateObject_3$4 = tslib.__makeTemplateObject(["\n  margin: 0 auto;\n  text-align: center;\n  padding: 50px;\n  font-size: 24px;\n  max-width: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  margin: 0 auto;\n  text-align: center;\n  padding: 50px;\n  font-size: 24px;\n  max-width: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"])), window.innerWidth > window.innerHeight ? '40%' : '90%', function (props) {
+var ReadTextPromptText = styled__default['default'].div(templateObject_3$4 || (templateObject_3$4 = tslib.__makeTemplateObject(["\n  margin: 0 auto;\n  text-align: center;\n  padding: 50px;\n  font-size: 24px;\n  max-width: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  margin: 0 auto;\n  text-align: center;\n  padding: 50px;\n  font-size: 24px;\n  max-width: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"])), typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '40%' : '90%', function (props) {
   var _a, _b, _c, _d, _e, _f;
   return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.prompt) === null || _c === void 0 ? void 0 : _c.backgroundColor) ? "background: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.prompt) === null || _f === void 0 ? void 0 : _f.backgroundColor, ";") : "";
 }, function (props) {
@@ -13592,7 +13611,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     setThresholds({
       document: idCardFrontDetectionThreshold,
       passport: 1,
-      focus: idCardFrontFocusThreshold
+      focus: {
+        mobile: idCardFrontFocusThreshold
+      }
     });
   }, [idCardFrontDetectionThreshold, idCardFrontFocusThreshold, setThresholds]);
   var _4 = React.useState(0),