idmission-web-sdk 2.3.88 → 2.3.90

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.88';
+  var webSdkVersion = '2.3.90';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -472,27 +472,27 @@
     if (!portalLocation) return element;
     return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
   };
-  var GuidanceMessage = styled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
+  var GuidanceMessage = styled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  z-index: 10001;\n  padding: 16px 24px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow:\n    0 1px 3px 0 rgb(0 0 0 / 0.1),\n    0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : 'white';
   }, function (props) {
     var _a, _b, _c, _d, _e, _f;
     return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
   });
-  var templateObject_1$P, templateObject_2$I;
+  var templateObject_1$P, templateObject_2$J;
 
   var wavesAnimation = styled.keyframes(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"], ["\n    0% {\n        opacity: 0;\n        transform: scale3d(1, 1, 1);\n    }\n    80% {\n        opacity: 1;\n    }\n    100% {\n        transform: scale3d(2, 2, 1);\n        opacity: 0;\n    }\n"])));
-  var progressBarAnimation = styled.keyframes(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
+  var progressBarAnimation = styled.keyframes(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"], ["\n    0% {\n        width: 0;\n    }\n    100% {\n        width: 100%;\n    }\n"])));
   var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"], ["\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n"])));
   var progressBorderAnimation = styled.keyframes(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n    to {\n        stroke-dashoffset: 0;\n    }\n"], ["\n    to {\n        stroke-dashoffset: 0;\n    }\n"])));
-  var templateObject_1$O, templateObject_2$H, templateObject_3$u, templateObject_4$o;
+  var templateObject_1$O, templateObject_2$I, templateObject_3$u, templateObject_4$o;
 
   var OverlayContainer = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  background: ", ";\n  ", "\n\n  z-index: 10000;\n"])), function (props) {
     return props.theme.background ? "".concat(props.theme.background) : "white";
   }, function (props) {
     return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
   });
-  var OverlayInner$2 = styled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
+  var OverlayInner$2 = styled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  text-align: ", ";\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (props) {
     var _a;
     return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
   }, function (props) {
@@ -540,7 +540,7 @@
   var LoadingOverlayProgressContainer = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
   var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n"], ["\n  transform-style: preserve-3d;\n"])));
   var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-  var templateObject_1$N, templateObject_2$G, templateObject_3$t, templateObject_4$n, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+  var templateObject_1$N, templateObject_2$H, templateObject_3$t, templateObject_4$n, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
 
   function _extends() {
     return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -2083,6 +2083,11 @@
     idFrontImage: null,
     idBackImage: null,
     passportImage: null,
+    idFrontIrImage: null,
+    idBackIrImage: null,
+    idFrontUvImage: null,
+    idBackUvImage: null,
+    idBarcodeImage: null,
     selfieImage: null,
     signatureData: null,
     signatureVideoUrl: null,
@@ -2113,6 +2118,9 @@
     setIdBackUvImage: function setIdBackUvImage() {
       return null;
     },
+    setIdBarcodeImage: function setIdBarcodeImage() {
+      return null;
+    },
     setSelfieImage: function setSelfieImage() {
       return null;
     },
@@ -2125,6 +2133,12 @@
     setIdCaptureVideoUrl: function setIdCaptureVideoUrl() {
       return null;
     },
+    setSignatureStartTimestamp: function setSignatureStartTimestamp() {
+      return null;
+    },
+    setSignatureEndTimestamp: function setSignatureEndTimestamp() {
+      return null;
+    },
     setIdCaptureVideoIdFrontImage: function setIdCaptureVideoIdFrontImage() {
       return null;
     },
@@ -2280,53 +2294,62 @@
       passportImage = _13[0],
       setPassportImage = _13[1];
     var _14 = React.useState(null),
-      selfieImage = _14[0],
-      setSelfieImage = _14[1];
+      idBarcodeImage = _14[0],
+      setIdBarcodeImage = _14[1];
     var _15 = React.useState(null),
-      signatureData = _15[0],
-      setSignatureData = _15[1];
+      selfieImage = _15[0],
+      setSelfieImage = _15[1];
     var _16 = React.useState(null),
-      signatureVideoUrl = _16[0],
-      setSignatureVideoUrl = _16[1];
+      signatureData = _16[0],
+      setSignatureData = _16[1];
     var _17 = React.useState(null),
-      idCaptureVideoUrl = _17[0],
-      setIdCaptureVideoUrl = _17[1];
+      signatureVideoUrl = _17[0],
+      setSignatureVideoUrl = _17[1];
     var _18 = React.useState(null),
-      idCaptureVideoIdFrontImage = _18[0],
-      setIdCaptureVideoIdFrontImage = _18[1];
+      signatureStartTimestamp = _18[0],
+      setSignatureStartTimestamp = _18[1];
     var _19 = React.useState(null),
-      idCaptureVideoIdBackImage = _19[0],
-      setIdCaptureVideoIdBackImage = _19[1];
+      signatureEndTimestamp = _19[0],
+      setSignatureEndTimestamp = _19[1];
     var _20 = React.useState(null),
-      idCaptureVideoAudioUrl = _20[0],
-      setIdCaptureVideoAudioUrl = _20[1];
+      idCaptureVideoUrl = _20[0],
+      setIdCaptureVideoUrl = _20[1];
     var _21 = React.useState(null),
-      idCaptureVideoAudioStartsAt = _21[0],
-      setIdCaptureVideoAudioStartsAt = _21[1];
+      idCaptureVideoIdFrontImage = _21[0],
+      setIdCaptureVideoIdFrontImage = _21[1];
     var _22 = React.useState(null),
-      expectedAudioText = _22[0],
-      setExpectedAudioText = _22[1];
+      idCaptureVideoIdBackImage = _22[0],
+      setIdCaptureVideoIdBackImage = _22[1];
     var _23 = React.useState(null),
-      additionalDocuments = _23[0],
-      setAdditionalDocuments = _23[1];
+      idCaptureVideoAudioUrl = _23[0],
+      setIdCaptureVideoAudioUrl = _23[1];
     var _24 = React.useState(null),
-      geolocationResult = _24[0],
-      setGeolocationResult = _24[1];
-    var _25 = React.useState(0),
-      geolocationAttempts = _25[0],
-      setGeolocationAttempts = _25[1];
-    var _26 = React.useState(false),
-      geolocationBlocked = _26[0],
-      setGeolocationBlocked = _26[1];
-    var _27 = React.useState([]),
-      idFrontCaptureAttempts = _27[0],
-      setIdFrontCaptureAttempts = _27[1];
-    var _28 = React.useState([]),
-      idBackCaptureAttempts = _28[0],
-      setIdBackCaptureAttempts = _28[1];
-    var _29 = React.useState([]),
-      selfieCaptureAttempts = _29[0],
-      setSelfieCaptureAttempts = _29[1];
+      idCaptureVideoAudioStartsAt = _24[0],
+      setIdCaptureVideoAudioStartsAt = _24[1];
+    var _25 = React.useState(null),
+      expectedAudioText = _25[0],
+      setExpectedAudioText = _25[1];
+    var _26 = React.useState(null),
+      additionalDocuments = _26[0],
+      setAdditionalDocuments = _26[1];
+    var _27 = React.useState(null),
+      geolocationResult = _27[0],
+      setGeolocationResult = _27[1];
+    var _28 = React.useState(0),
+      geolocationAttempts = _28[0],
+      setGeolocationAttempts = _28[1];
+    var _29 = React.useState(false),
+      geolocationBlocked = _29[0],
+      setGeolocationBlocked = _29[1];
+    var _30 = React.useState([]),
+      idFrontCaptureAttempts = _30[0],
+      setIdFrontCaptureAttempts = _30[1];
+    var _31 = React.useState([]),
+      idBackCaptureAttempts = _31[0],
+      setIdBackCaptureAttempts = _31[1];
+    var _32 = React.useState([]),
+      selfieCaptureAttempts = _32[0],
+      setSelfieCaptureAttempts = _32[1];
     var logIdFrontCaptureAttempt = React.useCallback(function (attempt) {
       setIdFrontCaptureAttempts(function (attempts) {
         return __spreadArray(__spreadArray([], attempts, true), [attempt], false);
@@ -2452,6 +2475,7 @@
                 idFrontImage: idFrontImage,
                 idBackImage: idBackImage,
                 passportImage: passportImage,
+                idBarcodeImage: idBarcodeImage,
                 selfieImage: selfieImage
               };
               _a = signatureVideoUrl;
@@ -2557,6 +2581,9 @@
               if (documents.passportImage) {
                 submissionRequest.customerData.idData.idImageFront = documents.passportImage;
               }
+              if (documents.idBarcodeImage) {
+                submissionRequest.customerData.idData.idBarcodeImage = documents.idBarcodeImage;
+              }
               if (documents.idFrontIrImage) {
                 submissionRequest.customerData.idData.idFrontIrImage = documents.idFrontIrImage;
               }
@@ -2603,6 +2630,12 @@
                   submissionRequest.customerData.signatureData.signatureVideo = documents.signatureVideo;
                 }
               }
+              if (signatureStartTimestamp) {
+                submissionRequest.customerData.signatureStartTimestamp = signatureStartTimestamp;
+              }
+              if (signatureEndTimestamp) {
+                submissionRequest.customerData.signatureEndTimestamp = signatureEndTimestamp;
+              }
               if (additionalDocuments) {
                 submissionRequest.customerData.additionalDocuments = additionalDocuments.map(function (d) {
                   return _assign(_assign({}, d), {
@@ -2645,7 +2678,7 @@
           }
         });
       });
-    }, [additionalDocuments, bypassAgeValidation, bypassNameMatching, cardData, clientRequestID, companyId, customerDataMatchConfig, deduplicationEnabled, deduplicationSynchronous, documentServiceUrl, enrollmentId, expectedAudioText, geolocationResult, idBackCaptureAttempts, idBackImage, idBackImageRequired, idBackIrImage, idBackUvImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idCardForFaceMatch, idData, idFrontCaptureAttempts, idFrontImage, idFrontIrImage, idFrontUvImage, idImageResolutionCheck, jobId, manualReviewRequired, needImmediateResponse, passportImage, personalData, selfieCaptureAttempts, selfieImage, signatureData, signatureVideoUrl, uploadDocument, verifyIdWithExternalDatabases, webhooksClientTraceId, webhooksEnabled, webhooksFireOnReview, webhooksFireOnReviewURL, webhooksSendInputImages, webhooksSendProcessedImages, webhooksStripSpecialCharacters, webhooksURL]);
+    }, [additionalDocuments, bypassAgeValidation, bypassNameMatching, cardData, clientRequestID, companyId, customerDataMatchConfig, deduplicationEnabled, deduplicationSynchronous, documentServiceUrl, enrollmentId, expectedAudioText, geolocationResult, idBackCaptureAttempts, idBackImage, idBackImageRequired, idBackIrImage, idBackUvImage, idBarcodeImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idCardForFaceMatch, idData, idFrontCaptureAttempts, idFrontImage, idFrontIrImage, idFrontUvImage, idImageResolutionCheck, jobId, manualReviewRequired, needImmediateResponse, passportImage, personalData, selfieCaptureAttempts, selfieImage, signatureData, signatureEndTimestamp, signatureStartTimestamp, signatureVideoUrl, uploadDocument, verifyIdWithExternalDatabases, webhooksClientTraceId, webhooksEnabled, webhooksFireOnReview, webhooksFireOnReviewURL, webhooksSendInputImages, webhooksSendProcessedImages, webhooksStripSpecialCharacters, webhooksURL]);
     var defaultOnSubmit = React.useCallback(function () {
       return __awaiter(void 0, void 0, void 0, function () {
         var submissionResponse_1, payload, host, endpoint, response, statusMessage, submissionResponse_2, e_1, err;
@@ -2923,6 +2956,7 @@
         idFrontUvImage: idFrontUvImage,
         idBackUvImage: idBackUvImage,
         passportImage: passportImage,
+        idBarcodeImage: idBarcodeImage,
         selfieImage: selfieImage,
         signatureData: signatureData,
         signatureVideoUrl: signatureVideoUrl,
@@ -2939,9 +2973,12 @@
         setIdBackIrImage: setIdBackIrImage,
         setIdFrontUvImage: setIdFrontUvImage,
         setIdBackUvImage: setIdBackUvImage,
+        setIdBarcodeImage: setIdBarcodeImage,
         setSelfieImage: setSelfieImage,
         setSignatureData: setSignatureData,
         setSignatureVideoUrl: setSignatureVideoUrl,
+        setSignatureStartTimestamp: setSignatureStartTimestamp,
+        setSignatureEndTimestamp: setSignatureEndTimestamp,
         setIdCaptureVideoUrl: setIdCaptureVideoUrl,
         setIdCaptureVideoIdFrontImage: setIdCaptureVideoIdFrontImage,
         setIdCaptureVideoIdBackImage: setIdCaptureVideoIdBackImage,
@@ -2957,7 +2994,7 @@
         checkLiveness: checkLiveness,
         retryLocationAccess: retryLocationAccess
       };
-    }, [additionalDocuments, checkLiveness, environment, idBackImage, idBackIrImage, idBackUvImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idFrontImage, idFrontIrImage, idFrontUvImage, livenessCheckRequest, logIdBackCaptureAttempt, logIdFrontCaptureAttempt, logSelfieCaptureAttempt, passportImage, retryLocationAccess, selfieImage, signatureData, signatureVideoUrl, submissionError, submissionRequest, submissionResponse, submissionStatus, submit, uploadDocument]);
+    }, [additionalDocuments, checkLiveness, environment, idBackImage, idBackIrImage, idBackUvImage, idBarcodeImage, idCaptureVideoAudioStartsAt, idCaptureVideoAudioUrl, idCaptureVideoIdBackImage, idCaptureVideoIdFrontImage, idCaptureVideoUrl, idFrontImage, idFrontIrImage, idFrontUvImage, livenessCheckRequest, logIdBackCaptureAttempt, logIdFrontCaptureAttempt, logSelfieCaptureAttempt, passportImage, retryLocationAccess, selfieImage, signatureData, signatureVideoUrl, submissionError, submissionRequest, submissionResponse, submissionStatus, submit, uploadDocument]);
     return /*#__PURE__*/React.createElement(SubmissionContext.Provider, {
       value: value
     }, geolocationRequired && geolocationBlocked ? ( /*#__PURE__*/React.createElement(GeolocationAccessDeniedOverlay, null)) : children, submissionError && ( /*#__PURE__*/React.createElement(SubmissionErrorOverlay, {
@@ -8075,97 +8112,6 @@
     });
   }
 
-  function getFrameDimensions(frame) {
-    var frameWidth = frame.width,
-      frameHeight = frame.height;
-    if (frame instanceof HTMLImageElement) {
-      frameWidth = frame.naturalWidth;
-      frameHeight = frame.naturalHeight;
-    }
-    if (frame instanceof HTMLVideoElement) {
-      frameWidth = frame.videoWidth;
-      frameHeight = frame.videoHeight;
-    }
-    return [frameWidth, frameHeight];
-  }
-
-  var InvisibleCanvas = styled.canvas(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-  function drawToCanvas(canvas, frame, width, height) {
-    if (!canvas) return;
-    var ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    if (!width || !height) {
-      var _a = getFrameDimensions(frame),
-        frameWidth = _a[0],
-        frameHeight = _a[1];
-      width || (width = frameWidth);
-      height || (height = frameHeight);
-    }
-    canvas.width = width;
-    canvas.height = height;
-    ctx.drawImage(frame, 0, 0, width, height);
-  }
-  function clearCanvas(canvas) {
-    var _a;
-    (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
-  }
-  var templateObject_1$M;
-
-  function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
-    var _a;
-    if (quality === void 0) {
-      quality = 0.92;
-    }
-    if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
-    var rawCtx = rawCanvas.getContext('2d');
-    var cropCtx = cropCanvas.getContext('2d');
-    var resizeCtx = resizeCanvas.getContext('2d');
-    if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
-    rawCanvas.width = frame.width;
-    rawCanvas.height = frame.height;
-    rawCtx.putImageData(frame, 0, 0);
-    if (frame.height > frame.width) {
-      cropCanvas.width = frame.width;
-      cropCanvas.height = frame.height;
-      cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
-    } else {
-      var _b = (_a = face === null || face === void 0 ? void 0 : face.box) !== null && _a !== void 0 ? _a : {
-          xMin: 0,
-          width: frame.width
-        },
-        xMin = _b.xMin,
-        width = _b.width;
-      var desiredWidth = frame.height * 0.6;
-      var faceCenterX = xMin + width / 2;
-      var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
-      cropCanvas.width = desiredWidth;
-      cropCanvas.height = frame.height;
-      cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
-    }
-    resizeCanvas.height = maxHeight !== null && maxHeight !== void 0 ? maxHeight : cropCanvas.height;
-    resizeCanvas.width = cropCanvas.width * (resizeCanvas.height / cropCanvas.height);
-    resizeCtx === null || resizeCtx === void 0 ? void 0 : resizeCtx.drawImage(cropCanvas, 0, 0, resizeCanvas.width, resizeCanvas.height);
-    var dataURL = resizeCanvas.toDataURL('image/jpeg', quality);
-    log('cropToShoulders size', new TextEncoder().encode(dataURL).length);
-    clearCanvas(rawCanvas);
-    clearCanvas(cropCanvas);
-    clearCanvas(resizeCanvas);
-    return dataURL;
-  }
-  function cropToDetectedObjectBox(frame, box, canvas) {
-    canvas || (canvas = document.createElement('canvas'));
-    var ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('could not get 2d context');
-    var xMin = box.xMin,
-      yMin = box.yMin,
-      width = box.width,
-      height = box.height;
-    canvas.width = width;
-    canvas.height = height;
-    ctx.drawImage(frame, xMin, yMin, width, height, 0, 0, width, height);
-    return canvas;
-  }
-
   var defaultImageSegmenterModelPath = 'https://websdk-cdn-dev.idmission.com/assets/models/selfiesegmenter20240524/selfie_segmenter.tflite';
   var imageSegmenterModelSizeInBytes = 256440.32;
   // The idea here is that we globally set a cache key based on the time at page load. That way our built-in speed test
@@ -8295,6 +8241,192 @@
     });
   }
 
