idmission-web-sdk 0.0.19 → 0.0.21

package/dist/sdk2.umd.development.js

@@ -3212,7 +3212,7 @@
       return (_b = (_a = url.match(/^(data:.*;base64),/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
     }
 
-    var PageContainerDiv = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
+    var PageContainerDiv = styled__default['default'].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: var(--app-width);\n  height: calc(\n    var(--app-height) - ", "px\n  );\n  overflow-x: hidden;\n  overflow-y: auto;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,\n    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n\n  &.flex {\n    display: flex;\n  }\n\n  &.padded {\n    box-sizing: border-box;\n    padding: 16px 24px;\n  }\n"])), function (_a) {
       var $heightOffset = _a.$heightOffset;
       return $heightOffset !== null && $heightOffset !== void 0 ? $heightOffset : 0;
     });
@@ -3244,13 +3244,13 @@
       }, children);
     });
     PageContainer.displayName = 'PageContainer';
-    var templateObject_1$4;
+    var templateObject_1$7;
 
-    var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
-    var OverlayInner = styled__default['default'].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
-    var OverlayImageWrapper = styled__default['default'].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
-    var OverlayImageMultiContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
-    var templateObject_1$3, templateObject_2, templateObject_3, templateObject_4;
+    var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  background: white;\n  z-index: 10000;\n"], ["\n  background: white;\n  z-index: 10000;\n"])));
+    var OverlayInner = styled__default['default'].div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  padding: 25px;\n  max-height: var(--app-height);\n  height: 100%;\n  box-sizing: border-box;\n"])));
+    var OverlayImageWrapper = styled__default['default'].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-bottom: 25px;\n  max-width: var(--app-width);\n  max-height: var(--app-height);\n  overflow: hidden;\n\n  & > img {\n    margin: 0 auto;\n    width: max-content;\n    max-width: 100%;\n    max-height: 100%;\n    aspect-ratio: initial;\n    object-fit: contain;\n    display: block;\n  }\n"])));
+    var OverlayImageMultiContainer = styled__default['default'].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"], ["\n  display: flex;\n  margin: auto;\n\n  & > div {\n    max-height: calc(100vh - 320px);\n\n    & > img {\n      width: 100%;\n      max-height: 100%;\n      height: auto;\n      object-fit: contain;\n    }\n  }\n"])));
+    var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2;
 
     var __assign = (undefined && undefined.__assign) || function () {
         __assign = Object.assign || function(t) {
@@ -11261,16 +11261,8 @@
       working: {
         current: false
       },
-      documentDetectionThreshold: 1,
-      setDocumentDetectionThreshold: function setDocumentDetectionThreshold() {
-        return null;
-      },
-      passportDetectionThreshold: 1,
-      setPassportDetectionThreshold: function setPassportDetectionThreshold() {
-        return null;
-      },
-      focusThreshold: 1,
-      setFocusThreshold: function setFocusThreshold() {
+      thresholds: {},
+      setThresholds: function setThresholds() {
         return null;
       },
       makePrediction: function makePrediction() {
@@ -11288,6 +11280,8 @@
         return null;
       }
     });
+    var defaultDocumentDetectionModelUrl = "".concat(DEFAULT_CDN_URL, "/models/documentdetection448/model.json");
+    var defaultFocusModelUrl = "".concat(DEFAULT_CDN_URL, "/models/focus/model.json");
     var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
       var children = _a.children,
         documentDetectionModelUrl = _a.documentDetectionModelUrl,
@@ -11295,35 +11289,39 @@
       var _b = React.useState(false),
         ready = _b[0],
         setReady = _b[1];
-      var _c = React.useState(1),
+      var _c = React.useState(0),
         documentDetectionThreshold = _c[0],
         setDocumentDetectionThreshold = _c[1];
-      var _d = React.useState(1),
+      var _d = React.useState(0),
         passportDetectionThreshold = _d[0],
         setPassportDetectionThreshold = _d[1];
-      var _e = React.useState(1),
-        focusThreshold = _e[0],
-        setFocusThreshold = _e[1];
-      var working = React.useRef(false);
-      var onPredictionHandler = React.useRef();
-      var canvas2d = React.useRef(null);
-      var canvasGl = React.useRef(null);
+      var _e = React.useState(0),
+        mrzDetectionThreshold = _e[0],
+        setMrzDetectionThreshold = _e[1];
       var _f = React.useState(0),
-        detectionTime = _f[0],
-        setDetectionTime = _f[1];
+        pdf417DetectionThreshold = _f[0],
+        setPdf417DetectionThreshold = _f[1];
       var _g = React.useState(0),
-        focusPredictionTime = _g[0],
-        setFocusPredictionTime = _g[1];
-      documentDetectionModelUrl = documentDetectionModelUrl || "".concat(DEFAULT_CDN_URL, "/models/documentdetection448/model.json");
-      focusModelUrl = focusModelUrl || "".concat(DEFAULT_CDN_URL, "/models/focus/model.json");
+        focusThreshold = _g[0],
+        setFocusThreshold = _g[1];
+      var working = React.useRef(false);
+      var onPredictionHandler = React.useRef();
+      var lastPredictionCanvas = React.useRef(null);
+      var _h = React.useState(0),
+        detectionTime = _h[0],
+        setDetectionTime = _h[1];
+      var _j = React.useState(0),
+        focusPredictionTime = _j[0],
+        setFocusPredictionTime = _j[1];
       React.useEffect(function () {
-        (function () {
-          return __awaiter(void 0, void 0, void 0, function () {
+        setReady(false);
+        var ddmUrl = documentDetectionModelUrl || defaultDocumentDetectionModelUrl;
+        var fmUrl = focusModelUrl || defaultFocusModelUrl;
+        function loadModels() {
+          return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
-                  if (!documentDetectionModelUrl || !focusModelUrl) return [2];
-                  setReady(false);
                   tf__namespace.ENV.set('WEBGL_DELETE_TEXTURE_THRESHOLD', 50 * 1024 * 1024);
                   return [4, tf__namespace.setBackend('webgl')];
                 case 1:
@@ -11331,54 +11329,67 @@
                   return [4, tf__namespace.ready()];
                 case 2:
                   _a.sent();
-                  return [4, Promise.all([loadDocumentDetectionModel(documentDetectionModelUrl), loadFocusModel(focusModelUrl)])];
+                  return [4, Promise.all([loadDocumentDetectionModel(ddmUrl), loadFocusModel(fmUrl)])];
                 case 3:
                   _a.sent();
-                  getWebGLContext(2).canvas.addEventListener('webglcontextlost', function () {
-                    return __awaiter(void 0, void 0, void 0, function () {
-                      var newCtx;
-                      var _a;
-                      return __generator(this, function (_b) {
-                        switch (_b.label) {
-                          case 0:
-                            setReady(false);
-                            unloadDocumentDetectionModel();
-                            unloadFocusModel();
-                            clearWebGLContext(2);
-                            newCtx = (_a = canvasGl.current) === null || _a === void 0 ? void 0 : _a.getContext('webgl2');
-                            if (!(newCtx && documentDetectionModelUrl && focusModelUrl)) return [3, 4];
-                            tf.setWebGLContext(2, newCtx);
-                            try {
-                              tf__namespace.backend().dispose();
-                            } catch (e) {
-                              console.error('failed to dispose backend');
-                            }
-                            return [4, tf__namespace.setBackend('webgl')];
-                          case 1:
-                            _b.sent();
-                            return [4, tf__namespace.ready()];
-                          case 2:
-                            _b.sent();
-                            return [4, Promise.all([loadDocumentDetectionModel(documentDetectionModelUrl), loadFocusModel(focusModelUrl)])];
-                          case 3:
-                            _b.sent();
-                            setReady(true);
-                            _b.label = 4;
-                          case 4:
-                            return [2];
-                        }
-                      });
-                    });
-                  });
+                  return [2];
+              }
+            });
+          });
+        }
+        function reloadModels() {
+          return __awaiter(this, void 0, void 0, function () {
+            var ctx;
+            return __generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  setReady(false);
+                  unloadDocumentDetectionModel();
+                  unloadFocusModel();
+                  clearWebGLContext(2);
+                  ctx = document.createElement('canvas').getContext('webgl2');
+                  if (!(ctx && ddmUrl && fmUrl)) return [3, 2];
+                  tf.setWebGLContext(2, ctx);
+                  disposeTfBackend();
+                  return [4, loadModels()];
+                case 1:
+                  _a.sent();
                   setReady(true);
+                  _a.label = 2;
+                case 2:
                   return [2];
               }
             });
           });
