idmission-web-sdk 1.0.102 → 1.0.104

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

@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import { ThemeInput } from '../../themes';
+import { LangOption } from '../../lib/locales';
+import { SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
+import { DocumentCaptureWizardClassNames } from '../document_capture/DocumentCaptureWizard';
+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. */
+    lang?: LangOption;
+    /** A token generated with your IDmission credentials. */
+    submissionToken: string;
+    /** URL to hit with all API requests. Defaults to the value specified in your decoded `submissionToken`. */
+    submissionUrl?: 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! */
+    onSubmit?: (req: SubmissionRequest) => void;
+    /** Callback function that fires when the user completes the DocumentCapture flow. Arguments: the SubmissionResponse from IDmission's API is passed as an argument to the customer's application for further handling, which indicates whether the user passed the validation check, and the request payload dispatched to IDmission's API, which contains the images submitted by the user. */
+    onComplete?: (resp: SubmissionResponse, req: SubmissionRequest) => void;
+    /** Callback function that fires when the user clicks the exit button during ID or selfie capture. */
+    onExitCapture?: () => void;
+    /** 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;
+    instructions?: ReactNode;
+    /** Name of an included theme or object containing theme properties. **/
+    theme?: ThemeInput;
+    /** Object containing any classNames for inner components. **/
+    classNames?: DocumentCaptureClassNames;
+}
+/**
+ * Render a fullscreen capture component that instructs the user to photograph their document.
+ */
+export declare const DocumentCapture: FC<DocumentCaptureProps>;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export type DocumentCaptureGuideOverlayClassNames = {
+    container?: string;
+};
+export type DocumentCaptureGuideOverlayProps = {
+    aspectRatio?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    borderWidth?: number;
+    maskColor?: string;
+    padding?: number;
+    classNames?: DocumentCaptureGuideOverlayClassNames;
+};
+export declare const DocumentCaptureGuideOverlay: ({ aspectRatio, borderRadius, borderColor, borderWidth, maskColor, padding, classNames, }: DocumentCaptureGuideOverlayProps) => React.JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocumentCaptureGuideOverlayClassNames } from './DocumentCaptureGuideOverlay';
+import { IdCaptureGuideOverlayClassNames } from './IdCaptureGuideOverlay';
 import { PDF417DetectionResult } from '../../lib/barcode/Native';
 import { CaptureAttemptMetadata } from '../../contexts/SubmissionContext';
 import { IdCapturePrediction } from './IdCaptureModelsProvider';
@@ -12,7 +12,7 @@ export type IdCaptureAssets = {
 };
 export type IdCaptureClassNames = {
     container?: string;
-    guides?: DocumentCaptureGuideOverlayClassNames;
+    guides?: IdCaptureGuideOverlayClassNames;
     guidanceMessageContainer?: string;
     guidanceMessage?: string;
     imagePreview?: IdCaptureImagePreviewClassNames;

package/dist/components/id_capture/{DocumentCaptureGuideOverlay.d.ts → IdCaptureGuideOverlay.d.ts}

@@ -831,7 +831,7 @@ export declare const GuideImage: import("styled-components").IStyledComponent<"w
     $height?: number | undefined;
     $padding: number;
 }>>;