+  var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
+
+  var defaultDocumentDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/DocumentDetector/DocumentDetector-20250815_115859.tflite");
+
+  var defaultFocusModelPath = "".concat(DEFAULT_CDN_URL, "/models/Focus/Focus-20241008_102708.tflite");
+
+  var defaultFaceDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/FaceDetector/FaceDetector-20250820_154546.tflite");
+
+  var defaultBarcodeReadabilityModelPath = "".concat(DEFAULT_CDN_URL, "/models/BarcodeReadability/BarcodeReadability-20250815_120417.tflite");
+
+  var defaultModelPaths = {
+    documentDetector: defaultDocumentDetectorModelPath,
+    focus: defaultFocusModelPath,
+    faceDetection: defaultFaceDetectorModelPath,
+    barcodeReadability: defaultBarcodeReadabilityModelPath
+  };
+
+  var preloadModels = function preloadModels(_a) {
+    return __awaiter(void 0, [_a], void 0, function (_b) {
+      var preloadTasks;
+      var _c = _b.documentDetectionModel,
+        documentDetectionModel = _c === void 0 ? true : _c,
+        _d = _b.focusModel,
+        focusModel = _d === void 0 ? true : _d,
+        _e = _b.faceDetectionModel,
+        faceDetectionModel = _e === void 0 ? true : _e,
+        _f = _b.barcodeReadabilityModel,
+        barcodeReadabilityModel = _f === void 0 ? true : _f;
+      return __generator(this, function (_g) {
+        switch (_g.label) {
+          case 0:
+            return [4 /*yield*/, probeModelCapabilities()];
+          case 1:
+            _g.sent();
+            preloadTasks = [];
+            if (documentDetectionModel) {
+              preloadTasks.push(preloadDocumentDetectorDependencies);
+            }
+            if (focusModel) {
+              preloadTasks.push(preloadFocusModelDependencies);
+            }
+            if (faceDetectionModel) {
+              preloadTasks.push(preloadFaceDetectorDependencies);
+            }
+            if (barcodeReadabilityModel) {
+              preloadTasks.push(preloadBarcodeReadabilityModelDependencies);
+            }
+            return [4 /*yield*/, Promise.all(preloadTasks)];
+          case 2:
+            _g.sent();
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var progressByUrl = {};
+  var progressByUseCase = {
+    visionRuntime: {
+      loaded: 0,
+      total: 0
+    },
+    documentDetector: {
+      loaded: 0,
+      total: 0
+    },
+    focus: {
+      loaded: 0,
+      total: 0
+    },
+    faceDetection: {
+      loaded: 0,
+      total: 0
+    },
+    barcodeReadability: {
+      loaded: 0,
+      total: 0
+    }
+  };
+  function preloadDependency(url) {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        return [2 /*return*/, new Promise(function (resolve, reject) {
+          var req = new XMLHttpRequest();
+          req.addEventListener('progress', function (event) {
+            if (!event.lengthComputable) return;
+            progressByUrl[url] = event;
+            document.dispatchEvent(new CustomEvent('idmission.preloadProgress', {
+              detail: {
+                url: url,
+                loaded: event.loaded,
+                total: event.total
+              }
+            }));
+          });
+          req.addEventListener('loadend', function () {
+            resolve(req.readyState === 4 && req.status === 200);
+          });
+          req.addEventListener('error', reject);
+          req.open('GET', url, true);
+          req.send();
+        })];
+      });
+    });
+  }
+  var modelsPreloading = {
+    documentDetector: false,
+    focus: false,
+    faceDetection: false,
+    barcodeReadability: false
+  };
+  var preloadDocumentDetectorDependencies = function preloadDocumentDetectorDependencies() {
+    return preloadModelDependencies('documentDetector');
+  };
+  var preloadFocusModelDependencies = function preloadFocusModelDependencies() {
+    return preloadModelDependencies('focus');
+  };
+  var preloadFaceDetectorDependencies = function preloadFaceDetectorDependencies() {
+    return preloadModelDependencies('faceDetection');
+  };
+  var preloadBarcodeReadabilityModelDependencies = function preloadBarcodeReadabilityModelDependencies() {
+    return preloadModelDependencies('barcodeReadability');
+  };
+  function preloadModelDependencies(model) {
+    return __awaiter(this, void 0, void 0, function () {
+      function handleModelDownloadProgress(event) {
+        var detail = event.detail;
+        if (!dependencies.includes(detail.url)) return;
+        progressByUseCase[model] = sumUpProgressForDependencies(dependencies);
+        document.dispatchEvent(new CustomEvent("idmission.preloadProgress.".concat(model), {
+          detail: progressByUseCase[model]
+        }));
+      }
+      var dependencies;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (modelsPreloading[model]) return [2 /*return*/, new Promise(function (resolve) {
+              var i = setInterval(function () {
+                if (!modelsPreloading[model]) {
+                  clearInterval(i);
+                  resolve();
+                }
+              }, 100);
+            })];
+            modelsPreloading[model] = true;
+            return [4 /*yield*/, probeModelCapabilities()];
+          case 1:
+            _a.sent();
+            if (modelCapabilities.delegate === 'NONE') {
+              throw new Error("No available delegate for ".concat(model, " model."));
+            }
+            dependencies = [defaultModelPaths[model]];
+            document.addEventListener('idmission.preloadProgress', handleModelDownloadProgress);
+            _a.label = 2;
+          case 2:
+            _a.trys.push([2,, 4, 5]);
+            return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
+          case 3:
+            _a.sent();
+            return [3 /*break*/, 5];
+          case 4:
+            document.removeEventListener('idmission.preloadProgress', handleModelDownloadProgress);
+            modelsPreloading[model] = false;
+            return [7 /*endfinally*/];
+          case 5:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  function progressToPercentage(progress) {
+    return progress.total > 0 ? Math.round(100.0 * progress.loaded / progress.total) : 0;
+  }
+  function sumUpProgressForDependencies(dependencies) {
+    return dependencies.reduce(function (result, dependency) {
+      var dependencyProgress = progressByUrl[dependency];
+      if (!dependencyProgress) return result;
+      result.loaded += dependencyProgress.loaded;
+      result.total += dependencyProgress.total;
+      return result;
+    }, {
+      loaded: 0,
+      total: 0
+    });
+  }
+
   function convertBoundingBox(box) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return {
@@ -8349,785 +8481,6 @@
     return sum / len;
   }
 
-  var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
-
-  var defaultDocumentDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/DocumentDetector/DocumentDetector-20250815_115859.tflite");
-
-  var defaultFocusModelPath = "".concat(DEFAULT_CDN_URL, "/models/Focus/Focus-20241008_102708.tflite");
-
-  var defaultFaceDetectorModelPath = "".concat(DEFAULT_CDN_URL, "/models/FaceDetector/FaceDetector-20250820_154546.tflite");
-
-  var defaultFocusModelLoadTimeoutMs = 45000;
-  var defaultFocusThresholds = {
-    idCardFront: {
-      desktop: 0,
-      mobile: 0.3
-    },
-    idCardBack: {
-      desktop: 0,
-      mobile: 0.3
-    },
-    passport: {
-      desktop: 0,
-      mobile: 0.3
-    },
-    singlePage: {
-      desktop: 0,
-      mobile: 0.3
-    }
-  };
-  var classifier = null;
-  var classifierSettings = null;
-  function loadFocusModel() {
-    return __awaiter(this, arguments, void 0, function (modelAssetPath) {
-      var _a, _b;
-      if (modelAssetPath === void 0) {
-        modelAssetPath = defaultFocusModelPath;
-      }
-      return __generator(this, function (_c) {
-        switch (_c.label) {
-          case 0:
-            if (classifier && (classifierSettings === null || classifierSettings === void 0 ? void 0 : classifierSettings.modelAssetPath) === modelAssetPath) return [2 /*return*/, classifier];
-            closeFocusModel();
-            return [4 /*yield*/, preloadFocusModelDependencies()];
-          case 1:
-            _c.sent();
-            if (modelCapabilities.delegate === 'NONE') {
-              throw new Error('No available delegate for focus detector.');
-            }
-            _b = (_a = Ua).createFromOptions;
-            return [4 /*yield*/, ao.forVisionTasks(visionTasksBasePath)];
-          case 2:
-            return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
-              baseOptions: {
-                modelAssetPath: modelAssetPath,
-                delegate: modelCapabilities.delegate
-              },
-              // canvas: document.createElement('canvas'),
-              runningMode: 'VIDEO'
-            }])];
-          case 3:
-            classifier = _c.sent();
-            classifierSettings = {
-              modelAssetPath: modelAssetPath
-            };
-            return [2 /*return*/, classifier];
-        }
-      });
-    });
-  }
-  function closeFocusModel() {
-    classifier === null || classifier === void 0 ? void 0 : classifier.close();
-    classifier = null;
-    classifierSettings = null;
-  }
-  function useLoadFocusModel(_a) {
-    var _b = _a.modelPath,
-      modelPath = _b === void 0 ? defaultFocusModelPath : _b,
-      _c = _a.modelLoadTimeoutMs,
-      modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
-      onModelError = _a.onModelError,
-      videoRef = _a.videoRef,
-      _d = _a.shouldLoadModels,
-      shouldLoadModels = _d === void 0 ? true : _d;
-    var _e = React.useState('not-started'),
-      modelLoadState = _e[0],
-      setModelLoadState = _e[1];
-    var _f = React.useState(0),
-      modelDownloadProgress = _f[0],
-      setModelDownloadProgress = _f[1];
-    var _g = React.useState(null),
-      modelWarmingStartedAt = _g[0],
-      setModelWarmingStartedAt = _g[1];
-    var _h = React.useState(null),
-      modelError = _h[0],
-      setModelError = _h[1];
-    React.useEffect(function loadModel() {
-      var _this = this;
-      if (!shouldLoadModels) return;
-      setModelLoadState('downloading');
-      setModelWarmingStartedAt(null);
-      function handleDownloadProgress(event) {
-        setModelDownloadProgress(progressToPercentage(event.detail));
-      }
-      document.addEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
-      var modelLoadTimeout = setTimeout(function () {
-        setModelError(new Error('Model loading time limit exceeded.'));
-      }, modelLoadTimeoutMs);
-      var cancelVideoReady = function cancelVideoReady() {};
-      loadFocusModel(modelPath).then(function (loadedModel) {
-        return __awaiter(_this, void 0, void 0, function () {
-          var _a, videoReady, cancel, cancelled;
-          return __generator(this, function (_b) {
-            switch (_b.label) {
-              case 0:
-                setModelDownloadProgress(100);
-                clearTimeout(modelLoadTimeout);
-                setModelLoadState('warming');
-                setModelWarmingStartedAt(new Date().getTime());
-                _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
-                cancelled = false;
-                cancelVideoReady = function cancelVideoReady() {
-                  cancelled = true;
-                  cancel();
-                };
-                return [4 /*yield*/, videoReady];
-              case 1:
-                _b.sent();
-                setTimeout(function () {
-                  if (cancelled) return;
-                  loadedModel.classifyForVideo(videoRef.current, performance.now());
-                  setModelLoadState('ready');
-                }, 500);
-                return [2 /*return*/];
-            }
-          });
-        });
-      })["catch"](function (e) {
-        setModelError(e);
-        setModelLoadState('error');
-      })["finally"](function () {
-        clearTimeout(modelLoadTimeout);
-      });
-      return function () {
-        log('unloading focus model');
-        cancelVideoReady();
-        closeFocusModel();
-        clearTimeout(modelLoadTimeout);
-        document.removeEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
-      };
-    }, [modelPath, modelLoadTimeoutMs, videoRef, shouldLoadModels]);
-    React.useEffect(function handleModelError() {
-      if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
-    }, [modelError, onModelError]);
-    return React.useMemo(function () {
-      return {
-        ready: modelLoadState === 'ready',
-        modelLoadState: modelLoadState,
-        modelDownloadProgress: modelDownloadProgress,
-        modelWarmingStartedAt: modelWarmingStartedAt,
-        modelError: modelError
-      };
-    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
-  }
-  var lastFocusPredictionAt = 0;
-  var lastFocusPredictionTime = 0;
-  function setLastFocusPredictionAt(time) {
-    lastFocusPredictionTime = time - lastFocusPredictionAt;
-    lastFocusPredictionAt = time;
-  }
-  function makeFocusModelPrediction(imageData, cropCanvas, rotateCanvas, box) {
-    var _a, _b, _c, _d, _e;
-    if (!classifier) return null;
-    var startedAt = new Date();
-    var image = cropIfNecessary(imageData, cropCanvas, rotateCanvas, box);
-    var result = classifier.classifyForVideo(image, performance.now());
-    var score = (_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.classifications) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.find(function (c) {
-      return c.categoryName === 'focused';
-    })) === null || _d === void 0 ? void 0 : _d.score) !== null && _e !== void 0 ? _e : 0;
-    var predictionTime = new Date().getTime() - startedAt.getTime();
-    return {
-      score: score,
-      predictionTime: predictionTime
-    };
-  }
-  function cropIfNecessary(imageData, cropCanvas, rotateCanvas, box) {
-    if (!box) return imageData;
-    var cropped = cropToDetectedObjectBox(imageData, box, cropCanvas);
-    var _a = [box.width, box.height],
-      bw = _a[0],
-      bh = _a[1];
-    if (bh <= bw) return cropped;
-    var ctx = rotateCanvas.getContext('2d');
-    if (!ctx) return cropped;
-    rotateCanvas.width = bh;
-    rotateCanvas.height = bw;
-    ctx.clearRect(0, 0, rotateCanvas.width, rotateCanvas.height);
-    ctx.translate(rotateCanvas.width / 2, rotateCanvas.height / 2);
-    ctx.rotate(1.5708); // 90 deg in radians
-    ctx.drawImage(cropped, -bw / 2, -bh / 2);
-    return rotateCanvas;
-  }
-
-  var defaultSelfieCaptureModelLoadTimeoutMs = 45000;
-  var detector$1 = null;
-  var detectorSettings$1 = null;
-  function loadFaceDetector() {
-    return __awaiter(this, arguments, void 0, function (modelAssetPath) {
-      var _a, _b;
-      if (modelAssetPath === void 0) {
-        modelAssetPath = defaultFaceDetectorModelPath;
-      }
-      return __generator(this, function (_c) {
-        switch (_c.label) {
-          case 0:
-            if (detector$1 && (detectorSettings$1 === null || detectorSettings$1 === void 0 ? void 0 : detectorSettings$1.modelAssetPath) === modelAssetPath) return [2 /*return*/, detector$1];
-            closeFaceDetector();
-            return [4 /*yield*/, preloadFaceDetectorDependencies()];
-          case 1:
-            _c.sent();
-            if (modelCapabilities.delegate === 'NONE') {
-              throw new Error('No available delegate for face detector.');
-            }
-            _b = (_a = ya).createFromOptions;
-            return [4 /*yield*/, ao.forVisionTasks(visionTasksBasePath)];
-          case 2:
-            return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
-              // canvas: document.createElement('canvas'),
-              baseOptions: {
-                modelAssetPath: modelAssetPath,
-                delegate: modelCapabilities.delegate
-              },
-              runningMode: 'VIDEO'
-            }])];
-          case 3:
-            detector$1 = _c.sent();
-            detectorSettings$1 = {
-              modelAssetPath: modelAssetPath
-            };
-            return [2 /*return*/, detector$1];
-        }
-      });
-    });
-  }
-  function closeFaceDetector() {
-    detector$1 === null || detector$1 === void 0 ? void 0 : detector$1.close();
-    detector$1 = null;
-    detectorSettings$1 = null;
-  }
-  function useLoadFaceDetector(_a) {
-    var onModelError = _a.onModelError,
-      _b = _a.modelLoadTimeoutMs,
-      modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
-      videoRef = _a.videoRef;
-    var _c = React.useState('not-started'),
-      modelLoadState = _c[0],
-      setModelLoadState = _c[1];
-    var _d = React.useState(0),
-      modelDownloadProgress = _d[0],
-      setModelDownloadProgress = _d[1];
-    var _e = React.useState(null),
-      modelWarmingStartedAt = _e[0],
-      setModelWarmingStartedAt = _e[1];
-    var _f = React.useState(null),
-      modelError = _f[0],
-      setModelError = _f[1];
-    React.useEffect(function loadModel() {
-      var _this = this;
-      setModelLoadState('downloading');
-      setModelWarmingStartedAt(null);
-      var modelLoadTimeout = setTimeout(function () {
-        setModelError(new Error('Model loading time limit exceeded.'));
-      }, modelLoadTimeoutMs);
-      function handleDownloadProgress(event) {
-        setModelDownloadProgress(progressToPercentage(event.detail));
-      }
-      document.addEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
-      var cancelVideoReady = function cancelVideoReady() {};
-      loadFaceDetector().then(function (model) {
-        return __awaiter(_this, void 0, void 0, function () {
-          var _a, videoReady, cancel, cancelled;
-          return __generator(this, function (_b) {
-            switch (_b.label) {
-              case 0:
-                setModelDownloadProgress(100);
-                clearTimeout(modelLoadTimeout);
-                setModelLoadState('warming');
-                setModelWarmingStartedAt(new Date().getTime());
-                return [4 /*yield*/, testFaceDetectionAgainstKnownImage(model)];
-              case 1:
-                _b.sent();
-                _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
-                cancelled = false;
-                cancelVideoReady = function cancelVideoReady() {
-                  cancelled = true;
-                  cancel();
-                };
-                return [4 /*yield*/, videoReady];
-              case 2:
-                _b.sent();
-                if (cancelled) return [2 /*return*/];
-                model.detectForVideo(videoRef.current, performance.now());
-                setModelLoadState('ready');
-                return [2 /*return*/];
-            }
-          });
-        });
-      })["catch"](function (e) {
-        setModelError(e);
-        setModelLoadState('error');
-      })["finally"](function () {
-        clearTimeout(modelLoadTimeout);
-      });
-      return function () {
-        log('unloading face detection model');
-        cancelVideoReady();
-        closeFaceDetector();
-        clearTimeout(modelLoadTimeout);
-        document.removeEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
-      };
-    }, [modelLoadTimeoutMs, videoRef]);
-    React.useEffect(function handleModelError() {
-      if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
-    }, [modelError, onModelError]);
-    return React.useMemo(function () {
-      return {
-        ready: modelLoadState === 'ready',
-        modelLoadState: modelLoadState,
-        modelDownloadProgress: modelDownloadProgress,
-        modelWarmingStartedAt: modelWarmingStartedAt,
-        modelError: modelError
-      };
-    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
-  }
-  var lastFaceDetectionAt = 0;
-  var lastFaceDetectionTime = 0;
-  function setLastFaceDetectionAt(time) {
-    lastFaceDetectionTime = time - lastFaceDetectionAt;
-    lastFaceDetectionAt = time;
-  }
-  var framesNeededSamples$1 = [];
-  function trackFramesNeeded$1(value, bufferLength) {
-    if (bufferLength === void 0) {
-      bufferLength = 25;
-    }
-    framesNeededSamples$1.unshift(value);
-    if (framesNeededSamples$1.length > bufferLength) framesNeededSamples$1.length = bufferLength;
-  }
-  var lastNFaces = [];
-  var lastNFacePairs = [];
-  var lastNNoses = [];
-  var lastNNosePairs = [];
-  function trackFace(face, framesNeeded, frameWidth, frameHeight) {
-    if (framesNeeded === void 0) {
-      framesNeeded = 12;
-    }
-    var nose = face.keypoints[2];
-    if (!nose) return;
-    lastNFaces.unshift(face);
-    lastNNoses.unshift(nose);
-    if (lastNFaces.length > framesNeeded) lastNFaces.length = framesNeeded;
-    if (lastNNoses.length > framesNeeded) lastNNoses.length = framesNeeded;
-    if (lastNFaces.length > 1) {
-      var lastFace = lastNFaces[1];
-      var iou = calculateIoU(face.box, lastFace.box);
-      lastNFacePairs.unshift({
-        a: face,
-        b: lastFace,
-        iou: iou
-      });
-      if (lastNFacePairs.length > framesNeeded - 1) lastNFacePairs.length = framesNeeded - 1;
-    }
-    if (lastNNoses.length > 1) {
-      var lastNose = lastNNoses[1];
-      var noseDistance = Math.sqrt(Math.pow((nose.x - lastNose.x) / frameWidth, 2) + Math.pow((nose.y - lastNose.y) / frameHeight, 2));
-      lastNNosePairs.unshift({
-        a: nose,
-        b: lastNose,
-        distance: noseDistance
-      });
-      if (lastNNosePairs.length > framesNeeded - 1) lastNNosePairs.length = framesNeeded - 1;
-    }
-  }
-  function makeFaceDetectorPrediction(imageData) {
-    if (!detector$1) return null;
-    var prediction = detector$1.detectForVideo(imageData, performance.now());
-    var faces = prediction.detections.map(function (d) {
-      return {
-        box: convertBoundingBox(d.boundingBox),
-        keypoints: d.keypoints.map(function (k) {
-          var _a;
-          return _assign(_assign({}, k), {
-            x: k.x * imageData.width,
-            y: k.y * imageData.height,
-            name: (_a = k.label) !== null && _a !== void 0 ? _a : ''
-          });
-        })
-      };
-    });
-    return _assign(_assign({}, prediction), {
-      faces: faces
-    });
-  }
-  function processFaceDetectorPrediction(_a) {
-    var faces = _a.faces,
-      videoWidth = _a.videoWidth,
-      videoHeight = _a.videoHeight,
-      _b = _a.requireVerticalFaceCentering,
-      requireVerticalFaceCentering = _b === void 0 ? true : _b,
-      _c = _a.stabilityThreshold,
-      stabilityThreshold = _c === void 0 ? 0.7 : _c,
-      _d = _a.noseDistanceThreshold,
-      noseDistanceThreshold = _d === void 0 ? 0.025 : _d,
-      _e = _a.xBoundary,
-      xBoundary = _e === void 0 ? 0.01 : _e,
-      // this represents the edge that the sides of the face box should not cross -- 1% of video width
-      _f = _a.yBoundary,
-      // this represents the edge that the sides of the face box should not cross -- 1% of video width
-      yBoundary = _f === void 0 ? 0.01 : _f,
-      // this represents the edge that the top or bottom of the face box should not cross -- 1% of video height
-      _g = _a.xCentroidBoundary,
-      // this represents the edge that the top or bottom of the face box should not cross -- 1% of video height
-      xCentroidBoundary = _g === void 0 ? 0.125 : _g,
-      // this represents the edge that the centroid of the face should not cross -- 12.5% of video width
-      _h = _a.yCentroidBoundary,
-      // this represents the edge that the centroid of the face should not cross -- 12.5% of video width
-      yCentroidBoundary = _h === void 0 ? 0.125 : _h,
-      // this represents the edge that the centroid of the face should not cross -- 12.5% of video height
-      _j = _a.foreheadRatio,
-      // this represents the edge that the centroid of the face should not cross -- 12.5% of video height
-      foreheadRatio = _j === void 0 ? 0.275 : _j,
-      // we found that the bounding box ends at the brow and misses the forehead. this ratio represents how much we should extend the box to include the forehead.
-      _k = _a.noseTrackingThreshold,
-      // we found that the bounding box ends at the brow and misses the forehead. this ratio represents how much we should extend the box to include the forehead.
-      noseTrackingThreshold = _k === void 0 ? 0.2 : _k,
-      // this represents the maximum distance that the nose can be from the center of the face box -- 20% of the face box width or height
-      minCaptureBrightnessThreshold = _a.minCaptureBrightnessThreshold,
-      minCaptureRangeThreshold = _a.minCaptureRangeThreshold,
-      minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold,
-      brightness = _a.brightness,
-      range = _a.range,
-      variance = _a.variance;
-    var face = faces[0];
-    var faceNotDetected = faces.length === 0;
-    var faceNotCentered = false,
-      faceLookingAway = false,
-      faceTooClose = false,
-      faceTooFar = false,
-      faceVisibilityTooLow = false;
-    var hasAnyThreshold = minCaptureBrightnessThreshold !== undefined || minCaptureRangeThreshold !== undefined || minCaptureVarianceThreshold !== undefined;
-    if (hasAnyThreshold) {
-      var tooDark = minCaptureBrightnessThreshold !== undefined && brightness !== undefined && brightness < minCaptureBrightnessThreshold;
-      var tooLowRange = minCaptureRangeThreshold !== undefined && range !== undefined && range < minCaptureRangeThreshold;
-      var tooLowVariance = minCaptureVarianceThreshold !== undefined && variance !== undefined && variance < minCaptureVarianceThreshold;
-      faceVisibilityTooLow = !!(tooDark || tooLowRange || tooLowVariance);
-    }
-    if (face && !faceVisibilityTooLow) {
-      // calculate frame centroids
-      var frameCX = videoWidth / 2;
-      var frameCY = videoHeight / 2;
-      // calculate head bounding box, with forehead extension
-      var foreheadSize = face.box.height * foreheadRatio;
-      var headXMin = face.box.xMin;
-      var headXMax = face.box.xMax;
-      var headYMin = face.box.yMin - foreheadSize;
-      var headYMax = face.box.yMax;
-      // calculate head centroids
-      var headCX = (headXMin + headXMax) / 2;
-      var headCY = (headYMin + headYMax) / 2;
-      // calculate thresholds
-      var vTX = videoWidth * xBoundary;
-      var vTY = videoHeight * yBoundary;
-      var vCTX = videoWidth * xCentroidBoundary;
-      var vCTY = videoHeight * yCentroidBoundary;
-      var faceNotCenteredHorizontally = Math.abs(frameCX - headCX) > vCTX;
-      var faceNotCenteredVertically = Math.abs(frameCY - headCY) > vCTY;
-      var faceViolatesHorizontalBoundary = headXMin < vTX || headXMax > videoWidth - vTX;
-      var faceViolatesVerticalBoundary = headYMin < vTY || headYMax > videoHeight - vTY;
-      faceNotCentered = faceViolatesHorizontalBoundary || faceViolatesVerticalBoundary || faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
-      var isMobile = videoWidth < videoHeight;
-      var tooCloseMultiple = 1.5;
-      var tooFarMultiple = isMobile ? 6 : 7;
-      faceTooClose = face.box.width > videoWidth / tooCloseMultiple;
-      faceTooFar = face.box.width < videoWidth / tooFarMultiple;
-      var nose = face.keypoints[2];
-      var fTW = face.box.width * noseTrackingThreshold;
-      var fTH = face.box.height * noseTrackingThreshold;
-      faceLookingAway = !nose || Math.abs(headCX - nose.x) > fTW || Math.abs(headCY - nose.y) > fTH;
-    }
-    var faceInGuides = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
-    if (lastFaceDetectionTime > 0) {
-      trackFramesNeeded$1(500 / lastFaceDetectionTime);
-    }
-    var faceIsStable = false,
-      noseIsStable = false;
-    if (faceInGuides && !faceVisibilityTooLow) {
-      var framesNeeded = Math.max(Math.ceil(average(framesNeededSamples$1)), 5);
-      trackFace(face, framesNeeded, videoWidth, videoHeight);
-      faceIsStable = lastNFaces.length >= framesNeeded && !lastNFacePairs.some(function (pair) {
-        return pair.iou < stabilityThreshold;
-      });
-      noseIsStable = lastNNoses.length >= framesNeeded && !lastNNosePairs.some(function (pair) {
-        return pair.distance > noseDistanceThreshold;
-      });
-    }
-    var faceReady = faceInGuides && faceIsStable && noseIsStable && !faceVisibilityTooLow;
-    return {
-      face: face,
-      faceNotDetected: faceNotDetected,
-      faceNotCentered: faceNotCentered,
-      faceLookingAway: faceLookingAway,
-      faceTooClose: faceTooClose,
-      faceTooFar: faceTooFar,
-      faceReady: faceReady,
-      faceReadyAt: faceReady ? new Date() : null,
-      faceIsStable: faceIsStable,
-      noseIsStable: noseIsStable,
-      faceVisibilityTooLow: faceVisibilityTooLow
-    };
-  }
-  function testFaceDetectionAgainstKnownImage(detector) {
-    return new Promise(function (resolve, reject) {
-      var img = new Image();
-      img.crossOrigin = 'anonymous';
-      img.onload = function () {
-        var prediction = detector.detectForVideo(img, performance.now());
-        if (prediction.detections.length > 0) {
-          debug('face detection test result', prediction.detections);
-          resolve(void 0);
-        } else {
-          warn('face detection test failed');
-          reject(new Error('testFaceDetectionAgainstKnownImage failed to predict'));
-        }
-      };
-      img.onerror = function () {
-        return reject(new Error('testFaceDetectionAgainstKnownImage failed to load image'));
-      };
-      img.src = "".concat(DEFAULT_CDN_URL, "/head-test.jpg");
-    });
-  }
-
-  var preloadModels = function preloadModels(_a) {
-    return __awaiter(void 0, [_a], void 0, function (_b) {
-      var preloadTasks;
-      var _c = _b.documentDetectionModel,
-        documentDetectionModel = _c === void 0 ? true : _c,
-        _d = _b.focusModel,
-        focusModel = _d === void 0 ? true : _d,
-        _e = _b.faceDetectionModel,
-        faceDetectionModel = _e === void 0 ? true : _e;
-      return __generator(this, function (_f) {
-        switch (_f.label) {
-          case 0:
-            return [4 /*yield*/, probeModelCapabilities()];
-          case 1:
-            _f.sent();
-            preloadTasks = [];
-            if (documentDetectionModel) {
-              preloadTasks.push(preloadDocumentDetectorDependencies);
-            }
-            if (focusModel) {
-              preloadTasks.push(preloadFocusModelDependencies);
-            }
-            if (faceDetectionModel) {
-              preloadTasks.push(preloadFaceDetectorDependencies);
-            }
-            return [4 /*yield*/, Promise.all(preloadTasks)];
-          case 2:
-            _f.sent();
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-  var progressByUrl = {};
-  var progressByUseCase = {
-    visionRuntime: {
-      loaded: 0,
-      total: 0
-    },
-    documentDetection: {
-      loaded: 0,
-      total: 0
-    },
-    focus: {
-      loaded: 0,
-      total: 0
-    },
-    faceDetection: {
-      loaded: 0,
-      total: 0
-    }
-  };
-  function preloadDependency(url) {
-    return __awaiter(this, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        return [2 /*return*/, new Promise(function (resolve, reject) {
-          var req = new XMLHttpRequest();
-          req.addEventListener('progress', function (event) {
-            if (!event.lengthComputable) return;
-            progressByUrl[url] = event;
-            document.dispatchEvent(new CustomEvent('idmission.preloadProgress', {
-              detail: {
-                url: url,
-                loaded: event.loaded,
-                total: event.total
-              }
-            }));
-          });
-          req.addEventListener('loadend', function () {
-            resolve(req.readyState === 4 && req.status === 200);
-          });
-          req.addEventListener('error', reject);
-          req.open('GET', url, true);
-          req.send();
-        })];
-      });
-    });
-  }
-  var documentDetectorPreloading = false,
-    focusModelPreloading = false,
-    faceDetectorPreloading = false;
-  function preloadDocumentDetectorDependencies() {
-    return __awaiter(this, void 0, void 0, function () {
-      function handleDownloadProgress(event) {
-        var detail = event.detail;
-        if (!dependencies.includes(detail.url)) return;
-        progressByUseCase.documentDetection = sumUpProgressForDependencies(dependencies);
-        document.dispatchEvent(new CustomEvent('idmission.preloadProgress.documentDetection', {
-          detail: progressByUseCase.documentDetection
-        }));
-      }
-      var dependencies;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (documentDetectorPreloading) return [2 /*return*/, new Promise(function (resolve) {
-              var i = setInterval(function () {
-                if (!documentDetectorPreloading) {
-                  clearInterval(i);
-                  resolve();
-                }
-              }, 100);
-            })];
-            documentDetectorPreloading = true;
-            return [4 /*yield*/, probeModelCapabilities()];
-          case 1:
-            _a.sent();
-            if (modelCapabilities.delegate === 'NONE') {
-              throw new Error('No available delegate for document detector.');
-            }
-            dependencies = [defaultDocumentDetectorModelPath];
-            document.addEventListener('idmission.preloadProgress', handleDownloadProgress);
-            _a.label = 2;
-          case 2:
-            _a.trys.push([2,, 4, 5]);
-            return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
-          case 3:
-            _a.sent();
-            return [3 /*break*/, 5];
-          case 4:
-            document.removeEventListener('idmission.preloadProgress', handleDownloadProgress);
-            documentDetectorPreloading = false;
-            return [7 /*endfinally*/];
-          case 5:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }
-  function preloadFocusModelDependencies() {
-    return __awaiter(this, void 0, void 0, function () {
-      function handleModelDownloadProgress(event) {
-        var detail = event.detail;
-        if (!dependencies.includes(detail.url)) return;
-        progressByUseCase.focus = sumUpProgressForDependencies(dependencies);
-        document.dispatchEvent(new CustomEvent('idmission.preloadProgress.focus', {
-          detail: progressByUseCase.focus
-        }));
-      }
-      var dependencies;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (focusModelPreloading) return [2 /*return*/, new Promise(function (resolve) {
-              var i = setInterval(function () {
-                if (!focusModelPreloading) {
-                  clearInterval(i);
-                  resolve();
-                }
-              }, 100);
-            })];
-            focusModelPreloading = true;
-            return [4 /*yield*/, probeModelCapabilities()];
-          case 1:
-            _a.sent();
-            if (modelCapabilities.delegate === 'NONE') {
-              throw new Error('No available delegate for document detector.');
-            }
-            dependencies = [defaultFocusModelPath];
-            document.addEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-            _a.label = 2;
-          case 2:
-            _a.trys.push([2,, 4, 5]);
-            return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
-          case 3:
-            _a.sent();
-            return [3 /*break*/, 5];
-          case 4:
-            document.removeEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-            focusModelPreloading = false;
-            return [7 /*endfinally*/];
-          case 5:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }
-  function preloadFaceDetectorDependencies() {
-    return __awaiter(this, void 0, void 0, function () {
-      function handleModelDownloadProgress(event) {
-        var detail = event.detail;
-        if (!dependencies.includes(detail.url)) return;
-        progressByUseCase.faceDetection = sumUpProgressForDependencies(dependencies);
-        document.dispatchEvent(new CustomEvent('idmission.preloadProgress.faceDetection', {
-          detail: progressByUseCase.faceDetection
-        }));
-      }
-      var dependencies;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (faceDetectorPreloading) return [2 /*return*/, new Promise(function (resolve) {
-              var i = setInterval(function () {
-                if (!faceDetectorPreloading) {
-                  clearInterval(i);
-                  resolve();
-                }
-              }, 100);
-            })];
-            faceDetectorPreloading = true;
-            return [4 /*yield*/, probeModelCapabilities()];
-          case 1:
-            _a.sent();
-            if (modelCapabilities.delegate === 'NONE') {
-              throw new Error('No available delegate for document detector.');
-            }
-            dependencies = [defaultFaceDetectorModelPath];
-            document.addEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-            _a.label = 2;
-          case 2:
-            _a.trys.push([2,, 4, 5]);
-            return [4 /*yield*/, Promise.all(dependencies.map(preloadDependency))];
-          case 3:
-            _a.sent();
-            return [3 /*break*/, 5];
-          case 4:
-            document.removeEventListener('idmission.preloadProgress', handleModelDownloadProgress);
-            faceDetectorPreloading = false;
-            return [7 /*endfinally*/];
-          case 5:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }
-  function progressToPercentage(progress) {
-    return progress.total > 0 ? Math.round(100.0 * progress.loaded / progress.total) : 0;
-  }
-  function sumUpProgressForDependencies(dependencies) {
-    return dependencies.reduce(function (result, dependency) {
-      var dependencyProgress = progressByUrl[dependency];
-      if (!dependencyProgress) return result;
-      result.loaded += dependencyProgress.loaded;
-      result.total += dependencyProgress.total;
-      return result;
-    }, {
-      loaded: 0,
-      total: 0
-    });
-  }
-
   var defaultDocumentDetectionScoreThreshold = 0.1;
   var defaultDocumentDetectionModelLoadTimeoutMs = 45000;
   var defaultDocumentDetectionThresholds = {
@@ -9149,8 +8502,8 @@
     singlePage: 'Single page',
     none: 'None'
   };
-  var detector = null;
-  var detectorSettings = null;
+  var detector$1 = null;
+  var detectorSettings$1 = null;
   function loadDocumentDetector() {
     return __awaiter(this, arguments, void 0, function (modelAssetPath, scoreThreshold) {
       var _a, _b;
@@ -9163,7 +8516,7 @@
       return __generator(this, function (_c) {
         switch (_c.label) {
           case 0:
-            if (detector && (detectorSettings === null || detectorSettings === void 0 ? void 0 : detectorSettings.modelAssetPath) === modelAssetPath && (detectorSettings === null || detectorSettings === void 0 ? void 0 : detectorSettings.scoreThreshold) === scoreThreshold) return [2 /*return*/, detector];
+            if (detector$1 && (detectorSettings$1 === null || detectorSettings$1 === void 0 ? void 0 : detectorSettings$1.modelAssetPath) === modelAssetPath && (detectorSettings$1 === null || detectorSettings$1 === void 0 ? void 0 : detectorSettings$1.scoreThreshold) === scoreThreshold) return [2 /*return*/, detector$1];
             closeDocumentDetector();
             return [4 /*yield*/, preloadDocumentDetectorDependencies()];
           case 1:
@@ -9184,20 +8537,20 @@
               runningMode: 'VIDEO'
             }])];
           case 3:
-            detector = _c.sent();
-            detectorSettings = {
+            detector$1 = _c.sent();
+            detectorSettings$1 = {
               modelAssetPath: modelAssetPath,
               scoreThreshold: scoreThreshold
             };
-            return [2 /*return*/, detector];
+            return [2 /*return*/, detector$1];
         }
       });
     });
   }
   function closeDocumentDetector() {
-    detector === null || detector === void 0 ? void 0 : detector.close();
-    detector = null;
-    detectorSettings = null;
+    detector$1 === null || detector$1 === void 0 ? void 0 : detector$1.close();
+    detector$1 = null;
+    detectorSettings$1 = null;
   }
   function useLoadDocumentDetector(_a) {
     var _b = _a.shouldLoadModels,
@@ -9230,7 +8583,7 @@
       function handleDownloadProgress(event) {
         setModelDownloadProgress(progressToPercentage(event.detail));
       }
-      document.addEventListener('idmission.preloadProgress.documentDetection', handleDownloadProgress);
+      document.addEventListener('idmission.preloadProgress.documentDetector', handleDownloadProgress);
       var modelLoadTimeout = setTimeout(function () {
         setModelError(new Error('Model loading time limit exceeded.'));
       }, modelLoadTimeoutMs);
@@ -9243,7 +8596,7 @@
               case 0:
                 setModelDownloadProgress(100);
                 setModelLoadState('warming');
-                setModelWarmingStartedAt(new Date().getTime());
+                setModelWarmingStartedAt(performance.now());
                 clearTimeout(modelLoadTimeout);
                 return [4 /*yield*/, testDocumentDetectionAgainstKnownImage(model)];
               case 1:
@@ -9277,7 +8630,7 @@
         cancelVideoReady();
         closeDocumentDetector();
         clearTimeout(modelLoadTimeout);
-        document.removeEventListener('idmission.preloadProgress.documentDetection', handleDownloadProgress);
+        document.removeEventListener('idmission.preloadProgress.documentDetector', handleDownloadProgress);
       };
     }, [shouldLoadModels, modelLoadTimeoutMs, modelPath, scoreThreshold, videoRef]);
     React.useEffect(function handleModelError() {
@@ -9298,13 +8651,13 @@
     return __awaiter(this, void 0, void 0, function () {
       var startedAt, prediction, time, frameWidth, frameHeight;
       return __generator(this, function (_a) {
-        if (!detector) return [2 /*return*/, null];
-        startedAt = new Date();
+        if (!detector$1) return [2 /*return*/, null];
+        startedAt = performance.now();
         // Detectors can throw errors, for example when using custom URLs that
         // contain a model that doesn't provide the expected output.
         try {
-          prediction = detector.detectForVideo(frame, performance.now());
-          time = new Date().getTime() - startedAt.getTime();
+          prediction = detector$1.detectForVideo(frame, performance.now());
+          time = performance.now() - startedAt;
           frameWidth = frame.width;
           frameHeight = frame.height;
           return [2 /*return*/, _assign(_assign({}, prediction), {
@@ -9325,13 +8678,13 @@
     lastDetectionTime = time - lastDetectionAt;
     lastDetectionAt = time;
   }
-  var framesNeededSamples = [];
-  function trackFramesNeeded(value, bufferLength) {
+  var framesNeededSamples$1 = [];
+  function trackFramesNeeded$1(value, bufferLength) {
     if (bufferLength === void 0) {
       bufferLength = 25;
     }
-    framesNeededSamples.unshift(value);
-    if (framesNeededSamples.length > bufferLength) framesNeededSamples.length = bufferLength;
+    framesNeededSamples$1.unshift(value);
+    if (framesNeededSamples$1.length > bufferLength) framesNeededSamples$1.length = bufferLength;
   }
   var lastNBoxes = [];
   var lastNPairs = [];
@@ -9437,7 +8790,7 @@
     }
     var documentInBounds = !!bestDocument;
     if (lastDetectionTime > 0) {
-      trackFramesNeeded(1000 / lastDetectionTime);
+      trackFramesNeeded$1(1000 / lastDetectionTime);
     }
     var documentIsStable = false;
     var documentTooClose = false;
@@ -9449,13 +8802,19 @@
       if (detectionThresholdMet && documentInBounds && !documentTooClose) {
         var thresholdSet = (_p = thresholds.stability) !== null && _p !== void 0 ? _p : defaultDocumentDetectionThresholds.stability;
         var threshold_1 = thresholdSet[detectedDocumentType];
-        var framesNeeded = Math.ceil(average(framesNeededSamples));
+        var framesNeeded = Math.ceil(average(framesNeededSamples$1));
         trackBox(bestDocument.box, framesNeeded);
         documentIsStable = lastNBoxes.length >= framesNeeded && !lastNPairs.some(function (pair) {
           return pair.iou < threshold_1;
         });
       }
     }
+    var bestPDF417;
+    if (detectedObjects.length > 0) {
+      bestPDF417 = detectedObjects.find(function (obj) {
+        return obj.label === 'PDF417';
+      });
+    }
     return {
       prediction: prediction,
       detectedObjects: detectedObjects,
@@ -9472,6 +8831,7 @@
       singlePageDetectionScore: singlePageDetectionScore,
       singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
       bestDocument: bestDocument,
+      bestPDF417: bestPDF417,
       documentInBounds: documentInBounds,
       documentTooClose: documentTooClose,
       documentIsStable: documentIsStable,
@@ -9515,6 +8875,43 @@
     });
   }
 
+  function getFrameDimensions(frame) {
+    var frameWidth = frame.width,
+      frameHeight = frame.height;
+    if (frame instanceof HTMLImageElement) {
+      frameWidth = frame.naturalWidth;
+      frameHeight = frame.naturalHeight;
+    }
+    if (frame instanceof HTMLVideoElement) {
+      frameWidth = frame.videoWidth;
+      frameHeight = frame.videoHeight;
+    }
+    return [frameWidth, frameHeight];
+  }
+
+  var InvisibleCanvasContainer = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  user-select: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  user-select: none;\n"])));
+  var InvisibleCanvas = styled.canvas(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+  function drawToCanvas(canvas, frame, width, height) {
+    if (!canvas) return;
+    var ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    if (!width || !height) {
+      var _a = getFrameDimensions(frame),
+        frameWidth = _a[0],
+        frameHeight = _a[1];
+      width || (width = frameWidth);
+      height || (height = frameHeight);
+    }
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(frame, 0, 0, width, height);
+  }
+  function clearCanvas(canvas) {
+    var _a;
+    (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
+  }
+  var templateObject_1$M, templateObject_2$G;
+
   function useFrameLoop(fn, options) {
     if (options === void 0) {
       options = {};
@@ -14333,13 +13730,278 @@
         documentDetectionLastPredictionCanvas: lastPredictionCanvas,
         clearDocumentDetectionLastPredictionCanvas: clearDocumentDetectionLastPredictionCanvas
       };
-    }, [start, stop, load, modelLoadState, modelWarmingStartedAt, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
-    return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
-      key: canvasKey,
-      ref: lastPredictionCanvas
-    }), children);
+    }, [start, stop, load, modelLoadState, modelWarmingStartedAt, modelError, modelDownloadProgress, onDocumentDetected, documentDetectionThresholds, documentDetectionBoundaries, clearDocumentDetectionLastPredictionCanvas]);
+    return /*#__PURE__*/React__namespace.createElement(DocumentDetectionModelContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
+      key: canvasKey,
+      ref: lastPredictionCanvas
+    }), children);
+  }
+
+  function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
+    var _a;
+    if (quality === void 0) {
+      quality = 0.92;
+    }
+    if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
+    var rawCtx = rawCanvas.getContext('2d');
+    var cropCtx = cropCanvas.getContext('2d');
+    var resizeCtx = resizeCanvas.getContext('2d');
+    if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
+    rawCanvas.width = frame.width;
+    rawCanvas.height = frame.height;
+    rawCtx.putImageData(frame, 0, 0);
+    if (frame.height > frame.width) {
+      cropCanvas.width = frame.width;
+      cropCanvas.height = frame.height;
+      cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
+    } else {
+      var _b = (_a = face === null || face === void 0 ? void 0 : face.box) !== null && _a !== void 0 ? _a : {
+          xMin: 0,
+          width: frame.width
+        },
+        xMin = _b.xMin,
+        width = _b.width;
+      var desiredWidth = frame.height * 0.6;
+      var faceCenterX = xMin + width / 2;
+      var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
+      cropCanvas.width = desiredWidth;
+      cropCanvas.height = frame.height;
+      cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
+    }
+    resizeCanvas.height = maxHeight !== null && maxHeight !== void 0 ? maxHeight : cropCanvas.height;
+    resizeCanvas.width = cropCanvas.width * (resizeCanvas.height / cropCanvas.height);
+    resizeCtx === null || resizeCtx === void 0 ? void 0 : resizeCtx.drawImage(cropCanvas, 0, 0, resizeCanvas.width, resizeCanvas.height);
+    var dataURL = resizeCanvas.toDataURL('image/jpeg', quality);
+    log('cropToShoulders size', new TextEncoder().encode(dataURL).length);
+    clearCanvas(rawCanvas);
+    clearCanvas(cropCanvas);
+    clearCanvas(resizeCanvas);
+    return dataURL;
+  }
+  function cropToDetectedObjectBox(frame, box, canvas, padding) {
+    if (padding === void 0) {
+      padding = 0;
+    }
+    canvas || (canvas = document.createElement('canvas'));
+    var ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('could not get 2d context');
+    var xMin = box.xMin,
+      yMin = box.yMin,
+      width = box.width,
+      height = box.height;
+    canvas.width = width + padding * 2;
+    canvas.height = height + padding * 2;
+    ctx.drawImage(frame, xMin - padding, yMin - padding, width + padding * 2, height + padding * 2, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  }
+  function cropAndRotateIfNecessary(imageData, cropCanvas, rotateCanvas, box, padding) {
+    if (padding === void 0) {
+      padding = 0;
+    }
+    if (!box) return imageData;
+    var cropped = cropToDetectedObjectBox(imageData, box, cropCanvas, padding);
+    var _a = [box.width, box.height],
+      bw = _a[0],
+      bh = _a[1];
+    if (bh <= bw) return cropped;
+    var ctx = rotateCanvas.getContext('2d');
+    if (!ctx) return cropped;
+    rotateCanvas.width = bh;
+    rotateCanvas.height = bw;
+    ctx.clearRect(0, 0, rotateCanvas.width, rotateCanvas.height);
+    ctx.translate(rotateCanvas.width / 2, rotateCanvas.height / 2);
+    ctx.rotate(1.5708); // 90 deg in radians
+    ctx.drawImage(cropped, -bw / 2, -bh / 2);
+    return rotateCanvas;
+  }
+  function resizeIfNecessary(imageData, resizeCanvas, maxWidth) {
+    var width = imageData.width,
+      height = imageData.height;
+    if (width <= maxWidth) return imageData;
+    var resizeCtx = resizeCanvas.getContext('2d');
+    if (!resizeCtx) return imageData;
+    var scale = maxWidth / width;
+    resizeCanvas.width = maxWidth;
+    resizeCanvas.height = height * scale;
+    resizeCtx.drawImage(imageData, 0, 0, resizeCanvas.width, resizeCanvas.height);
+    return resizeCanvas;
+  }
+
+  var defaultFocusModelLoadTimeoutMs = 45000;
+  var defaultFocusThresholds = {
+    idCardFront: {
+      desktop: 0,
+      mobile: 0.3
+    },
+    idCardBack: {
+      desktop: 0,
+      mobile: 0.3
+    },
+    passport: {
+      desktop: 0,
+      mobile: 0.3
+    },
+    singlePage: {
+      desktop: 0,
+      mobile: 0.3
+    }
+  };
+  var classifier$1 = null;
+  var classifierSettings$1 = null;
+  function loadFocusModel() {
+    return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+      var _a, _b;
+      if (modelAssetPath === void 0) {
+        modelAssetPath = defaultFocusModelPath;
+      }
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            if (classifier$1 && (classifierSettings$1 === null || classifierSettings$1 === void 0 ? void 0 : classifierSettings$1.modelAssetPath) === modelAssetPath) return [2 /*return*/, classifier$1];
+            closeFocusModel();
+            return [4 /*yield*/, preloadFocusModelDependencies()];
+          case 1:
+            _c.sent();
+            if (modelCapabilities.delegate === 'NONE') {
+              throw new Error('No available delegate for focus detector.');
+            }
+            _b = (_a = Ua).createFromOptions;
+            return [4 /*yield*/, ao.forVisionTasks(visionTasksBasePath)];
+          case 2:
+            return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
+              baseOptions: {
+                modelAssetPath: modelAssetPath,
+                delegate: modelCapabilities.delegate
+              },
+              // canvas: document.createElement('canvas'),
+              runningMode: 'VIDEO'
+            }])];
+          case 3:
+            classifier$1 = _c.sent();
+            classifierSettings$1 = {
+              modelAssetPath: modelAssetPath
+            };
+            return [2 /*return*/, classifier$1];
+        }
+      });
+    });
+  }
+  function closeFocusModel() {
+    classifier$1 === null || classifier$1 === void 0 ? void 0 : classifier$1.close();
+    classifier$1 = null;
+    classifierSettings$1 = null;
+  }
+  function useLoadFocusModel(_a) {
+    var _b = _a.modelPath,
+      modelPath = _b === void 0 ? defaultFocusModelPath : _b,
+      _c = _a.modelLoadTimeoutMs,
+      modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
+      onModelError = _a.onModelError,
+      videoRef = _a.videoRef,
+      _d = _a.shouldLoadModels,
+      shouldLoadModels = _d === void 0 ? true : _d;
+    var _e = React.useState('not-started'),
+      modelLoadState = _e[0],
+      setModelLoadState = _e[1];
+    var _f = React.useState(0),
+      modelDownloadProgress = _f[0],
+      setModelDownloadProgress = _f[1];
+    var _g = React.useState(null),
+      modelWarmingStartedAt = _g[0],
+      setModelWarmingStartedAt = _g[1];
+    var _h = React.useState(null),
+      modelError = _h[0],
+      setModelError = _h[1];
+    React.useEffect(function loadModel() {
+      var _this = this;
+      if (!shouldLoadModels) return;
+      setModelLoadState('downloading');
+      setModelWarmingStartedAt(null);
+      function handleDownloadProgress(event) {
+        setModelDownloadProgress(progressToPercentage(event.detail));
+      }
+      document.addEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
+      var modelLoadTimeout = setTimeout(function () {
+        setModelError(new Error('Model loading time limit exceeded.'));
+      }, modelLoadTimeoutMs);
+      var cancelVideoReady = function cancelVideoReady() {};
+      loadFocusModel(modelPath).then(function (loadedModel) {
+        return __awaiter(_this, void 0, void 0, function () {
+          var _a, videoReady, cancel, cancelled;
+          return __generator(this, function (_b) {
+            switch (_b.label) {
+              case 0:
+                setModelDownloadProgress(100);
+                clearTimeout(modelLoadTimeout);
+                setModelLoadState('warming');
+                setModelWarmingStartedAt(performance.now());
+                _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
+                cancelled = false;
+                cancelVideoReady = function cancelVideoReady() {
+                  cancelled = true;
+                  cancel();
+                };
+                return [4 /*yield*/, videoReady];
+              case 1:
+                _b.sent();
+                setTimeout(function () {
+                  if (cancelled) return;
+                  loadedModel.classifyForVideo(videoRef.current, performance.now());
+                  setModelLoadState('ready');
+                }, 500);
+                return [2 /*return*/];
+            }
+          });
+        });
+      })["catch"](function (e) {
+        setModelError(e);
+        setModelLoadState('error');
+      })["finally"](function () {
+        clearTimeout(modelLoadTimeout);
+      });
+      return function () {
+        log('unloading focus model');
+        cancelVideoReady();
+        closeFocusModel();
+        clearTimeout(modelLoadTimeout);
+        document.removeEventListener('idmission.preloadProgress.focus', handleDownloadProgress);
+      };
+    }, [modelPath, modelLoadTimeoutMs, videoRef, shouldLoadModels]);
+    React.useEffect(function handleModelError() {
+      if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
+    }, [modelError, onModelError]);
+    return React.useMemo(function () {
+      return {
+        ready: modelLoadState === 'ready',
+        modelLoadState: modelLoadState,
+        modelDownloadProgress: modelDownloadProgress,
+        modelWarmingStartedAt: modelWarmingStartedAt,
+        modelError: modelError
+      };
+    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
+  }
+  var lastFocusPredictionAt = 0;
+  var lastFocusPredictionTime = 0;
+  function setLastFocusPredictionAt(time) {
+    lastFocusPredictionTime = time - lastFocusPredictionAt;
+    lastFocusPredictionAt = time;
+  }
+  function makeFocusModelPrediction(imageData, cropCanvas, rotateCanvas, box) {
+    var _a, _b, _c, _d, _e;
+    if (!classifier$1) return null;
+    var startedAt = performance.now();
+    var image = cropAndRotateIfNecessary(imageData, cropCanvas, rotateCanvas, box);
+    var result = classifier$1.classifyForVideo(image, performance.now());
+    var score = (_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.classifications) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.find(function (c) {
+      return c.categoryName === 'focused';
+    })) === null || _d === void 0 ? void 0 : _d.score) !== null && _e !== void 0 ? _e : 0;
+    var predictionTime = performance.now() - startedAt;
+    return {
+      score: score,
+      predictionTime: predictionTime
+    };
   }
 
   var FocusModelContext = /*#__PURE__*/React.createContext({
@@ -14416,7 +14078,7 @@
     }, [focusThresholds, load, makeFocusPrediction, modelDownloadProgress, modelError, modelLoadState, modelWarmingStartedAt]);
     return /*#__PURE__*/React.createElement(FocusModelContext.Provider, {
       value: value
-    }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
+    }, /*#__PURE__*/React.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React.createElement(InvisibleCanvas, {
       ref: rotateCanvas,
       style: showCanvases ? {
         display: 'block'
@@ -14426,7 +14088,7 @@
       style: showCanvases ? {
         display: 'block'
       } : undefined
-    }), children);
+    })), children);
   }
 
   function _isNavigatorDefined() {
@@ -14461,7 +14123,379 @@
     return false;
   }
 