-        })();
+        }
+        loadModels().then(function () {
+          setReady(true);
+        });
+        var webGLCanvas = getWebGLContext(2).canvas;
+        webGLCanvas.addEventListener('webglcontextlost', reloadModels);
+        return function () {
+          var _a;
+          (_a = webGLCanvas.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(webGLCanvas, 'webglcontextlost', reloadModels);
+        };
       }, [documentDetectionModelUrl, focusModelUrl]);
+      var thresholds = React.useMemo(function () {
+        return {
+          document: documentDetectionThreshold,
+          passport: passportDetectionThreshold,
+          mrz: mrzDetectionThreshold,
+          pdf417: pdf417DetectionThreshold,
+          focus: focusThreshold
+        };
+      }, [documentDetectionThreshold, focusThreshold, mrzDetectionThreshold, passportDetectionThreshold, pdf417DetectionThreshold]);
+      var setThresholds = React.useCallback(function (thresholds) {
+        if (thresholds.document) setDocumentDetectionThreshold(thresholds.document);
+        if (thresholds.passport) setPassportDetectionThreshold(thresholds.passport);
+        if (thresholds.mrz) setMrzDetectionThreshold(thresholds.mrz);
+        if (thresholds.pdf417) setPdf417DetectionThreshold(thresholds.pdf417);
+        if (thresholds.focus) setFocusThreshold(thresholds.focus);
+      }, []);
       var bestPredictionCanvas = React.useRef(null);
-      var bestPredictionScore = React.useRef(0);
+      var bestFocusScore = React.useRef(0);
       var makePrediction = React.useCallback(function (frame) {
         working.current = true;
         (function () {
@@ -11388,14 +11399,14 @@
             return __generator(this, function (_b) {
               switch (_b.label) {
                 case 0:
-                  if (!documentDetectionModel || !focusModel || !canvas2d.current) return [2];
-                  return [4, makePredictions(frame, canvas2d.current, documentDetectionThreshold, passportDetectionThreshold, focusThreshold)];
+                  if (!documentDetectionModel || !focusModel || !lastPredictionCanvas.current) return [2];
+                  return [4, makePredictions(frame, lastPredictionCanvas.current, thresholds)];
                 case 1:
                   prediction = _b.sent();
                   setDetectionTime(prediction.detectionTime);
                   setFocusPredictionTime(prediction.focusPredictionTime);
-                  if (bestPredictionScore.current <= prediction.detectionScore) {
-                    bestPredictionScore.current = prediction.detectionScore;
+                  if (bestFocusScore.current <= prediction.focusScore) {
+                    bestFocusScore.current = prediction.focusScore;
                     drawToCanvas(bestPredictionCanvas.current, frame);
                   }
                   (_a = onPredictionHandler.current) === null || _a === void 0 ? void 0 : _a.call(onPredictionHandler, prediction);
@@ -11405,7 +11416,7 @@
             });
           });
         })();
-      }, [documentDetectionThreshold, focusThreshold, passportDetectionThreshold]);
+      }, [thresholds]);
       var onPredictionMade = React.useCallback(function (handler) {
         onPredictionHandler.current = handler;
       }, []);
@@ -11428,54 +11439,45 @@
         });
       }, []);
       var resetBestFrame = React.useCallback(function () {
-        bestPredictionScore.current = 0;
+        bestFocusScore.current = 0;
         clearCanvas(bestPredictionCanvas.current);
       }, []);
-      var value = {
-        ready: ready,
-        working: working,
-        documentDetectionThreshold: documentDetectionThreshold,
-        setDocumentDetectionThreshold: setDocumentDetectionThreshold,
-        passportDetectionThreshold: passportDetectionThreshold,
-        setPassportDetectionThreshold: setPassportDetectionThreshold,
-        focusThreshold: focusThreshold,
-        setFocusThreshold: setFocusThreshold,
-        makePrediction: makePrediction,
-        onPredictionMade: onPredictionMade,
-        detectionTime: detectionTime,
-        focusPredictionTime: focusPredictionTime,
-        getBestFrame: getBestFrame,
-        resetBestFrame: resetBestFrame
-      };
+      var value = React.useMemo(function () {
+        return {
+          ready: ready,
+          working: working,
+          thresholds: thresholds,
+          setThresholds: setThresholds,
+          makePrediction: makePrediction,
+          onPredictionMade: onPredictionMade,
+          detectionTime: detectionTime,
+          focusPredictionTime: focusPredictionTime,
+          getBestFrame: getBestFrame,
+          resetBestFrame: resetBestFrame
+        };
+      }, [detectionTime, focusPredictionTime, getBestFrame, makePrediction, onPredictionMade, ready, resetBestFrame, setThresholds, thresholds]);
       return /*#__PURE__*/React__default['default'].createElement(IdCaptureModelsContext.Provider, {
         value: value
-      }, children, /*#__PURE__*/React__default['default'].createElement("canvas", {
-        ref: canvas2d,
-        style: {
-          display: 'none'
-        }
-      }), /*#__PURE__*/React__default['default'].createElement("canvas", {
-        ref: canvasGl,
-        style: {
-          display: 'none'
-        }
-      }), /*#__PURE__*/React__default['default'].createElement("canvas", {
-        ref: bestPredictionCanvas,
-        style: {
-          display: 'none'
-        }
+      }, children, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
+        ref: lastPredictionCanvas
+      }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
+        ref: bestPredictionCanvas
       }));
     };
