idmission-web-sdk 0.0.19 → 0.0.21

package/dist/sdk2.cjs.development.js

@@ -191,7 +191,7 @@ function contentDispositionFromDataUrl(url) {
   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 = tslib.__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 = tslib.__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;
 });
@@ -223,13 +223,13 @@ var PageContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, children);
 });
 PageContainer.displayName = 'PageContainer';
-var templateObject_1$4;
+var templateObject_1$7;
 
-var OverlayContainer = styled__default['default'](PageContainer)(templateObject_1$3 || (templateObject_1$3 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
   var accessBlockedImageUrl = _a.accessBlockedImageUrl;
@@ -7650,16 +7650,8 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
   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() {
@@ -7677,6 +7669,8 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
     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,
@@ -7684,35 +7678,39 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
   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 tslib.__awaiter(void 0, void 0, void 0, function () {
+    setReady(false);
+    var ddmUrl = documentDetectionModelUrl || defaultDocumentDetectionModelUrl;
+    var fmUrl = focusModelUrl || defaultFocusModelUrl;
+    function loadModels() {
+      return tslib.__awaiter(this, void 0, void 0, function () {
         return tslib.__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:
@@ -7720,54 +7718,67 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
               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 tslib.__awaiter(void 0, void 0, void 0, function () {
-                  var newCtx;
-                  var _a;
-                  return tslib.__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 tslib.__awaiter(this, void 0, void 0, function () {
+        var ctx;
+        return tslib.__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 () {
@@ -7777,14 +7788,14 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
         return tslib.__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);
@@ -7794,7 +7805,7 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
         });
       });
     })();
-  }, [documentDetectionThreshold, focusThreshold, passportDetectionThreshold]);
+  }, [thresholds]);
   var onPredictionMade = React.useCallback(function (handler) {
     onPredictionHandler.current = handler;
   }, []);
@@ -7817,54 +7828,45 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
     });
   }, []);
   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;
@@ -7872,21 +7874,19 @@ function clearCanvas(canvas) {
   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 tslib.__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 tslib.__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 tslib.__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]);
           }));
@@ -7898,18 +7898,28 @@ function makePredictions(frame, canvas, documentDetectionThreshold, passportDete
           });
           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,
@@ -7917,11 +7927,17 @@ function makePredictions(frame, canvas, documentDetectionThreshold, passportDete
             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
           }];
@@ -7931,7 +7947,7 @@ function makePredictions(frame, canvas, documentDetectionThreshold, passportDete
 }
 function makeDocumentDetectionPredictions(image) {
   return tslib.__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 tslib.__generator(this, function (_e) {
       switch (_e.label) {
         case 0:
@@ -7973,20 +7989,22 @@ function makeDocumentDetectionPredictions(image) {
             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];
       }
@@ -8057,29 +8075,229 @@ function applyNonMaxSuppression(detectedObjects) {
     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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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,
@@ -8098,7 +8316,6 @@ var initialState$5 = {
   captureFailed: false
 };
 var reducer$5 = function reducer(state, action) {
-  var _a, _b, _c, _d;
   switch (action.type) {
     case 'configure':
       return tslib.__assign(tslib.__assign(tslib.__assign({}, state), action.payload), {
@@ -8109,17 +8326,23 @@ var reducer$5 = function reducer(state, action) {
         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;
@@ -8129,16 +8352,6 @@ var reducer$5 = function reducer(state, action) {
           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;
@@ -8147,11 +8360,11 @@ var reducer$5 = function reducer(state, action) {
       }
       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;
@@ -8170,7 +8383,7 @@ var reducer$5 = function reducer(state, action) {
         videoWidth: frameWidth,
         videoHeight: frameHeight,
         detectedObjects: detectedObjects,
-        bestDocument: bestDocumentOrPassport !== null && bestDocumentOrPassport !== void 0 ? bestDocumentOrPassport : null,
+        bestDocument: bestDocumentOrPassport,
         bestMrz: bestMrz,
         bestPdf417: bestPdf417,
         documentType: documentType,
@@ -8295,9 +8508,7 @@ var IdCapture = function IdCapture(_a) {
   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,
@@ -8312,19 +8523,21 @@ var IdCapture = function IdCapture(_a) {
       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 () {
@@ -8497,6 +8710,13 @@ var IdCapture = function IdCapture(_a) {
       });
     })();
   }, [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...");
   }
@@ -8524,64 +8744,17 @@ var IdCapture = function IdCapture(_a) {
     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;
@@ -9079,10 +9252,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
   return props.$isRearFacing ? '' : 'scaleX(-1)';
 });
-var templateObject_1$2;
+var templateObject_1$3;
 
 var CaptureState;
 (function (CaptureState) {
@@ -9749,11 +9922,6 @@ var reducer$3 = function reducer(state, action) {
           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;
         }
@@ -9891,6 +10059,13 @@ var SelfieCapture = function SelfieCapture(_a) {
   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...');
@@ -9921,100 +10096,18 @@ var SelfieCapture = function SelfieCapture(_a) {
       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 = {
@@ -11087,8 +11180,8 @@ function truncate(str, max_chars) {
   return truncated;
 }
 
-var Spinner = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__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 = tslib.__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,
@@ -11234,55 +11327,43 @@ function signatureDataToIdmissionFormat(signatureCanvas) {
   return signatureData;
 }
 
+var SignatureCanvasContainer = styled__default['default'].div(templateObject_1$1 || (templateObject_1$1 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = tslib.__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 = reactI18next.useTranslation().t;
-  var _d = useResizeObserver__default['default'](),
-    ref = _d.ref,
-    width = _d.width,
-    height = _d.height;
+  var _c = useResizeObserver__default['default'](),
+    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__default['default'], {
     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();
@@ -11298,7 +11379,7 @@ var SignatureCapture = function SignatureCapture(_a) {
       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) {
@@ -11342,7 +11423,6 @@ var useVideoRecorder = function useVideoRecorder(camera) {
   };
 };
 
-var SignatureCanvasContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__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,
@@ -11485,47 +11565,17 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   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__default['default'], {
     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();
@@ -11557,7 +11607,6 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     }
   })));
 };
-var templateObject_1;
 
 var SignatureKYCLoadingOverlay = function SignatureKYCLoadingOverlay(_a) {
   var headingText = _a.headingText,