+  var defaultBarcodeReadabilityModelLoadTimeoutMs = 45000;
+  var classifier = null;
+  var classifierSettings = null;
+  function loadBarcodeReadabilityModel() {
+    return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+      var _a, _b;
+      if (modelAssetPath === void 0) {
+        modelAssetPath = defaultBarcodeReadabilityModelPath;
+      }
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            if (classifier && (classifierSettings === null || classifierSettings === void 0 ? void 0 : classifierSettings.modelAssetPath) === modelAssetPath) return [2 /*return*/, classifier];
+            closeBarcodeReadabilityModel();
+            return [4 /*yield*/, preloadBarcodeReadabilityModelDependencies()];
+          case 1:
+            _c.sent();
+            if (modelCapabilities.delegate === 'NONE') {
+              throw new Error('No available delegate for barcode readability model.');
+            }
+            _b = (_a = Ua).createFromOptions;
+            return [4 /*yield*/, ao.forVisionTasks(visionTasksBasePath)];
+          case 2:
+            return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
+              baseOptions: {
+                modelAssetPath: modelAssetPath,
+                delegate: 'CPU'
+              },
+              runningMode: 'VIDEO',
+              maxResults: 1
+            }])];
+          case 3:
+            classifier = _c.sent();
+            classifierSettings = {
+              modelAssetPath: modelAssetPath
+            };
+            return [2 /*return*/, classifier];
+        }
+      });
+    });
+  }
+  function closeBarcodeReadabilityModel() {
+    classifier === null || classifier === void 0 ? void 0 : classifier.close();
+    classifier = null;
+    classifierSettings = null;
+  }
+  function useLoadBarcodeReadabilityModel(_a) {
+    var _b = _a.modelPath,
+      modelPath = _b === void 0 ? defaultBarcodeReadabilityModelPath : _b,
+      _c = _a.modelLoadTimeoutMs,
+      modelLoadTimeoutMs = _c === void 0 ? defaultBarcodeReadabilityModelLoadTimeoutMs : _c,
+      onModelError = _a.onModelError,
+      videoRef = _a.videoRef,
+      _d = _a.shouldLoadModels,
+      shouldLoadModels = _d === void 0 ? true : _d;
+    var _e = React.useState('not-started'),
+      modelLoadState = _e[0],
+      setModelLoadState = _e[1];
+    var _f = React.useState(0),
+      modelDownloadProgress = _f[0],
+      setModelDownloadProgress = _f[1];
+    var _g = React.useState(null),
+      modelWarmingStartedAt = _g[0],
+      setModelWarmingStartedAt = _g[1];
+    var _h = React.useState(null),
+      modelError = _h[0],
+      setModelError = _h[1];
+    React.useEffect(function loadModel() {
+      var _this = this;
+      if (!shouldLoadModels) return;
+      setModelLoadState('downloading');
+      setModelWarmingStartedAt(null);
+      function handleDownloadProgress(event) {
+        setModelDownloadProgress(progressToPercentage(event.detail));
+      }
+      document.addEventListener('idmission.preloadProgress.barcodeReadability', handleDownloadProgress);
+      var modelLoadTimeout = setTimeout(function () {
+        setModelError(new Error('Model loading time limit exceeded.'));
+      }, modelLoadTimeoutMs);
+      var cancelVideoReady = function cancelVideoReady() {};
+      loadBarcodeReadabilityModel(modelPath).then(function (loadedModel) {
+        return __awaiter(_this, void 0, void 0, function () {
+          var _a, videoReady, cancel, cancelled;
+          return __generator(this, function (_b) {
+            switch (_b.label) {
+              case 0:
+                setModelDownloadProgress(100);
+                clearTimeout(modelLoadTimeout);
+                setModelLoadState('warming');
+                setModelWarmingStartedAt(new Date().getTime());
+                _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
+                cancelled = false;
+                cancelVideoReady = function cancelVideoReady() {
+                  cancelled = true;
+                  cancel();
+                };
+                return [4 /*yield*/, videoReady];
+              case 1:
+                _b.sent();
+                setTimeout(function () {
+                  if (cancelled) return;
+                  loadedModel.classifyForVideo(videoRef.current, performance.now());
+                  setModelLoadState('ready');
+                }, 500);
+                return [2 /*return*/];
+            }
+          });
+        });
+      })["catch"](function (e) {
+        setModelError(e);
+        setModelLoadState('error');
+      })["finally"](function () {
+        clearTimeout(modelLoadTimeout);
+      });
+      return function () {
+        log('unloading barcode readability model');
+        cancelVideoReady();
+        closeBarcodeReadabilityModel();
+        clearTimeout(modelLoadTimeout);
+        document.removeEventListener('idmission.preloadProgress.barcodeReadability', handleDownloadProgress);
+      };
+    }, [modelPath, modelLoadTimeoutMs, videoRef, shouldLoadModels]);
+    React.useEffect(function handleModelError() {
+      if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
+    }, [modelError, onModelError]);
+    return React.useMemo(function () {
+      return {
+        ready: modelLoadState === 'ready',
+        modelLoadState: modelLoadState,
+        modelDownloadProgress: modelDownloadProgress,
+        modelWarmingStartedAt: modelWarmingStartedAt,
+        modelError: modelError
+      };
+    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
+  }
+  var lastBarcodeReadabilityPredictionAt = 0;
+  var lastBarcodeReadabilityPredictionTime = 0;
+  function setLastBarcodeReadabilityPredictionAt(time) {
+    lastBarcodeReadabilityPredictionTime = time - lastBarcodeReadabilityPredictionAt;
+    lastBarcodeReadabilityPredictionAt = time;
+  }
+  function makeBarcodeReadabilityModelPrediction(imageData, cropCanvas, rotateCanvas, resizeCanvas, box) {
+    var _a, _b, _c, _d, _e;
+    if (!classifier) return null;
+    var startedAt = performance.now();
+    var image = cropAndRotateIfNecessary(imageData, cropCanvas, rotateCanvas, box);
+    var resized = resizeIfNecessary(image, resizeCanvas, 500);
+    var result = classifier.classifyForVideo(resized, performance.now());
+    var score = (_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.classifications) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.find(function (c) {
+      return c.categoryName === 'blurry';
+    })) === null || _d === void 0 ? void 0 : _d.score) !== null && _e !== void 0 ? _e : 0;
+    debug('barcode prediction', "".concat(performance.now() - startedAt, "ms"), score);
+    var predictionTime = performance.now() - startedAt;
+    return {
+      score: score,
+      predictionTime: predictionTime
+    };
+  }
+
+  var BarcodeReadabilityModelContext = /*#__PURE__*/React.createContext({
+    loadBarcodeReadabilityModel: function loadBarcodeReadabilityModel() {
+      return null;
+    },
+    barcodeReadabilityModelState: 'not-started',
+    barcodeReadabilityModelDownloadProgress: 0,
+    barcodeReadabilityModelWarmingStartedAt: null,
+    barcodeReadabilityModelError: null,
+    barcodeReadabilityThresholds: {},
+    setBarcodeReadabilityThresholds: function setBarcodeReadabilityThresholds() {
+      return null;
+    },
+    makeBarcodeReadabilityPrediction: function makeBarcodeReadabilityPrediction() {
+      return null;
+    },
+    barcodeReadabilityPredictionTime: 0
+  });
+  function BarcodeReadabilityModelProvider(_a) {
+    var children = _a.children,
+      _b = _a.barcodeReadabilityModelPath,
+      barcodeReadabilityModelPath = _b === void 0 ? defaultBarcodeReadabilityModelPath : _b,
+      _c = _a.barcodeReadabilityModelLoadTimeoutMs,
+      barcodeReadabilityModelLoadTimeoutMs = _c === void 0 ? defaultBarcodeReadabilityModelLoadTimeoutMs : _c,
+      onBarcodeReadabilityModelError = _a.onBarcodeReadabilityModelError,
+      _d = _a.showCanvases,
+      showCanvases = _d === void 0 ? false : _d,
+      _e = _a.shouldLoadModels,
+      shouldLoadModelsProp = _e === void 0 ? true : _e;
+    var cropCanvas = React.useRef(null);
+    var rotateCanvas = React.useRef(null);
+    var resizeCanvas = React.useRef(null);
+    var _f = React.useState({}),
+      barcodeReadabilityThresholds = _f[0],
+      setBarcodeReadabilityThresholds = _f[1];
+    var videoRef = useCameraStore().videoRef;
+    var _g = React.useState(shouldLoadModelsProp),
+      shouldLoadModels = _g[0],
+      setShouldLoadModels = _g[1];
+    var load = React.useCallback(function () {
+      return setShouldLoadModels(true);
+    }, []);
+    var _h = useLoadBarcodeReadabilityModel({
+        modelPath: barcodeReadabilityModelPath,
+        modelLoadTimeoutMs: barcodeReadabilityModelLoadTimeoutMs,
+        onModelError: onBarcodeReadabilityModelError,
+        videoRef: videoRef,
+        shouldLoadModels: shouldLoadModels
+      }),
+      ready = _h.ready,
+      modelLoadState = _h.modelLoadState,
+      modelDownloadProgress = _h.modelDownloadProgress,
+      modelWarmingStartedAt = _h.modelWarmingStartedAt,
+      modelError = _h.modelError;
+    var makeBarcodeReadabilityPrediction = React.useCallback(function (imageData, box) {
+      if (!ready) return null;
+      var prediction = makeBarcodeReadabilityModelPrediction(imageData, cropCanvas.current, rotateCanvas.current, resizeCanvas.current, box);
+      if (!prediction) return null;
+      setLastBarcodeReadabilityPredictionAt(prediction.predictionTime);
+      return prediction;
+    }, [ready]);
+    var value = React.useMemo(function () {
+      return {
+        loadBarcodeReadabilityModel: load,
+        barcodeReadabilityModelState: modelLoadState,
+        barcodeReadabilityModelDownloadProgress: modelDownloadProgress,
+        barcodeReadabilityModelWarmingStartedAt: modelWarmingStartedAt,
+        barcodeReadabilityModelError: modelError,
+        makeBarcodeReadabilityPrediction: makeBarcodeReadabilityPrediction,
+        barcodeReadabilityPredictionTime: lastBarcodeReadabilityPredictionTime,
+        barcodeReadabilityThresholds: barcodeReadabilityThresholds,
+        setBarcodeReadabilityThresholds: setBarcodeReadabilityThresholds
+      };
+    }, [barcodeReadabilityThresholds, load, makeBarcodeReadabilityPrediction, modelDownloadProgress, modelError, modelLoadState, modelWarmingStartedAt]);
+    return /*#__PURE__*/React.createElement(BarcodeReadabilityModelContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React.createElement(InvisibleCanvas, {
+      ref: rotateCanvas
+    }), /*#__PURE__*/React.createElement(InvisibleCanvas, {
+      ref: cropCanvas
+    }), /*#__PURE__*/React.createElement(InvisibleCanvas, {
+      ref: resizeCanvas,
+      style: showCanvases ? {
+        display: 'block'
+      } : undefined
+    })), children);
+  }
+  function useBarcodeReadabilityModelContext() {
+    var context = React.useContext(BarcodeReadabilityModelContext);
+    if (!context) {
+      throw new Error('useBarcodeReadabilityModelContext must be used within a BarcodeReadabilityModelProvider');
+    }
+    return context;
+  }
+
   var onMobile = isMobile();