-    function drawToCanvas(canvas, frame) {
+    function drawToCanvas(canvas, frame, width, height) {
       if (!canvas) return;
       var ctx = canvas.getContext('2d');
       if (!ctx) return;
-      var _a = getFrameDimensions(frame),
-        frameWidth = _a[0],
-        frameHeight = _a[1];
-      canvas.width = frameWidth;
-      canvas.height = frameHeight;
-      ctx.drawImage(frame, 0, 0, frameWidth, frameHeight);
+      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) {
       if (!canvas) return;
@@ -11483,21 +11485,19 @@
       if (!ctx) return;
       ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
-    function makePredictions(frame, canvas, documentDetectionThreshold, passportDetectionThreshold, focusThreshold) {
-      var _a, _b, _c, _d;
+    function makePredictions(frame, lastPredictionCanvas, thresholds) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
       return __awaiter(this, void 0, void 0, function () {
-        var _e, frameWidth, frameHeight, _f, _g, boxes, scores, labels, detectionTime, detectedObjects, bestDocument, bestPassportPage, bestDocumentScore, passportDetectionScore, passportDetectionThresholdMet, bestDocumentOrPassport, detectionScore, detectionThresholdMet, focusPrediction, focusPredictionTime, focusScore, focusThresholdMet;
-        var _h;
-        return __generator(this, function (_j) {
-          switch (_j.label) {
+        var _l, frameWidth, frameHeight, _o, boxes, scores, labels, time, detectedObjects, bestDocument, bestPassportPage, bestDocumentScore, passportDetectionScore, passportDetectionThresholdMet, bestDocumentOrPassport, detectionScore, detectionThresholdMet, bestMrz, mrzDetectionScore, mrzDetectionThresholdMet, bestPdf417, pdf417DetectionScore, pdf417DetectionThresholdMet, focusPrediction, focusPredictionTime, focusScore, focusThresholdMet;
+        var _p;
+        return __generator(this, function (_q) {
+          switch (_q.label) {
             case 0:
-              _e = getFrameDimensions(frame), frameWidth = _e[0], frameHeight = _e[1];
-              {
-                drawToCanvas(canvas, frame);
-              }
+              _l = getFrameDimensions(frame), frameWidth = _l[0], frameHeight = _l[1];
+              drawToCanvas(lastPredictionCanvas, frame);
               return [4, makeDocumentDetectionPredictions(frame)];
             case 1:
-              _f = _j.sent(), _g = _f[0], boxes = _g.boxes, scores = _g.scores, labels = _g.labels, detectionTime = _f[1];
+              _o = _q.sent(), boxes = _o.boxes, scores = _o.scores, labels = _o.labels, time = _o.time;
               detectedObjects = applyNonMaxSuppression(boxes.map(function (box, i) {
                 return bboxToDetectedObjectUnscaled(box, scores[i], labels[i]);
               }));
@@ -11509,18 +11509,28 @@
               });
               bestDocumentScore = (_a = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _a !== void 0 ? _a : 0;
               passportDetectionScore = (_b = bestPassportPage === null || bestPassportPage === void 0 ? void 0 : bestPassportPage.score) !== null && _b !== void 0 ? _b : 0;
-              passportDetectionThresholdMet = passportDetectionScore >= passportDetectionThreshold;
+              passportDetectionThresholdMet = passportDetectionScore >= ((_c = thresholds.passport) !== null && _c !== void 0 ? _c : 0);
               bestDocumentOrPassport = bestDocumentScore > passportDetectionScore ? bestDocument : bestPassportPage;
-              detectionScore = passportDetectionThresholdMet ? passportDetectionScore : (_c = bestDocument === null || bestDocument === void 0 ? void 0 : bestDocument.score) !== null && _c !== void 0 ? _c : 0;
-              detectionThresholdMet = detectionScore >= documentDetectionThreshold;
+              detectionScore = passportDetectionThresholdMet ? passportDetectionScore : bestDocumentScore;
+              detectionThresholdMet = detectionScore >= ((_d = thresholds.document) !== null && _d !== void 0 ? _d : 0);
+              bestMrz = detectedObjects.find(function (obj) {
+                return obj.label === 'MRZ';
+              });
+              mrzDetectionScore = (_e = bestMrz === null || bestMrz === void 0 ? void 0 : bestMrz.score) !== null && _e !== void 0 ? _e : 0;
+              mrzDetectionThresholdMet = mrzDetectionScore >= ((_f = thresholds.mrz) !== null && _f !== void 0 ? _f : 0);
+              bestPdf417 = detectedObjects.find(function (obj) {
+                return obj.label === 'PDF417';
+              });
+              pdf417DetectionScore = (_g = bestPdf417 === null || bestPdf417 === void 0 ? void 0 : bestPdf417.score) !== null && _g !== void 0 ? _g : 0;
+              pdf417DetectionThresholdMet = pdf417DetectionScore >= ((_h = thresholds.pdf417) !== null && _h !== void 0 ? _h : 0);
               focusPrediction = null, focusPredictionTime = 0, focusScore = 0, focusThresholdMet = false;
               if (!detectionThresholdMet) return [3, 3];
               return [4, makeFocusPrediction(frame, bestDocumentOrPassport === null || bestDocumentOrPassport === void 0 ? void 0 : bestDocumentOrPassport.bbox)];
             case 2:
-              _h = _j.sent(), focusPrediction = _h[0], focusPredictionTime = _h[1];
-              focusScore = (_d = focusPrediction === null || focusPrediction === void 0 ? void 0 : focusPrediction[1]) !== null && _d !== void 0 ? _d : 0;
-              focusThresholdMet = focusScore >= focusThreshold;
-              _j.label = 3;
+              _p = _q.sent(), focusPrediction = _p[0], focusPredictionTime = _p[1];
+              focusScore = (_j = focusPrediction === null || focusPrediction === void 0 ? void 0 : focusPrediction[1]) !== null && _j !== void 0 ? _j : 0;
+              focusThresholdMet = focusScore >= ((_k = thresholds.focus) !== null && _k !== void 0 ? _k : 0);
+              _q.label = 3;
             case 3:
               return [2, {
                 detectedObjects: detectedObjects,
@@ -11528,11 +11538,17 @@
                 detectionThresholdMet: detectionThresholdMet,
                 passportDetectionScore: passportDetectionScore,
                 passportDetectionThresholdMet: passportDetectionThresholdMet,
-                detectionTime: detectionTime,
+                mrzDetectionScore: mrzDetectionScore,
+                mrzDetectionThresholdMet: mrzDetectionThresholdMet,
+                pdf417DetectionScore: pdf417DetectionScore,
+                pdf417DetectionThresholdMet: pdf417DetectionThresholdMet,
+                detectionTime: time,
                 bestDocumentOrPassport: bestDocumentOrPassport,
-                focusPredictionTime: focusPredictionTime,
+                bestMrz: bestMrz,
+                bestPdf417: bestPdf417,
                 focusScore: focusScore,
                 focusThresholdMet: focusThresholdMet,
+                focusPredictionTime: focusPredictionTime,
                 frameWidth: frameWidth,
                 frameHeight: frameHeight
               }];
@@ -11542,7 +11558,7 @@
     }
     function makeDocumentDetectionPredictions(image) {
       return __awaiter(this, void 0, void 0, function () {
-        var startedAt, tfImg, tfResize, tfInt32, tf4d_, _a, _b, _c, _d, tf4d, result, predictions, boxes, scores, labels, predictionTime, e_1;
+        var startedAt, tfImg, tfResize, tfInt32, tf4d_, _a, _b, _c, _d, tf4d, result, predictions, boxes, scores, labels, time, e_1;
         return __generator(this, function (_e) {
           switch (_e.label) {
             case 0:
@@ -11584,20 +11600,22 @@
                 return Math.round(l);
               });
               tf__namespace.dispose(result);
-              predictionTime = new Date().getTime() - startedAt.getTime();
-              return [2, [{
+              time = new Date().getTime() - startedAt.getTime();
+              return [2, {
                 boxes: boxes,
                 scores: scores,
-                labels: labels
-              }, predictionTime]];
+                labels: labels,
+                time: time
+              }];
             case 7:
               e_1 = _e.sent();
               console.error('caught error in makeDocumentDetectionPredictions', e_1);
-              return [2, [{
+              return [2, {
                 boxes: [],
                 scores: [],
-                labels: []
-              }, 0]];
+                labels: [],
+                time: 0
+              }];
             case 8:
               return [2];
           }
@@ -11668,29 +11686,229 @@
         return !!obj;
       });
     }
+    function disposeTfBackend() {
+      try {
+        tf__namespace.backend().dispose();
+      } catch (e) {
+        console.error('failed to dispose backend', e);
+      }
+    }
+    var InvisibleCanvas = styled__default['default'].canvas(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+    var templateObject_1$5;
+
+    var DebugStatsPane = styled__default['default'].span(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"], ["\n  font-size: 16px;\n  font-family: monospace;\n  position: absolute;\n  left: 20px;\n  bottom: 20px;\n  color: limegreen;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n"])));
+    var ObjectDetectionDebugOverlay = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"], ["\n  position: absolute;\n  z-index: 1001;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), function (_a) {
+      var $flipX = _a.$flipX;
+      return $flipX ? 'transform: scaleX(-1);' : '';
+    });
+    var ObjectDetectionDebugBox = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"], ["\n  font: 10px monospace;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: 3px solid ", ";\n  color: ", ";\n  ", "\n"])), function (_a) {
+      var $top = _a.$top;
+      return $top;
+    }, function (_a) {
+      var $left = _a.$left;
+      return $left;
+    }, function (_a) {
+      var $width = _a.$width;
+      return $width;
+    }, function (_a) {
+      var $height = _a.$height;
+      return $height;
+    }, function (_a) {
+      var $color = _a.$color;
+      return $color !== null && $color !== void 0 ? $color : 'green';
+    }, function (_a) {
+      var $color = _a.$color;
+      return $color !== null && $color !== void 0 ? $color : 'green';
+    }, function (_a) {
+      var $flipX = _a.$flipX;
+      return $flipX ? 'transform: scaleX(-1);' : '';
+    });
+    var FaceDetectionKeypointMarker = styled__default['default'].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid\n    ", ";\n  font: 10px monospace;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_a) {
+      var $top = _a.$top,
+        $height = _a.$height;
+      return $top - $height / 2;
+    }, function (_a) {
+      var $left = _a.$left,
+        $width = _a.$width;
+      return $left - $width / 2;
+    }, function (_a) {
+      var $width = _a.$width;
+      return $width;
+    }, function (_a) {
+      var $height = _a.$height;
+      return $height;
+    }, function (_a) {
+      var $width = _a.$width;
+      return $width / 2;
+    }, function (_a) {
+      var $color = _a.$color;
+      return $color !== null && $color !== void 0 ? $color : 'red';
+    }, function (_a) {
+      var $color = _a.$color;
+      return $color !== null && $color !== void 0 ? $color : 'red';
+    }, function (_a) {
+      var $flipX = _a.$flipX;
+      return $flipX ? 'transform: scaleX(-1);' : '';
+    });
+    function useDebugScalingDetails(_a) {
+      var _b = _a.enabled,
+        enabled = _b === void 0 ? true : _b,
+        pageWidth = _a.pageWidth,
+        pageHeight = _a.pageHeight,
+        videoWidth = _a.videoWidth,
+        videoHeight = _a.videoHeight;
+      return React.useMemo(function () {
+        var horizontal = false,
+          scaledWidth = 0,
+          scaledHeight = 0,
+          xOffset = 0,
+          yOffset = 0;
+        if (enabled) {
+          horizontal = pageWidth / pageHeight < videoWidth / videoHeight;
+          if (horizontal) {
+            scaledWidth = videoWidth * (pageHeight / videoHeight);
+            xOffset = (scaledWidth - pageWidth) / 2;
+          } else {
+            scaledHeight = videoHeight * (pageWidth / videoWidth);
+            yOffset = (scaledHeight - pageHeight) / 2;
+          }
+        }
+        return {
+          horizontal: horizontal,
+          pageWidth: pageWidth,
+          pageHeight: pageHeight,
+          videoWidth: videoWidth,
+          videoHeight: videoHeight,
+          scaledWidth: scaledWidth,
+          scaledHeight: scaledHeight,
+          xOffset: xOffset,
+          yOffset: yOffset
+        };
+      }, [enabled, pageHeight, pageWidth, videoHeight, videoWidth]);
+    }
+    function IdCaptureDetectedObjectDebugBox(_a) {
+      var obj = _a.obj,
+        flipX = _a.flipX,
+        _b = _a.scaling,
+        horizontal = _b.horizontal,
+        pageWidth = _b.pageWidth,
+        pageHeight = _b.pageHeight,
+        scaledWidth = _b.scaledWidth,
+        scaledHeight = _b.scaledHeight,
+        xOffset = _b.xOffset,
+        yOffset = _b.yOffset;
+      var top = obj.bbox[1] * (horizontal ? pageHeight : scaledHeight - yOffset);
+      var left = obj.bbox[0] * (horizontal ? scaledWidth - xOffset : pageWidth);
+      var width = obj.bbox[2] * (horizontal ? scaledWidth : pageWidth);
+      var height = obj.bbox[3] * (horizontal ? pageHeight : scaledHeight);
+      return /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugBox, {
+        "$top": top,
+        "$left": left,
+        "$width": width,
+        "$height": height,
+        "$flipX": flipX
+      }, obj.label, " (", obj.score.toFixed(3), ")");
+    }
+    function SelfieCaptureFaceDebugBox(_a) {
+      var face = _a.face,
+        flipX = _a.flipX,
+        _b = _a.color,
+        color = _b === void 0 ? 'green' : _b,
+        scaling = _a.scaling;
+      var horizontal = scaling.horizontal,
+        pageWidth = scaling.pageWidth,
+        pageHeight = scaling.pageHeight,
+        videoWidth = scaling.videoWidth,
+        videoHeight = scaling.videoHeight,
+        scaledWidth = scaling.scaledWidth,
+        scaledHeight = scaling.scaledHeight,
+        xOffset = scaling.xOffset,
+        yOffset = scaling.yOffset;
+      var top;
+      var left;
+      var width;
+      var height;
+      if (horizontal) {
+        top = face.box.yMin / videoHeight * pageHeight;
+        left = face.box.xMin / videoWidth * scaledWidth - xOffset;
+        width = face.box.width / videoWidth * scaledWidth;
+        height = face.box.height / videoHeight * pageHeight;
+      } else {
+        top = face.box.yMin / videoHeight * scaledHeight - yOffset;
+        left = face.box.xMin / videoWidth * pageWidth;
+        width = face.box.width / videoWidth * pageWidth;
+        height = face.box.height / videoHeight * scaledHeight;
+      }
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugBox, {
+        "$top": top,
+        "$left": left,
+        "$width": width,
+        "$height": height,
+        "$flipX": flipX,
+        "$color": color
+      }), face.keypoints.map(function (point, ii) {
+        return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFaceKeypoint, {
+          key: ii,
+          point: point,
+          scaling: scaling,
+          flipX: flipX
+        });
+      }));
+    }
+    function SelfieCaptureFaceKeypoint(_a) {
+      var point = _a.point,
+        flipX = _a.flipX,
+        _b = _a.color,
+        color = _b === void 0 ? 'red' : _b,
+        _c = _a.scaling,
+        horizontal = _c.horizontal,
+        pageWidth = _c.pageWidth,
+        pageHeight = _c.pageHeight,
+        videoWidth = _c.videoWidth,
+        videoHeight = _c.videoHeight,
+        scaledWidth = _c.scaledWidth,
+        scaledHeight = _c.scaledHeight,
+        xOffset = _c.xOffset,
+        yOffset = _c.yOffset;
+      var left, top;
+      if (horizontal) {
+        left = point.x / videoWidth * scaledWidth - xOffset;
+        top = point.y / videoHeight * pageHeight;
+      } else {
+        left = point.x / videoWidth * pageWidth;
+        top = point.y / videoHeight * scaledHeight - yOffset;
+      }
+      return /*#__PURE__*/React__default['default'].createElement(FaceDetectionKeypointMarker, {
+        "$top": top,
+        "$left": left,
+        "$width": 4,
+        "$height": 4,
+        "$flipX": flipX,
+        "$color": color
+      });
+    }
+    var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1;
 
     var initialState$5 = {
       videoWidth: 0,
       videoHeight: 0,
       captureStartedAt: null,
       detectedObjects: [],
-      bestDocument: null,
-      bestMrz: null,
-      bestPdf417: null,
+      bestDocument: undefined,
+      bestMrz: undefined,
+      bestPdf417: undefined,
       documentType: DocumentType.NONE,
       documentInBounds: false,
       documentDetectionScore: 0,
       documentDetectionThresholdMet: false,
-      mrzDetectionScore: 0,
-      mrzDetectionThreshold: 0.5,
-      mrzDetectionThresholdMet: false,
-      focusScore: 0,
-      focusThresholdMet: false,
       passportPageDetectionScore: 0,
       passportPageDetectionThresholdMet: false,
+      mrzDetectionScore: 0,
+      mrzDetectionThresholdMet: false,
       pdf417DetectionScore: 0,
-      pdf417DetectionThreshold: 0.15,
       pdf417DetectionThresholdMet: false,
+      focusScore: 0,
+      focusThresholdMet: false,
       barcodeScanningEnabled: false,
       barcodeResult: null,
       waitingForBarcodeScan: false,
@@ -11709,7 +11927,6 @@
       captureFailed: false
     };
     var reducer$5 = function reducer(state, action) {
-      var _a, _b, _c, _d;
       switch (action.type) {
         case 'configure':
           return __assign$1(__assign$1(__assign$1({}, state), action.payload), {
@@ -11720,17 +11937,23 @@
             captureFailed: false
           });
         case 'objectsDetected':
-          var _e = action.payload.prediction,
-            detectedObjects = _e.detectedObjects,
-            detectionScore = _e.detectionScore,
-            detectionThresholdMet = _e.detectionThresholdMet,
-            passportDetectionScore = _e.passportDetectionScore,
-            passportDetectionThresholdMet = _e.passportDetectionThresholdMet,
-            bestDocumentOrPassport = _e.bestDocumentOrPassport,
-            focusScore = _e.focusScore,
-            focusThresholdMet = _e.focusThresholdMet,
-            frameWidth = _e.frameWidth,
-            frameHeight = _e.frameHeight;
+          var _a = action.payload.prediction,
+            detectedObjects = _a.detectedObjects,
+            detectionScore = _a.detectionScore,
+            detectionThresholdMet = _a.detectionThresholdMet,
+            passportDetectionScore = _a.passportDetectionScore,
+            passportDetectionThresholdMet = _a.passportDetectionThresholdMet,
+            mrzDetectionScore = _a.mrzDetectionScore,
+            mrzDetectionThresholdMet = _a.mrzDetectionThresholdMet,
+            pdf417DetectionScore = _a.pdf417DetectionScore,
+            pdf417DetectionThresholdMet = _a.pdf417DetectionThresholdMet,
+            bestDocumentOrPassport = _a.bestDocumentOrPassport,
+            bestMrz = _a.bestMrz,
+            bestPdf417 = _a.bestPdf417,
+            focusScore = _a.focusScore,
+            focusThresholdMet = _a.focusThresholdMet,
+            frameWidth = _a.frameWidth,
+            frameHeight = _a.frameHeight;
           var frameCapturedAt = new Date();
           var frameCaptureRate = 0;
           var goodFramesThreshold = state.goodFramesThreshold;
@@ -11740,16 +11963,6 @@
               goodFramesThreshold = Math.ceil(3 * frameCaptureRate);
             }
           }
-          var bestMrz = (_a = detectedObjects.find(function (obj) {
-            return obj.label === 'MRZ';
-          })) !== null && _a !== void 0 ? _a : null;
-          var mrzDetectionScore = (_b = bestMrz === null || bestMrz === void 0 ? void 0 : bestMrz.score) !== null && _b !== void 0 ? _b : 0;
-          var mrzDetectionThresholdMet = mrzDetectionScore >= state.mrzDetectionThreshold;
-          var bestPdf417 = (_c = detectedObjects.find(function (obj) {
-            return obj.label === 'PDF417';
-          })) !== null && _c !== void 0 ? _c : null;
-          var pdf417DetectionScore = (_d = bestPdf417 === null || bestPdf417 === void 0 ? void 0 : bestPdf417.score) !== null && _d !== void 0 ? _d : 0;
-          var pdf417DetectionThresholdMet = pdf417DetectionScore >= state.pdf417DetectionThreshold;
           var documentType = DocumentType.NONE;
           if (passportDetectionThresholdMet) {
             documentType = DocumentType.PASSPORT;
@@ -11758,11 +11971,11 @@
           }
           var documentInBounds = false;
           if (bestDocumentOrPassport) {
-            var _f = bestDocumentOrPassport.bbox,
-              boundaryX = _f[0],
-              boundaryY = _f[1],
-              boundaryWidth = _f[2],
-              boundaryHeight = _f[3];
+            var _b = bestDocumentOrPassport.bbox,
+              boundaryX = _b[0],
+              boundaryY = _b[1],
+              boundaryWidth = _b[2],
+              boundaryHeight = _b[3];
             boundaryX *= frameWidth;
             boundaryWidth *= frameWidth;
             boundaryY *= frameHeight;
@@ -11781,7 +11994,7 @@
             videoWidth: frameWidth,
             videoHeight: frameHeight,
             detectedObjects: detectedObjects,
-            bestDocument: bestDocumentOrPassport !== null && bestDocumentOrPassport !== void 0 ? bestDocumentOrPassport : null,
+            bestDocument: bestDocumentOrPassport,
             bestMrz: bestMrz,
             bestPdf417: bestPdf417,
             documentType: documentType,
@@ -11906,9 +12119,7 @@
       var _3 = React.useContext(IdCaptureModelsContext),
         modelsReady = _3.ready,
         modelsWorking = _3.working,
-        setDocumentDetectionThreshold = _3.setDocumentDetectionThreshold,
-        setPassportDetectionThreshold = _3.setPassportDetectionThreshold,
-        setFocusThreshold = _3.setFocusThreshold,
+        setThresholds = _3.setThresholds,
         makePrediction = _3.makePrediction,
         onPredictionMade = _3.onPredictionMade,
         detectionTime = _3.detectionTime,
@@ -11923,19 +12134,21 @@
           type: 'configure',
           payload: {
             requiredDocumentType: requiredDocumentType,
-            mrzDetectionThreshold: mrzDetectionScoreThreshold,
             goodFramesThreshold: autoCaptureGoodFramesRequired,
             autoCaptureBarcodeRequired: autoCaptureBarcodeRequired,
             barcodeScanningEnabled: barcodeScanningEnabled,
-            maxBarcodeScanAttempts: maxBarcodeScanAttempts,
-            pdf417DetectionThreshold: pdf417DetectionThreshold
+            maxBarcodeScanAttempts: maxBarcodeScanAttempts
           }
         });
         resetBestFrame();