-export type DocumentCaptureGuideOverlayClassNames = {
+export type IdCaptureGuideOverlayClassNames = {
     container?: string;
     inner?: string;
     dimmingRegion?: string;
@@ -845,8 +845,8 @@ export type DocumentCaptureGuideOverlayClassNames = {
     image?: string;
     guideText?: string;
 };
-export type DocumentCaptureGuideOverlayProps = {
-    classNames?: DocumentCaptureGuideOverlayClassNames;
+export type IdCaptureGuideOverlayProps = {
+    classNames?: IdCaptureGuideOverlayClassNames;
     width?: number;
     height?: number;
     padding?: number;
@@ -859,4 +859,4 @@ export type DocumentCaptureGuideOverlayProps = {
     landscapeGuidesImageUrl?: string;
     onClick?: () => void;
 };
-export declare const DocumentCaptureGuideOverlay: ({ classNames, width, height, padding: userSuppliedPadding, imagePadding: userSuppliedImagePadding, borderWidth, borderColor, isMirrored, instruction, portraitGuidesImageUrl, landscapeGuidesImageUrl, onClick, }: DocumentCaptureGuideOverlayProps) => ReactElement;
+export declare const IdCaptureGuideOverlay: ({ classNames, width, height, padding: userSuppliedPadding, imagePadding: userSuppliedImagePadding, borderWidth, borderColor, isMirrored, instruction, portraitGuidesImageUrl, landscapeGuidesImageUrl, onClick, }: IdCaptureGuideOverlayProps) => ReactElement;

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/sdk2.cjs.development.js

@@ -46,7 +46,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.102';
+var webSdkVersion = '1.0.104';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1394,9 +1394,10 @@ function isBrowser() {
         (typeof WorkerGlobalScope !== 'undefined');
 }
 
-var GuidesContainer = styled__default['default'].div(templateObject_1$t || (templateObject_1$t = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"])));
-var GuideCenterRow = styled__default['default'].div(templateObject_2$h || (templateObject_2$h = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var GuideRegion = styled__default['default'].div(templateObject_3$c || (templateObject_3$c = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
+var StyledPageContainer = styled__default['default'](PageContainer)(templateObject_1$t || (templateObject_1$t = tslib.__makeTemplateObject(["\n  z-index: 1000;\n"], ["\n  z-index: 1000;\n"])));
+var GuidesContainer = styled__default['default'].div(templateObject_2$h || (templateObject_2$h = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n"])));
+var GuideCenterRow = styled__default['default'].div(templateObject_3$c || (templateObject_3$c = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var GuideRegion = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  background: ", ";\n  color: ", ";\n  text-align: center;\n  ", "\n  ", "\n"])), function (props) {
   var _a, _b, _c, _d;
   return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.guideOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : 'rgba(0, 0, 0, 0.5)';
 }, function (props) {
@@ -1407,22 +1408,22 @@ var GuideRegion = styled__default['default'].div(templateObject_3$c || (template
 }, function (props) {
   return props.$minHeight ? "min-width: ".concat(props.$minHeight, "px;") : "";
 });
-var GuideCenterRegion = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = tslib.__makeTemplateObject(["\n  ", "\n  box-sizing: border-box;\n"], ["\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
+var GuideCenterRegion = styled__default['default'].div(templateObject_5$3 || (templateObject_5$3 = tslib.__makeTemplateObject(["\n  ", "\n  box-sizing: border-box;\n"], ["\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
   return props.$isMirrored ? 'transform: scaleX(-1);' : '';
 });
-var GuideCenterBorder = styled__default['default'].div(templateObject_5$3 || (templateObject_5$3 = tslib.__makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  border: ", ";\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  border: ", ";\n"])), function (props) {
+var GuideCenterBorder = styled__default['default'].div(templateObject_6$2 || (templateObject_6$2 = tslib.__makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  border: ", ";\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  border: ", ";\n"])), function (props) {
   var _a, _b;
   return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
 });
-var GuideText = styled__default['default'].span(templateObject_6$2 || (templateObject_6$2 = tslib.__makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
-var GuideImage = styled__default['default'].img(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
+var GuideText = styled__default['default'].span(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
+var GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
   return props.$padding;
 }, function (props) {
   return props.$width ? "width: ".concat(props.$width, "px;\n         max-width: ").concat(props.$width, "px;") : "max-width: none;";
 }, function (props) {
   return props.$height ? "height: ".concat(props.$height, "px;\n         max-height: ").concat(props.$height, "px;") : "max-height: none;";
 });
-var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
+var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   var _p = _a.classNames,
     classNames = _p === void 0 ? {} : _p,
@@ -1514,7 +1515,6 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
     }
   }, instruction)))));
 };
-var StyledPageContainer = styled__default['default'](PageContainer)(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  z-index: 1000;\n"], ["\n  z-index: 1000;\n"])));
 var regionClsx$1 = function regionClsx(classNames, which) {
   return [classNames.dimmingRegion, classNames["dimmingRegion".concat(which)]].filter(function (v) {
     return v;
@@ -2127,13 +2127,13 @@ function loadFocusModel(url) {
         case 2:
           _e.sent();
           zeroes = tf__namespace.zeros([448, 448, 3]);
-          tfInt32 = tf__namespace.cast(zeroes, 'int32');
+          tfInt32 = tf__namespace.cast(zeroes, 'float32');
           _b = (_a = tf__namespace).tensor4d;
           _d = (_c = Array).from;
           return [4 /*yield*/, tfInt32.data()];
         case 3:
           tf4d_ = _b.apply(_a, [_d.apply(_c, [_e.sent()]), [1, 448, 448, 3]]);
-          tf4d = tf__namespace.cast(tf4d_, 'int32');
+          tf4d = tf__namespace.cast(tf4d_, 'float32');
           return [4 /*yield*/, focusModel.predict(tf4d)];
         case 4:
           warmupResult = _e.sent();
@@ -8781,39 +8781,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 +8863,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 +8949,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 +9002,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 +9043,7 @@ function makePredictions(frame, lastPredictionCanvas, thresholds, logPredictions
             bestDocumentOrPassport: bestDocumentOrPassport,
             bestMrz: bestMrz,
             bestPdf417: bestPdf417,
+            documentInBounds: documentInBounds,
             focusScore: focusScore,
             focusThresholdMet: focusThresholdMet,
             focusPredictionTime: focusPredictionTime,
@@ -9722,6 +9713,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 +9727,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 +9897,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);
@@ -10128,7 +10102,7 @@ var IdCapture = function IdCapture(_a) {
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex ".concat((_l = classNames.container) !== null && _l !== void 0 ? _l : '')
-  }, /*#__PURE__*/React__default['default'].createElement(DocumentCaptureGuideOverlay, {
+  }, /*#__PURE__*/React__default['default'].createElement(IdCaptureGuideOverlay, {
     classNames: classNames.guides,
     width: width,
     height: height,
@@ -13592,7 +13566,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     setThresholds({
       document: idCardFrontDetectionThreshold,
       passport: 1,
-      focus: idCardFrontFocusThreshold
+      focus: {
+        mobile: idCardFrontFocusThreshold
+      }
     });
   }, [idCardFrontDetectionThreshold, idCardFrontFocusThreshold, setThresholds]);
   var _4 = React.useState(0),