+  /**
+   * Analyzes barcode readability for a detected document
+   * @param prediction The document detection prediction
+   * @param lastPredictionCanvas The canvas containing the original frame
+   * @param croppedDocumentCanvas Canvas for storing cropped document
+   * @param bestBarcodeCanvas Canvas for storing best barcode crop
+   * @param currentBestBarcodeScore Current best barcode score
+   * @param documentDetectionThresholds Thresholds for document detection
+   * @param makeBarcodeReadabilityPrediction Function to make barcode readability predictions
+   * @param barcodeReadabilityThresholds Thresholds for barcode readability
+   * @returns Object containing barcode analysis results
+   */
+  function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore, documentDetectionThresholds, makeBarcodeReadabilityPrediction, barcodeReadabilityThreshold) {
+    return __awaiter(this, void 0, void 0, function () {
+      var pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, newBestBarcodeScore, newBestBarcodeDetails, documentCroppedPrediction, processedCroppedPrediction, pdf417Prediction;
+      var _a;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            pdf417PredictionTime = 0;
+            pdf417PredictionScore = 0;
+            pdf417PredictionThresholdMet = false;
+            if (!prediction.bestDocument || !((_a = prediction.bestPDF417) === null || _a === void 0 ? void 0 : _a.box) || !bestBarcodeCanvas) {
+              return [2 /*return*/, {
+                pdf417PredictionTime: pdf417PredictionTime,
+                pdf417PredictionScore: pdf417PredictionScore,
+                pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
+                newBestBarcodeScore: newBestBarcodeScore,
+                newBestBarcodeDetails: newBestBarcodeDetails
+              }];
+            }
+            /**
+             * Step 1: Crop the full frame to just the document area
+             * This removes background noise and focuses analysis on the document
+             */
+            cropToDetectedObjectBox(lastPredictionCanvas, prediction.bestDocument.box, croppedDocumentCanvas);
+            return [4 /*yield*/, makeDocumentDetectorPrediction(croppedDocumentCanvas)];
+          case 1:
+            documentCroppedPrediction = _b.sent();
+            if (!documentCroppedPrediction) {
+              // error occurred during prediction (error logged by callee)
+              return [2 /*return*/, {
+                pdf417PredictionTime: pdf417PredictionTime,
+                pdf417PredictionScore: pdf417PredictionScore,
+                pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
+                newBestBarcodeScore: newBestBarcodeScore,
+                newBestBarcodeDetails: newBestBarcodeDetails
+              }];
+            }
+            processedCroppedPrediction = processDocumentDetectorPrediction(documentCroppedPrediction, documentDetectionThresholds);
+            if (processedCroppedPrediction.bestPDF417) {
+              pdf417Prediction = makeBarcodeReadabilityPrediction(croppedDocumentCanvas, processedCroppedPrediction.bestPDF417.box);
+              if (pdf417Prediction) {
+                pdf417PredictionTime = pdf417Prediction.predictionTime;
+                pdf417PredictionScore = pdf417Prediction.score;
+                if (pdf417Prediction.score > currentBestBarcodeScore) {
+                  /**
+                   * Step 5: Update best barcode
+                   */
+                  newBestBarcodeScore = pdf417Prediction.score;
+                  newBestBarcodeDetails = {
+                    boundingBox: prediction.bestPDF417.box,
+                    score: pdf417Prediction.score
+                  };
+                  if (pdf417PredictionScore >= barcodeReadabilityThreshold) {
+                    pdf417PredictionThresholdMet = true;
+                  }
+                  cropToDetectedObjectBox(croppedDocumentCanvas, processedCroppedPrediction.bestPDF417.box, bestBarcodeCanvas, 16);
+                }
+              }
+            }
+            return [2 /*return*/, {
+              pdf417PredictionTime: pdf417PredictionTime,
+              pdf417PredictionScore: pdf417PredictionScore,
+              pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
+              newBestBarcodeScore: newBestBarcodeScore,
+              newBestBarcodeDetails: newBestBarcodeDetails
+            }];
+        }
+      });
+    });
+  }
+  /**
+   * Calculates the barcode readability threshold for a given document type
+   * @param detectedDocumentType The type of document detected
+   * @param barcodeReadabilityThresholds The threshold configuration object
+   * @returns The appropriate threshold value for the current platform (mobile/desktop)
+   */
+  function calculateBarcodeReadabilityThreshold(detectedDocumentType, barcodeReadabilityThresholds) {
+    var barcodeReadabilityThresholdSet = detectedDocumentType in barcodeReadabilityThresholds ? barcodeReadabilityThresholds[detectedDocumentType] : undefined;
+    if (barcodeReadabilityThresholdSet) {
+      return onMobile ? barcodeReadabilityThresholdSet.mobile || 0 : barcodeReadabilityThresholdSet.desktop || 0;
+    }
+    return 0;
+  }
+  /**
+   * Hook that calculates the barcode readability threshold for a given document type
+   */
+  function useBarcodeReadabilityThreshold() {
+    var barcodeReadabilityThresholds = useBarcodeReadabilityModelContext().barcodeReadabilityThresholds;
+    return React.useCallback(function (detectedDocumentType) {
+      return calculateBarcodeReadabilityThreshold(detectedDocumentType, barcodeReadabilityThresholds);
+    }, [barcodeReadabilityThresholds]);
+  }
+  function useBarcodeReadabilityAnalysis() {
+    var _this = this;
+    var documentDetectionThresholds = React.useContext(DocumentDetectionModelContext).documentDetectionThresholds;
+    var makeBarcodeReadabilityPrediction = useBarcodeReadabilityModelContext().makeBarcodeReadabilityPrediction;
+    var getBarcodeReadabilityThreshold = useBarcodeReadabilityThreshold();
+    return React.useCallback(function (prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var barcodeReadabilityThreshold;
+        return __generator(this, function (_a) {
+          barcodeReadabilityThreshold = getBarcodeReadabilityThreshold(prediction.detectedDocumentType);
+          return [2 /*return*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore, documentDetectionThresholds, makeBarcodeReadabilityPrediction, barcodeReadabilityThreshold)];
+        });
+      });
+    }, [documentDetectionThresholds, makeBarcodeReadabilityPrediction, getBarcodeReadabilityThreshold]);
+  }
   var defaultIdCaptureThresholds = {
     detection: defaultDocumentDetectionThresholds,
     focus: defaultFocusThresholds
@@ -14494,6 +14528,7 @@
     },
     detectionTime: 0,
     focusPredictionTime: 0,
+    barcodeReadabilityPredictionTime: 0,
     bestFrameDetails: {
       current: null
     },
@@ -14503,55 +14538,80 @@
     resetBestFrame: function resetBestFrame() {
       return null;
     },
+    bestBarcodeDetails: {
+      current: null
+    },
+    getBestBarcode: function getBestBarcode() {
+      return null;
+    },
     requiredDocumentType: 'none',
     setRequiredDocumentType: function setRequiredDocumentType() {
       return null;
     }
   });
   function IdCaptureModelsProviderInner(_a) {
+    var _b;
     var children = _a.children,
       onModelError = _a.onModelError,
-      _b = _a.allowSinglePageIdCapture,
-      allowSinglePageIdCapture = _b === void 0 ? false : _b;
-    var _c = React.useContext(DocumentDetectionModelContext),
-      documentDetectionModelState = _c.documentDetectionModelState,
-      documentDetectionModelDownloadProgress = _c.documentDetectionModelDownloadProgress,
-      documentDetectionModelWarmingStartedAt = _c.documentDetectionModelWarmingStartedAt,
-      startDocumentDetection = _c.startDocumentDetection,
-      stopDocumentDetection = _c.stopDocumentDetection,
-      loadDocumentDetectionModel = _c.loadDocumentDetectionModel,
-      lastPredictionCanvas = _c.documentDetectionLastPredictionCanvas,
-      clearDocumentDetectionLastPredictionCanvas = _c.clearDocumentDetectionLastPredictionCanvas,
-      onDocumentDetected = _c.onDocumentDetected,
-      detectionTime = _c.detectionTime,
-      documentDetectionThresholds = _c.documentDetectionThresholds,
-      setDocumentDetectionThresholds = _c.setDocumentDetectionThresholds,
-      documentDetectionBoundaries = _c.documentDetectionBoundaries,
-      setDocumentDetectionBoundaries = _c.setDocumentDetectionBoundaries,
-      documentDetectionModelError = _c.documentDetectionModelError;
-    var _d = React.useContext(FocusModelContext),
-      loadFocusModel = _d.loadFocusModel,
-      focusModelState = _d.focusModelState,
-      focusModelDownloadProgress = _d.focusModelDownloadProgress,
-      focusModelWarmingStartedAt = _d.focusModelWarmingStartedAt,
-      makeFocusPrediction = _d.makeFocusPrediction,
-      focusThresholds = _d.focusThresholds,
-      setFocusThresholds = _d.setFocusThresholds,
-      focusPredictionTime = _d.focusPredictionTime,
-      focusModelError = _d.focusModelError;
+      _c = _a.allowSinglePageIdCapture,
+      allowSinglePageIdCapture = _c === void 0 ? false : _c,
+      _d = _a.enableBarcodeReadabilityModel,
+      enableBarcodeReadabilityModel = _d === void 0 ? true : _d;
+    var _e = React.useContext(DocumentDetectionModelContext),
+      documentDetectionModelState = _e.documentDetectionModelState,
+      documentDetectionModelDownloadProgress = _e.documentDetectionModelDownloadProgress,
+      documentDetectionModelWarmingStartedAt = _e.documentDetectionModelWarmingStartedAt,
+      startDocumentDetection = _e.startDocumentDetection,
+      stopDocumentDetection = _e.stopDocumentDetection,
+      loadDocumentDetectionModel = _e.loadDocumentDetectionModel,
+      lastPredictionCanvas = _e.documentDetectionLastPredictionCanvas,
+      clearDocumentDetectionLastPredictionCanvas = _e.clearDocumentDetectionLastPredictionCanvas,
+      onDocumentDetected = _e.onDocumentDetected,
+      detectionTime = _e.detectionTime,
+      documentDetectionThresholds = _e.documentDetectionThresholds,
+      setDocumentDetectionThresholds = _e.setDocumentDetectionThresholds,
+      documentDetectionBoundaries = _e.documentDetectionBoundaries,
+      setDocumentDetectionBoundaries = _e.setDocumentDetectionBoundaries,
+      documentDetectionModelError = _e.documentDetectionModelError;
+    var _f = React.useContext(FocusModelContext),
+      loadFocusModel = _f.loadFocusModel,
+      focusModelState = _f.focusModelState,
+      focusModelDownloadProgress = _f.focusModelDownloadProgress,
+      focusModelWarmingStartedAt = _f.focusModelWarmingStartedAt,
+      makeFocusPrediction = _f.makeFocusPrediction,
+      focusThresholds = _f.focusThresholds,
+      setFocusThresholds = _f.setFocusThresholds,
+      focusPredictionTime = _f.focusPredictionTime,
+      focusModelError = _f.focusModelError;
+    var _g = useBarcodeReadabilityModelContext(),
+      loadBarcodeReadabilityModel = _g.loadBarcodeReadabilityModel,
+      barcodeReadabilityModelState = _g.barcodeReadabilityModelState,
+      barcodeReadabilityModelDownloadProgress = _g.barcodeReadabilityModelDownloadProgress,
+      barcodeReadabilityModelWarmingStartedAt = _g.barcodeReadabilityModelWarmingStartedAt,
+      makeBarcodeReadabilityPrediction = _g.makeBarcodeReadabilityPrediction,
+      barcodeReadabilityThresholds = _g.barcodeReadabilityThresholds,
+      setBarcodeReadabilityThresholds = _g.setBarcodeReadabilityThresholds,
+      barcodeReadabilityPredictionTime = _g.barcodeReadabilityPredictionTime,
+      barcodeReadabilityModelError = _g.barcodeReadabilityModelError;
     var onPredictionHandler = React.useRef();
     var bestFrameDetails = React.useRef(null);
+    var bestBarcodeDetails = React.useRef(null);
     var bestPredictionCanvas = React.useRef(null);
+    var bestBarcodeCanvas = React.useRef(null);
+    var croppedDocumentCanvas = React.useRef(null);
     var bestFocusScore = React.useRef(0);
+    var bestBarcodeScore = React.useRef(0);
     var stopDetection = React.useRef(0);
-    var _e = React.useState('none'),
-      requiredDocumentType = _e[0],
-      setRequiredDocumentType = _e[1];
+    var analyzeBarcodeReadability = useBarcodeReadabilityAnalysis();
+    var _h = React.useState('none'),
+      requiredDocumentType = _h[0],
+      setRequiredDocumentType = _h[1];
     var thresholds = React.useMemo(function () {
       return _assign(_assign({}, documentDetectionThresholds), {
-        focus: focusThresholds
+        focus: focusThresholds,
+        barcodeReadability: barcodeReadabilityThresholds
       });
-    }, [documentDetectionThresholds, focusThresholds]);
+    }, [documentDetectionThresholds, focusThresholds, barcodeReadabilityThresholds]);
     var setThresholds = React.useCallback(function (thresholds) {
       if (thresholds.detection) {
         setDocumentDetectionThresholds(thresholds.detection);
@@ -14559,57 +14619,87 @@
       if (thresholds.focus) {
         setFocusThresholds(thresholds.focus);
       }
-    }, [setDocumentDetectionThresholds, setFocusThresholds]);
+      if (thresholds.barcodeReadability) {
+        setBarcodeReadabilityThresholds(thresholds.barcodeReadability);
+      }
+    }, [setBarcodeReadabilityThresholds, setDocumentDetectionThresholds, setFocusThresholds]);
     React.useEffect(function handleDetections() {
       var _this = this;
       onDocumentDetected(function (prediction) {
         return __awaiter(_this, void 0, void 0, function () {
-          var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, isSinglePage, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold;
+          var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult;
           var _a, _b, _c, _d, _e, _f, _g;
           return __generator(this, function (_h) {
-            if (!lastPredictionCanvas.current) return [2 /*return*/];
-            stopDetectionAtStart = stopDetection.current;
-            focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
-            isSinglePage = prediction.detectedDocumentType === 'singlePage';
-            if (!allowSinglePageIdCapture && isSinglePage) {
-              prediction.detectedDocumentType = 'passport';
-              prediction.passportDetectionScore = prediction.singlePageDetectionScore;
-              prediction.passportDetectionThresholdMet = prediction.singlePageDetectionThresholdMet;
-              prediction.singlePageDetectionScore = 0;
-              prediction.singlePageDetectionThresholdMet = false;
-            }
-            isRequiredDocumentType = requiredDocumentType === 'none' || prediction.detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, prediction.detectedDocumentType)) || allowSinglePageIdCapture && isSinglePage && ((_b = requiredDocumentType.includes) === null || _b === void 0 ? void 0 : _b.call(requiredDocumentType, 'idCardFront'));
-            if (isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose && prediction.documentIsStable) {
-              focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_c = prediction.bestDocument) === null || _c === void 0 ? void 0 : _c.box);
-              if (focusPrediction) {
-                focusScore = focusPrediction.score;
-                focusPredictionTime = focusPrediction.predictionTime;
-              }
-              focusThresholdSet = (_d = thresholds.focus) === null || _d === void 0 ? void 0 : _d[prediction.detectedDocumentType];
-              focusThreshold = (_e = onMobile ? focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.mobile : focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.desktop) !== null && _e !== void 0 ? _e : 0;
-              focusThresholdMet = focusScore >= focusThreshold;
-              if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
-                bestFocusScore.current = focusScore;
-                drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
-                bestFrameDetails.current = {
-                  boundingBox: (_f = prediction.bestDocument) === null || _f === void 0 ? void 0 : _f.box,
-                  documentType: prediction.detectedDocumentType,
-                  detectionScore: prediction.detectionScore,
-                  focusScore: focusScore
-                };
-              }
+            switch (_h.label) {
+              case 0:
+                if (!lastPredictionCanvas.current) return [2 /*return*/];
+                stopDetectionAtStart = stopDetection.current;
+                focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false, pdf417PredictionTime = 0, pdf417PredictionScore = 0, pdf417PredictionThresholdMet = false;
+                isSinglePage = prediction.detectedDocumentType === 'singlePage';
+                if (!allowSinglePageIdCapture && isSinglePage) {
+                  prediction.detectedDocumentType = 'passport';
+                  prediction.passportDetectionScore = prediction.singlePageDetectionScore;
+                  prediction.passportDetectionThresholdMet = prediction.singlePageDetectionThresholdMet;
+                  prediction.singlePageDetectionScore = 0;
+                  prediction.singlePageDetectionThresholdMet = false;
+                }
+                isRequiredDocumentType = requiredDocumentType === 'none' || prediction.detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, prediction.detectedDocumentType)) || allowSinglePageIdCapture && isSinglePage && ((_b = requiredDocumentType.includes) === null || _b === void 0 ? void 0 : _b.call(requiredDocumentType, 'idCardFront'));
+                if (!(isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose && prediction.documentIsStable)) return [3 /*break*/, 2];
+                focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_c = prediction.bestDocument) === null || _c === void 0 ? void 0 : _c.box);
+                if (focusPrediction) {
+                  focusScore = focusPrediction.score;
+                  focusPredictionTime = focusPrediction.predictionTime;
+                }
+                focusThresholdSet = (_d = thresholds.focus) === null || _d === void 0 ? void 0 : _d[prediction.detectedDocumentType];
+                focusThreshold = (_e = onMobile ? focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.mobile : focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.desktop) !== null && _e !== void 0 ? _e : 0;
+                focusThresholdMet = focusScore >= focusThreshold;
+                if (!(stopDetectionAtStart === stopDetection.current)) return [3 /*break*/, 2];
+                if (bestFocusScore.current <= focusScore) {
+                  bestFocusScore.current = focusScore;
+                  drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
+                  bestFrameDetails.current = {
+                    boundingBox: (_f = prediction.bestDocument) === null || _f === void 0 ? void 0 : _f.box,
+                    documentType: prediction.detectedDocumentType,
+                    detectionScore: prediction.detectionScore,
+                    focusScore: focusScore
+                  };
+                }
+                if (!(enableBarcodeReadabilityModel && prediction.bestDocument && prediction.bestPDF417 && croppedDocumentCanvas.current)) return [3 /*break*/, 2];
+                return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
+              case 1:
+                barcodeAnalysisResult = _h.sent();
+                pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
+                pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
+                pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
+                if (barcodeAnalysisResult.newBestBarcodeScore) {
+                  bestBarcodeScore.current = barcodeAnalysisResult.newBestBarcodeScore;
+                }
+                if (barcodeAnalysisResult.newBestBarcodeDetails) {
+                  bestBarcodeDetails.current = barcodeAnalysisResult.newBestBarcodeDetails;
+                }
+                _h.label = 2;
+              case 2:
+                /**
+                 * @note
+                 * This should ALWAYS be called.
+                 * Do not return early from this function unless
+                 * lastPredictionCanvas.current is not set
+                 */
+                (_g = onPredictionHandler.current) === null || _g === void 0 ? void 0 : _g.call(onPredictionHandler, _assign(_assign({}, prediction), {
+                  focusScore: focusScore,
+                  focusPredictionTime: focusPredictionTime,
+                  focusThresholdMet: focusThresholdMet,
+                  pdf417PredictionTime: pdf417PredictionTime,
+                  pdf417PredictionScore: pdf417PredictionScore,
+                  pdf417PredictionThresholdMet: pdf417PredictionThresholdMet
+                }));
+                return [2 /*return*/];
             }