-        setDocumentDetectionThreshold(autoCaptureScoreThreshold);
-        setPassportDetectionThreshold(passportPageDetectionThreshold);
-        setFocusThreshold(focusScoreThreshold);
-      }, [requiredDocumentType, autoCaptureScoreThreshold, focusScoreThreshold, mrzDetectionScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, barcodeScanningEnabled, maxBarcodeScanAttempts, passportPageDetectionThreshold, pdf417DetectionThreshold, resetBestFrame, setDocumentDetectionThreshold, setPassportDetectionThreshold, setFocusThreshold]);
+        setThresholds({
+          document: autoCaptureScoreThreshold,
+          passport: passportPageDetectionThreshold,
+          mrz: mrzDetectionScoreThreshold,
+          pdf417: pdf417DetectionThreshold,
+          focus: focusScoreThreshold
+        });
+      }, [requiredDocumentType, autoCaptureScoreThreshold, focusScoreThreshold, mrzDetectionScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, barcodeScanningEnabled, maxBarcodeScanAttempts, passportPageDetectionThreshold, pdf417DetectionThreshold, resetBestFrame, setThresholds]);
       var animationFrame = React.useRef(0);
       var shouldCaptureFrames = React.useRef(false);
       React.useEffect(function () {
@@ -12108,6 +12321,13 @@
           });
         })();
       }, [getBestFrame, onCapture, processingDelay, shouldCapture, state.barcodeResult]);