-            (_g = onPredictionHandler.current) === null || _g === void 0 ? void 0 : _g.call(onPredictionHandler, _assign(_assign({}, prediction), {
-              focusScore: focusScore,
-              focusPredictionTime: focusPredictionTime,
-              focusThresholdMet: focusThresholdMet
-            }));
-            return [2 /*return*/];
           });
         });
       });
-    }, [allowSinglePageIdCapture, lastPredictionCanvas, makeFocusPrediction, onDocumentDetected, requiredDocumentType, thresholds.focus]);
-    var modelError = documentDetectionModelError !== null && documentDetectionModelError !== void 0 ? documentDetectionModelError : focusModelError;
+    }, [allowSinglePageIdCapture, analyzeBarcodeReadability, barcodeReadabilityThresholds, enableBarcodeReadabilityModel, lastPredictionCanvas, makeBarcodeReadabilityPrediction, makeFocusPrediction, onDocumentDetected, requiredDocumentType, thresholds.focus]);
+    var modelError = (_b = documentDetectionModelError !== null && documentDetectionModelError !== void 0 ? documentDetectionModelError : focusModelError) !== null && _b !== void 0 ? _b : barcodeReadabilityModelError;
     React.useEffect(function handleModelErrors() {
       if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
     }, [modelError, onModelError]);
@@ -14622,9 +14712,15 @@
         canvas: bestPredictionCanvas.current
       });
     }, []);
-    var _f = React.useState(0),
-      canvasKey = _f[0],
-      setCanvasKey = _f[1];
+    var getBestBarcode = React.useCallback(function () {
+      if (!bestBarcodeDetails.current || !bestBarcodeCanvas.current) return null;
+      return _assign(_assign({}, bestBarcodeDetails.current), {
+        canvas: bestBarcodeCanvas.current
+      });
+    }, []);
+    var _j = React.useState(0),
+      canvasKey = _j[0],
+      setCanvasKey = _j[1];
     var resetBestFrame = React.useCallback(function () {
       stopDetection.current += 1;
       setCanvasKey(function (n) {
@@ -14640,16 +14736,45 @@
     var load = React.useCallback(function () {
       loadDocumentDetectionModel();
       loadFocusModel();
-    }, [loadDocumentDetectionModel, loadFocusModel]);
-    var ready = documentDetectionModelState === 'ready' && focusModelState === 'ready';
-    var modelLoadState = ready ? 'ready' : documentDetectionModelState === 'warming' || focusModelState === 'warming' ? 'warming' : focusModelState === 'downloading' || documentDetectionModelState === 'downloading' ? 'downloading' : 'not-started';
-    var modelWarmingStartedAt = !documentDetectionModelWarmingStartedAt && !focusModelWarmingStartedAt ? null : Math.min.apply(Math, [documentDetectionModelWarmingStartedAt, focusModelWarmingStartedAt].filter(function (v) {
-      return v !== null;
-    }));
+      if (enableBarcodeReadabilityModel) loadBarcodeReadabilityModel();
+    }, [enableBarcodeReadabilityModel, loadBarcodeReadabilityModel, loadDocumentDetectionModel, loadFocusModel]);
+    var _k = React.useMemo(function () {
+        var modelStates = [documentDetectionModelState, focusModelState];
+        var modelWarmingStartedAts = [documentDetectionModelWarmingStartedAt, focusModelWarmingStartedAt];
+        var modelDownloadProgresses = [documentDetectionModelDownloadProgress, focusModelDownloadProgress];
+        if (enableBarcodeReadabilityModel) {
+          modelStates.push(barcodeReadabilityModelState);
+          modelWarmingStartedAts.push(barcodeReadabilityModelWarmingStartedAt);
+          modelDownloadProgresses.push(barcodeReadabilityModelDownloadProgress);
+        }
+        var ready = modelStates.every(function (state) {
+          return state === 'ready';
+        });
+        return {
+          ready: ready,
+          modelLoadState: ready ? 'ready' : modelStates.some(function (state) {
+            return state === 'warming';
+          }) ? 'warming' : modelStates.some(function (state) {
+            return state === 'downloading';
+          }) ? 'downloading' : 'not-started',
+          modelWarmingStartedAt: modelWarmingStartedAts.every(function (v) {
+            return v === null;
+          }) ? null : Math.min.apply(Math, modelWarmingStartedAts.filter(function (v) {
+            return v !== null;
+          })),
+          modelDownloadProgress: modelDownloadProgresses.reduce(function (a, b) {
+            return a + b;
+          }, 0) / modelDownloadProgresses.length
+        };
+      }, [barcodeReadabilityModelDownloadProgress, barcodeReadabilityModelState, barcodeReadabilityModelWarmingStartedAt, documentDetectionModelDownloadProgress, documentDetectionModelState, documentDetectionModelWarmingStartedAt, enableBarcodeReadabilityModel, focusModelDownloadProgress, focusModelState, focusModelWarmingStartedAt]),
+      ready = _k.ready,
+      modelLoadState = _k.modelLoadState,
+      modelWarmingStartedAt = _k.modelWarmingStartedAt,
+      modelDownloadProgress = _k.modelDownloadProgress;
     var value = React.useMemo(function () {
       return {
         ready: ready,
-        modelDownloadProgress: (documentDetectionModelDownloadProgress + focusModelDownloadProgress) / 2,
+        modelDownloadProgress: modelDownloadProgress,
         modelLoadState: modelLoadState,
         modelWarmingStartedAt: modelWarmingStartedAt,
         modelError: modelError,
@@ -14663,24 +14788,35 @@
         onPredictionMade: onPredictionMade,
         detectionTime: detectionTime,
         focusPredictionTime: focusPredictionTime,
+        barcodeReadabilityPredictionTime: barcodeReadabilityPredictionTime,
         getBestFrame: getBestFrame,
         resetBestFrame: resetBestFrame,
         bestFrameDetails: bestFrameDetails,
+        bestBarcodeDetails: bestBarcodeDetails,
+        getBestBarcode: getBestBarcode,
         requiredDocumentType: requiredDocumentType,
         setRequiredDocumentType: setRequiredDocumentType
       };
-    }, [detectionTime, documentDetectionBoundaries, documentDetectionModelDownloadProgress, focusModelDownloadProgress, focusPredictionTime, getBestFrame, load, modelLoadState, modelError, modelWarmingStartedAt, onPredictionMade, ready, requiredDocumentType, resetBestFrame, setDocumentDetectionBoundaries, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
+    }, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, requiredDocumentType]);
     return /*#__PURE__*/React.createElement(IdCaptureModelsContext.Provider, {
       value: value
-    }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
-      key: canvasKey,
+    }, /*#__PURE__*/React.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React.createElement(InvisibleCanvas, {
+      key: "bf-".concat(canvasKey),
       ref: bestPredictionCanvas
-    }), children);
+    }), /*#__PURE__*/React.createElement(InvisibleCanvas, {
+      key: "bb-".concat(canvasKey),
+      ref: bestBarcodeCanvas
+    }), /*#__PURE__*/React.createElement(InvisibleCanvas, {
+      key: "cd-".concat(canvasKey),
+      ref: croppedDocumentCanvas
+    })), children);
   }
   function IdCaptureModelsProvider(_a) {
     var children = _a.children,
       props = __rest(_a, ["children"]);
-    return /*#__PURE__*/React.createElement(DocumentDetectionModelProvider, _assign({}, props), /*#__PURE__*/React.createElement(FocusModelProvider, _assign({}, props), /*#__PURE__*/React.createElement(IdCaptureModelsProviderInner, _assign({}, props), children)));
+    return /*#__PURE__*/React.createElement(DocumentDetectionModelProvider, _assign({}, props), /*#__PURE__*/React.createElement(FocusModelProvider, _assign({}, props), /*#__PURE__*/React.createElement(BarcodeReadabilityModelProvider, _assign({}, props, {
+      shouldLoadModels: props.enableBarcodeReadabilityModel
+    }), /*#__PURE__*/React.createElement(IdCaptureModelsProviderInner, _assign({}, props), children))));
   }
   function useIdCaptureModelsContext() {
     var context = React.useContext(IdCaptureModelsContext);
@@ -14773,7 +14909,7 @@
     });
   }
 
-  var CapturedDocumentTypeValues = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'selfie', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
+  var CapturedDocumentTypeValues = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'selfie', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage', 'idBarcodeImage'];
 
   var acceptedDocumentTypesForIdCaptureRequirementOption = {
     idCardFront: ['idCardFront'],
@@ -15139,6 +15275,7 @@
     capturing: false,
     captureFailed: false,
     imageUrl: null,
+    idBarcodeImage: null,
     captureState: 'initializing',
     capturedDocuments: {},
     captureRequirement: 'idCardOrPassport',
@@ -15418,6 +15555,17 @@
           }
           return newState;
         }
+      case 'barcodeCaptured':
+        return _reducer(state, {
+          type: 'documentCaptured',
+          payload: {
+            imageData: action.payload.imageUrl,
+            documentType: 'idBarcodeImage',
+            width: 0,
+            height: 0,
+            barcodeReadabilityScore: action.payload.barcodeReadabilityScore
+          }
+        });
       case 'flipRequestCompleted':
         return _assign(_assign({}, state), {
           captureState: 'capturing',
@@ -15909,12 +16057,13 @@
       height = _q === void 0 ? 1 : _q;
     var state = useIdCaptureStore();
     var isRearFacing = useCameraStore().isRearFacing;
-    var _r = React.useContext(IdCaptureModelsContext),
+    var _r = useIdCaptureModelsContext(),
       modelsReady = _r.ready,
       setThresholds = _r.setThresholds,
       detectionTime = _r.detectionTime,
       focusPredictionTime = _r.focusPredictionTime,
-      getBestFrame = _r.getBestFrame;
+      getBestFrame = _r.getBestFrame,
+      getBestBarcode = _r.getBestBarcode;
     React.useEffect(function () {
       return dispatchIdCaptureAction({
         type: 'captureInitialized'
@@ -15953,6 +16102,16 @@
         });
         return;
       }
+      var bestBarcode = getBestBarcode();
+      if (bestBarcode) {
+        dispatchIdCaptureAction({
+          type: 'barcodeCaptured',
+          payload: {
+            imageUrl: bestBarcode.canvas.toDataURL('image/jpeg', 0.95),
+            barcodeReadabilityScore: bestBarcode.score
+          }
+        });
+      }
       var canvas = bestFrame.canvas,
         documentType = bestFrame.documentType,
         boundingBox = bestFrame.boundingBox,
@@ -15969,21 +16128,22 @@
       });
       var capturedDocumentType = documentType;
       setTimeout(function () {
-        var _a;
-        var captureTime = new Date().getTime() - ((_a = state.captureStartedAt) !== null && _a !== void 0 ? _a : new Date()).getTime();
+        var _a, _b;
+        var captureTime = performance.now() - ((_a = state.captureStartedAt) !== null && _a !== void 0 ? _a : new Date()).getTime();
         var metadata = {
           autoCapture: 'Y',
           captureTime: captureTime,
           boundingBox: boundingBox,
           bestDetectionScore: detectionScore,
-          bestFocusScore: focusScore
+          bestFocusScore: focusScore,
+          bestBarcodeScore: (_b = bestBarcode === null || bestBarcode === void 0 ? void 0 : bestBarcode.score) !== null && _b !== void 0 ? _b : 0
         };
         onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageUrl, width, height, capturedDocumentType, metadata);
         dispatchIdCaptureAction({
           type: 'captured'
         });
       }, 0);
-    }, [getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
+    }, [getBestBarcode, getBestFrame, onCapture, shouldCapture, state.captureStartedAt, state.requestedDocumentType]);
     var theme = styled.useTheme();
     colors.guideBoxUnsatisfiedColor || (colors.guideBoxUnsatisfiedColor = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.unsatisfiedColor) !== null && _d !== void 0 ? _d : 'white');
     colors.guideBoxSatisfiedColor || (colors.guideBoxSatisfiedColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.satisfiedColor) !== null && _g !== void 0 ? _g : 'green');
@@ -16798,7 +16958,7 @@
       };
     }, [ready]);
     var imageRef = React.useRef(null);