+      var debugScalingDetails = useDebugScalingDetails({
+        enabled: debugMode,
+        pageWidth: width,
+        pageHeight: height,
+        videoWidth: state.videoWidth,
+        videoHeight: state.videoHeight
+      });
       if (processingFrame) {
         return processingScreen || /*#__PURE__*/React__default['default'].createElement("div", null, "Processing...");
       }
@@ -12135,64 +12355,17 @@
         landscapeGuidesImageUrl: assets.landscapeGuidesImageUrl,
         isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
         borderColor: state.isGoodFrame ? 'green' : 'white'
-      }), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          position: 'absolute',
-          zIndex: 1001,
-          width: '100%',
-          height: '100%',
-          maxWidth: '100%',
-          maxHeight: '100%',
-          transform: ((_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.isRearFacing) ? '' : 'scaleX(-1)',
-          overflow: 'hidden'
-        }
+      }), debugMode && state.detectedObjects.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+        "$flipX": !((_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.isRearFacing)
       }, state.detectedObjects.map(function (obj, i) {
         var _a;
-        var wrapperAspectRatio = width / height;
-        var videoAspectRatio = state.videoWidth / state.videoHeight;
-        var left = obj.bbox[0] * width;
-        var top = obj.bbox[1] * height;
-        var boxWidth = obj.bbox[2] * width;
-        var boxHeight = obj.bbox[3] * height;
-        if (wrapperAspectRatio < videoAspectRatio) {
-          var xScalar = height / state.videoHeight;
-          var scaledWidth = state.videoWidth * xScalar;
-          var xOffset = (scaledWidth - width) / 2;
-          left = obj.bbox[0] * scaledWidth - xOffset;
-          boxWidth = obj.bbox[2] * scaledWidth;
-        } else {
-          var yScalar = width / state.videoWidth;
-          var scaledHeight = state.videoHeight * yScalar;
-          var yOffset = (scaledHeight - height) / 2;
-          top = obj.bbox[1] * scaledHeight - yOffset;
-          boxHeight = obj.bbox[3] * scaledHeight;
-        }
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default['default'].createElement(IdCaptureDetectedObjectDebugBox, {
           key: i,
-          style: {
-            position: 'absolute',
-            left: left,
-            top: top,
-            width: boxWidth,
-            height: boxHeight,
-            border: '3px solid green',
-            font: '10px monospace',
-            color: 'green',
-            transform: ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing) ? '' : 'scaleX(-1)'
-          }
-        }, obj.label, " (", obj.score.toFixed(3), ")");
-      })), debugMode && /*#__PURE__*/React__default['default'].createElement("span", {
-        style: {
-          fontSize: 16,
-          fontFamily: 'monospace',
-          position: 'absolute',
-          left: 20,
-          bottom: 20,
-          color: 'limegreen',
-          background: 'rgba(0,0,0,0.5)',
-          zIndex: 1001
-        }
-      }, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", (_e = cameraRef.current) === null || _e === void 0 ? void 0 : _e.width, "x", (_f = cameraRef.current) === null || _f === void 0 ? void 0 : _f.height) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default['default'].createElement("br", null), modelsReady ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, state.documentDetectionThresholdMet ? '✅' : '❌', " Document Score: ", state.documentDetectionScore, " (", state.documentType, ")", /*#__PURE__*/React__default['default'].createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default['default'].createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore, /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold, barcodeScanningEnabled && state.autoCaptureBarcodeRequired ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), state.barcodeResult ? '✅' : '❌', " Barcode Scanned (", supportsNativeBarcodeScanning() ? 'Native' : 'ZXing', ",", ' ', state.barcodeScanFailedAttempts, "/", state.maxBarcodeScanAttempts, " failed attempts)") : null) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u274C Models not ready")));
+          obj: obj,
+          scaling: debugScalingDetails,
+          flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
+        });
+      })), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", (_e = cameraRef.current) === null || _e === void 0 ? void 0 : _e.width, "x", (_f = cameraRef.current) === null || _f === void 0 ? void 0 : _f.height) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default['default'].createElement("br", null), modelsReady ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, state.documentDetectionThresholdMet ? '✅' : '❌', " Document Score: ", state.documentDetectionScore, " (", state.documentType, ")", /*#__PURE__*/React__default['default'].createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default['default'].createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore, /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold, barcodeScanningEnabled && state.autoCaptureBarcodeRequired ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), state.barcodeResult ? '✅' : '❌', " Barcode Scanned (", supportsNativeBarcodeScanning() ? 'Native' : 'ZXing', ",", ' ', state.barcodeScanFailedAttempts, "/", state.maxBarcodeScanAttempts, " failed attempts)") : null) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u274C Models not ready")));
     };
     var timeSince = function timeSince(t) {
       if (!t) return 0;
@@ -12690,10 +12863,10 @@
         "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
       });
     };