-    var timeSinceWarmingStarted = modelWarmingStartedAt ? new Date().getTime() - modelWarmingStartedAt : 0;
+    var timeSinceWarmingStarted = modelWarmingStartedAt ? performance.now() - modelWarmingStartedAt : 0;
     var warmingProgress = timeSinceWarmingStarted / 5000.0;
     var modelLoadProgress = modelsReady ? 100 : modelDownloadProgress * 0.5 + warmingProgress * 49.0;
     useLoadProgressHooks({
@@ -17136,7 +17296,7 @@
   var FlexCard = styled(Card)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
   var templateObject_1$D, templateObject_2$y;
 
-  var imageDisplayOrder = ['idCardFront', 'idCardBack', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
+  var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
   var IdCaptureSuccess = function IdCaptureSuccess(_a) {
     var capturedDocuments = _a.capturedDocuments,
       onSubmitClick = _a.onSubmitClick,
@@ -17178,7 +17338,7 @@
         image: doc,
         className: classNames.image,
         alt: doc.documentType
-      }), debugMode && ( /*#__PURE__*/React.createElement(DebugPre, null, "Document Type: ".concat(doc.documentType, "\nDetection Score: ").concat(doc.detectionScore, "\nFocus Score: ").concat(doc.focusScore, "\nBounding Box: ").concat(JSON.stringify(doc.boundingBox)))));
+      }), debugMode && ( /*#__PURE__*/React.createElement(DebugPre, null, name === 'idBarcodeImage' ? "Document Type: ".concat(doc.documentType, "\nReadability Score: ").concat(doc.barcodeReadabilityScore) : "Document Type: ".concat(doc.documentType, "\nDetection Score: ").concat(doc.detectionScore, "\nFocus Score: ").concat(doc.focusScore, "\nBounding Box: ").concat(JSON.stringify(doc.boundingBox)))));
     }))), /*#__PURE__*/React.createElement(ButtonsColumn, {
       className: classNames.buttonsRow
     }, /*#__PURE__*/React.createElement(WideButton, {
@@ -19800,7 +19960,7 @@
     var _6 = React.useState(false),
       overlayDismissed = _6[0],
       setOverlayDismissed = _6[1];
-    var _7 = React.useContext(SubmissionContext),
+    var _7 = useSubmissionContext(),
       submissionStatus = _7.submissionStatus,
       setIdFrontImage = _7.setIdFrontImage,
       setIdBackImage = _7.setIdBackImage,
@@ -19809,6 +19969,7 @@
       setIdBackIrImage = _7.setIdBackIrImage,
       setIdFrontUvImage = _7.setIdFrontUvImage,
       setIdBackUvImage = _7.setIdBackUvImage,
+      setIdBarcodeImage = _7.setIdBarcodeImage,
       logIdFrontCaptureAttempt = _7.logIdFrontCaptureAttempt,
       logIdBackCaptureAttempt = _7.logIdBackCaptureAttempt;
     var _8 = useIdCaptureModelsContext(),
@@ -19909,7 +20070,7 @@
       });
     }, [logCaptureMetadata, onDocumentCaptured]);
     var onSubmitClick = React.useCallback(function () {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
       var docs = state.capturedDocuments;
       var submission = {
         idFrontImage: maybeDataUrlToBase64Sync((_a = docs.idCardFront) === null || _a === void 0 ? void 0 : _a.imageData),
@@ -19919,7 +20080,8 @@
         idFrontIrImage: maybeDataUrlToBase64Sync((_e = docs.idFrontIrImage) === null || _e === void 0 ? void 0 : _e.imageData),
         idBackIrImage: maybeDataUrlToBase64Sync((_f = docs.idBackIrImage) === null || _f === void 0 ? void 0 : _f.imageData),
         idFrontUvImage: maybeDataUrlToBase64Sync((_g = docs.idFrontUvImage) === null || _g === void 0 ? void 0 : _g.imageData),
-        idBackUvImage: maybeDataUrlToBase64Sync((_h = docs.idBackUvImage) === null || _h === void 0 ? void 0 : _h.imageData)
+        idBackUvImage: maybeDataUrlToBase64Sync((_h = docs.idBackUvImage) === null || _h === void 0 ? void 0 : _h.imageData),
+        idBarcodeImage: maybeDataUrlToBase64Sync((_j = docs.idBarcodeImage) === null || _j === void 0 ? void 0 : _j.imageData)
       };
       if (submission.idFrontImage) setIdFrontImage(submission.idFrontImage);
       if (submission.idBackImage) setIdBackImage(submission.idBackImage);
@@ -19929,11 +20091,12 @@
       if (submission.idBackIrImage) setIdBackIrImage(submission.idBackIrImage);
       if (submission.idFrontUvImage) setIdFrontUvImage(submission.idFrontUvImage);
       if (submission.idBackUvImage) setIdBackUvImage(submission.idBackUvImage);
+      if (submission.idBarcodeImage) setIdBarcodeImage(submission.idBarcodeImage);
       if (releaseCameraAccessOnExit) releaseCameraAccess();
       setTimeout(function () {
         return onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(submission);
       }, 0);
-    }, [onSuccess, releaseCameraAccess, releaseCameraAccessOnExit, setIdBackImage, setIdBackIrImage, setIdBackUvImage, setIdFrontImage, setIdFrontIrImage, setIdFrontUvImage, setPassportImage, state.capturedDocuments]);
+    }, [onSuccess, releaseCameraAccess, releaseCameraAccessOnExit, setIdBarcodeImage, setIdBackImage, setIdBackIrImage, setIdBackUvImage, setIdFrontImage, setIdFrontIrImage, setIdFrontUvImage, setPassportImage, state.capturedDocuments]);
     var showSuccessScreen = useShowSuccessScreen(skipSuccessScreen, state.captureState === 'complete', onSubmitClick);
     var onRetryClick = React.useCallback(function () {
       return dispatchIdCaptureAction({
@@ -20723,59 +20886,397 @@
       fill: "white"
     }))))));
   }
-  function SelfieCaptureAnimatedMaskWithStatus(_a) {
-    var _b = _a.status,
-      status = _b === void 0 ? 'ready' : _b,
-      props = __rest(_a, ["status"]);
-    var _c = React.useState(1),
-      frame = _c[0],
-      setFrame = _c[1];
-    React.useEffect(function () {
-      if (status !== 'processing') {
-        setFrame(0);
-        return;
-      }
-      setFrame(1);
-      var interval = setInterval(function () {
-        setFrame(function (n) {
-          return (n + 1) % 6;
-        });
-      }, 250);
-      return function () {
-        clearInterval(interval);
+  function SelfieCaptureAnimatedMaskWithStatus(_a) {
+    var _b = _a.status,
+      status = _b === void 0 ? 'ready' : _b,
+      props = __rest(_a, ["status"]);
+    var _c = React.useState(1),
+      frame = _c[0],
+      setFrame = _c[1];
+    React.useEffect(function () {
+      if (status !== 'processing') {
+        setFrame(0);
+        return;
+      }
+      setFrame(1);
+      var interval = setInterval(function () {
+        setFrame(function (n) {
+          return (n + 1) % 6;
+        });
+      }, 250);
+      return function () {
+        clearInterval(interval);
+      };
+    }, [status]);
+    return /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
+      frame: frame,
+      status: status
+    }));
+  }
+  var templateObject_1$o, templateObject_2$m, templateObject_3$g;
+
+  var FaceCaptureGuideContainer = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
+  var FaceCaptureGuideInner = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
+  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
+    var _b = _a.classNames,
+      classNames = _b === void 0 ? {} : _b,
+      _c = _a.status,
+      status = _c === void 0 ? 'ready' : _c,
+      _d = _a.borderWidth,
+      borderWidth = _d === void 0 ? 5 : _d,
+      _e = _a.borderColor,
+      borderColor = _e === void 0 ? 'white' : _e,
+      _f = _a.borderOpacity,
+      borderOpacity = _f === void 0 ? 0.8 : _f;
+    return /*#__PURE__*/React.createElement(FaceCaptureGuideContainer, {
+      className: classNames.container
+    }, /*#__PURE__*/React.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
+      status: status,
+      borderColor: borderColor,
+      borderWidth: borderWidth,
+      borderOpacity: borderOpacity,
+      verticalAlign: "center"
+    })));
+  };
+  var templateObject_1$n, templateObject_2$l;
+
+  var defaultSelfieCaptureModelLoadTimeoutMs = 45000;
+  var detector = null;
+  var detectorSettings = null;
+  function loadFaceDetector() {
+    return __awaiter(this, arguments, void 0, function (modelAssetPath) {
+      var _a, _b;
+      if (modelAssetPath === void 0) {
+        modelAssetPath = defaultFaceDetectorModelPath;
+      }
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            if (detector && (detectorSettings === null || detectorSettings === void 0 ? void 0 : detectorSettings.modelAssetPath) === modelAssetPath) return [2 /*return*/, detector];
+            closeFaceDetector();
+            return [4 /*yield*/, preloadFaceDetectorDependencies()];
+          case 1:
+            _c.sent();
+            if (modelCapabilities.delegate === 'NONE') {
+              throw new Error('No available delegate for face detector.');
+            }
+            _b = (_a = ya).createFromOptions;
+            return [4 /*yield*/, ao.forVisionTasks(visionTasksBasePath)];
+          case 2:
+            return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
+              // canvas: document.createElement('canvas'),
+              baseOptions: {
+                modelAssetPath: modelAssetPath,
+                delegate: modelCapabilities.delegate
+              },
+              runningMode: 'VIDEO'
+            }])];
+          case 3:
+            detector = _c.sent();
+            detectorSettings = {
+              modelAssetPath: modelAssetPath
+            };
+            return [2 /*return*/, detector];
+        }
+      });
+    });
+  }
+  function closeFaceDetector() {
+    detector === null || detector === void 0 ? void 0 : detector.close();
+    detector = null;
+    detectorSettings = null;
+  }
+  function useLoadFaceDetector(_a) {
+    var onModelError = _a.onModelError,
+      _b = _a.modelLoadTimeoutMs,
+      modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b,
+      videoRef = _a.videoRef;
+    var _c = React.useState('not-started'),
+      modelLoadState = _c[0],
+      setModelLoadState = _c[1];
+    var _d = React.useState(0),
+      modelDownloadProgress = _d[0],
+      setModelDownloadProgress = _d[1];
+    var _e = React.useState(null),
+      modelWarmingStartedAt = _e[0],
+      setModelWarmingStartedAt = _e[1];
+    var _f = React.useState(null),
+      modelError = _f[0],
+      setModelError = _f[1];
+    React.useEffect(function loadModel() {
+      var _this = this;
+      setModelLoadState('downloading');
+      setModelWarmingStartedAt(null);
+      var modelLoadTimeout = setTimeout(function () {
+        setModelError(new Error('Model loading time limit exceeded.'));
+      }, modelLoadTimeoutMs);
+      function handleDownloadProgress(event) {
+        setModelDownloadProgress(progressToPercentage(event.detail));
+      }
+      document.addEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
+      var cancelVideoReady = function cancelVideoReady() {};
+      loadFaceDetector().then(function (model) {
+        return __awaiter(_this, void 0, void 0, function () {
+          var _a, videoReady, cancel, cancelled;
+          return __generator(this, function (_b) {
+            switch (_b.label) {
+              case 0:
+                setModelDownloadProgress(100);
+                clearTimeout(modelLoadTimeout);
+                setModelLoadState('warming');
+                setModelWarmingStartedAt(performance.now());
+                return [4 /*yield*/, testFaceDetectionAgainstKnownImage(model)];
+              case 1:
+                _b.sent();
+                _a = waitForVideoReady(videoRef), videoReady = _a[0], cancel = _a[1];
+                cancelled = false;
+                cancelVideoReady = function cancelVideoReady() {
+                  cancelled = true;
+                  cancel();
+                };
+                return [4 /*yield*/, videoReady];
+              case 2:
+                _b.sent();
+                if (cancelled) return [2 /*return*/];
+                model.detectForVideo(videoRef.current, performance.now());
+                setModelLoadState('ready');
+                return [2 /*return*/];
+            }
+          });
+        });
+      })["catch"](function (e) {
+        setModelError(e);
+        setModelLoadState('error');
+      })["finally"](function () {
+        clearTimeout(modelLoadTimeout);
+      });
+      return function () {
+        log('unloading face detection model');
+        cancelVideoReady();
+        closeFaceDetector();
+        clearTimeout(modelLoadTimeout);
+        document.removeEventListener('idmission.preloadProgress.faceDetection', handleDownloadProgress);
+      };
+    }, [modelLoadTimeoutMs, videoRef]);
+    React.useEffect(function handleModelError() {
+      if (modelError) onModelError === null || onModelError === void 0 ? void 0 : onModelError(modelError);
+    }, [modelError, onModelError]);
+    return React.useMemo(function () {
+      return {
+        ready: modelLoadState === 'ready',
+        modelLoadState: modelLoadState,
+        modelDownloadProgress: modelDownloadProgress,
+        modelWarmingStartedAt: modelWarmingStartedAt,
+        modelError: modelError
+      };
+    }, [modelLoadState, modelDownloadProgress, modelWarmingStartedAt, modelError]);
+  }
+  var lastFaceDetectionAt = 0;
+  var lastFaceDetectionTime = 0;
+  function setLastFaceDetectionAt(time) {
+    lastFaceDetectionTime = time - lastFaceDetectionAt;
+    lastFaceDetectionAt = time;
+  }
+  var framesNeededSamples = [];
+  function trackFramesNeeded(value, bufferLength) {
+    if (bufferLength === void 0) {
+      bufferLength = 25;
+    }
+    framesNeededSamples.unshift(value);
+    if (framesNeededSamples.length > bufferLength) framesNeededSamples.length = bufferLength;
+  }
+  var lastNFaces = [];
+  var lastNFacePairs = [];
+  var lastNNoses = [];
+  var lastNNosePairs = [];
+  function trackFace(face, framesNeeded, frameWidth, frameHeight) {
+    if (framesNeeded === void 0) {
+      framesNeeded = 12;
+    }
+    var nose = face.keypoints[2];
+    if (!nose) return;
+    lastNFaces.unshift(face);
+    lastNNoses.unshift(nose);
+    if (lastNFaces.length > framesNeeded) lastNFaces.length = framesNeeded;
+    if (lastNNoses.length > framesNeeded) lastNNoses.length = framesNeeded;
+    if (lastNFaces.length > 1) {
+      var lastFace = lastNFaces[1];
+      var iou = calculateIoU(face.box, lastFace.box);
+      lastNFacePairs.unshift({
+        a: face,
+        b: lastFace,
+        iou: iou
+      });
+      if (lastNFacePairs.length > framesNeeded - 1) lastNFacePairs.length = framesNeeded - 1;
+    }
+    if (lastNNoses.length > 1) {
+      var lastNose = lastNNoses[1];
+      var noseDistance = Math.sqrt(Math.pow((nose.x - lastNose.x) / frameWidth, 2) + Math.pow((nose.y - lastNose.y) / frameHeight, 2));
+      lastNNosePairs.unshift({
+        a: nose,
+        b: lastNose,
+        distance: noseDistance
+      });
+      if (lastNNosePairs.length > framesNeeded - 1) lastNNosePairs.length = framesNeeded - 1;
+    }
+  }
+  function makeFaceDetectorPrediction(imageData) {
+    if (!detector) return null;
+    var prediction = detector.detectForVideo(imageData, performance.now());
+    var faces = prediction.detections.map(function (d) {
+      return {
+        box: convertBoundingBox(d.boundingBox),
+        keypoints: d.keypoints.map(function (k) {
+          var _a;
+          return _assign(_assign({}, k), {
+            x: k.x * imageData.width,
+            y: k.y * imageData.height,
+            name: (_a = k.label) !== null && _a !== void 0 ? _a : ''
+          });
+        })
       };
-    }, [status]);
-    return /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMask, _assign({}, props, {
-      frame: frame,
-      status: status
-    }));
+    });
+    return _assign(_assign({}, prediction), {
+      faces: faces
+    });
+  }
+  function processFaceDetectorPrediction(_a) {
+    var faces = _a.faces,
+      videoWidth = _a.videoWidth,
+      videoHeight = _a.videoHeight,
+      _b = _a.requireVerticalFaceCentering,
+      requireVerticalFaceCentering = _b === void 0 ? true : _b,
+      _c = _a.stabilityThreshold,
+      stabilityThreshold = _c === void 0 ? 0.7 : _c,
+      _d = _a.noseDistanceThreshold,
+      noseDistanceThreshold = _d === void 0 ? 0.025 : _d,
+      _e = _a.xBoundary,
+      xBoundary = _e === void 0 ? 0.01 : _e,
+      // this represents the edge that the sides of the face box should not cross -- 1% of video width
+      _f = _a.yBoundary,
+      // this represents the edge that the sides of the face box should not cross -- 1% of video width
+      yBoundary = _f === void 0 ? 0.01 : _f,
+      // this represents the edge that the top or bottom of the face box should not cross -- 1% of video height
+      _g = _a.xCentroidBoundary,
+      // this represents the edge that the top or bottom of the face box should not cross -- 1% of video height
+      xCentroidBoundary = _g === void 0 ? 0.125 : _g,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video width
+      _h = _a.yCentroidBoundary,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video width
+      yCentroidBoundary = _h === void 0 ? 0.125 : _h,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video height
+      _j = _a.foreheadRatio,
+      // this represents the edge that the centroid of the face should not cross -- 12.5% of video height
+      foreheadRatio = _j === void 0 ? 0.275 : _j,
+      // we found that the bounding box ends at the brow and misses the forehead. this ratio represents how much we should extend the box to include the forehead.
+      _k = _a.noseTrackingThreshold,
+      // we found that the bounding box ends at the brow and misses the forehead. this ratio represents how much we should extend the box to include the forehead.
+      noseTrackingThreshold = _k === void 0 ? 0.2 : _k,
+      // this represents the maximum distance that the nose can be from the center of the face box -- 20% of the face box width or height
+      minCaptureBrightnessThreshold = _a.minCaptureBrightnessThreshold,
+      minCaptureRangeThreshold = _a.minCaptureRangeThreshold,
+      minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold,
+      brightness = _a.brightness,
+      range = _a.range,
+      variance = _a.variance;
+    var face = faces[0];
+    var faceNotDetected = faces.length === 0;
+    var faceNotCentered = false,
+      faceLookingAway = false,
+      faceTooClose = false,
+      faceTooFar = false,
+      faceVisibilityTooLow = false;
+    var hasAnyThreshold = minCaptureBrightnessThreshold !== undefined || minCaptureRangeThreshold !== undefined || minCaptureVarianceThreshold !== undefined;
+    if (hasAnyThreshold) {
+      var tooDark = minCaptureBrightnessThreshold !== undefined && brightness !== undefined && brightness < minCaptureBrightnessThreshold;
+      var tooLowRange = minCaptureRangeThreshold !== undefined && range !== undefined && range < minCaptureRangeThreshold;
+      var tooLowVariance = minCaptureVarianceThreshold !== undefined && variance !== undefined && variance < minCaptureVarianceThreshold;
+      faceVisibilityTooLow = !!(tooDark || tooLowRange || tooLowVariance);
+    }
+    if (face && !faceVisibilityTooLow) {
+      // calculate frame centroids
+      var frameCX = videoWidth / 2;
+      var frameCY = videoHeight / 2;
+      // calculate head bounding box, with forehead extension
+      var foreheadSize = face.box.height * foreheadRatio;
+      var headXMin = face.box.xMin;
+      var headXMax = face.box.xMax;
+      var headYMin = face.box.yMin - foreheadSize;
+      var headYMax = face.box.yMax;
+      // calculate head centroids
+      var headCX = (headXMin + headXMax) / 2;
+      var headCY = (headYMin + headYMax) / 2;
+      // calculate thresholds
+      var vTX = videoWidth * xBoundary;
+      var vTY = videoHeight * yBoundary;
+      var vCTX = videoWidth * xCentroidBoundary;
+      var vCTY = videoHeight * yCentroidBoundary;
+      var faceNotCenteredHorizontally = Math.abs(frameCX - headCX) > vCTX;
+      var faceNotCenteredVertically = Math.abs(frameCY - headCY) > vCTY;
+      var faceViolatesHorizontalBoundary = headXMin < vTX || headXMax > videoWidth - vTX;
+      var faceViolatesVerticalBoundary = headYMin < vTY || headYMax > videoHeight - vTY;
+      faceNotCentered = faceViolatesHorizontalBoundary || faceViolatesVerticalBoundary || faceNotCenteredHorizontally || requireVerticalFaceCentering && faceNotCenteredVertically;
+      var isMobile = videoWidth < videoHeight;
+      var tooCloseMultiple = 1.5;
+      var tooFarMultiple = isMobile ? 6 : 7;
+      faceTooClose = face.box.width > videoWidth / tooCloseMultiple;
+      faceTooFar = face.box.width < videoWidth / tooFarMultiple;
+      var nose = face.keypoints[2];
+      var fTW = face.box.width * noseTrackingThreshold;
+      var fTH = face.box.height * noseTrackingThreshold;
+      faceLookingAway = !nose || Math.abs(headCX - nose.x) > fTW || Math.abs(headCY - nose.y) > fTH;
+    }
+    var faceInGuides = !faceNotDetected && !faceNotCentered && !faceLookingAway && !faceTooClose && !faceTooFar;
+    if (lastFaceDetectionTime > 0) {
+      trackFramesNeeded(500 / lastFaceDetectionTime);
+    }
+    var faceIsStable = false,
+      noseIsStable = false;
+    if (faceInGuides && !faceVisibilityTooLow) {
+      var framesNeeded = Math.max(Math.ceil(average(framesNeededSamples)), 5);
+      trackFace(face, framesNeeded, videoWidth, videoHeight);
+      faceIsStable = lastNFaces.length >= framesNeeded && !lastNFacePairs.some(function (pair) {
+        return pair.iou < stabilityThreshold;
+      });
+      noseIsStable = lastNNoses.length >= framesNeeded && !lastNNosePairs.some(function (pair) {
+        return pair.distance > noseDistanceThreshold;
+      });
+    }
+    var faceReady = faceInGuides && faceIsStable && noseIsStable && !faceVisibilityTooLow;
+    return {
+      face: face,
+      faceNotDetected: faceNotDetected,
+      faceNotCentered: faceNotCentered,
+      faceLookingAway: faceLookingAway,
+      faceTooClose: faceTooClose,
+      faceTooFar: faceTooFar,
+      faceReady: faceReady,
+      faceReadyAt: faceReady ? new Date() : null,
+      faceIsStable: faceIsStable,
+      noseIsStable: noseIsStable,
+      faceVisibilityTooLow: faceVisibilityTooLow
+    };
+  }
+  function testFaceDetectionAgainstKnownImage(detector) {
+    return new Promise(function (resolve, reject) {
+      var img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = function () {
+        var prediction = detector.detectForVideo(img, performance.now());
+        if (prediction.detections.length > 0) {
+          debug('face detection test result', prediction.detections);
+          resolve(void 0);
+        } else {
+          warn('face detection test failed');
+          reject(new Error('testFaceDetectionAgainstKnownImage failed to predict'));
+        }
+      };
+      img.onerror = function () {
+        return reject(new Error('testFaceDetectionAgainstKnownImage failed to load image'));
+      };
+      img.src = "".concat(DEFAULT_CDN_URL, "/head-test.jpg");
+    });
   }