-    var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+    var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
       return props.$isRearFacing ? '' : 'scaleX(-1)';
     });
-    var templateObject_1$2;
+    var templateObject_1$3;
 
     var CaptureState;
     (function (CaptureState) {
@@ -13362,11 +13535,6 @@
               var isMobile = state.videoWidth < state.videoHeight;
               var tooCloseMultiple = isMobile ? 2 : 4.5;
               var tooFarMultiple = isMobile ? 6 : 7;
-              console.log({
-                faceBoxWidth: face.box.width,
-                videoWidth: state.videoWidth,
-                tooCloseMultiple: tooCloseMultiple
-              });
               faceTooClose = face.box.width > state.videoWidth / tooCloseMultiple;
               faceTooFar = face.box.width < state.videoWidth / tooFarMultiple;
             }
@@ -13504,6 +13672,13 @@
       React.useEffect(function () {
         if (timedOut) onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
       }, [onTimeout, timedOut]);
+      var debugScalingDetails = useDebugScalingDetails({
+        enabled: debugMode,
+        pageWidth: width,
+        pageHeight: height,
+        videoWidth: state.videoWidth,
+        videoHeight: state.videoHeight
+      });
       if (!guidanceMessage) {
         verbiage.guidanceHoldStillText = verbiage.guidanceHoldStillText || t('Hold still for a few seconds...');
         verbiage.guidanceLookStraightText = verbiage.guidanceLookStraightText || t('Look straight into the camera...');
@@ -13534,100 +13709,18 @@
           padding: '10px 12px 8px',
           borderRadius: 8
         }
-      }, guidanceMessage)), debugMode && state.faces.length > 0 && /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          position: 'absolute',
-          zIndex: 1001,
-          width: '100%',
-          height: '100%',
-          maxWidth: '100%',
-          maxHeight: '100%',
-          transform: ((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing) ? '' : 'scaleX(-1)',
-          overflow: 'hidden'
-        }
+      }, guidanceMessage)), debugMode && state.faces.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
+        "$flipX": !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing)
       }, state.faces.map(function (face, i) {
         var _a;
-        var wrapperAspectRatio = width / height;
-        var videoAspectRatio = state.videoWidth / state.videoHeight;
-        var left = face.box.xMin / state.videoWidth;
-        var top = face.box.yMin / state.videoHeight;
-        var boxWidth = face.box.width / state.videoWidth;
-        var boxHeight = face.box.height / state.videoHeight;
-        if (wrapperAspectRatio < videoAspectRatio) {
-          var xScalar = height / state.videoHeight;
-          var scaledWidth = state.videoWidth * xScalar;
-          var xOffset = (scaledWidth - width) / 2;
-          left = left * scaledWidth - xOffset;
-          top *= height;
-          boxWidth *= scaledWidth;
-          boxHeight *= height;
-        } else {
-          var yScalar = width / state.videoWidth;
-          var scaledHeight = state.videoHeight * yScalar;
-          var yOffset = (scaledHeight - height) / 2;
-          left *= width;
-          top = top * scaledHeight - yOffset;
-          boxWidth *= width;
-          boxHeight *= scaledHeight;
-        }
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: i
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            position: 'absolute',
-            left: left,
-            top: top,
-            width: boxWidth,
-            height: boxHeight,
-            border: "3px solid ".concat(state.faceReady ? 'green' : 'red'),
-            font: '10px monospace',
-            transform: ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing) ? '' : 'scaleX(-1)'
-          }
-        }), face.keypoints.map(function (point, ii) {
-          var _a;
-          var left = point.x / state.videoWidth;
-          var top = point.y / state.videoHeight;
-          if (wrapperAspectRatio < videoAspectRatio) {
-            var xScalar = height / state.videoHeight;
-            var scaledWidth = state.videoWidth * xScalar;
-            var xOffset = (scaledWidth - width) / 2;
-            left = left * scaledWidth - xOffset;
-            top *= height;
-          } else {
-            var yScalar = width / state.videoWidth;
-            var scaledHeight = state.videoHeight * yScalar;
-            var yOffset = (scaledHeight - height) / 2;
-            left *= width;
-            top = top * scaledHeight - yOffset;
-          }
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            key: ii,
-            style: {
-              position: 'absolute',
-              left: left - 2,
-              top: top - 2,
-              width: 4,
-              height: 4,
-              border: '2px solid red',
-              font: '10px monospace',
-              color: 'green',
-              transform: ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing) ? '' : 'scaleX(-1)',
-              borderRadius: '50%'
-            }
-          }, ii);
-        }));
-      })), debugMode && /*#__PURE__*/React__default['default'].createElement("span", {
-        style: {
-          fontSize: 16,
-          fontFamily: 'monospace',
-          position: 'absolute',
-          left: 20,
-          bottom: 20,
-          color: 'limegreen',
-          background: 'rgba(0,0,0,0.5)',
-          zIndex: 1001
-        }
-      }, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " ", state.goodFramesCount, ' ', "Good Frames", /*#__PURE__*/React__default['default'].createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms"));
+        return /*#__PURE__*/React__default['default'].createElement(SelfieCaptureFaceDebugBox, {
+          key: i,
+          face: face,
+          scaling: debugScalingDetails,
+          flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing),
+          color: state.faceReady ? 'green' : 'red'
+        });
+      })), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, cameraRef.current ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "\u2705 Camera: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height) : '❌ Camera not ready', /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceNotCentered ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceTooClose && !state.faceTooFar ? '✅' : '❌', " Face", ' ', state.faceTooClose ? 'Too Close' : state.faceTooFar ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__default['default'].createElement("br", null), !state.faceLookingAway ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__default['default'].createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " ", state.goodFramesCount, ' ', "Good Frames", /*#__PURE__*/React__default['default'].createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms"));
     };
 
     var initialState$2 = {
@@ -14700,8 +14793,8 @@
       return truncated;
     }
 