-  var templateObject_1$o, templateObject_2$m, templateObject_3$g;
-
-  var FaceCaptureGuideContainer = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  box-sizing: border-box;\n"])));
-  var FaceCaptureGuideInner = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  height: 60%;\n"], ["\n  position: relative;\n  height: 60%;\n"])));
-  var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
-    var _b = _a.classNames,
-      classNames = _b === void 0 ? {} : _b,
-      _c = _a.status,
-      status = _c === void 0 ? 'ready' : _c,
-      _d = _a.borderWidth,
-      borderWidth = _d === void 0 ? 5 : _d,
-      _e = _a.borderColor,
-      borderColor = _e === void 0 ? 'white' : _e,
-      _f = _a.borderOpacity,
-      borderOpacity = _f === void 0 ? 0.8 : _f;
-    return /*#__PURE__*/React.createElement(FaceCaptureGuideContainer, {
-      className: classNames.container
-    }, /*#__PURE__*/React.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
-      status: status,
-      borderColor: borderColor,
-      borderWidth: borderWidth,
-      borderOpacity: borderOpacity,
-      verticalAlign: "center"
-    })));
-  };
-  var templateObject_1$n, templateObject_2$l;
 
   function detectBrightnessAndContrast(frame, brightnessAverager) {
     var ctx = frame.getContext('2d');
@@ -22069,7 +22570,7 @@
         });
       }, 3000);
     }, []);
-    var timeSinceWarmingStarted = modelWarmingStartedAt ? new Date().getTime() - modelWarmingStartedAt : 0;
+    var timeSinceWarmingStarted = modelWarmingStartedAt ? performance.now() - modelWarmingStartedAt : 0;
     var warmingProgress = timeSinceWarmingStarted / 5000.0;
     var _o = React.useState(false),
       overrideModelsReady = _o[0],
@@ -23690,6 +24191,16 @@
   var AcceptBtn$1 = styled(LoaderButton)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
   var templateObject_1$c, templateObject_2$b;
 
+  function isBlob(blobPart) {
+    return typeof Blob !== 'undefined' && blobPart instanceof Blob;
+  }
+  function inferBlobType(blobPart) {
+    var _a;
+    if (!isBlob(blobPart)) return undefined;
+    var t = ((_a = blobPart.type) !== null && _a !== void 0 ? _a : '').trim();
+    return t.length > 0 ? t : undefined;
+  }
+
   var videoRecorder = null;
   var audioRecorder = null;
   var videoChunks = [];
@@ -23823,8 +24334,9 @@
       useVideoRecorderStore.getState().clearRecordedData();
     }, []);
     var processVideo = React.useCallback(function () {
+      var inferredType = inferBlobType(videoChunks[0]) || (videoRecorder === null || videoRecorder === void 0 ? void 0 : videoRecorder.mimeType) || 'video/mp4';
       var videoBlob = new Blob(videoChunks, {
-        type: 'video/mp4'
+        type: inferredType
       });
       useVideoRecorderStore.setState({
         videoUrl: URL.createObjectURL(videoBlob),
@@ -23834,8 +24346,9 @@
       setVideoRecorder(null);
     }, []);
     var processAudio = React.useCallback(function () {
+      var inferredType = inferBlobType(audioChunks[0]) || (audioRecorder === null || audioRecorder === void 0 ? void 0 : audioRecorder.mimeType) || 'audio/mp4';
       var audioBlob = new Blob(audioChunks, {
-        type: 'audio/mp4'
+        type: inferredType
       });
       useVideoRecorderStore.setState({
         audioUrl: URL.createObjectURL(audioBlob),
@@ -23875,6 +24388,7 @@
     }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, isRecordingAudio, isRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
   };
 
+  var RECORDING_TIMESTAMP_PADDING_MS = 1000;
   var signatureRecorder = null;
   var signatureChunks = [];
   var videoSignatureInitialState = {
@@ -23887,7 +24401,6 @@
     clearRecordedData: function clearRecordedData() {
       return null;
     },
-    isRecording: false,
     signaturePad: {
       current: null
     },
@@ -23910,7 +24423,7 @@
         if (!camera) throw new Error('Camera not found');
         // set our flag and clear whatever we have recorded so far.
         set({
-          isRecording: true
+          recordingStartedAt: performance.now()
         });
         signatureChunks = [];
         // start recording video and audio
@@ -23924,27 +24437,52 @@
           videoBitsPerSecond: 270000,
           audioBitsPerSecond: 32000
         });
+        var hasFirstChunk = false;
         signatureRecorder.ondataavailable = function (event) {
           signatureChunks.push(event.data);
+          if (!hasFirstChunk) {
+            hasFirstChunk = true;
+            set({
+              firstChunkReceivedAt: performance.now(),
+              lastChunkReceivedAt: performance.now()
+            });
+          } else {
+            set({
+              lastChunkReceivedAt: performance.now()
+            });
+          }
         };
         signatureRecorder.start(100);
       },
       stopRecording: function stopRecording(signatureData, imageUrl) {
         set({
-          isRecording: false
+          firstChunkReceivedAt: undefined,
+          recordingStoppedAt: performance.now()
+        });
+        waitForOneMoreChunk().then(function () {
+          if (!signatureRecorder) return;
+          signatureRecorder.stop();
+          signatureRecorder.onstop = function () {
+            var inferredType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
+            var blob = new Blob(signatureChunks, {
+              type: inferredType
+            });
+            signatureChunks = [];
+            signatureRecorder = null;
+            if (!signatureData) return;
+            var _a = get(),
+              onSignatureVideoCaptured = _a.onSignatureVideoCaptured,
+              recordingStartedAt = _a.recordingStartedAt,
+              signatureStartedAt = _a.signatureStartedAt,
+              signatureEndedAt = _a.signatureEndedAt,
+              lastChunkReceivedAt = _a.lastChunkReceivedAt;
+            var endMs = Math.min(signatureEndedAt !== null && signatureEndedAt !== void 0 ? signatureEndedAt : Infinity, lastChunkReceivedAt !== null && lastChunkReceivedAt !== void 0 ? lastChunkReceivedAt : Infinity);
+            var signatureStartTimestamp = signatureStartedAt && recordingStartedAt ? formatTimestamp(Math.max(0, signatureStartedAt - recordingStartedAt - RECORDING_TIMESTAMP_PADDING_MS)) : undefined;
+            var signatureEndTimestamp = endMs !== Infinity && recordingStartedAt ? formatTimestamp(Math.min(endMs - recordingStartedAt + RECORDING_TIMESTAMP_PADDING_MS, lastChunkReceivedAt !== null && lastChunkReceivedAt !== void 0 ? lastChunkReceivedAt : Infinity)) : undefined;
+            onSignatureVideoCaptured(blob, signatureData, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, signatureStartTimestamp, signatureEndTimestamp);
+          };
+          useVideoRecorderStore.getState().stopRecording();
         });
-        if (!signatureRecorder) return;
-        signatureRecorder.stop();
-        signatureRecorder.onstop = function () {
-          var blob = new Blob(signatureChunks, {
-            type: 'video/mp4'
-          });
-          signatureChunks = [];
-          signatureRecorder = null;
-          if (!signatureData) return;
-          get().onSignatureVideoCaptured(blob, signatureData, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null);
-        };
-        useVideoRecorderStore.getState().stopRecording();
       },
       clearRecordedData: function clearRecordedData() {
         signatureChunks = [];
@@ -23953,13 +24491,42 @@
         signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.stop();
         signatureRecorder = null;
         set({
-          isRecording: false,
+          recordingStartedAt: undefined,
+          recordingStoppedAt: undefined,
+          firstChunkReceivedAt: undefined,
+          lastChunkReceivedAt: undefined,
           signaturePadEmpty: true,
-          signatureValid: false
+          signatureValid: false,
+          signatureStartedAt: undefined,
+          signatureEndedAt: undefined
         });
       }
     });
   }));
+  function waitForOneMoreChunk(timeoutMs) {
+    if (timeoutMs === void 0) {
+      timeoutMs = 3000;
+    }
+    var start = performance.now();
+    return new Promise(function (resolve) {
+      var initialLastChunkReceivedAt = useVideoSignatureStore.getState().lastChunkReceivedAt;
+      if (!initialLastChunkReceivedAt) return resolve();
+      function gotAChunk() {
+        var lastChunkReceivedAt = useVideoSignatureStore.getState().lastChunkReceivedAt;
+        return performance.now() - start > timeoutMs || !lastChunkReceivedAt || !initialLastChunkReceivedAt || lastChunkReceivedAt > initialLastChunkReceivedAt;
+      }
+      setTimeout(function () {
+        if (gotAChunk()) return resolve(); // check immediately
+        // otherwise, check every 100ms
+        var interval = setInterval(function () {
+          if (gotAChunk()) {
+            clearInterval(interval);
+            resolve();
+          }
+        }, 100);
+      }, 0);
+    });
+  }
   function VideoSignatureContextProvider(_a) {
     var _this = this;
     var _b, _c;
@@ -23978,7 +24545,14 @@
       // clear recorded data when the component is mounted
       useVideoSignatureStore.getState().clearRecordedData();
     }, []);
-    var isRecording = useVideoSignatureStore().isRecording;
+    var _e = useVideoSignatureStore(useShallow(function (state) {
+        return {
+          recordingStartedAt: state.recordingStartedAt,
+          recordingStoppedAt: state.recordingStoppedAt
+        };
+      })),
+      recordingStartedAt = _e.recordingStartedAt,
+      recordingStoppedAt = _e.recordingStoppedAt;
     useFrameLoop(React.useCallback(function () {
       return __awaiter(_this, void 0, void 0, function () {
         var signaturePad, ctx, _a, w, h, isPortrait, rect;
@@ -24005,7 +24579,7 @@
         });
       });
     }, [videoRef]), {
-      autoStart: isRecording,
+      autoStart: !!recordingStartedAt && !recordingStoppedAt,
       throttleMs: 1000 / 24
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(InvisibleCanvas, {
@@ -24014,6 +24588,17 @@
       height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
     }));
   }
+  function formatTimestamp(durationMs) {
+    // should be in the format of 00:00:00:00 (hh:mm:ss:cs)
+    var hours = Math.floor(durationMs / 3600000);
+    var minutes = Math.floor(durationMs % 3600000 / 60000);
+    var seconds = Math.floor(durationMs % 60000 / 1000);
+    var milliseconds = durationMs % 1000;
+    // Convert milliseconds to centiseconds (1/100th of a second)
+    var centiseconds = Math.floor(milliseconds / 10);
+    var csString = centiseconds.toString().padStart(2, '0');
+    return "".concat(hours.toString().padStart(2, '0'), ":") + "".concat(minutes.toString().padStart(2, '0'), ":") + "".concat(seconds.toString().padStart(2, '0'), ":") + "".concat(csString);
+  }
 
   function VideoSignaturePad(_a) {
     var onAcceptBtnClicked = _a.onAcceptBtnClicked,
@@ -24075,8 +24660,11 @@
       ref: signaturePad,
       canvasProps: canvasProps,
       onBegin: function onBegin() {
-        return useVideoSignatureStore.setState({
-          signaturePadEmpty: false
+        return useVideoSignatureStore.setState(function (s) {
+          return {
+            signaturePadEmpty: false,
+            signatureStartedAt: s.signatureStartedAt || performance.now()
+          };
         });
       },
       onEnd: function onEnd() {
@@ -24086,7 +24674,8 @@
           return point;
         });
         useVideoSignatureStore.setState({
-          signatureValid: points.length >= minSignaturePadPoints
+          signatureValid: points.length >= minSignaturePadPoints,
+          signatureEndedAt: performance.now()
         });
       }
     }), !headTrackingSatisfied && !!verbiage.headTrackingUnsatisfiedText ? ( /*#__PURE__*/React.createElement(SignaturePadContentContainer, {
@@ -24153,6 +24742,12 @@
     React.useEffect(function () {
       if (guideToDisplay) setMode(guideToDisplay);
     }, [guideToDisplay]);
+    var firstChunkReceivedAt = useVideoSignatureStore(useShallow(function (state) {
+      return {
+        firstChunkReceivedAt: state.firstChunkReceivedAt
+      };
+    })).firstChunkReceivedAt;
+    var signaturePadDisabled = requestedAction !== 'CAPTURE_SIGNATURE' || !firstChunkReceivedAt;
     return /*#__PURE__*/React.createElement(Container$3, {
       className: classNames.container
     }, /*#__PURE__*/React.createElement(Inner$1, {
@@ -24176,7 +24771,7 @@
     }, /*#__PURE__*/React.createElement(VideoSignaturePad, {
       onAcceptBtnClicked: onAcceptBtnClicked,
       onClearBtnClicked: onClearBtnClicked,
-      disabled: requestedAction !== 'CAPTURE_SIGNATURE',
+      disabled: signaturePadDisabled,
       headTrackingSatisfied: headTrackingSatisfied,
       minSignaturePadPoints: minSignaturePadPoints,
       classNames: classNames,
@@ -24233,9 +24828,11 @@
       onHeadTrackingPredictionMade = _o.onPredictionMade,
       startHeadTracking = _o.start,
       stopHeadTracking = _o.stop;
-    var _p = useVideoSignatureStore(),
-      clearRecordedData = _p.clearRecordedData,
-      isRecording = _p.isRecording;
+    var firstChunkReceivedAt = useVideoSignatureStore(useShallow(function (state) {
+      return {
+        firstChunkReceivedAt: state.firstChunkReceivedAt
+      };
+    })).firstChunkReceivedAt;
     React.useEffect(function () {
       useVideoSignatureStore.setState({
         onSignatureVideoCaptured: onSignatureVideoCaptured
@@ -24254,15 +24851,15 @@
     var verbiage = useTranslations(rawVerbiage, {
       guidanceMessageText: 'Please sign the box below'
     });
-    var _q = React.useState(true),
-      headTrackingSatisfied = _q[0],
-      setHeadTrackingSatisfied = _q[1];
-    var _r = React.useState(null),
-      lastFace = _r[0],
-      setLastFace = _r[1];
-    var _s = React.useState(0),
-      numFramesWithoutFaces = _s[0],
-      setNumFramesWithoutFaces = _s[1];
+    var _p = React.useState(true),
+      headTrackingSatisfied = _p[0],
+      setHeadTrackingSatisfied = _p[1];
+    var _q = React.useState(null),
+      lastFace = _q[0],
+      setLastFace = _q[1];
+    var _r = React.useState(0),
+      numFramesWithoutFaces = _r[0],
+      setNumFramesWithoutFaces = _r[1];
     onHeadTrackingPredictionMade(f(React.useCallback(function (_a) {
       var face = _a.face;
       if (headTrackingDisabled) return;
@@ -24277,12 +24874,12 @@
         return n + 1;
       });
     }, [headTrackingBoundaryPercentage, headTrackingBoundaryType, headTrackingDisabled, videoHeight, videoWidth]), 16));
-    var _t = useResizeObserver(),
-      ref = _t.ref,
-      _u = _t.width,
-      width = _u === void 0 ? 1 : _u,
-      _v = _t.height,
-      height = _v === void 0 ? 1 : _v;
+    var _s = useResizeObserver(),
+      ref = _s.ref,
+      _t = _s.width,
+      width = _t === void 0 ? 1 : _t,
+      _u = _s.height,
+      height = _u === void 0 ? 1 : _u;
     var debugScalingDetails = useDebugScalingDetails({
       enabled: debugMode,
       pageWidth: width,
@@ -24313,13 +24910,19 @@
       classNames: classNames.guides,
       verbiage: rawVerbiage.guides,
       onClearBtnClicked: restartVideoOnSignaturePadCleared ? function () {
-        return setTimeout(clearRecordedData, 100);
-      } : undefined
+        return setTimeout(function () {
+          return useVideoSignatureStore.getState().clearRecordedData();
+        }, 100);
+      } : function () {
+        return useVideoSignatureStore.setState({
+          signatureStartedAt: undefined
+        });
+      }
     }), debugMode && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObjectDetectionDebugOverlayDiv, null, lastFace && ( /*#__PURE__*/React.createElement(SelfieCaptureFaceDebugBox, {
       face: lastFace,
       scaling: debugScalingDetails,
       color: headTrackingSatisfied ? 'green' : 'red'
-    }))), /*#__PURE__*/React.createElement(DebugStatsPane, null, "Video: ", videoWidth, "x", videoHeight, /*#__PURE__*/React.createElement("br", null), "Recording: ", isRecording ? 'true' : 'false'))), /*#__PURE__*/React.createElement(ExitCaptureButton, {
+    }))), /*#__PURE__*/React.createElement(DebugStatsPane, null, "Video: ", videoWidth, "x", videoHeight, /*#__PURE__*/React.createElement("br", null), "Recording: ", firstChunkReceivedAt ? 'true' : 'false'))), /*#__PURE__*/React.createElement(ExitCaptureButton, {
       onClick: onExit,
       className: classNames.exitCaptureBtn
     }));
@@ -24650,6 +25253,8 @@
       setSelfieImage = _u.setSelfieImage,
       setSignatureData = _u.setSignatureData,
       setSignatureVideoUrl = _u.setSignatureVideoUrl,
+      setSignatureStartTimestamp = _u.setSignatureStartTimestamp,
+      setSignatureEndTimestamp = _u.setSignatureEndTimestamp,
       logSelfieCaptureAttempt = _u.logSelfieCaptureAttempt,
       uploadDocument = _u.uploadDocument;
     var cameraAccessDenied = useCameraStore(useShallow(function (state) {
@@ -24709,12 +25314,14 @@
         filetype: 'image/jpeg'
       }).then(onSelfieCaptured);
     }, [logCaptureMetadata, onSelfieCaptured, setSelfieImage, uploadDocument]);
-    var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData) {
+    var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData, signatureStartTimestamp, signatureEndTimestamp) {
       setSignatureData(signatureData);
       setSignatureVideoUrl(URL.createObjectURL(videoData));
+      if (signatureStartTimestamp) setSignatureStartTimestamp(signatureStartTimestamp);
+      if (signatureEndTimestamp) setSignatureEndTimestamp(signatureEndTimestamp);
       setCaptureState('SUCCESS');
-      onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
-    }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
+      onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData, signatureStartTimestamp, signatureEndTimestamp);
+    }, [onVideoCaptured, setSignatureData, setSignatureEndTimestamp, setSignatureStartTimestamp, setSignatureVideoUrl]);
     var _x = React.useState(true),
       showLoadingOverlay = _x[0],
       setShowLoadingOverlay = _x[1];
@@ -24883,6 +25490,7 @@
     var onClearBtnClicked = React.useCallback(function () {
       var _a, _b;
       useVideoSignatureStore.setState({
+        signatureStartedAt: undefined,
         signaturePadEmpty: true,
         signatureValid: false
       });