-    var Spinner = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-    var templateObject_1$1;
+    var Spinner = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: 80px;\n  height: 80px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 8px;\n    border-radius: 50%;\n    border: 6px solid #888;\n    border-color: #888 transparent #888 transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+    var templateObject_1$2;
 
     var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
       var document = _a.document,
@@ -14927,7 +15020,7 @@
       };
     }
 
-    function SignaturePad(canvas, options) {
+    function SignaturePad$1(canvas, options) {
       var self = this;
       var opts = options || {};
 
@@ -14938,9 +15031,9 @@
       this.minDistance = 'minDistance' in opts ? opts.minDistance : 5;
 
       if (this.throttle) {
-        this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
+        this._strokeMoveUpdate = throttle(SignaturePad$1.prototype._strokeUpdate, this.throttle);
       } else {
-        this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate;
+        this._strokeMoveUpdate = SignaturePad$1.prototype._strokeUpdate;
       }
 
       this.dotSize = opts.dotSize || function () {
@@ -15005,7 +15098,7 @@
     }
 
     // Public methods
-    SignaturePad.prototype.clear = function () {
+    SignaturePad$1.prototype.clear = function () {
       var ctx = this._ctx;
       var canvas = this._canvas;
 
@@ -15018,7 +15111,7 @@
       this._isEmpty = true;
     };
 
-    SignaturePad.prototype.fromDataURL = function (dataUrl) {
+    SignaturePad$1.prototype.fromDataURL = function (dataUrl) {
       var _this = this;
 
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -15036,7 +15129,7 @@
       this._isEmpty = false;
     };
 
-    SignaturePad.prototype.toDataURL = function (type) {
+    SignaturePad$1.prototype.toDataURL = function (type) {
       var _canvas;
 
       switch (type) {
@@ -15051,12 +15144,12 @@
       }
     };
 
-    SignaturePad.prototype.on = function () {
+    SignaturePad$1.prototype.on = function () {
       this._handleMouseEvents();
       this._handleTouchEvents();
     };
 
-    SignaturePad.prototype.off = function () {
+    SignaturePad$1.prototype.off = function () {
       this._canvas.removeEventListener('mousedown', this._handleMouseDown);
       this._canvas.removeEventListener('mousemove', this._handleMouseMove);
       document.removeEventListener('mouseup', this._handleMouseUp);
@@ -15066,12 +15159,12 @@
       this._canvas.removeEventListener('touchend', this._handleTouchEnd);
     };
 
-    SignaturePad.prototype.isEmpty = function () {
+    SignaturePad$1.prototype.isEmpty = function () {
       return this._isEmpty;
     };
 
     // Private methods
-    SignaturePad.prototype._strokeBegin = function (event) {
+    SignaturePad$1.prototype._strokeBegin = function (event) {
       this._data.push([]);
       this._reset();
       this._strokeUpdate(event);
@@ -15081,7 +15174,7 @@
       }
     };
 
-    SignaturePad.prototype._strokeUpdate = function (event) {
+    SignaturePad$1.prototype._strokeUpdate = function (event) {
       var x = event.clientX;
       var y = event.clientY;
 
@@ -15109,7 +15202,7 @@
       }
     };
 
-    SignaturePad.prototype._strokeEnd = function (event) {
+    SignaturePad$1.prototype._strokeEnd = function (event) {
       var canDrawCurve = this.points.length > 2;
       var point = this.points[0]; // Point instance
 
@@ -15138,7 +15231,7 @@
       }
     };
 
-    SignaturePad.prototype._handleMouseEvents = function () {
+    SignaturePad$1.prototype._handleMouseEvents = function () {
       this._mouseButtonDown = false;
 
       this._canvas.addEventListener('mousedown', this._handleMouseDown);
@@ -15146,7 +15239,7 @@
       document.addEventListener('mouseup', this._handleMouseUp);
     };
 
-    SignaturePad.prototype._handleTouchEvents = function () {
+    SignaturePad$1.prototype._handleTouchEvents = function () {
       // Pass touch events to canvas element on mobile IE11 and Edge.
       this._canvas.style.msTouchAction = 'none';
       this._canvas.style.touchAction = 'none';
@@ -15156,20 +15249,20 @@
       this._canvas.addEventListener('touchend', this._handleTouchEnd);
     };
 
-    SignaturePad.prototype._reset = function () {
+    SignaturePad$1.prototype._reset = function () {
       this.points = [];
       this._lastVelocity = 0;
       this._lastWidth = (this.minWidth + this.maxWidth) / 2;
       this._ctx.fillStyle = this.penColor;
     };
 
-    SignaturePad.prototype._createPoint = function (x, y, time) {
+    SignaturePad$1.prototype._createPoint = function (x, y, time) {
       var rect = this._canvas.getBoundingClientRect();
 
       return new Point(x - rect.left, y - rect.top, time || new Date().getTime());
     };
 
-    SignaturePad.prototype._addPoint = function (point) {
+    SignaturePad$1.prototype._addPoint = function (point) {
       var points = this.points;
       var tmp = void 0;
 
@@ -15197,7 +15290,7 @@
       return {};
     };
 
-    SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
+    SignaturePad$1.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
       var dx1 = s1.x - s2.x;
       var dy1 = s1.y - s2.y;
       var dx2 = s2.x - s3.x;
@@ -15224,7 +15317,7 @@
       };
     };
 
-    SignaturePad.prototype._calculateCurveWidths = function (curve) {
+    SignaturePad$1.prototype._calculateCurveWidths = function (curve) {
       var startPoint = curve.startPoint;
       var endPoint = curve.endPoint;
       var widths = { start: null, end: null };
@@ -15242,11 +15335,11 @@
       return widths;
     };
 
-    SignaturePad.prototype._strokeWidth = function (velocity) {
+    SignaturePad$1.prototype._strokeWidth = function (velocity) {
       return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
     };
 
-    SignaturePad.prototype._drawPoint = function (x, y, size) {
+    SignaturePad$1.prototype._drawPoint = function (x, y, size) {
       var ctx = this._ctx;
 
       ctx.moveTo(x, y);
@@ -15254,7 +15347,7 @@
       this._isEmpty = false;
     };
 
-    SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) {
+    SignaturePad$1.prototype._drawCurve = function (curve, startWidth, endWidth) {
       var ctx = this._ctx;
       var widthDelta = endWidth - startWidth;
       var drawSteps = Math.floor(curve.length());
@@ -15288,7 +15381,7 @@
       ctx.fill();
     };
 
-    SignaturePad.prototype._drawDot = function (point) {
+    SignaturePad$1.prototype._drawDot = function (point) {
       var ctx = this._ctx;
       var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
 
@@ -15298,7 +15391,7 @@
       ctx.fill();
     };
 
-    SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
+    SignaturePad$1.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
       for (var i = 0; i < pointGroups.length; i += 1) {
         var group = pointGroups[i];
 
@@ -15336,7 +15429,7 @@
       }
     };
 
-    SignaturePad.prototype._toSVG = function () {
+    SignaturePad$1.prototype._toSVG = function () {
       var _this2 = this;
 
       var pointGroups = this._data;
@@ -15402,7 +15495,7 @@
       return prefix + btoa(data);
     };
 
-    SignaturePad.prototype.fromData = function (pointGroups) {
+    SignaturePad$1.prototype.fromData = function (pointGroups) {
       var _this3 = this;
 
       this.clear();
@@ -15416,13 +15509,13 @@
       this._data = pointGroups;
     };
 
-    SignaturePad.prototype.toData = function () {
+    SignaturePad$1.prototype.toData = function () {
       return this._data;
     };
 
     var signature_pad = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        'default': SignaturePad
+        'default': SignaturePad$1
     });
 
     var build$1 = createCommonjsModule(function (module, exports) {
@@ -15467,55 +15560,43 @@
       return signatureData;
     }
 
+    var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
+    var SignaturePad = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"], ["\n  position: relative;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n"])));
+    var SignatureButtonsContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"], ["\n  flex-grow: 0;\n  padding-top: 12px;\n  display: flex;\n  z-index: 1000;\n  position: relative;\n"])));
+    var SignaturePaperBacking = styled__default['default'].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #e5e5f7;\n  opacity: 0.8;\n  background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px),\n    radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);\n  background-size: 20px 20px;\n  background-position: 0 0, 10px 10px;\n"])));
+    var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4;
+
+    var GuidanceMessageContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+      var $top = _a.$top;
+      return $top !== null && $top !== void 0 ? $top : '10vh';
+    });
+    var GuidanceMessage = styled__default['default'].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: #ccc;\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: #ccc;\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])));
+    var templateObject_1, templateObject_2;
+
     var SignatureCapture = function SignatureCapture(_a) {
       var onAccept = _a.onAccept,
-        _b = _a.background,
-        background = _b === void 0 ? 'white' : _b,
-        _c = _a.verbiage,
-        verbiage = _c === void 0 ? {} : _c;
+        _b = _a.verbiage,
+        verbiage = _b === void 0 ? {} : _b;
       var t = useTranslation().t;
-      var _d = useResizeObserver(),
-        ref = _d.ref,
-        width = _d.width,
-        height = _d.height;
+      var _c = useResizeObserver(),
+        ref = _c.ref,
+        width = _c.width,
+        height = _c.height;
       var signaturePad = React.useRef(null);
       verbiage.headingText = verbiage.headingText || t('Please sign the box below');
       verbiage.acceptBtnText = verbiage.acceptBtnText || t('Accept');
       verbiage.clearBtnText = verbiage.clearBtnText || t('Clear');
-      return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, {
-        style: {
-          background: background
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(OverlayInner, null, /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          flexGrow: 0,
-          paddingBottom: 12
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("h3", {
-        style: {
-          margin: 0
-        }
-      }, verbiage.headingText)), /*#__PURE__*/React__default['default'].createElement("div", {
-        ref: ref,
-        style: {
-          position: 'relative',
-          border: '3px solid #888',
-          flexGrow: 1,
-          zIndex: '100'
-        }
+      return /*#__PURE__*/React__default['default'].createElement(PageContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePaperBacking, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+        "$top": "5vh"
+      }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, null, verbiage.headingText)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
+        ref: ref
       }, /*#__PURE__*/React__default['default'].createElement(SignatureCanvas, {
         ref: signaturePad,
         canvasProps: {
           width: width,
-          height: (height !== null && height !== void 0 ? height : 500) - 4
-        }
-      })), /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          flexGrow: 0,
-          paddingTop: 12,
-          display: 'flex'
+          height: height
         }
-      }, /*#__PURE__*/React__default['default'].createElement("button", {
+      })), /*#__PURE__*/React__default['default'].createElement(SignatureButtonsContainer, null, /*#__PURE__*/React__default['default'].createElement("button", {
         onClick: function onClick(e) {
           var _a;
           e.preventDefault();
@@ -15531,7 +15612,7 @@
           var signatureData = signatureDataToIdmissionFormat(signaturePad.current);
           onAccept === null || onAccept === void 0 ? void 0 : onAccept(signatureData, signaturePad.current.toDataURL());
         }
-      }, verbiage.acceptBtnText))));
+      }, verbiage.acceptBtnText)))));
     };
 
     var useVideoRecorder = function useVideoRecorder(camera) {
@@ -15575,7 +15656,6 @@
       };
     };
 
-    var SignatureCanvasContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
     var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       var _b, _c;
       var onComplete = _a.onComplete,
@@ -15718,47 +15798,17 @@
       var guidanceMessage = t('Please sign the box below');
       return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
         className: "flex"
-      }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          position: 'absolute',
-          top: 'calc(5vh)',
-          fontWeight: 'bold',
-          width: '100%',
-          display: 'flex'
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          background: '#ccc',
-          padding: '10px 12px 8px',
-          borderRadius: 8
-        }
-      }, guidanceMessage)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement("div", {
-        ref: ref,
-        style: {
-          position: 'relative',
-          background: 'rgba(255,255,255,0.5)',
-          borderRadius: 16,
-          flexGrow: 1,
-          zIndex: '100',
-          height: '100%'
-        }
+      }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+        "$top": "5vh"
+      }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, null, guidanceMessage)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
+        ref: ref
       }, /*#__PURE__*/React__default['default'].createElement(SignatureCanvas, {
         ref: signaturePad,
         canvasProps: {
           width: width,
           height: height
         }
-      })), /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          flexGrow: 0,
-          paddingTop: 12,
-          display: 'flex',
-          zIndex: 1000,
-          position: 'relative'
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("button", {
+      })), /*#__PURE__*/React__default['default'].createElement(SignatureButtonsContainer, null, /*#__PURE__*/React__default['default'].createElement("button", {
         onClick: function onClick(e) {
           var _a;
           e.preventDefault();
@@ -15790,7 +15840,6 @@
         }
       })));
     };
-    var templateObject_1;
 
     var SignatureKYCLoadingOverlay = function SignatureKYCLoadingOverlay(_a) {
       var headingText = _a.headingText,